How to move the camera to zoom into a cube to see it from many angles:

Questions
1

Hello: I have this code: https://www.songnes.com/g/g56.html
I want to “fly” around the objects with the mouse, like I’m moving the camera to see the cube closer or far away or under the plane…
I visit this page: https://threejs.org/docs/#examples/en/controls/OrbitControls…
I add this file: is in my server.

And I have this code:

You can see this “live” page, and is not working…
https://www.songnes.com/g/g57.html

can someone help me please…

2

You are including OrbitControls as a global script, not an ES6 module. Hence, you have to create the controls like so:

var controls = new THREE.OrbitControls( camera, renderer.domElement );

Notice the THREE namespace.

3

Thank you very Much Mugen87!! It works…

see live example here: http://songnes.com/g/g57.html

I didn’t have the THREE in there. Perfect.
this is the complete code, just in case for someone else to use it:

< !DOCTYPE html >
< html lang=“en” >
< head >
< title >Final GUI.DAT CONTROLLER< /title >
< meta charset=“utf-8” >
< script src=“https://threejs.org/build/three.js” >< /script >
< script src=“https://songnes.com/js/threeJS/OrbitControls.js” >< /script >
< style >
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%;
display: block;
}
< /style >
< /head >
< body >
< script > ----> this is the actual script
// INITIAL SETTINGS:
const scene = new THREE.Scene();
const clock = new THREE.Clock();
const camera = new THREE.PerspectiveCamera( 50, window.innerWidth/window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

  // ADD CONTROLER:
  var controls = new THREE.OrbitControls( camera, renderer.domElement );
  //controls.update() must be called after any manual changes to the camera's transform
  camera.position.set( 0, 20, 100 );
  controls.update();

  // CUBE
  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshNormalMaterial( { color: 0xff0000 } );
  const cube = new THREE.Mesh( geometry, material );
  cube.rotation.y = 5;
  cube.rotation.z = 6;
  cube.position.y = .4;

  // YELLOW PLANE
  const planeGeometry = new THREE.PlaneGeometry( 5, 12, 100 );
  const planeMaterial = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
  const plane = new THREE.Mesh( planeGeometry, planeMaterial );
  plane.rotation.x = 30;

  // ADD SCENE AND CAMERA POSITION:
  scene.add( cube, plane );
  camera.position.z = 11;

  // ANIMATE FUNCTION:
  var animate = function () {
    requestAnimationFrame( animate );

    // UPDATE CONTROLER:
    // required if controls.enableDamping or controls.autoRotate are set to true
    controls.update();

    renderer.render( scene, camera );
  };
  animate();
< /script >

< /body >
< /html >

4

Thank you for your help…
Do you have a course or web-site or books where I can learn from you?

5

Check out the “Books” section at the homepage: https://threejs.org/

If you are new to JavaScript, the books from Dr. Axel Rauschmayer are really good: https://exploringjs.com/

6

Thanks a lot!!! I’m going to read the books from Dr. Axel…

I’m also doing some of the fundamentals in threejs

thank you!