three.js 001

　　　three.js的三大要素，Scene,Camera,render；

　　　1. 构建场景

　　　　

 scene = new THREE.Scene();

　　2.创建相机

　　

 var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)

　　3.渲染

　　

var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild(renderer.domElement);

　　4.创建模型

　　　　4.1 几何模型

var geometry = new THREE.CubeGeometry(1,1,1);

　　　　4.2 材质

var material = new THREE.MeshBasicMaterial({color: 0x00ff00});

　　　　4.3 添加到场景

var cube = new THREE.Mesh(geometry,material);
        scene.add(cube);

　　5 循环渲染

function render() {
            requestAnimationFrame(render);
            cube.rotation.x +=0.1;
            cube.rotation.y +=0.1;
            renderer.render(scene,camera);
        }

　　6.执行函数 render();

附上源码：

<!DOCTYPE html>
<html>
<head>
    <title>three.js初级1</title>
    <style>
        canvas{width: 100%;height: 100%}
    </style>
    <script src="three.js"></script>
</head>
<body>
    <script type="text/javascript">
        var scene = new THREE.Scene();//构建场景

        var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);//相机

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild(renderer.domElement);


        var geometry = new THREE.CubeGeometry(1,1,1);
        var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
        var cube = new THREE.Mesh(geometry,material);
        scene.add(cube);
        camera.position.z = 5;
        function render() {
            requestAnimationFrame(render);
            cube.rotation.x +=0.1;
            cube.rotation.y +=0.1;
            renderer.render(scene,camera);
        }
        render();
    </script>
</body>
</html>

　　

posted on 2017-08-30 16:09  奋斗的小小牛  阅读(178)  评论(0)  编辑  收藏  举报

导航