JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
JavaScript
// Raycaster test
// 3 planes at z positions 10, 0 and -10
// Ray with origin (0, 0, 0) and direction (0, 0, -1)
// White = no intersect
// Red = intersect
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
var scene = new THREE.Scene();
var origin = new THREE.Vector3(0, 0, 0);
var direction = new THREE.Vector3(0, 0, -1);
var planes = [];
var geo1 = new THREE.PlaneGeometry(10, 10);
var mat1 = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide });
var plane1 = new THREE.Mesh(geo1, mat1);
plane1.position.z = 10;
planes.push(plane1);
scene.add(plane1);
var geo2 = new THREE.PlaneGeometry(10, 10);
var mat2 = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide });
var plane2 = new THREE.Mesh(geo2, mat2);
plane2.position.z = 0;
planes.push(plane2);
scene.add(plane2);
var geo3 = new THREE.PlaneGeometry(10, 10);
var mat3 = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide });
var plane3 = new THREE.Mesh(geo3, mat3);
plane3.position.z = -10;
planes.push(plane3);
scene.add(plane3);
var arrow = new THREE.ArrowHelper(direction, origin, 20);
scene.add(arrow);
var raycaster = new THREE.Raycaster(origin, direction);
var camera = new THREE.PerspectiveCamera(45, screenWidth / screenHeight, 1, 500 );
camera.position.set(20, 20, -20);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(screenWidth, screenHeight);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
function update() {
controls.update();
var intersections = raycaster.intersectObjects(planes);
intersections.forEach((intersection) => {
intersection.object.material.color.set(0xff0000);
});
}
function render() {
renderer.render(scene, camera);
}
function tick() {
update();
render();
requestAnimationFrame(tick);
}
tick();