CODEWITHSUNDEEP
three.js
ᅠhᅠ
ᅠhᅠ

Reputation: 113

How to place an object in front of camera when it is inside a rotated group?

How to take into account the transformation of the parent when you need to move the object in any point? Here I do so this.cube.position.copy(this.camera.position)

class Sketch {
  constructor() {
    this.bind()
    this.renderer()
    this.camera()
    this.scene()
    this.objects()
    this.resize()
    this.listen()
  }

  bind() {
    this.render = this.render.bind(this)
    this.resize = this.resize.bind(this)
    this.moveObject = this.moveObject.bind(this)
  }

  renderer() {
    this.renderer = new THREE.WebGLRenderer()
    document.body.appendChild(this.renderer.domElement)
  }

  camera() {
    this.camera = new THREE.PerspectiveCamera(0, 0, 0.1, 2000)
    this.camera.position.z = 1000
  }

  scene() {
    this.scene = new THREE.Scene()
  }

  objects() {
    this.group = new THREE.Group()
    this.group.rotation.y = Math.PI / 4
    this.group.position.z = -1000

    const geometry = new THREE.BoxGeometry(1, 1, 1)
    const material = new THREE.MeshBasicMaterial()
    this.cube = new THREE.Mesh(geometry, material)

    this.group.add(this.cube)
    this.scene.add(this.group)
  }

  moveObject() {
    this.cube.position.copy(this.camera.position)
  }

  resize() {
    this.renderer.setSize(innerWidth, innerHeight)
    this.renderer.setPixelRatio(Math.min(devicePixelRatio, 2))
    this.camera.aspect = innerWidth / innerHeight
    this.camera.fov = 2 * Math.atan((innerHeight / 2) / 1000) * (180 / Math.PI)
    this.camera.updateProjectionMatrix()
    this.cube.scale.set(150, 150, 150)
  }

  listen() {
    addEventListener('resize', this.resize)
    addEventListener('click', this.moveObject)
    requestAnimationFrame(this.render)
  }

  render(t) {
    requestAnimationFrame(this.render)
    this.renderer.render(this.scene, this.camera)
  }
}

new Sketch()
body {
  margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>

Upvotes: 0

Views: 144

Answers (1)

TheJim01
TheJim01

Reputation: 8866

Because the camera is in world space, you can simply convert its position into the group's local space.

this.cube.position.copy( this.camera.position ); // copies the WORLD position
this.group.worldToLocal( this.cube.position ); // position now in GROUP space

The Object3D.worldToLocal function converts a Vector3 from the world coordinate system (where the camera lives) to the caller's coordinate system (in this case, this.group). So even though you originally copy a world position to this.cube, it gets converted back into the group's local coordinate system on the next line.

Upvotes: 1

Related Questions