CODEWITHSUNDEEP
three.js
user3547018
user3547018

Reputation: 77

raycast intersecting with all objects/objects are all the same?

As soon as you mouse over 1 box, all the boxes turn red.I added the go Boolean because otherwise the page would load with the boxes being red. Here is a jsfiddle link 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();

Upvotes: 0

Views: 940

Answers (1)

WestLangley
WestLangley

Reputation: 104783

Your objects are sharing the same material.

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

Consequently, when you change the the material color for one object, you are changing the color of all the objects.

Instead, do this:

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

three.js .r.71

Upvotes: 1

Related Questions