cone orientation

by fiddleuser04

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
<canvas id='canvas'></canvas>

CSS

html{
  height:100%;
}
body{
  height: 100%;
}
canvas{
  height: 100%;
  width: 100%;
}

JavaScript

let canvas, scene, renderer, camera, cone;

    const ROTATION_SPEED = 2;

    //basis vectors
    const i3 = new THREE.Vector3(1, 0, 0);
    const j3 = new THREE.Vector3(0, 1, 0);
    const k3 = new THREE.Vector3(0, 0, 1);

    const targetQuaternion = new THREE.Quaternion();
    const rotationMatrix = new THREE.Matrix4();
    const clock = new THREE.Clock();

    function initCamera() {
      camera = new THREE.PerspectiveCamera(70, 1, 1, 10000);
      scene.add(camera);
      camera.position.set(15, 10, 8); 
    }

    function render() {
      const delta = clock.getDelta();
      if(!cone.quaternion.equals(targetQuaternion)){
	      const step = ROTATION_SPEED * delta;
		    cone.quaternion.rotateTowards( targetQuaternion, step );
      }
      renderer.render(scene, camera);
      requestAnimationFrame(render);
    }

    function doWindowResize(){
      //set canvas resolution
      canvas.width = canvas.clientWidth;
      canvas.height = canvas.clientHeight;
      //set renderer size
      renderer.setSize(canvas.width, canvas.height, false);
      //set camera aspect
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }

    function initCone() {
      cone = new THREE.Mesh(new THREE.ConeGeometry(2, 6, 32), new THREE.MeshNormalMaterial());
      cone.position.set(5, 0,0);
      scene.add(cone);
      const axesHelper = new THREE.AxesHelper(5);
      cone.add(axesHelper);
    }

    function initGui(){
      const controls = {
        coneLookPosX(){ 
          //make a target to lookAt at cone.position + (1,0,0)
          setTarget(new THREE.Vector3().copy(cone.position).add(i3));
        },
        coneLookNegX(){
          //target at cone.position + (-1,0,0)
          setTarget(new THREE.Vector3().copy(cone.position).add(i3.multiplyScalar(-1)));
        },
        coneLookPosY(){
          //cone.position + (0,1,0)
          setTarget(new THREE.Vector3().copy(cone.position).add(j3));    
       ...