0
我正在尝试使用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);
}
}
}
你拨弄犯规负荷，但为什么不使用'''THREE.DodecahedronGeometry'''？ http://jsfiddle.net/5dk9980o/1/ –
谢谢，这似乎很好！ –