Question

当鼠标悬停在上方时，我试图更改立方体表面的颜色：

这是我到目前为止想出的：

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: 
            }
       }
   }

问题是我不知道该使用哪种方法在开关盒内为这些面孔绘制不同的颜色

使用我从Georges使用的代码来看看这个jsfiddle：

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

仅查找onDocumentMouseMouve()函数。

我尝试了您的代码，但是没有用。

我将您的代码放在if (cube.material.color == 0xff0000)下的原因，是因为我仍然希望将鼠标悬停在立方体上时将其漆成灰色。

但是当它被选中时，颜色是红色，我想将鼠标悬停在那边来改变。

因此，当您在gui上更改y维度并创建一个多维数据集并被选中（因此颜色为红色）时，将鼠标悬停在其侧面时，颜色不会更改。

我对下一步该怎么做感到困惑，因为不清楚如何绘制立方体的侧面。

以下是此功能的代码：

 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);
            }
        }

    }

Answer 1

您在正常的位置上正常化了鼠标位置以传递到光线投射器。 This page on ThreeJSFundamentals的解决方案应该与您所追求的相似，但不对特定的脸部着色。我相信您需要将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（）并为相交的平面着色会更容易

更改立方体面的颜色

1 个答案: