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

猜你喜欢

转载自www.cnblogs.com/zhongxinWang/p/10251267.html
今日推荐