# Raycaster issue

**URL:** <https://discourse.threejs.org/t/raycaster-issue/1065>\
**Category:** Questions\
**Tags:** raycaster\
**Created:** [October 23, 2017, 8:53am UTC](https://discourse.threejs.org/t/raycaster-issue/1065 "2017-10-23T08:53:55Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![aidooyaw1992](https://avatars.discourse-cdn.com/v4/letter/a/4af34b/32.png) [@aidooyaw1992](https://discourse.threejs.org/u/aidooyaw1992)\
**Post date:** [October 23, 2017, 8:53am UTC](https://discourse.threejs.org/t/raycaster-issue/1065/1 "2017-10-23T08:53:55Z")

</div>

Im having problems with raycaster

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

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [October 23, 2017, 9:51am UTC](https://discourse.threejs.org/t/raycaster-issue/1065/2 "2017-10-23T09:51:07Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![aidooyaw1992](https://avatars.discourse-cdn.com/v4/letter/a/4af34b/32.png) [@aidooyaw1992](https://discourse.threejs.org/u/aidooyaw1992)\
**Post date:** [October 23, 2017, 10:44am UTC](https://discourse.threejs.org/t/raycaster-issue/1065/3 "2017-10-23T10:44:31Z")

</div>

the latest one but i dont know which version

---

<div class="post-metadata">

**Author:** ![aidooyaw1992](https://avatars.discourse-cdn.com/v4/letter/a/4af34b/32.png) [@aidooyaw1992](https://discourse.threejs.org/u/aidooyaw1992)\
**Post date:** [October 23, 2017, 10:45am UTC](https://discourse.threejs.org/t/raycaster-issue/1065/4 "2017-10-23T10:45:52Z")

</div>

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

```

};

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [October 23, 2017, 10:52am UTC](https://discourse.threejs.org/t/raycaster-issue/1065/5 "2017-10-23T10:52:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![aidooyaw1992](https://avatars.discourse-cdn.com/v4/letter/a/4af34b/32.png) [@aidooyaw1992](https://discourse.threejs.org/u/aidooyaw1992)\
**Post date:** [October 23, 2017, 10:58am UTC](https://discourse.threejs.org/t/raycaster-issue/1065/6 "2017-10-23T10:58:05Z")

</div>

the issue is at setFromCamera

it says it is undefined

---

<div class="post-metadata">

**Author:** ![aidooyaw1992](https://avatars.discourse-cdn.com/v4/letter/a/4af34b/32.png) [@aidooyaw1992](https://discourse.threejs.org/u/aidooyaw1992)\
**Post date:** [October 23, 2017, 10:58am UTC](https://discourse.threejs.org/t/raycaster-issue/1065/7 "2017-10-23T10:58:36Z")

</div>

i wish you could look into my project for me

---

<div class="post-metadata">

**Author:** ![aidooyaw1992](https://avatars.discourse-cdn.com/v4/letter/a/4af34b/32.png) [@aidooyaw1992](https://discourse.threejs.org/u/aidooyaw1992)\
**Post date:** [October 23, 2017, 10:59am UTC](https://discourse.threejs.org/t/raycaster-issue/1065/8 "2017-10-23T10:59:10Z")

</div>

im totally out of ideas

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [October 23, 2017, 12:34pm UTC](https://discourse.threejs.org/t/raycaster-issue/1065/9 "2017-10-23T12:34:41Z")

</div>

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/](http://threejs.hofk.de/)

English version: [http://threejs.hofk.de/raycaster/raycaster.html](http://threejs.hofk.de/raycaster/raycaster.html)  
 ![raycasterDragDrop](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/1X/687f4ef602fd505ec724b1c26c805d52ce52c5ae.png)

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

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 23, 2017, 2:05pm UTC](https://discourse.threejs.org/t/raycaster-issue/1065/10 "2017-10-23T14:05:18Z")

</div>

Please use this example as a reference: [https://threejs.org/examples/#webgl\_interactive\_cubes](https://threejs.org/examples/#webgl_interactive_cubes)

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

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [October 24, 2017, 8:39am UTC](https://discourse.threejs.org/t/raycaster-issue/1065/11 "2017-10-24T08:39:23Z")

</div>

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

_See the links above._

![raycaster](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/1X/56c471dcc11cc5536185198385d1856705f50863.png)

```
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_

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [October 24, 2017, 9:56am UTC](https://discourse.threejs.org/t/raycaster-issue/1065/12 "2017-10-24T09:56:51Z")

</div>

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.