ThreeJs的学习

几何体

Geometry

BufferGeometry

BoxGeometry

ShapeBufferGeometry（平面）-->和THREE.Shape一起使用，参考webgl_geometry_shapes.html的地面

ExtrudeBufferGeometry（几何体） --> 和THREE.Shape一起使用，参考例子webgl_geometry_shapes.html

SphereBufferGeometry（球体）--> 参考webgl_lights_hemisphere.html的天空

PlaneGeometry / PlaneBufferGeometry（平面）-->参考webgl_lights_hemisphere.html的地面

灯光

SpotLight：光源是聚光灯光源，类似手电筒，会形成一种锥形效果的光，可以产生阴影，比较常用。

 

万能合并：

var subObjects = []
var normalMaterial = new  THREE.MeshLambertMaterial( { color: Math.random() * 0x00ffff } );
					
var boxGem = new THREE.BoxGeometry(6, 6, 6);
var boxMesh = new THREE.Mesh(boxGem, normalMaterial);
boxMesh.position.set(0, 10, 0);
subObjects.push(boxMesh)
				
var boxGem2 = new THREE.BoxGeometry(6, 6, 6);
var boxMesh2 = new THREE.Mesh(boxGem2, normalMaterial);
boxMesh2.position.set(0, 20, 0);
subObjects.push(boxMesh2)
				
var geometryMesh = new THREE.Geometry();
for (var i = 0; i < subObjects.length; i++) {
	var obj = subObjects[i]
	obj.updateMatrix()
    // 把geometry转换成BufferGeometry
	obj.geometry = new THREE.Geometry().fromBufferGeometry(obj.geometry)
	THREE.GeometryUtils.merge(geometryMesh,obj);
}
var mesh = new THREE.Mesh(geometryMesh, new THREE.MeshBasicMaterial({ color: Math.random() * 0x00ffff }))
objects.push(mesh)
scene.add( mesh );

问题：合并后的模型，怎么给它贴图? 

材质的复杂用法

/*
 *webgl_lights_hemisphere.html
 */
<script type="x-shader/x-vertex" id="vertexShader">

	varying vec3 vWorldPosition;

	void main() {

		vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
		vWorldPosition = worldPosition.xyz;

		gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

	}

</script>

<script type="x-shader/x-fragment" id="fragmentShader">

	uniform vec3 topColor;
	uniform vec3 bottomColor;
	uniform float offset;
	uniform float exponent;
	varying vec3 vWorldPosition;

	void main() {

		float h = normalize( vWorldPosition + offset ).z;
		gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max( h , 0.0), exponent ), 0.0 ) ), 1.0 );

	}

</script>
<script>
// SKYDOME
	var vertexShader = document.getElementById( 'vertexShader' ).textContent;
	var fragmentShader = document.getElementById( 'fragmentShader' ).textContent;
	var uniforms = {
		"topColor": { value: new THREE.Color( 0x0077ff ) },
		"bottomColor": { value: new THREE.Color( 0xffffff ) },
		"offset": { value: 33 },
		"exponent": { value: 0.6 }
	};
	uniforms[ "topColor" ].value.copy( hemiLight.color );

	scene.fog.color.copy( uniforms[ "bottomColor" ].value );

	var skyGeo = new THREE.SphereBufferGeometry( 4000, 32, 15 );
	var skyMat = new THREE.ShaderMaterial( {
		uniforms: uniforms,
		vertexShader: vertexShader,
		fragmentShader: fragmentShader,
		side: THREE.BackSide
	} );

	var sky = new THREE.Mesh( skyGeo, skyMat );
	scene.add( sky );
</script>

 js面向对象写法中使用requestAnimationFrame报错:

Uncaught TypeError: Failed to execute 'requestAnimationFrame' on 'Window': The callback provided as parameter 1 is not a function.

requestAnimationFrame( this.animate );
改成
requestAnimationFrame( this.animate.bind(this) );
具体原因可以深入了解bind