Three.js基础

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Three.js基础探寻一

1.webGL

一种网络标准，定义了一些较底层的图形接口。

2.Three.js

一个3Djs库，webGL开源框架中比较优秀的一个。除了webGL以外，Three.js还提供了基于Canvas、SVG标签的渲染器。

这是一个开源项目。

3.环境

找一个喜欢的jsIDE。调试建议使用Chrome或者Firefox。

4.下载

传送门

5.使用

webGL的渲染需要canvas，Three.js可以生成，也可以自定义canvas：

在js中定义一个init函数，在HTML加载后执行：

function init(){// ...}

Three.js程序要包括三大组建：

场景（Scene）、相机（Camera）、渲染器（Renderer），以及你创建的物体。

6.渲染器（Renderer）

渲染器将和Canvas元素进行绑定，接着上面的：

var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById(‘mainCanvas’)});

如果想要Three.js生成Canvas元素，在HTML中就不需要定义canvas，在js中可以这样写：

var renderer = new THREE.WebGLRenderer();renderer.setSize(400,300);document.getElementsByTagName(‘body’)[0].appendChild(renderer.domElement);

第二行设置了Canvas的宽高。第三行将渲染器对应的Canvas元素添加到<body>中。

下面这句可以设置背景为黑色：

renderer.setClearColor(0x000000);

7.场景（Scene）

在Three.js中添加的物体都是添加到场景中的。在程序最开始的时候进行实例化，然后将物体添加到场景中即可。

var scene = new THREE.Scene();

8.照相机（Camera）

webGL和Three.js使用的坐标系是右手坐标系：

相机分正投影相机和透视投影相机。这里先定义一直透视投影的照相机，：

var camera = new THREE.PerspectiveCamera(45,4/3,1,1000);//四个参数分别对应：视角、近处的裁面的距离、远处的裁面的距离、实际窗口的纵横比（后面会详细讨论）camera.position.set(0,0,5);//设置相机位置scene.add(camera);//添加到场景中。

9.长方体

创建一个x,y,z方向长度分别为1、2、3的红色长方体：

var cube = new THREE.Mesh(new THREE.CubeGeometry(1,2,3),new THREE.MeshBasicMaterial({

color: 0xff0000}));scene.add(cube);

其中，THREE.Mesh表示网格模型；THREE.CubeGeometry表示立方体盒子；MeshBasicMaterial是一种材质：对光照无感，给几何体一种简单的颜色或显示线框。最后添加到场景中。

10.渲染

在定义了场景中的物体，设置好的照相机之后，渲染器就知道如何渲染出二维的结果了。调用渲染器的渲染函数，就能使其渲染一次了。

renderer.render(scene, camera);

11.示例

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>3.js测试一</title></head><body onload="init()"><canvas id="mainCanvas" width="400px" height="300px" ></canvas><script type="text/javascript" src="js/three.min.js"></script> <script type="text/javascript"> function init() { // renderer 渲染器 var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('mainCanvas')//绑定canvas }); renderer.setClearColor(0x000000); // black // scene 场景 var scene = new THREE.Scene();//实例化场景 // camera 照相机 var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);//透视投影相机参数设置 camera.position.set(0, 0, 5);//相机位置设置 scene.add(camera);//添加到场景 // a cube in the scene 创建的物体 var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),//创建网格，参数一：几何体（立方体） new THREE.MeshBasicMaterial({//参数二：材质（网格基础材质）
color: 0xff0000//设置颜色 }) ); scene.add(cube);//添加到场景 // render 渲染 renderer.render(scene, camera); } </script></body></html>

渲染的效果是：