Question

只要你鼠标悬停在1个方框上，所有的方框都会变成红色。我添加了go布尔值，否则页面将加载，方框为红色。这是一个jsfiddle链接https://jsfiddle.net/mduffy/be8vm5vL/17/

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, document.getElementById("canvas").width / document.getElementById("canvas").height, 0.1, 1000     );
var x,y;
var image_spacing = 20;
var image_height = 90;
var image_width = 160;
var rows = 3;
var cols = 4;
var go = false;
var controls = new THREE.OrbitControls( camera );
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var renderer = new THREE.WebGLRenderer( { canvas: canvas } );
var geometry = new THREE.BoxGeometry( image_width, image_height, 0 );
var pictures = new THREE.Object3D();
pictures.position.x = -((cols / 2 * (image_width+image_spacing)) - 0.5*(image_spacing+image_width));
pictures.position.y = -((rows / 2 * (image_height+image_spacing)) - 0.5*(image_spacing+image_height));
var material =   new THREE.MeshBasicMaterial();

for(var i = 0;i < rows;i++){
  for(var e = 0;e < cols;e++){
    var picture = new THREE.Mesh( geometry, material );
    picture.position.set( (e*(image_spacing+image_width)), (i*(image_spacing+image_height)), 0 );
    //picture.overdraw = true;

    pictures.add( picture );

  }
}

scene.add( pictures );

camera.position.z = 400;

function render() {
  requestAnimationFrame( render );
  if(go ){
  raycaster.setFromCamera( mouse, camera );

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

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

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

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


document.getElementById("canvas").addEventListener("mousemove", function(event){
  var position =  getMousePos(document.getElementById("canvas"),event);
  x = position.x;
  y = position.y;
  mouse.x = ( x / 1000 ) * 2 - 1;
  mouse.y = - ( y / 600 ) * 2 + 1;


});
document.getElementById("canvas").addEventListener("mouseenter", function(event){
  go = true;
});
function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
}

render();

Answer 1

您的对象共享相同的资料。

var picture = new THREE.Mesh( geometry, material );

因此，当您更改一个对象的材质颜色时，您将更改所有对象的颜色。

相反，这样做：

var picture = new THREE.Mesh( geometry, material.clone() );

three.js .r.71

与所有物体/物体相交的光线投射都是一样的吗？

1 个答案: