无法在 Three.js 中设置 raycaster 层答案

【问题标题】：Can't set raycaster layers in Three.js无法在 Three.js 中设置 raycaster 层
【发布时间】：2022-02-01 07:41:02
【问题描述】：

我正在尝试将 raycaster 图层设置为仅投射在一个图层上，如 threejs 文档中所示：https://threejs.org/docs/#api/en/core/Raycaster - 但我收到此错误

Uncaught TypeError: Cannot read properties of undefined (reading 'set')

我做错了什么？看起来超级简单

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

【问题讨论】：

请确保您使用的是更新版本的three.js。 Raycaster.layers 添加了 r114。

标签： javascript three.js

【解决方案1】：

这可能与您的 ThreeJS 版本有关。

这对我有用：

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>

【讨论】：