I've been struggling to solve this issue for some time now and I'm not sure if it's related to the OrbitControls.js file or my own code. My goal is simple - I just want the orbit controls to work, but unfortunately nothing is moving as expected.
In my attempt, I used the following line of code:
controls = new THREE.OrbitControls(camera, scene);
However, when I use renderer.domElement instead, I lose sight of my scene completely.
If anyone has any suggestions or ideas on how to fix this, please feel free to share them. Any help would be greatly appreciated.
Here is a snippet of my code for reference:
<script src="libraries/three.min.js"></script>
<script src="libraries/OrbitControls.js"></script>
<script>
let scene,camera,renderer, controls;
function init(){
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xdddddd );
//Camera Things
camera = new THREE.PerspectiveCamera( 75, window.innerWidth/ window.innerHeight, 0.1, 5000 );
camera.position.set(0,25,25);
//cube
var cubeGeometry = new THREE.BoxGeometry (10,10,10);
var cubeMaterial = new THREE.MeshBasicMaterial ({color: 0x1ec876});
cube = new THREE.Mesh (cubeGeometry, cubeMaterial);
cube.position.set (0, 0, 0);
scene.add (cube);
// controls
controls = new THREE.OrbitControls(camera, scene);
scene.add( new THREE.AxesHelper(500));
// Renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild( renderer.domElement );
animate();
}
function animate() {
controls.update();
renderer.render( scene, camera );
requestAnimationFrame( animate );
}
init();
</script>
</body>
Thank you in advance!