Raycaster Mouse Picking
Video Lecture
Description
This is a basic example of using the Raycaster to mouse pick objects in the scene.
The scene is traversed and all individual objects are added to the pickableObjects array that is used by the Raycaster. The sphere and plane are deliberately excluded from this so they will not be mouse picked.
The plane also receives shadows while everything else only casts shadows.
This examples demonstrates,
- Loading a GLB scene, traversing the child objects to individually add and/or copy properties for later use.
- Using the Raycaster to detect if the mouse is over certain objects and changing there material.
Resources
The 3D model used in this lesson can be easily created using Blender. If you don't want to use blender to create the model, then you can download it from the zip file named models5.zip. Extract the models5.zip contents into the ./dist/client/models/ folder.
models5.zip
Lesson Script
./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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128 | import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import Stats from 'three/examples/jsm/libs/stats.module'
const scene = new THREE.Scene()
scene.add(new THREE.AxesHelper(5))
const light = new THREE.SpotLight()
light.position.set(12.5, 12.5, 12.5)
light.castShadow = true
light.shadow.mapSize.width = 1024
light.shadow.mapSize.height = 1024
scene.add(light)
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
)
camera.position.set(15, 15, 15)
const renderer = new THREE.WebGLRenderer()
renderer.shadowMap.enabled = true
renderer.outputEncoding = THREE.sRGBEncoding
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true
const pickableObjects: THREE.Mesh[] = []
let intersectedObject: THREE.Object3D | null
const originalMaterials: { [id: string]: THREE.Material | THREE.Material[] } =
{}
const highlightedMaterial = new THREE.MeshBasicMaterial({
wireframe: true,
color: 0x00ff00
})
const loader = new GLTFLoader()
loader.load(
'models/simplescene.glb',
function (gltf) {
gltf.scene.traverse(function (child) {
if ((child as THREE.Mesh).isMesh) {
const m = child as THREE.Mesh
//the sphere and plane will not be mouse picked. THe plane will receive shadows while everything else casts shadows.
switch (m.name) {
case 'Plane':
m.receiveShadow = true
break
case 'Sphere':
m.castShadow = true
break
default:
m.castShadow = true
pickableObjects.push(m)
//store reference to original materials for later
originalMaterials[m.name] = (m as THREE.Mesh).material
}
}
})
scene.add(gltf.scene)
},
(xhr) => {
console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
},
(error) => {
console.log(error)
}
)
window.addEventListener('resize', onWindowResize, false)
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()
renderer.setSize(window.innerWidth, window.innerHeight)
render()
}
const raycaster = new THREE.Raycaster()
let intersects: THREE.Intersection[]
document.addEventListener('mousemove', onDocumentMouseMove, false)
function onDocumentMouseMove(event: MouseEvent) {
raycaster.setFromCamera(
{
x: (event.clientX / renderer.domElement.clientWidth) * 2 - 1,
y: -(event.clientY / renderer.domElement.clientHeight) * 2 + 1
},
camera
)
intersects = raycaster.intersectObjects(pickableObjects, false)
if (intersects.length > 0) {
intersectedObject = intersects[0].object
} else {
intersectedObject = null
}
pickableObjects.forEach((o: THREE.Mesh, i) => {
if (intersectedObject && intersectedObject.name === o.name) {
pickableObjects[i].material = highlightedMaterial
} else {
pickableObjects[i].material = originalMaterials[o.name]
}
})
}
const stats = Stats()
document.body.appendChild(stats.dom)
function animate() {
requestAnimationFrame(animate)
controls.update()
render()
stats.update()
}
function render() {
renderer.render(scene, camera)
}
animate()
|
