Skip to content

Raycaster Collision Detection

Video Lecture

Raycaster Collision Detection

 (Pay Per View)

You can use PayPal to purchase a one time viewing of this video for $1.49 USD.

Pay Per View Terms

  • One viewing session of this video will cost the equivalent of $1.49 USD in your currency.
  • After successful purchase, the video will automatically start playing.
  • You can pause, replay and go fullscreen as many times as needed in one single session for up to an hour.
  • Do not refresh the browser since it will invalidate the session.
  • If you want longer-term access to all videos, consider purchasing full access through Udemy or YouTube Memberships instead.
  • This Pay Per View option does not permit downloading this video for later viewing or sharing.
  • All videos are Copyright © 2019-2025 Sean Bradley, all rights reserved.

Description

While raycasting is almost always used for mouse picking objects in the 3D scene, it can also be used for simple collision detection.

In this example, I detect whether the orbit controls will penetrate another object and adjust the cameras position so that it stays outside.

Essentially, I am creating a ray from the camera target to the camera position. If there is an intersected object between, then the camera position is adjusted to the intersect point. This prevents the camera from going behind a wall, or inside a box, or floor, or any object which is part of the objects array being tested for an intersection.

<>

Also, instead of using the raycaster to find the new point to position the camera in case of collision between the target and itself, I could instead modify the opacity of the object in between and not move the camera. Rotate the camera and notice how any object between the camera target and the camera itself, becomes transparent.

<>

Code

./src/client/client.ts

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import Stats from 'three/examples/jsm/libs/stats.module'

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.z = 2

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const raycaster = new THREE.Raycaster()
const sceneMeshes: THREE.Mesh[] = []
const dir = new THREE.Vector3()
let intersects: THREE.Intersection[] = []

const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true
controls.addEventListener('change', function () {
  xLine.position.copy(controls.target)
  yLine.position.copy(controls.target)
  zLine.position.copy(controls.target)

  raycaster.set(controls.target, dir.subVectors(camera.position, controls.target).normalize())

  intersects = raycaster.intersectObjects(sceneMeshes, false)
  if (intersects.length > 0) {
    if (intersects[0].distance < controls.target.distanceTo(camera.position)) {
      camera.position.copy(intersects[0].point)
    }
  }
})

const floor = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), new THREE.MeshNormalMaterial({ side: THREE.DoubleSide }))
floor.rotateX(-Math.PI / 2)
floor.position.y = -1
scene.add(floor)
sceneMeshes.push(floor)

const wall1 = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), new THREE.MeshNormalMaterial({ side: THREE.DoubleSide }))
wall1.position.x = 4
wall1.rotateY(-Math.PI / 2)
scene.add(wall1)
sceneMeshes.push(wall1)

const wall2 = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), new THREE.MeshNormalMaterial({ side: THREE.DoubleSide }))
wall2.position.z = -3
scene.add(wall2)
sceneMeshes.push(wall2)

const cube: THREE.Mesh = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshNormalMaterial())
cube.position.set(-3, 0, 0)
scene.add(cube)
sceneMeshes.push(cube)

const ceiling = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), new THREE.MeshNormalMaterial({ side: THREE.DoubleSide }))
ceiling.rotateX(Math.PI / 2)
ceiling.position.y = 3
scene.add(ceiling)
sceneMeshes.push(ceiling)

//crosshair
const lineMaterial = new THREE.LineBasicMaterial({
  color: 0x0000ff,
})
const points: THREE.Vector3[] = []
points[0] = new THREE.Vector3(-0.1, 0, 0)
points[1] = new THREE.Vector3(0.1, 0, 0)
let lineGeometry = new THREE.BufferGeometry().setFromPoints(points)
const xLine = new THREE.Line(lineGeometry, lineMaterial)
scene.add(xLine)
points[0] = new THREE.Vector3(0, -0.1, 0)
points[1] = new THREE.Vector3(0, 0.1, 0)
lineGeometry = new THREE.BufferGeometry().setFromPoints(points)
const yLine = new THREE.Line(lineGeometry, lineMaterial)
scene.add(yLine)
points[0] = new THREE.Vector3(0, 0, -0.1)
points[1] = new THREE.Vector3(0, 0, 0.1)
lineGeometry = new THREE.BufferGeometry().setFromPoints(points)
const zLine = new THREE.Line(lineGeometry, lineMaterial)
scene.add(zLine)

window.addEventListener('resize', onWindowResize, false)
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
  render()
}

const stats = new Stats()
document.body.appendChild(stats.dom)

function animate() {
  requestAnimationFrame(animate)

  controls.update()

  render()

  stats.update()
}

function render() {
  renderer.render(scene, camera)
}

animate()

Raycaster (Official Documentation)