几何体
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