Orbit controller not working

Questions
,
1

in my scene, orbit controller is not working and this is my code:

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer'
// import { TWEEN } from 'https://unpkg.com/[email protected]/examples/jsm/libs/tween.module.min.js'


function addCamera() {
    const camera = new THREE.PerspectiveCamera(
        90,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
    )
    camera.position.set(15, 5, 10)
    return camera
}

function addLight(scene: THREE.Scene) {
    const dirLight_right_near = new THREE.DirectionalLight()
    dirLight_right_near.position.set(30, 50, 40)
    scene.add(dirLight_right_near)

    const dirLight_left_far = new THREE.DirectionalLight()
    dirLight_left_far.position.set(-30, 50, -40)
    scene.add(dirLight_left_far)

    return scene
}

let scene = new THREE.Scene()
let camera: THREE.PerspectiveCamera
let raycaster: THREE.Raycaster

let sceneObject = new Array()
scene = addLight(scene)
camera = addCamera()
raycaster = new THREE.Raycaster()

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

const element = document.createElement('div') as HTMLElement
const labelRenderer = new CSS2DRenderer()
labelRenderer.setSize(window.innerWidth, innerHeight)
labelRenderer.domElement.style.position = 'absolute'
labelRenderer.domElement.style.top = '0px'
document.body.appendChild(labelRenderer.domElement)

const controls = new OrbitControls(camera, renderer.domElement) // (, html element used for event listener)
controls.target.set(10.0, 0.0, 0.0)
console.log(controls)

const objLoader = new OBJLoader()
new MTLLoader().setPath('models/').load('house_water.mtl', function (materials) {
    materials.preload()
    console.log('hi')
    objLoader
        .setMaterials(materials)
        .setPath('models/')
        .load('house_water.obj', function (object) {
            object.scale.set(0.01, 0.01, 0.01)
            scene.add(object)
            // object.traverse(function (child) {
            //     if (child instanceof THREE.Mesh) {
            //         scene.add(child)
            //     }
            // })
        })
})

window.addEventListener('resize', onWindowResize)

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
    labelRenderer.setSize(window.innerWidth, window.innerHeight)
    render()
}

function animate() {
    requestAnimationFrame(animate)
    controls.update()

    // console.log(camera.position)
    render()
}

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

can anyone please help me on this !!

2

Hi!
Try to change this: new OrbitControls(camera, renderer.domElement)
to this: new OrbitControls(camera, labelRenderer.domElement)

3

thank you so much !!
it worked. Can i ask why ? i just got to know about CSS2Renderer and so had that code. I had not implemented that code !!!