three.js笔记——（1）入门

时间 2019-12-05

原文原文链接

入门

这部份内容的目标是简单地介绍three.js，咱们首先讲如何用three.js来实现一个旋转的立方体。具体的实例将会给出，以防你卡住或者须要帮助。html

在html文件中引入three.js文件

在使用three.js以前，首先须要在你的html文件中将它包含进来，以下面代码段所示：git

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>My first three.js app</title>
    </head>
    <body>
        <script src="three.js"></script>
        <script>
            // Our Javascript will go here.
        </script>
    </body>
</html>

而后在空的<script>标签中咱们能够书写本身的代码。github

使用three.js进行三维物体渲染的三要素

想要用three.js来展现任何东西，须要三个条件：场景（scene）、照相机（camera）和渲染器（renderer），具有这三种条件后方可将一个三维物体来渲染在浏览器中。接下来咱们将具体介绍这三个条件的具体含义和实例对象建立方法。canvas

场景

定义：直观地理解，场景就是布置出的一个场地，就比如照相馆在拍照前先要选择一个场地，而后再架设照相机，打光线以及让模特站进去才能进行拍摄。场景容许你设置什么以及哪些地方须要被three.js所渲染。它是你放置对象、光线以及照相机的地方。
建立实例对象：three.js中给出多种类型的场景构造区,经常使用的就是Scene()构造器，建立一个场景对象实例的代码是：
var scene = new THREE.Scene();
关于更多的场景知识的，咱们将会在以后的文章中进行介绍。浏览器

照相机

定义：直观地讲，照相机就像是进行摄影或者录像时使用的照相机。照相机的功能相似于观察物体的一个眼睛，物体须要经过相机来进行呈现，它负责将三维的物体投影到二维的屏幕上。
建立实例对象：根据投影方式的不一样，three.js中给出了两种不一样类型的照相机，分别为正交投影相机和透视投影相机，建立照相机实例对象的代码分别为：app

正交投影相机：var camera = new THREE.OrthographicCamera();
透视投影相机：var camera = new THREE.PerspectiveCamera();

因为这两种相机的投影方式不一样，因此两种照相机对象的参数意义也各不相同。less

正交投影照相机（OrthographicCamera）

正交投影照相机中投影线是垂直于投影面进行投影，所以物体在投影以后的比例不回发生改变，以下图所示函数

正交投影照相机的构造函数为OrthographicCamera(left, right, top, bottom, near, far)包含了六个参数，left就是整个投影线区域的左侧面，right就是投影线区域的右侧面，top就是投影线区域的上侧面，而bottom就是投影线区域的下侧面。 near是到距离相机较近的那一面的距离，far是离距离相机较远的那一面的距离，这六个投影面围成的区域就是相机投影的可见区域。在三维空间中，只有这个区域中的物体才能被照相机所观测到。spa

透视投影照相机（PerspectiveCamera）

透视投影照相机中投影是线是以照相机为汇聚点发散的，投影线和投影面不垂直，物体投影以后的比例会发生变化，咱们会观察到物体的透视效果，以下图所示。.net

透视投影照相机的构造函数是PerspectiveCamera(fov, aspect, near, far) ，其中fov是可视角度；aspect为width/height，一般是容器（canvas）的宽高比；near是近断距离，far是远端距离。只有在距离照相机大于near的距离小于far的距离以内才能够被照相机观察到。

关于更多照相机的知识咱们会在以后的文章中进行介绍。

渲染器

定义：渲染器的功能是将咱们建立的场景和照相机所观察到的三维物体在二维平面上的投影进行渲染展示到浏览器中。
建立：var renderer = new THREE.WebGLRenderer();
渲染：renderer.render(scene, camera) 在进行渲染的时候须要将以前建立的场景和照相机都传入渲染函数中。

关于更多渲染器的知识咱们将会在以后的文章中进行介绍。

栗子

有了场景、照相机和渲染器三个要素以后，咱们就能够在浏览器中展示出复杂的三维物体了，首先来看一个简单的栗子～

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>My first three.js app</title>
    </head>
    <body>
        //建立一个canvas标签用来做为展示三维图形的容器
        <canvas id="mainCanvas" width="400" height="400"></canvas>
        
        //引入three.js文件
        <script src="three.js"></script>
        <script>
            // Our Javascript will go here.
            function init(){
                //建立scene
                var scene = new THREE.Scene();
                
                //建立camera
                var camera = new THREE.PerspectiveCamera(45, 1/1, 1, 1000);
                camera.position.set(0,0,5);
                scene.add(camera);
                
                //建立renderer
                var renderer = new THREE.WebGLRenderer({
                    canvas: document.getElementById('mainCanvas')
                });
                renderer.setClearColor(0x000000);//设置背景颜色
                
                //建立一个几何体
                var geometry = new THREE.BoxGeometry( 1, 1, 1 );
                var material = new THREE.MeshBasicMaterial( { color: 0xFFFF00 } );
                var cube = new THREE.Mesh( geometry, material );
                scene.add( cube );   //将建立的几何体加入场景中                                
                
                var animate = function(){
                    requestAnimationFrame(animate);  //以浏览器刷新的速度调用animate函数
                    cube.rotation.z += 0.01;  //绕z轴旋转
                    renderer.render(scene, camera);  //将场景scene和camera进行渲染
                };
                animate();
            };
            init();
        </script>
    </body>
</html>

快打开浏览器看看，是否是看到那个旋转的正方体了～
项目github地址：旋转的正方体

参考文献：
1.creating a scene
2.three.js 照相机