I'm trying to set the raycaster layer to only cast on a single layer, as shown in the threejs docs: https://threejs.org/docs/#api/en/core/Raycaster - But I am getting this error
Uncaught TypeError: Cannot read properties of undefined (reading 'set')
What am I doing wrong? It seems super simple
var scene = new THREE.Scene(); // Create scene
// Setup Camera
var camera = new THREE.PerspectiveCamera(
90, // FOV
window.innerWidth / window.innerHeight, // Aspect Ratio
0.1, // Inner Plane
1000, // Far Plane
);
// Setup renderer
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setClearColor("#e5e5e5");
renderer.setSize(window.innerWidth, window.innerHeight);
// Setup camera controls
var controls = new OrbitControls( camera, renderer.domElement );
camera.position.set( 5, 0, 3 );
camera.layers.enable(1);
controls.minDistance = 5;
controls.maxDistance = 50;
controls.maxPolarAngle = 1.5;
controls.enablePan = false; // Stops the right mouse drag movement
controls.update();
document.body.appendChild(renderer.domElement); // Enstates the renderer to the body I think
window.addEventListener('resize', () => { // Allows the canvas to adjust dynamically to window size
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
})
var raycaster = new THREE.Raycaster();
raycaster.layers.set(0);let scene = new THREE.Scene(); // Create scene
// Setup Camera
let camera = new THREE.PerspectiveCamera(
90, // FOV
window.innerWidth / window.innerHeight, // Aspect Ratio
0.1, // Inner Plane
1000, // Far Plane
);
// Setup renderer
let renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setClearColor("#e5e5e5");
renderer.setSize(window.innerWidth, window.innerHeight);
// Setup camera controls
let controls = new THREE.OrbitControls(camera, renderer.domElement);
camera.position.set(5, 0, 3);
camera.layers.enable(1);
controls.minDistance = 5;
controls.maxDistance = 50;
controls.maxPolarAngle = 1.5;
controls.enablePan = false; // Stops the right mouse drag movement
controls.update();
document.body.appendChild(renderer.domElement); // Enstates the renderer to the body I think
window.addEventListener('resize', () => { // Allows the canvas to adjust dynamically to window size
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
})
let raycaster = new THREE.Raycaster();
raycaster.layers.set(0);body {
overflow: hidden;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>