Raycaster only working on layer zero

Discussion
1

I’m a relative noob to JS and three.js, but have experience with VB and TrueVision3D.
I have objects set to layer 21 and disabled layer zero on them. I have Camera set to enableAll layers, I also enabled all on the raycaster.
I’ve been struggling to get intersects on any layer except zero. When I set my layer21 objects to layer zero , the raycast intersect(s) return the object.
Is there a fix? maybe a later/earlier version? My current three.core.js shows revision ‘171’. Is there a setting or property I missed?
Mike

2

Did you set the .layers of the raycaster itself?

1 Like
3

I tried layer 21 where objects are - rayc.layers.enable(21) rayc.layers.enableAll() rayc.layers.set(21). still only works on stuff on layer(0). camera is set to 0 and 21, i tried camera.layers.enableAll() -it didn’tseem to matter. Its like rayc is stuck on zero..

4

You have a bug in your program, but only you know what you actually do. If your objects have subobjects are all of them set to the correct layer?

When I try raycasting with non-zero layer it works fine. The boxes have layers 0, 1, 2, … and the raycaster is set “to see” only layer 3:

3 Likes
5

if you want to more than a layer you must to use

raycaster.layer.enable(0);
raycaster.layer.enable(1);
...
6

docs show .layers.enable , I get an unrecognized error if I use .layer.enable
what I’ve got is

 	this.Rayc = new THREE.Raycaster();
	this.Rayc.camera=this.flyCam;
	this.Rayc.layers.enable(21);

…
//this in the pointerup event-

let bbGrp=;
this.scene.traverse(function (objList) {
if (objList.name === “RedCircle” || objList.name === “zwdwLine” || objList.name === “PickPlane3D” || objList.name === “RedSphere” || objList.type.includes(“Helper”)|| objList.type===“Scene”) { //objList.type.includes(“Helper”)||
//…do nothing
} else {
if (objList.visible == true) {
objList.side = THREE.DoubleSide;
let childClone = objList.clone();
//console.log(objList.name);
//bbGrp.add(childClone);
bbGrp.push(childClone);
}
}
} ,true);
console.log(bbGrp);
this.scene.updateMatrixWorld();
// todo: group raycast not working…only works on layer(0)
this.Rayc.setFromCamera(this.midPt, this.flyCam);
this.intersects = this.Rayc.intersectObjects(bbGrp,true);
if (this.intersects.length>0){
this.ctrPt3 = this.intersects[0].point;
console.log(this.intersects[0].object.name);
};

– removing the ‘Helper’ filter from the scene.traverse array, lets them be intersected on layer(0).

7

this is in main.js, the this.Rayc is in controls constructor

scene.add(axisHelp);
scene.add(gridHelp);
const geometry = new THREE.BoxGeometry(2, 6, 96);
const material = new THREE.MeshNormalMaterial();
const mesh = new THREE.Mesh(geometry, material); // meshNextId getByObjectName-group?/mesh?/id?
scene.add(mesh); //layer 0
mesh.position.copy(new THREE.Vector3(0, 4, 0));
mesh.name = “BD” + mesh.id;
mesh.layers.enable(21);
mesh.layers.disable(0); //disableAll?B4enable…group…
const geometry2 = new THREE.BoxGeometry(12, 16, 8);
const material2 = new THREE.MeshNormalMaterial();
const mesh2 = new THREE.Mesh(geometry2, material2);
scene.add(mesh2); //layer 0
mesh2.position.copy(new THREE.Vector3(3, 0, 0));
mesh2.name = “BD” + mesh2.id;
mesh2.layers.enable(21);
mesh2.layers.disable(0);
var grop = new THREE.Group();
grop.layers.enable(21);
grop.layers.disable(0);
grop.add(mesh2);
scene.add(grop); //NTS-groupchildren.layers need to match parent
grop.name = “WALL” + grop.id;
grop.add(mesh);
//mesh.visible = false;
//layers-hide by layer
camera.layers.enable(21);

8

I borrowed heavily on FlyControls --maybe I left something out of the constructor???

import {
Controls,
Quaternion,
Vector3,
Plane,
MOUSE
} from ‘three’;
import * as THREE from ‘three’;

//thanksto FlyControls for basic template creation
// Ctrl key to zoom in and out with up/down arrow keys,
// ctrlleftArrow-zoomPrevious,ctrlrightArrow-zoomAll,
// zoomwindow(in),zoomcrossing(out) with pointer(more like dragZoom)
// Shift key to pan udlr arrow keys,
// pan (single pointerdown udlr of center)
// Alt key to rotate
// udlr arrow keys,
// one-touch rotate udlr
// (might have to hit the zoomprevious key a few times)

class CadControls extends Controls {
constructor( object, domElement = null, scene , renderer) {
super( object, domElement, scene, renderer);

	// event listeners

	this._onKeyDown = onKeyDown.bind( this );
	this._onKeyUp = onKeyUp.bind( this );
	this._onPointerMove = onPointerMove.bind( this );

…

9

.set didn’t work either. I’ve got to be missing something somewhere, other people get it to work…
Mike

10

solved- I moved the layer change out of the constructor and into the eventListener.

…
this.Rayc.camera = this.flyCam;
this.Rayc.layers.disableAll();
this.Rayc.layers.enable(21);
…