JSFiddle - React, Tailwind, and code Playground

by grano

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

JavaScript

let camera, scene, renderer, composer;
let rotateY = Math.PI /2
let rotateX  = 0

init();
animate();

window.addEventListener('click', function() {
	rotateCamera()
})

function init() {
	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 1000 );
	camera.position.set( 50, 0, 0 );
  camera.rotation.y = rotateY
 
//	camera.lookAt( 0, 0, 0 );
  console.log('camera.rotation', camera.rotation)
// 	camera.rotation.z = -0.5
  
	scene = new THREE.Scene();
  
  const triangularPyramid = new THREE.Mesh(new THREE.ConeGeometry( 5, 20, 3 ), new THREE.MeshBasicMaterial({color: "red"}));
  triangularPyramid.position.set(0,0,0);
  scene.add(triangularPyramid);
  
/*     const triangularPyramid = new THREE.Mesh(new THREE.ConeGeometry( 5, 20, 3 ), new THREE.MeshBasicMaterial({color: "red"}));
      triangularPyramid.position.set(0,0,0);
      scene.add(triangularPyramid);
     */
  renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );
  
// 	const controls = new THREE.OrbitControls( camera, renderer.domElement );
//  controls.target.set( 0, 1, 0 );
}


function rotateCamera() {
    //camera.position.z *= -1

		var target = new THREE.Quaternion();
    var axis = new THREE.Vector3(1,0,0).normalize();
		target.setFromAxisAngle(axis, Math.PI / 24);
//    camera.quaternion.multiply(target);
//    camera.rotation.order = "ZYX"
//    camera.rotation.order = "ZXY"
    camera.rotation.order = "YXZ"
    
    camera.rotation.x =     camera.rotation.x +  Math.PI / 24
//rotateX =      camera.rotation.x +  Math.PI / 24
    
//    camera.lookAt(0,0,0)
//    camera.rotation.set(-3.141592653589793, 0 , -3.141592653589793)
//    camera.rotation.set(0, 0 , 0)

    console.log('camera.rotation', camera.rotation)
}

function animate() {
if (rotateY < Math.PI/3) {
  rotateY += Math.PI/3
	camera.rotation.y = rotateY
} else {
  rotateY -= 0.01
  camera.rotation.y =...