乐趣区

关于three.js:ThreeJS-模型点击事件添加

created () {
    // 申明 raycaster 和 mouse 变量
    var raycaster = new THREE.Raycaster();
    var mouse = new THREE.Vector2();},
mounted () {window.addEventListener( 'click', onMouseClick, false);
},
methods: {onMouseClick( event) {
        // 通过鼠标点击的地位计算出 raycaster 所须要的点的地位,以屏幕核心为原点,值的范畴为 - 1 到 1.
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;

        // 通过鼠标点的地位和以后相机的矩阵计算出 raycaster
        raycaster.setFromCamera(mouse, camera);

        // 获取 raycaster 直线和所有模型相交的数组汇合
        var intersects = raycaster.intersectObjects(scene.children);
        console.log(intersects);
        
        // 将所有的相交的模型的色彩设置为红色,如果只须要将第一个触发事件,那就数组的第一个模型扭转色彩即可
        for (var i = 0; i < intersects.length; i++) {intersects[ i].object.material.color.set(0xff0000);
        }
    }
}
退出移动版