three.js3D学习(1)

来源：互联网发布：网络打印机主机编辑：程序博客网时间：2024/06/05 11:44

记录在http://www.hewebgl.com的学习过程：

在引入three.js网站 https://github.com/mrdoob/three.js下载后开始基础的学习。

一篇不错的three.js详解http://www.cnblogs.com/shawn-xie/archive/2012/08/16/2642553.html

基础知识梳理

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>     <!--引入Three.js-->    <script src="../three.js/build/three.js"></script>    <style>        div#container{            border: none;            cursor: move;            width: 1400px;            height: 600px;            background-color: #EEEEEE;        }    </style></head><body><!--canvas容器--><div id="container"></div><script></script></body></html>

(1) 引入three.js

(2)body 标签中添加 id 为「canvas3d」的 div 元素。

(3)style 标签中指定「canvas3d」的CSS样式。

我们只需要定义好canvas的容器就可以，canvas是three.js动态生成的。

基本过程

1.设置three.js渲染器2.设置摄像机camera3.设置场景scene4.设置光源light5.设置物体object

1.设置three.js渲染器

(0) 声明全局变量（对象）；

(1) 获取画布「canvas-frame」的高宽；

(2) 生成渲染器对象（属性：抗锯齿效果为设置有效）；

(3) 指定渲染器的高宽（和画布框大小一致）；

(4) 追加【canvas】元素到【canvas3d】元素中；

(5) 设置渲染器的清除色(clearColor)。

//开启Three.js渲染器var renderer;//声明全局变量（对象）function initThree() {   width = document.getElementById('canvas3d').clientWidth;//获取画布「canvas3d」的宽   height = document.getElementById('canvas3d').clientHeight;//获取画布「canvas3d」的高   renderer=new THREE.WebGLRenderer({antialias:true});//生成渲染器对象（属性：抗锯齿效果为设置有效）   renderer.setSize(width, height );//指定渲染器的高宽（和画布框大小一致）   document.getElementById('canvas3d').appendChild(renderer.domElement);//追加 【canvas】 元素到 【canvas3d】 元素中。   renderer.setClearColor(0xFFFFFF, 1.0);//设置canvas背景色(clearColor)}

2.设置摄像机camera

(0) 声明全局的变量（对象）；(1) 设置透视投影的相机；(2) 设置相机的位置坐标；(3) 设置相机的上为「z」轴方向；(4) 设置视野的中心坐标。

//设置相机              var camera;              function initCamera() {                 camera = new THREE.PerspectiveCamera( 45, width / height , 1 , 5000 );//设置透视投影的相机,默认情况下相机的上方向为Y轴，右方向为X轴，沿着Z轴朝里（视野角：fov 纵横比：aspect 相机离视体积最近的距离：near 相机离视体积最远的距离：far）                camera.position.x = 0;//设置相机的位置坐标                camera.position.y = 50;//设置相机的位置坐标                camera.position.z = 100;//设置相机的位置坐标                camera.up.x = 0;//设置相机的上为「x」轴方向                camera.up.y = 1;//设置相机的上为「y」轴方向                camera.up.z = 0;//设置相机的上为「z」轴方向                camera.lookAt( {x:0, y:0, z:0 } );//设置视野的中心坐标              }

3.设置场景scene

　//设置场景              var scene;              function initScene() {                   scene = new THREE.Scene();              }

4.设置光源light

OpenGL（WebGL）的三维空间中，存在点光源和聚光灯两种类型。 而且，作为点光源的一种特例还存在平行光源(无线远光源)。另外，作为光源的参数还可以进行 [环境光] 等设置。 作为对应， Three.js中可以设置 [点光源(Point Light)] [聚光灯(Spot Light)] [平行光源(Direction Light)]，和 [环境光(Ambient Light)]。 和OpenGL一样、在一个场景中可以设置多个光源。 基本上，都是环境光和其他几种光源进行组合。 如果不设置环境光，那么光线照射不到的面会变得过于黑暗。 本文中首先按照下面的步骤设置平行光源，在这之后还会追加环境光。(0) 声明全局变量(对象)(1) 设置平行光源(2) 设置光源向量(3) 追加光源到场景

//设置光源              var light;              function initLight() {                 light = new THREE.DirectionalLight(0xff0000, 1.0, 0);//设置平行光源                light.position.set( 200, 200, 200 );//设置光源向量                scene.add(light);// 追加光源到场景              }

5.设置物体object

　//设置物体              var sphere;              function initObject(){                  sphere = new THREE.Mesh(                     new THREE.SphereGeometry(20,20),                //width,height,depth                     new THREE.MeshLambertMaterial({color: 0xff0000}) //材质设定                );                scene.add(sphere);                sphere.position.set(0,0,0);              }

最后，我们写一个主函数执行以上五步：

　//执行              function threeStart() {                initThree();                initCamera();                initScene();                   initLight();                initObject();                renderer.clear();                 renderer.render(scene, camera);              }

效果：

0 0