Three.js - 当我将指针放在 THREE.Line 上时，我的程序就死了

Question

我有一个 Three.js 程序，每当我将指针放在立方体上时，它都会给我它的位置。这很好（这就是我需要的），但是当我将指针放在线上时，我的程序会停止。谁能告诉我为什么以及如何解决它？无论我的指针在哪里，我都需要我的程序继续运行。 当我将指针放在白线上时，出现以下错误：
Uncaught TypeError: Cannot read property 'getHex' of undefined。

代码：

var container, stats;
var scene, camera, renderer, raycaster;
var cube;
var clock = new THREE.Clock();
var mouse = new THREE.Vector2(), INTERSECTED;
var radius = 100, theta = 0;
var composer;

initScene();

//Let's add a cube
var geometry = new THREE.BoxGeometry( 20, 20, 20 );
cube = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({
    color : Math.random() * 0xffffff
}));
cube.position.set(0,20,50)
scene.add( cube );

//Let's add another cube
var geometry2 = new THREE.BoxGeometry( 20, 20, 20 );
var cube2 = new THREE.Mesh(geometry2, new THREE.MeshLambertMaterial({
    color : Math.random() * 0xffffff
}));
cube2.position.set(200,20,50)
scene.add( cube2 );

//Let's add a line
var material = new THREE.LineBasicMaterial({
    color: 0xffffff
});
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(0, 20, 50));
geometry.vertices.push(new THREE.Vector3(200, 20, 50));
var line = new THREE.Line(geometry, material);
scene.add(line);

animate();

function initScene() {
    container = document.createElement('div');
    document.body.appendChild(container);

    var fov = 70;
    var aspect = window.innerWidth / window.innerHeight;
    var near = 1;
    var far = 10000;
    var zpos = 300;
    // Initialize camera
    GlobalCamera(fov, aspect, near, far, zpos);

    scene = new THREE.Scene();

    // Set camera controls
    cameraControls2();

    // renderer controls
    rendererControls2();


}

function GlobalCamera(fov, aspect, near, far, zpos) {

    camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    camera.position.z = zpos;

}

function cameraControls2() {

    controls = new THREE.FlyControls(camera);
    controls.movementSpeed = 2500;
    controls.domElement = container;
    controls.rollSpeed = Math.PI / 6;
    controls.autoForward = false;
    controls.dragToLook = false

}

function rendererControls2() {
    renderer = new THREE.WebGLRenderer({
        antialias : true,
        alpha : true
    });
    renderer.setClearColor(0xf0f0f0);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.sortObjects = false;
    container.appendChild(renderer.domElement);

    renderer.gammaInput = true;
    renderer.gammaOutput = true;

}

function findIntersection() {

    raycaster.setFromCamera(mouse, camera);

    var intersects = raycaster.intersectObjects(scene.children);

    if (intersects.length > 0) {


        if (INTERSECTED != intersects[0].object) {

            if (INTERSECTED)
                INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);

            INTERSECTED = intersects[0].object;
            INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
            INTERSECTED.material.emissive.setHex(0xff0000);
            console.log(INTERSECTED.position);
        }

    } else {

        if (INTERSECTED)
            INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);                  

        INTERSECTED = null;

    }

}

function onDocumentMouseMove(event) {
    event.preventDefault();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}

function preAnimate(){
    raycaster = new THREE.Raycaster();
    // events
    document.addEventListener('mousemove', onDocumentMouseMove, false);
}

function animate() {
    preAnimate();
    requestAnimationFrame(animate);
    render();
}

function render() {
    var delta = clock.getDelta();
    findIntersection();
    controls.update(delta);
    renderer.render(scene, camera);
}

Answer 1

这是我第一次使用 Three.js，但我想我已经找到了你的问题。发生的情况是 THREE.LineBasicMaterial 没有像 THREE.MeshLambertMaterial 那样的发射属性。您要在 THREE.LineBasicMaterial 对象上操作的属性是 color 属性。

这是一个有效的 jsFiddle，我在其中添加了一些关于发射属性是否可用的检查： https://jsfiddle.net/thedole/4wkFu/162/ 不同之处在于在 findIntersection 方法中添加了提到的检查：

function findIntersection() {

    raycaster.setFromCamera(mouse, camera);

    var intersects = raycaster.intersectObjects(scene.children),
    material;

    if (intersects.length > 0) {


        if (INTERSECTED != intersects[0].object) {

            if (INTERSECTED){
                material = INTERSECTED.material;
                if(material.emissive){
                    material.emissive.setHex(INTERSECTED.currentHex);
                }
                else{
                    material.color.setHex(INTERSECTED.currentHex);
                }
            }   
            INTERSECTED = intersects[0].object;
            material = INTERSECTED.material;
            if(material.emissive){
                INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
                material.emissive.setHex(0xff0000);
            }
            else{
                INTERSECTED.currentHex = material.color.getHex();
                material.color.setHex(0xff0000);
            }

            console.log(INTERSECTED.position);
        }

    } else {

        if (INTERSECTED){
            material = INTERSECTED.material;

            if(material.emissive){
                material.emissive.setHex(INTERSECTED.currentHex);
            }
            else
            {
                material.color.setHex(INTERSECTED.currentHex);
            }
        }

        INTERSECTED = null;

    }

}