세 개의 j에서 마우스 오버를 사용하여 메쉬의 색을 변경합니다.

Question

jsonloader 및 three.js를 사용하여 여러 메쉬를 표시하는 WebGL 스크립트를 작성했습니다. 이제 MouseOver 및 onClick 이벤트를 추가하려고합니다. 마우스로 가리킬 때이 중 첫 번째는 단순히 메시의 색상을 변화 :

function render() { 
    requestAnimationFrame(render);  
    mesh.rotation.z += 0.090;  
    raycaster.setFromCamera(mouse, camera);  
    var intersects = raycaster.intersectObjects(scene.children); 

    for (var i = 0; i < intersects.length; i++) {  
    intersects[i].object.material.color.set(0xff0000);  
    }  
    renderer.render(scene, camera); 

} 

기능을 렌더링 위의 나를 위로 마우스를 가져 가면 빨간색으로 어떤 메쉬의 색상을 변경할 수 있습니다. 여러개의 if/else 변종을 시도해 보았습니다.이 효과는 마우스가 메쉬 위에있을 때만 작동하지만 작동시키지 못하면 그냥 빨간색으로 유지됩니다. 누구든지 내 스크립트를 수정하는 방법을 제안 할 수 있습니까?

감사합니다. 당신은 다시 자동으로 수행되지 않습니다 마우스 아웃의 원래 색상에 색상을 설정해야

Answer 1

...

확인 this example 특히 업데이트 방법 http://stemkoski.github.io에가 :

Here a fiddle with a demo 최신으로 업데이트 three.js를 마스터 : 위 (나는 그것을 시도) 오래된되는 답의 코드로

// create a Ray with origin at the mouse position 
// and direction into the scene (camera direction) 
var vector = new THREE.Vector3(mouse.x, mouse.y, 1); 
projector.unprojectVector(vector, camera); 
var ray = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize()); 

// create an array containing all objects in the scene with which the ray intersects 
var intersects = ray.intersectObjects(scene.children); 

// INTERSECTED = the object in the scene currently closest to the camera 
//  and intersected by the Ray projected from the mouse position  

// if there is one (or more) intersections 
if (intersects.length > 0) 
{ 
    // if the closest object intersected is not the currently stored intersection object 
    if (intersects[ 0 ].object != INTERSECTED) 
    { 
     // restore previous intersection object (if it exists) to its original color 
     if (INTERSECTED) 
      INTERSECTED.material.color.setHex(INTERSECTED.currentHex); 
     // store reference to closest object as current intersection object 
     INTERSECTED = intersects[ 0 ].object; 
     // store color of closest object (for later restoration) 
     INTERSECTED.currentHex = INTERSECTED.material.color.getHex(); 
     // set a new color for closest object 
     INTERSECTED.material.color.setHex(0xffff00); 
    } 
} 
else // there are no intersections 
{ 
    // restore previous intersection object (if it exists) to its original color 
    if (INTERSECTED) 
     INTERSECTED.material.color.setHex(INTERSECTED.currentHex); 
    // remove previous intersection object reference 
    //  by setting current intersection object to "nothing" 
    INTERSECTED = null; 
} 

Answer 2

... 당신 threex.domevents library 좀 걸릴 수 있습니다. 그것은 나의 경우에 속임수를했다.

threex.domevents는 3D 장면 내부에서 DOM 이벤트를 제공하는 3 개의 확장자입니다. 보통 pratices에 가깝기 위해 항상 이벤트 이름은 DOM과 동일합니다. 의미는 이기도하므로 매우 쉽게 배울 수 있습니다. 현재 사용 가능한 이벤트는 click, dblclick, mouseup, mousedown, 마우스 오버 및 마우스 아웃입니다.

여기를 사용하는 예는 다음과 같습니다

http://bl.ocks.org/fabiovalse/2e8ae04bfce21af400e6