学习threejs（一）

刚开始学，记录一下过程

threejs 版本： v4.5

兼容： Google Chrome 9+、Firefox 4+、Opera 15+、Safari 5.1+、Internet Explorer 11 和 Microsoft Edge

先根据官网创建一个完整的示例，如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>My first three.js app</title>
        <style>
            * { margin: 0; padding: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="three.js"></script>
        <script>
            var scene = new THREE.Scene();
            // 相机 正交相机（OrthographicCamera）、透视相机（PerspectiveCamera）、全景相机（CubeCamera）和3D相机（StereoCamera）。
            var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 600 );

            // 渲染器
            var renderer = new THREE.WebGLRenderer();

            renderer.setSize( window.innerWidth, window.innerHeight );

            document.body.appendChild( renderer.domElement );

            // 盒子模型（BoxGeometry），这是一个包含立方体所有顶点和填充面的对象。
            var geometry = new THREE.BoxGeometry( 1, 1, 1 );
            // 网孔基础材料（MeshBasicMaterial）。 所有材料都含有一个属性对象
            var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
            // 网孔(Mesh)。网孔是用来承载几何模型的一个对象，还可以把材料应用到它上面，然后添加到场景中完成旋转动画
            var cube = new THREE.Mesh( geometry, material );
            // 对象将被添加到原点处，即坐标点(0,0,0)
            scene.add( cube );
            // 相机和立方体发生空间重叠。为了避免这样，我们把相机（camera）的位置移出来一些。
            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>

效果：

image.png

需要注意的是：

默认情况下，当我们调用scene.add()的时候，物体将会被添加到坐标为(0,0,0)的位置。但这可能会使得摄像机的位置和立方体相互重叠（也就是摄像机位于立方体中）。为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可。即 camera.position.z = 5;

学习threejs（一）

推荐阅读更多精彩内容