Изменение цвета грани куба - PullRequest
Новая
       6

Изменение цвета грани куба

0 голосов
/ 29 мая 2020

Я пытаюсь изменить цвет грани куба при наведении курсора мыши:

Вот что я придумал до сих пор: 

function onDocumentMouseMove(event)
  {
       event.preventDefault();

       // update the mouse variable
       mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
       mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

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

       if ( intersects.length > 0 )
       {
           var index = Math.floor( intersects[0].faceIndex / 2 );
           switch (index)
           {
                 case 0: 
                 case 1: 
                 case 2: 
                 case 3: 
                 case 4: 
                 case 5: 
            }
       }
   }

Проблема Я не знаю, какой метод использовать для окрашивания лиц в другой цвет внутри корпуса переключателя

Взгляните на этот jsfiddle с кодом, который я использовал от Жоржа:

https://jsfiddle.net/rand0mus3r/5qe4gyj3/4/

Ищите только функцию onDocumentMouseMouve().

Я пробовал ваш код, но он не работал.

Причина, по которой я поместил ваш код под if (cube.material.color == 0xff0000), потому что я все еще хотел, чтобы куб был окрашен в серый цвет при наведении курсора.

Но когда он был выбран, поэтому цвет красный, я хотел, чтобы при наведении указателя эта сторона изменилась .

Итак, когда вы изменяете измерение y на gui и создаете куб, и он ВЫБРАН (поэтому цвет красный), когда вы наводите курсор на его стороны, он не меняет цвет.

Я не знаю, что делать дальше, так как неясно, как раскрасить стороны куба.

Вот это код для этой функции: 

 function onDocumentMouseMove(event)
    {

      event.preventDefault();

      // update the mouse variable
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;


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


        if ( intersects.length > 0 && intersects[ 0 ].object === cube && isClicked === false)
        {
            cube.material.color.set( 0xF7F7F7 );    
        } 
        else if (isClicked === false)
        {
            cube.material.color.set( cube.userData.originalColor );
        }


        if (cube.material.color == 0xff0000)
        {
           if ( intersects.length > 0 )
            {
               // pick the first object. It's the closest one
      this.pickedObject = intersectedObjects[0].object;
      // save its color
      this.pickedObjectSavedColor = this.pickedObject.material.emissive.getHex();
      // set its emissive color to flashing red/yellow
      this.pickedObject.material.emissive.setHex((time * 8) % 2 > 1 ? 0xFFFF00 : 0xFF0000);
            }
        }

    }

1 Ответ

0 голосов
/ 29 мая 2020

Вы на правильном пути с нормализацией положения мыши для перехода в Raycaster. На этой странице на ThreeJSFundamentals есть решение, которое должно быть похоже на ваше, за исключением раскраски определенного c лица. Я считаю, что вам нужно настроить свой raycaster как 

var raycaster = new THREE.Raycaster();
// cast a ray from the camera's location to where the mouse click was registered
raycaster.setFromCamera(mouse, yourCameraName);

После того, как вы это получите, вы можете вызвать что-то похожее на следующее (взято из ссылки выше) 

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

 if (intersectedObjects.length) {
      // pick the first object. It's the closest one
      this.pickedObject = intersectedObjects[0].object;
      // save its color
      this.pickedObjectSavedColor = this.pickedObject.material.emissive.getHex();
      // set its emissive color to flashing red/yellow
      this.pickedObject.material.emissive.setHex((time * 8) % 2 > 1 ? 0xFFFF00 : 0xFF0000);
    }

Вам также может быть проще разбить куб на Object3D () плоскостей и раскрасить пересекаемую плоскость

...