纹理THREE.js中的球体

时间:2013-12-06 09:22:29

标签: javascript three.js webgl

是否可以逐个纹理球体?例如,我们可以在立方体的6个边上使用6个纹理,这使我们可以逐个面地纹理立方体。是否可以在球体中做同样的事情?我不想在另一个纹理上重叠一个纹理,但在球体的不同部分使用不同的纹理。例如,具有纹理1的球体的前1/4,具有纹理2的球体的第二1/4 ......等等。我们可以使用THREE.js或任何其他库实现这一目标吗?

提前致谢。

1 个答案:

答案 0 :(得分:4)

SphereGeometry构造函数具有允许您构造球体扇区的参数:

THREE.SphereGeometry( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength )

实现目标的最简单方法是使用以下模式:

var parent = new THREE.Object3D();
scene.add( parent );

var geometry = new THREE.SphereGeometry( 5, 24, 16, 0 * Math.PI/2, Math.PI/2 );
var material = new THREE.MeshLambertMaterial( { map: texture0 } );
mesh = new THREE.Mesh( geometry, material );
parent.add( mesh );

var geometry = new THREE.SphereGeometry( 5, 24, 16, 1 * Math.PI/2, Math.PI/2 );
var material = new THREE.MeshLambertMaterial( { map: texture1 } );
mesh = new THREE.Mesh( geometry, material );
parent.add( mesh );

var geometry = new THREE.SphereGeometry( 5, 24, 16, 2 * Math.PI/2, Math.PI/2 );
var material = new THREE.MeshLambertMaterial( { map: texture2 } );
mesh = new THREE.Mesh( geometry, material );
parent.add( mesh );

var geometry = new THREE.SphereGeometry( 5, 24, 16, 3 * Math.PI/2, Math.PI/2 );
var material = new THREE.MeshLambertMaterial( { map: texture3 } );
mesh = new THREE.Mesh( geometry, material );
parent.add( mesh );

three.js r.63