第一個Three.js程序——動手寫一個簡單的場景

本文轉載自查看原文 2016-08-22 22:59 1568 WebGL/ Three.js

三維場景基本要素：

步驟：

代碼：

源碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/three.js"></script>
    <style>
    html,body{background: #000000;}
    </style>
</head>
<body>
    <script type="text/javascript">
        var scene = new THREE.Scene();

        var geometry = new THREE.CubeGeometry(100,100,100);
        var material = new THREE.MeshLambertMaterial({color:0xff0000});
        var mesh = new THREE.Mesh(geometry,material);
        scene.add(mesh);

        var light = new THREE.PointLight(0xffffff);
        light.position.set(300,400,200);
        scene.add(light);

        var camera = new THREE.PerspectiveCamera(40 , 800/600, 1, 1000);
        camera.position.set(200,200,200);
        camera.lookAt(scene.position);

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(800,600);
        document.body.appendChild(renderer.domElement);

        renderer.render(scene,camera);
    </script>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 自己動手寫的第一個前端分頁 -Three.js開發指南---用three.js創建你的第一個三維場景（第一章） three.js入門第一個案例自己動手寫客戶端UI庫——創建第一個控件自己動手寫一個簡單的MVC框架（第一版） Three-js 創建第一個3D場景 8天掌握EF的Code First開發系列之動手寫第一個Code First應用動手寫一個簡單版的谷歌TPU ROS學習筆記(一)：自己動手寫一個ROS程序第一個手寫Win32窗口程序