我尝试使用ThreeJS创建十二面体并在每张脸上添加纹理。我也尝试使用Raycaster来检测我点击的面孔。
虽然代码适用于立方体，但是当我尝试十二面体时，纹理不会出现，并且来自raycaster的相互作用是空的。
您可以在jsfiddle link here中看到完整的示例。
var camera, scene, renderer;
var mesh, geometry, controls;
var raycaster, mouse, clock;
init();
animate();
function init() {
clock = new THREE.Clock();
raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2();
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1200 );
camera.position.set(60, 40, 100);
scene = new THREE.Scene();
camera.lookAt(scene.position);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var ambientLight = new THREE.AmbientLight( 0xffffff );
scene.add( ambientLight );
var lights = [];
lights[0] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[1] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[2] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[0].position.set( 0, 200, 0 );
lights[1].position.set( 100, 200, 100 );
lights[2].position.set( -100, -200, -100 );
scene.add( lights[0] );
scene.add( lights[1] );
scene.add( lights[2] );
//
controls = new THREE.TrackballControls(camera, renderer.domElement);
var imgUrl = 'http://n1.xtek.gr/ascsa/applications/maps-3d/textures/brick.jpg';
var texture = new THREE.TextureLoader().load( imgUrl );
geometry = createGeometry();
var shapeMaterials = [
new THREE.MeshLambertMaterial({color:0xffffff, map: texture, transparent: false }),
new THREE.MeshLambertMaterial({color:0xffffff, map: texture, transparent: false }),
new THREE.MeshLambertMaterial({color:0xffffff, map: texture, transparent: false }),
new THREE.MeshLambertMaterial({color:0xffffff, map: texture, transparent: false }),
new THREE.MeshLambertMaterial({color:0xffffff, map: texture, transparent: false }),
new THREE.MeshLambertMaterial({color:0xffffff, map: texture, transparent: false }),
new THREE.MeshLambertMaterial({color:0xffffff, map: texture, transparent: false }),
new THREE.MeshLambertMaterial({color:0xffffff, map: texture, transparent: false }),
new THREE.MeshLambertMaterial({color:0xffffff, map: texture, transparent: false }),
new THREE.MeshLambertMaterial({color:0xffffff, map: texture, transparent: false }),
new THREE.MeshLambertMaterial({color:0xffffff, map: texture, transparent: false }),
new THREE.MeshLambertMaterial({color:0xffffff, map: texture, transparent: false }),
new THREE.MeshLambertMaterial({color:0xffffff, map: texture, transparent: false }),
new THREE.MeshLambertMaterial({color:0xffffff, map: texture, transparent: false }),
new THREE.MeshLambertMaterial({color:0xffffff, map: texture, transparent: false }),
new THREE.MeshLambertMaterial({color:0xffffff, map: texture, transparent: false }),
new THREE.MeshLambertMaterial({color:0xffffff, map: texture, transparent: false }),
new THREE.MeshLambertMaterial({color:0xffffff, map: texture, transparent: false }),
new THREE.MeshLambertMaterial({color:0xffffff, map: texture, transparent: false }),
new THREE.MeshLambertMaterial({color:0xffffff, map: texture, transparent: false }),
new THREE.MeshLambertMaterial({color:0xffffff, map: texture, transparent: false }),
new THREE.MeshLambertMaterial({color:0xffffff, map: texture, transparent: false }),
new THREE.MeshLambertMaterial({color:0xffffff, map: texture, transparent: false }),
new THREE.MeshLambertMaterial({color:0xffffff, map: texture, transparent: false })
];
var shapeMaterial = new THREE.MeshFaceMaterial(shapeMaterials);
mesh = new THREE.Object3D()
mesh.add( new THREE.LineSegments(
geometry,
new THREE.LineBasicMaterial({
//color: 0xffffff,
transparent: true,
opacity: 0.5
})
));
mesh.add( new THREE.Mesh(
geometry,
shapeMaterial
));
scene.add( mesh );
window.addEventListener( 'resize', onWindowResize, false );
window.addEventListener( 'mousedown', onDocumentMouseDown, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.01;
var render = function(){
geometry.elementsNeedUpdate = true;
geometry.morphTargetsNeedUpdate = true;
geometry.colorsNeedUpdate = true;
for ( var i = 0; i < geometry.faces.length; i ++ ) {
//console.log("FACE: "+i);
var face = geometry.faces[ i ];
face.materials = [ new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) ];
}
mesh.updateMatrix();
controls.update();
renderer.render(scene, camera);
}
render();
}
function createGeometry () {
// geometry
var geometry = new THREE.Geometry();
// vertices
geometry.vertices = [
new THREE.Vector3( 2.04772293123743050, -4.09327412386437040, -5.74908146957292670),
new THREE.Vector3( 7.02732984841516030, 1.40331541320251810, -1.62706516545639390),
new THREE.Vector3( 4.22549114271519950, -1.62031854283173550, 5.78962800381778210),
new THREE.Vector3( 0.75411577446253997, 7.11690807989861880, -1.66761169970125600),
new THREE.Vector3(-0.75411577446252998, -7.11690807989862510, 1.66761169970125020),
new THREE.Vector3(-4.22549114271518980, 1.62031854283173260, -5.78962800381778920),
new THREE.Vector3( -2.0477229312374288, 4.09327412386436950, 5.74908146957292670),
new THREE.Vector3(-7.02732984841515230, -1.40331541320252740, 1.62706516545639970),
new THREE.Vector3( 6.27321407395262300, -5.71359266669610030, 0.04054653424485652),
new THREE.Vector3( 2.80183870569996340, 3.02363395603425690, -7.41669316927418000),
new THREE.Vector3( 4.97960691717773150, 5.49658953706689160, 4.12201630411653590),
new THREE.Vector3(-2.80183870569996340, -3.02363395603425690, 7.41669316927418000),
new THREE.Vector3(-4.97960691717773150, -5.49658953706689160, -4.12201630411653590),
new THREE.Vector3(-6.27321407395262480, 5.71359266669610210, -0.04054653424485653)
];
// faces - in counterclockwise winding order - important!
geometry.faces.push(
new THREE.Face3( 8, 0, 9 ), new THREE.Face3( 9, 1, 8 ),
new THREE.Face3( 8, 1, 10 ), new THREE.Face3( 10, 2, 8 ),
new THREE.Face3( 8, 2, 11 ), new THREE.Face3( 11, 4, 8 ),
new THREE.Face3( 8, 4, 12 ), new THREE.Face3( 12, 0, 8 ),
new THREE.Face3( 12, 5, 9 ), new THREE.Face3( 9, 0, 12 ),
new THREE.Face3( 13, 3, 9 ), new THREE.Face3( 9, 5, 13 ),
new THREE.Face3( 10, 1, 9 ), new THREE.Face3( 9, 3, 10 ),
new THREE.Face3( 10, 3, 13 ), new THREE.Face3( 13, 6, 10 ),
new THREE.Face3( 11, 2, 10 ), new THREE.Face3( 10, 6, 11 ),
new THREE.Face3( 11, 7, 12 ), new THREE.Face3( 12, 4, 11 ),
new THREE.Face3( 12, 7, 13 ), new THREE.Face3( 13, 5, 12 ),
new THREE.Face3( 13, 7, 11 ), new THREE.Face3( 11, 6, 13 )
);
// normals ( since they are not specified directly )
geometry.computeFaceNormals();
geometry.computeVertexNormals();
return geometry;
}
function onDocumentMouseDown( event ) {
mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( scene.children, true );
console.log( intersects );
for(i=0; i<intersects.length; i++) {
var dist = intersects[i].distance;
var faceIndex = intersects[i].faceIndex;
if(faceIndex != null) {
console.log("Target : "+faceIndex+" [dist="+dist+"]");
intersects[i].object.material.materials[faceIndex].color.setHex( 0xff4d4d );
}
}
}
答案 0 :(得分：0)
您可以使用官方THREE.DodecahedronGeometry：
var shapeMaterial = new THREE.MultiMaterial( materials );
var geometry = new THREE.DodecahedronGeometry( 10, 0 );
var dodecahedron = new THREE.Mesh( geometry, shapeMaterial );
scene.add( dodecahedron );
http://threejs.org/docs/#Reference/Extras.Geometries/DodecahedronGeometry