1,three.js是什么?
Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。不过,这款引擎还处在比较不成熟的开发阶段,其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏)three.js的代码托管在github上面。
2,三大组件:
场景 scene ; 相机 camera ; 渲染器 renderer ;有了这三样东西才能将物体渲染到网页中取;
创建这三要素的代码如下:
var scene = new THREE.Scene(); // 场景
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);// 透视相机
var renderer = new THREE.WebGLRenderer(); // 渲染器
renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器的大小为窗口的内宽度,也就是内容区的宽度
document.body.appendChild(renderer.domElement);
3,场景介绍:在 Three.js中场景就只有一个,用 tHREE来表示,构建一个常见只需啊哟new一个对象就可以了,代码如下:
var scene = new THREE.Scene() ; 场景是所有物体的容器,想要显示一个物体,需要将物体放入场景中;
4,相机介绍:相机决定了场景中的哪个角度的物体会显示出来,场景只有一个,而相机却有很多个,three.js中的相机有多种,这里介绍一种透视相机,(参数的含义后面文章介绍)(Perspective : 透视的)
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
5,渲染器介绍:渲染器决定了渲染的结果应该画在页面的什么元素上;并且以怎样的方式来绘制,这里使用了 WebGLRenderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
渲染器renderer的domElement元素,表示渲染器中的画布,所有的渲染都是画在domElement上的,所以这里的appendChild表示将这个画布domElement挂载body下面;这样渲染的结果就能够在页面中显示了;
6,添加物体到场景中:
var geometry = new THREE.CubeGeometry(1,1,1); // 绘制一个几何体(长宽深各为1)
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});// 设置材质
var cube = new THREE.Mesh(geometry, material); // Mesh是一个构造器,将几何体和材质结合
scene.add(cube); // 场景中添加构造后的几何体
( cube 立方体; Geometry 几何结构 ,Mesh:网丝,Material:材料)
CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides) ;这是全部参数;上面只用了前三个参数;宽度,高度;深度;
MeshBasicMaterial是一种非常简单的材质
7,渲染:
renderer.render(scene, camera);
渲染函数的原型如下:
render( scene, camera, renderTarget, forceClear )
各个参数的意义是:
scene:前面定义的场景
camera:前面定义的相机
renderTarget:渲染的目标,默认是渲染到前面定义的render变量中
forceClear:每次绘制之前都将画布的内容给清除,即使自动清除标志autoClear为false,也会清除。
8, 渲染循环:实时渲染和离线渲染;
循环渲染:
function render() {
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
requestAnimationFrame(render);
// requestAnimationFrame,这个函数就是让浏览器去执行一次参数中的函数
}