JSFiddle - React, Tailwind, and code Playground

by bumpyshot

HTML

<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

<button id="button">change

</button>

JavaScript

var camera;
var scene;
var conrols;
var renderer;

function init() {
  scene = new THREE.Scene();

  renderer = new THREE.WebGLRenderer({
    alpha: true,
    antialias: true

  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
  camera.position.set(-1.57, -1.95, 2.64);
  scene.add(camera);

  scene.add(new THREE.AmbientLight(0xffffff, 0.6));

  var light1 = new THREE.HemisphereLight(0xffffbb, 0x080820, 0.7)
  scene.add(light1);


  var light2 = new THREE.SpotLight(0xffffff, 0.5);
  light2.position.set(4, 7, 23);
  scene.add(light2);

  var light3 = new THREE.SpotLight(0xffffff, 0.5);
  light3.position.set(4, 7, -23);
  scene.add(light3);

  var geometry = new THREE.BoxGeometry(1, 1, 1);
  var material = new THREE.MeshLambertMaterial({
    color: 0x00ff00
  });
  var cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

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


}


function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

document.getElementById('button').onclick = function() {
  console.log("position");
  console.log(camera.position);
  console.log("rotation");
  console.log(camera.rotation);

  //controls.target.set(-0.041, 1.9, -1.21);
  camera.position.set(-0.041, 1.9, -1.21);
  controls.update();

}



init();
animate();