Currently, I am facing an issue while using OrbitControls in THREE.js. Whenever I remove the line
let cameraControl = new OrbitControls(camera)I attempted to alter OrbitControls(camera) to THREE.OrbitControls(camera), but then I received a "Uncaught TypeError: THREE.OrbitControls is not a constructor".
In my efforts to resolve this issue, I tried importing OrbitControls.js via
<script src=...></script>"module", as opposed to using import {OrbitControls} from ...;. Unfortunately, this did not resolve the problem. I also experimented with moving let cameraControl = new OrbitControls(camera)If anyone has any ideas on how to fix this, please feel free to share!
<body>
<script type="module">
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r115/build/three.module.js';
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r115/examples/jsm/controls/OrbitControls.js';
let scene, renderer, camera
let cube
function init() {
scene = new THREE.Scene()
renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100)
let cameraControl = new OrbitControls(camera)
camera.position.set(10, 10, 10)
camera.lookAt(scene.position)
// cube
cube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1))
scene.add(cube)
}
function render() {
requestAnimationFrame(render)
renderer.render(scene, camera)
}
init()
render()
</script>
</body>