Skip to content

DragControls

Video Lecture

DragControls

 (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

Used to provide drag and drop interaction for your scene objects.

<>

Lesson Scripts

./dist/client/index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Three.js TypeScript Tutorials by Sean Bradley : https://sbcode.net/threejs</title>
    <style>
      body {
        overflow: hidden;
        margin: 0px;
      }
    </style>
  </head>

  <body>
    <script type="module" src="bundle.js"></script>
  </body>
</html>

./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
import * as THREE from 'three'
import { DragControls } from 'three/examples/jsm/controls/DragControls'
import Stats from 'three/examples/jsm/libs/stats.module'

const scene = new THREE.Scene()
scene.add(new THREE.AxesHelper(5))

const light = new THREE.PointLight(0xffffff, 1000)
light.position.set(10, 10, 10)
scene.add(light)

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

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

const geometry = new THREE.BoxGeometry()
//const material: THREE.MeshPhongMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000, transparent: true })
//const cube: THREE.Mesh = new THREE.Mesh(geometry, material)
//scene.add(cube)

const material = [
  new THREE.MeshPhongMaterial({ color: 0xff0000, transparent: true }),
  new THREE.MeshPhongMaterial({ color: 0x00ff00, transparent: true }),
  new THREE.MeshPhongMaterial({ color: 0x0000ff, transparent: true }),
]

const cubes = [new THREE.Mesh(geometry, material[0]), new THREE.Mesh(geometry, material[1]), new THREE.Mesh(geometry, material[2])]
cubes[0].position.x = -2
cubes[1].position.x = 0
cubes[2].position.x = 2
cubes.forEach((c) => scene.add(c))

const controls = new DragControls(cubes, camera, renderer.domElement)
// controls.addEventListener('dragstart', function (event) {
//     event.object.material.opacity = 0.33
// })
// controls.addEventListener('dragend', function (event) {
//     event.object.material.opacity = 1
// })

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)

  cubes[0].rotation.x += 0.01
  cubes[0].rotation.y += 0.011
  cubes[1].rotation.x += 0.012
  cubes[1].rotation.y += 0.013
  cubes[2].rotation.x += 0.014
  cubes[2].rotation.y += 0.015
  //controls.update()

  render()

  stats.update()
}

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

animate()

DragControls (Official Documentation)