1. 程式人生 > >three.js:使用createMultiMaterialObject建立的多材質物件無法使用光線跟蹤Raycaster選中

three.js:使用createMultiMaterialObject建立的多材質物件無法使用光線跟蹤Raycaster選中

建立多材質物件:

var loader = new THREE.DDSLoader();
var map = loader.load('../assets/textures/Mountains_argb_nomip.dds', function ( texture ) {
    texture.magFilter = THREE.LinearFilter;
    texture.minFilter = THREE.LinearFilter;
    texture.mapping = THREE.CubeReflectionMapping;
    material.needsUpdate 
= true; }); var material = new THREE.MeshLambertMaterial({envMap: map, transparent: true, opacity: 0.8}); var material1 = new THREE.MeshBasicMaterial({color: 0x2277ff, transparent: true, opacity: 0.3}); // var leftdown1 = new THREE.SceneUtils.createMultiMaterialObject(new THREE.BoxGeometry(6, 1, 9),[material,material1.clone()]); leftdown1.position.set(
-11, 3, 9); leftdown1.name = "movealbe-element-leftdown1"; group.add(leftdown1); this.objects.push(leftdown1);

光線跟蹤:

onDocumentMouseMove: function (e) {
    var event = e || window.event;
    event.preventDefault();

    var mouseX = (event.clientX / map3d.width) * 2 - 1;//標準裝置橫座標
    var
mouseY = -(event.clientY / map3d.height) * 2 + 1;//標準裝置縱座標 var vector = new THREE.Vector3(mouseX, mouseY, 0.5);//標準裝置座標 //標準裝置座標轉世界座標 var worldVector = vector.unproject(map3d.camera); //射線投射方向單位向量(worldVector座標減相機位置座標) var ray = worldVector.sub(map3d.camera.position).normalize(); //建立射線投射器物件 var raycaster = new THREE.Raycaster(map3d.camera.position, ray); //返回射線選中的物件 var intersects = raycaster.intersectObjects(map3d.objects,true); if (intersects.length > 0) { var obj = intersects[0].object; var target=null; if (obj.name.startsWith("movealbe-element")) { target=obj; }else{ if(obj.parent && obj.parent.name.startsWith("movealbe-element")){ target=obj.parent; } } if(target){ //如果聚焦的物件存在,並且相同 if (map3d.focusobj && target.uuid == map3d.focusobj.uuid) return; //更新最新一次聚焦的物件引用 map3d.focusobj = target; if(map3d.focusobj.children.length>1) map3d.focusobj.children[1].material.color = new THREE.Color("#00FF7F"); } } else { } },

材質還原:

map3d.scene.traverse(function (e) {
    if (e.name && e.name.startsWith("movealbe-element") && map3d.focusobj && map3d.focusobj.uuid != e.uuid) {
        if(e.children.length>1)
            e.children[1].material.color = new THREE.Color("#2277ff");
    }
});

說明:多材質物件,是建立了一個group,可以通過獲取子物件來獲取這個group