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

2019年8月31日 163次阅读 来源: sushi

入门

这部分内容的目的是简朴地引见three.js，我们起首讲如何用three.js来完成一个扭转的立方体。详细的实例将会给出，以防你卡住或许须要协助。

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

在运用three.js之前，起首须要在你的html文件中将它包括进来，如下面代码段所示：

<!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>标签中我们能够誊写本身的代码。

运用three.js举行三维物体衬着的三要素

想要用three.js来展示任何东西，须要三个前提：场景（scene）、照相机（camera）和衬着器（renderer），具有这三种前提后方可将一个三维物体来衬着在浏览器中。接下来我们将详细引见这三个前提的详细寄义和实例对象建立要领。

场景

定义：直观地明白，场景就是安排出的一个场地，就好对比相馆在照相前先要挑选一个场地，然后再架设照相机，打光芒以及让模特站进去才举行拍摄。场景许可你设置什么以及哪些处所须要被three.js所衬着。它是你安排对象、光芒以及照相机的处所。
建立实例对象：three.js中给出多种范例的场景组织区,经常使用的就是Scene()组织器，建立一个场景对象实例的代码是：
var scene = new THREE.Scene();
关于更多的场景学问的，我们将会在以后的文章中举行引见。

照相机

定义：直观地讲，照相机就像是举行拍照或许录相时运用的照相机。照相机的功用类似于视察物体的一个眼睛，物体须要经由过程相机来举行显现，它担任将三维的物体投影到二维的屏幕上。
建立实例对象：依据投影体式格局的差别，three.js中给出了两种差别范例的照相机，分别为正交投影相机和透视投影相机，建立照相机实例对象的代码分别为：

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

因为这两种相机的投影体式格局差别，所以两种照相机对象的参数意义也各不相同。

正交投影照相机（OrthographicCamera）

正交投影照相机中投影线是垂直于投影面举行投影，因而物体在投影以后的比例不回发作转变，如下图所示

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

正交投影照相机的组织函数为OrthographicCamera(left, right, top, bottom, near, far)包括了六个参数，left就是全部投影线地区的左正面，right就是投影线地区的右正面，top就是投影线地区的上正面，而bottom就是投影线地区的下正面。 near是到间隔相机较近的那一面的间隔，far是离间隔相机较远的那一面的间隔，这六个投影面围成的地区就是相机投影的可见地区。在三维空间中，只要这个地区中的物体才被照相机所观测到。

透视投影照相机（PerspectiveCamera）

透视投影照相机中投影是线是以照相机为会聚点发散的，投影线和投影面不垂直，物体投影以后的比例会发作变化，我们会视察到物体的透视结果，如下图所示。

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

透视投影照相机的组织函数是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 照相机

    原文作者：sushi
    原文地址: https://segmentfault.com/a/1190000008495699
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞