Three.js 总结一

三要素：scene（场景）、camera（相机）、renderer（渲染器）

scene变量是一个容器，用来保存并跟踪所有我们想渲染的物体。

camera变量定义了我们能够在渲染好的scene里看到什么。

renderer对象负责计算制定相机角度下，浏览器中scene的样子。

 

三维对象：Plane（平面）、Cube（方块）、Sphere（球体）、Camera（相机）、Axes（轴） 

scene

scene.add()  scene.remove()  在场景中添加移除物体

scene.children()   获取场景中所有子对象的列表

scene.getChildByName()    利用name属性，获取场景中某个特定的物体

雾化（两种方式）

Fog(hex,near,far)    FogExp2(hex,density)

scene.fog = new THREE.Fog(0xffffff,0.015,100)  
scene.fog = new THREE.FogExp2(0xffffff,0.015)

Fog:  properties:name  color  near(1)  far(1000)  methods: .clone()  .toJSON() 

FogExp2: properties:name color density(0.00025)  methods: .clone()  .toJSON() 

renderer  

var renderer = new THREE.WebGLRenderer()
renderer.setClearColorHex(0xEEEEEE)
renderer.setSize(window.innerWidth,window.innerHeight)
renderer.shadowMapEnabled = true

setClearColor()    　　设置renderer背景色　　　　　　

setSize()　　　　　　  设置scene渲染成多大尺寸

shadowMapEnabled　 设置是否有阴影   

 

axes  坐标轴

var axes = new THREE.AxisHelper(20)
scene.add(axes)

 

创建平面

定义面板尺寸，宽60高20。创建材质，颜色。把这两个对象合并到名为plane的Mesh对象中。

添加到场景前 首先放置到合适的位置。 先将它绕着x轴旋转90度，然后position定义它在场景中的位置。

var planeGeometry = new THREE.PlaneGeometry(60,20)
var planeMaterial = new THREE.MeshBasicMaterial({color:0xcccccc})
var plane = new THREE.Mesh(planeGeometry,planeMaterial)
plane.rotation.x = -0.5*Math.PI
plane.position.x = 15
plane.position.y = 0
plane.position.z = 0
scene.add(plane)

 

创建光源

var spotLight = new THREE.SpotLight(0xffffff)
spotLight.position.set(-40,60,-10)
scene.add(spotLight)

不同材质对光源的反应不同，基础材质（MeshBasicMaterial）不会对场景中的光源产生反应，只会以制定的颜色渲染物体。

 MeshLambertMaterial,MeshphongMaterial对光源有反应。

 

创建阴影

1、renderer.shadowMapEnabled = true

2、哪个物体接受阴影 哪个物体投射阴影  plane.receiveShadow = true cube.castShadow = true

3、定义光源 不是所有的光源都能产生阴影 spotLight.castShadow = true

 

引入requestAnimationFrame()方法

通过它你可以指定一个函数，按照浏览器定义的时间间隔调用。

function renderScene(){
      requestAnimationFrame(renderScene)
      renderer.render(scene,camera)        
}

递归调用，让动画持续运行。在整个场景创建完毕后，调用一次renderScene()函数来启动动画。

document.getElementById("WebGL-output").appendChild(renderer.domElement)
renderScene()

辅助库：检测动画运行的帧频。当我们显示动画时，该库可以在一个小图片里显示每秒显示的帧数

<script src="../libs/stats.js"></script>
<div id="Stats-output"></div>
function initStats(){
　　var stats = new Stats()
　　stats.setNode(0)
　　stats.domElement.style.position = 'absolute'
　　stats.domElement.style.left = '0px'
　　stats.domElement.style.top = '0px'      
   document.getElementById("Statsoutput").appendChild(stats.domElement)
　　return stats
}

$(function(){
　　var stats = initStats()
})