Multiple Controls Example
Video Lecture
Description
An example of using a combination of
in the same scene.
OrbitControls with DragControls 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 | import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { DragControls } from 'three/examples/jsm/controls/DragControls'
// import { TransformControls } from 'three/examples/jsm/controls/TransformControls'
import Stats from 'three/examples/jsm/libs/stats.module'
const scene = new THREE.Scene()
scene.add(new THREE.AxesHelper(5))
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 geometry = new THREE.BoxGeometry()
const material = new THREE.MeshNormalMaterial({ transparent: true })
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)
const orbitControls = new OrbitControls(camera, renderer.domElement)
const dragControls = new DragControls([cube], camera, renderer.domElement)
dragControls.addEventListener('dragstart', function (event) {
orbitControls.enabled = false
;((event.object as THREE.Mesh).material as THREE.Material).opacity = 0.33
})
dragControls.addEventListener('dragend', function (event) {
orbitControls.enabled = true
;((event.object as THREE.Mesh).material as THREE.Material).opacity = 1
})
// const transformControls = new TransformControls(camera, renderer.domElement)
// transformControls.attach(cube)
// transformControls.setMode('rotate')
// scene.add(transformControls)
// transformControls.addEventListener('dragging-changed', function (event) {
// orbitControls.enabled = !event.value
// //dragControls.enabled = !event.value
// })
// window.addEventListener('keydown', function (event) {
// switch (event.key) {
// case 'g':
// transformControls.setMode('translate')
// break
// case 'r':
// transformControls.setMode('rotate')
// break
// case 's':
// transformControls.setMode('scale')
// break
// }
// })
const backGroundTexture = new THREE.CubeTextureLoader().load([
'img/px_eso0932a.jpg',
'img/nx_eso0932a.jpg',
'img/py_eso0932a.jpg',
'img/ny_eso0932a.jpg',
'img/pz_eso0932a.jpg',
'img/nz_eso0932a.jpg',
])
scene.background = backGroundTexture
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)
render()
stats.update()
}
function render() {
renderer.render(scene, camera)
}
animate()
|
./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 | import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// import { DragControls } from 'three/examples/jsm/controls/DragControls'
import { TransformControls } from 'three/examples/jsm/controls/TransformControls'
import Stats from 'three/examples/jsm/libs/stats.module'
const scene = new THREE.Scene()
scene.add(new THREE.AxesHelper(5))
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 geometry = new THREE.BoxGeometry()
const material = new THREE.MeshNormalMaterial({ transparent: true })
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)
const orbitControls = new OrbitControls(camera, renderer.domElement)
// const dragControls = new DragControls([cube], camera, renderer.domElement)
// dragControls.addEventListener('dragstart', function (event) {
// orbitControls.enabled = false
// ;((event.object as THREE.Mesh).material as THREE.Material).opacity = 0.33
// })
// dragControls.addEventListener('dragend', function (event) {
// orbitControls.enabled = true
// ;((event.object as THREE.Mesh).material as THREE.Material).opacity = 1
// })
const transformControls = new TransformControls(camera, renderer.domElement)
transformControls.attach(cube)
transformControls.setMode('rotate')
scene.add(transformControls)
transformControls.addEventListener('dragging-changed', function (event) {
orbitControls.enabled = !event.value
//dragControls.enabled = !event.value
})
window.addEventListener('keydown', function (event) {
switch (event.key) {
case 'g':
transformControls.setMode('translate')
break
case 'r':
transformControls.setMode('rotate')
break
case 's':
transformControls.setMode('scale')
break
}
})
const backGroundTexture = new THREE.CubeTextureLoader().load([
'img/px_eso0932a.jpg',
'img/nx_eso0932a.jpg',
'img/py_eso0932a.jpg',
'img/ny_eso0932a.jpg',
'img/pz_eso0932a.jpg',
'img/nz_eso0932a.jpg',
])
scene.background = backGroundTexture
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)
render()
stats.update()
}
function render() {
renderer.render(scene, camera)
}
animate()
|