一个简单的Three.js实例

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>canvas { width: 100%; height: 100% }</style>
    <!--https://github.com/mrdoob/three.js/-->
    <script src="js/three.js"></script>
</head>
<body>
    <script>
        function init() {
            //核心6步骤：
            //创建场景（scene）
            //添加网格模型（mesh）
            //添加灯光（light）
            //添加相机（camera）
            //创建渲染器（renderer）
            //渲染（render）

            //1、场景，注意大写
            var scene = new THREE.Scene();

            //几何模型（下面是立方体：长宽高）
            var geometry=new THREE.BoxGeometry(100,100,100);
            //兰伯特材质:红色
            var meterial=new THREE.MeshLambertMaterial({color:0xff0000});
         // var meterial=new THREE.MeshBasicMaterial({color:0xff0000});

            //2、网格模型
            var mesh=new THREE.Mesh(geometry,meterial);  //给立方体布上哑光材质
            //将创建好的网格模型添加到场景中
            scene.add(mesh);

            //3、添加灯光：白色的点光源
            var light=new THREE.PointLight(0xffffff);
            //设置光源的位置
            light.position.set(300,400,200);
            scene.add(light);

            //4、创建相机模型：透视相机(视角宽度,近平面宽高比,最近距离,最远距离)
            var camera=new THREE.PerspectiveCamera(40,800/600,1,1000);
            camera.position.set(150,150,200);   //设定相机的位置
            camera.lookAt(scene.position);  //设定相机看向哪里

            //5、创建webGL渲染器
            var renderer=new THREE.WebGLRenderer();
            renderer.setSize(800,600);   //设置canvas的长、宽
            //如果要布满窗口就如下
            // renderer.setSize(window.innerWidth, window.innerHeight);

            //注意是renderer.domElement不是renderer,domElement
            document.body.appendChild(renderer.domElement);

            //6、渲染
            renderer.render(scene,camera);
        }
        window.onload = init();
    </script>
</body>
</html>
阿迪王滑板鞋
发布了25 篇原创文章 · 获赞 16 · 访问量 4万+
私信关注
一个简单的Three.js实例

猜你喜欢
