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

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

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 변종을 시도해 보았습니다.이 효과는 마우스가 메쉬 위에있을 때만 작동하지만 작동시키지 못하면 그냥 빨간색으로 유지됩니다. 누구든지 내 스크립트를 수정하는 방법을 제안 할 수 있습니까?

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

출처

2016-07-11 Martin Leman

왜 모든 행 사이에 공간을 배치해야합니까? 그리고 왜 탭을 사용합니까? –

그건 내가 습득 한 나쁜 습관이야, 미안해. 때로는 다른 파일에서 코드의 일부를 복사하여 붙여 넣고 내가 추가 한 비트를 식별 할 수있는 공간을 남겨 둡니다. –

...

확인 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; 
}

출처

2016-07-12 09:40:09 Wilt

위대한 솔루션, 그것은 아주 완벽하게 작동합니다. 사용 된 마우스 좌표의 올바른 조정에주의를 기울여야하며, 아마도 '이름'속성을 사용하여 사용자가 쳤던 일부 개체는 무시해야합니다. – Trantor

누구나 이것을 r85로 업데이트 할 수 있습니까? – Displee

@Displee r85에서이 코드를 사용해 보셨습니까? 나는 그것이 작동 할 것이라고 거의 확신한다. 필요하지 않다면 최소한의 변화 만있을 것이다. 시도해 보았 니? 그렇다면 어떤 문제에 빠지셨습니까? – Wilt

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

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

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

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

출처

2016-12-18 03:42:59

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

답변

관련 문제