# three.js
为了真正能够three.js来进行显示,我们需要以下几个对象:场景、相机和渲染器,这样我们就能透过摄像机渲染出场景。
## 场景 Scene()
> 场景能够让你在什么地方、摆放什么东西,这是你放置物体、灯光和摄像机的地方。
相关常用属性:
1. autoUpdate : Boolean
默认值为true,若设置了这个值,则渲染器会检查每一帧是否需要更新场景及其中物体的矩阵。 当设为false时,则需要手动维护场景中的矩阵。
2. background : Object
默认值为null,可以设置为纯背景色,也可以设置为纹理(背景图)。
3. environment : Texture
默认为null,若该值不为null,则该纹理贴图将会被设为场景中所有物理材质的环境贴图。
4. fog : Fog
一个fog实例定义了影响场景中的每个物体的雾的类型。默认值为null。
## 摄像机
摄像机分为透明摄像机和正交摄像机,简单理解的话,对于同一个物体,透明摄像机近大远小,而正交摄像机则是远近大小相同。
### 透视摄像机 PerspectiveCamera()
> 这一投影模式被用来模拟人眼所看到的景象,它是3D场景的渲染中使用得最普遍的投影模式。
> 透明摄像机对象需携带4个参数
fov : 摄像机视锥体垂直视野角度
aspect : 摄像机视锥体长宽比,通常就是盒子的长宽比
near : 摄像机视锥体近端面,即当距离小于这个距离则不展示
far : 摄像机视锥体远端面,即当距离大于这个距离则不展示
## 渲染器(WebGLRenderer)
相关常用属性:
1. domElement : DOMElement
一个canvas,渲染器在其上绘制输出。渲染器的构造函数会自动创建(如果没有传入canvas参数);你需要做的仅仅是像下面这样将它加页面里去。该属性还有给当前dom设置大小的方法setSize(width, height)。
## 几何体(Geometry)
> three.js里面内置了多种几何体,目前先只了解最简单的立方体。
### 立方体(BoxGeometry)
> 立方体在这里只是一个形状,并不能真正算一个物体,他需要和材质进行结合才能生成一个物体。
> 生成立方体对象所需携带参数
width : X轴上面的宽度,默认值为1。
height : Y轴上面的高度,默认值为1。
depth : Z轴上面的深度,默认值为1。
## 材质(Meterial)
### 基础网格材质(MeshBasicMaterial)
> 这种材质不受光照的影响。
相关常用属性:
1. color: 材质的颜色(Color),默认值为白色 (0xffffff)。
2. envMap : Texture,环境贴图。默认值为null。
## 网格(Mesh)
> 表示基于以三角形为polygon mesh(多边形网格)的物体的类。
相关常用方法:
1. clone () : Mesh
返回这个Mesh对象及其子级的克隆。
## three.js-demo
现在,你应该可以看懂以下代码了吧~
```html
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src="http://www.yanhuangxueyuan/threejs/build/three.js"></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function animate() {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>
更多推荐
three.js新手入门
发布评论