Question

我的代码适用于拾取对象并将它们变成不同的颜色，但是在我的鼠标穿过立方体后，将它们恢复为原始颜色的技术是什么？这是我的代码。就目前而言，当我将鼠标悬停在立方体上时，它会变成红色。

(document).ready(function () {

window.addEventListener('mousemove', onMouseMove, false);
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();


//start a scene
var scene = new THREE.Scene();

//add a cube
var cube = new THREE.Mesh(new THREE.CubeGeometry(3, 3, 3), new THREE.MeshBasicMaterial({ color:0x454545 }));
cube.position.set(0, 0, 0);
scene.add(cube);

//get a renderer
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xffffff);
renderer.setSize(window.innerWidth, window.innerHeight);
$('#GameArea').append(renderer.domElement);

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(10, 10, 10);
camera.lookAt(0,0,0);

var controls = new THREE.TrackballControls(camera);

var light = new THREE.SpotLight(0xeeeeee);
light.position.set(-10, 5, 40);
scene.add(light);

render();
function onMouseMove(event) {

    // calculate mouse position in normalized device coordinates
    // (-1 to +1) for both components

    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    raycaster.setFromCamera(mouse, camera);

    // calculate objects intersecting the picking ray
    var intersects = raycaster.intersectObjects(scene.children);

    for (var i = 0; i < intersects.length; i++) {

        intersects[i].object.material.color.set(0xff0000);

    }

}

function render() {

    // update the picking ray with the camera and mouse position    
    raycaster.setFromCamera(mouse, camera);

    //calculate objects intersecting the picking ray
    var intersects = raycaster.intersectObjects(scene.children);

    controls.update();
    renderer.render(scene, camera);
    requestAnimationFrame(render);

 }

 });

正如开发者推荐的那样使用three.js raycaster？

0 个答案: