Raycaster issue

Questions
1

Im having problems with raycaster

can someone send me a sample code on raycaster aside the one on three.js

2

That would be great, if you share some code of how you create and use THREE.Raycaster() and describe the problem. What revision of Three.js do you use?

1 Like
3

the latest one but i dont know which version

4

Stage.prototype.onDocumentMouseDown=function(){
this.scene=new THREE.Scene();
this.raycaster=new THREE.Raycaster();
this.mouse = new THREE.Vector2();
this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
this.camera.position.set(0, 0, 70);
this.camera.lookAt(this.scene.position);

// console.log(this.camera);	

function onMouseDown( event ) {
	event.preventDefault();	
	// calculate mouse position in normalized device coordinates
	// (-1 to +1) for both components

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

	// console.log(mouse.x);
	
	}

console.log(this.raycaster,this.mouse,this.camera);
	function render(){
	this.scene=new THREE.Scene();
	this.raycaster=new THREE.Raycaster();
	this.mouse = new THREE.Vector2();
	this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
	this.camera.position.set(0, 0, 70);
	this.camera.lookAt(this.scene.position);	
	
	// update the picking ray with the camera and mouse position
	this.raycaster.setFromCamera( this.mouse,this.camera );

	

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

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

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

	}
	

}

// window.requestAnimationFrame(render);
// //console.log(event);

};

5

Do you have any error messages in your console log?
And you still didn’t describe the problem.

6

the issue is at setFromCamera

it says it is undefined

7

i wish you could look into my project for me

8

im totally out of ideas

9

Maybe my little example will help?

View the source code. Since it was only in German up to now, I quickly translated it into English.

Both versions are there: http://threejs.hofk.de/

English version: http://threejs.hofk.de/raycaster/raycaster.html
raycasterDragDrop

The important functions

function onDocumentMouseDown(event) {
   
     mouseX = (event.clientX / window.innerWidth) * 2 - 1;
     mouseY = -(event.clientY / window.innerHeight) * 2 + 1;

    var vector = new THREE.Vector3(mouseX, mouseY, 1);
	
    vector.unproject(camera);    // .unproject:  Ray from camera from 2D screen (mouse coordinates) into 3D object space. 

    raycaster.set(camera.position, vector.sub(camera.position ).normalize() );

    var intersects = raycaster.intersectObjects(objects);

    if (intersects.length > 0) {        //  cutting objects available

       controls.enabled = false;

      // Selection - first cutting object
       selection = intersects[0].object;

      // Determining the Offset
      var intersects = raycaster.intersectObject(plane);
	  
      offset.copy(intersects[0].point).sub(plane.position);
	  
    }
	
}
  
function onDocumentMouseMove(event) {

    event.preventDefault();

    var mouseX = (event.clientX / window.innerWidth) * 2 - 1;
    var mouseY = -(event.clientY / window.innerHeight) * 2 + 1;

    var vector = new THREE.Vector3(mouseX, mouseY, 1);
	
    vector.unproject(camera);   // .unproject: Ray from camera from 2D screen (mouse coordinates) into 3D object space. 

    raycaster.set(camera.position, vector.sub(camera.position ).normalize() );	//Raycaster position

    if (selection) {
	
      // Position section with auxiliary plane
      var intersects = raycaster.intersectObject(plane);
	  
      //  Object displacement (each position according to intersection point with auxiliary plane)
       selection.position.copy(intersects[0].point.sub(offset));
	   
    } else {
	
      // new position auxiliary layer (if necessary)
      var intersects = raycaster.intersectObjects(objects);
	  
      if (intersects.length > 0) {
	  
         plane.position.copy(intersects[0].object.position);
         plane.lookAt(camera.position);
		 
      }
	  
    }
	
}
10

Please use this example as a reference: https://threejs.org/examples/#webgl_interactive_cubes

It also shows how you properly use .setFromCamera().

1 Like
11

For a better understanding, I have added the visual representation of the ray.:smiley:

See the links above.

raycaster

function drawray(){
 	
		ray.vertices[ 0 ] = plane.position;
		ray.vertices[ 1 ].x = camera.position.x;
		ray.vertices[ 1 ].y = camera.position.y + 4;
		ray.vertices[ 1 ].z = camera.position.z + 4;
		ray.verticesNeedUpdate  = true;
		
}

… +4 to make the ray immediately visible

12

So far, what I’m seeing in the code is the mix of strange things. For example, instantiating of a whole scene (and the other objects) in event handlers and even in animation loop.