gyro vs lookat

with orbitControls, XZgrid, info

by jmcjc5u

HTML

<div id="info">lookAt vs. Gyro
<br>
<button id='switch'>using Gyro
</button>
</div>

CSS

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

body {
  overflow: hidden;
}

JavaScript

import * as THREE from 'https://cdn.skypack.dev/[email protected]';
import { OrbitControls } from 'https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js';
import { Gyroscope } from "https://cdn.skypack.dev/[email protected]/examples/jsm/misc/Gyroscope.js";

var camera, camera1, scene, renderer, mesh;
var angle = 0;
var gyro
var useGyro = true;

$('#switch').click ( function () {
	useGyro = !useGyro;
  if (useGyro) $('#switch').text ('using Gyro')
  else $('#switch').text ('using LookAt')
})

init();
animate();

function init() {

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 500;
//  scene.add(camera);

  camera1 = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 1, 1000);
  camera1.position.z = 500;
//  scene.add(camera1);

	let light = new THREE.PointLight(0xffffff);
  light.position.set(100, 300, 200);
  scene.add(light);

  let gridXZ = new THREE.GridHelper(200, 20, 'red', 'white');
  scene.add(gridXZ);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);

 	let controls = new OrbitControls(camera, renderer.domElement);
 	let controls1 = new OrbitControls(camera1, renderer.domElement);

  document.body.appendChild(renderer.domElement);
  ////////////////////////////////////////////////////////////////////////

  var geometry = new THREE.TorusKnotGeometry(20, 6, 100, 16);
  var material = new THREE.MeshNormalMaterial({
    color: 0xffff00
  });
  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
  
  gyro = new Gyroscope();
  //scene.add (gyro)
  mesh.add (gyro)
  gyro.add (camera)

}

function animate() {
	angle += 0.01;
  mesh.rotation.y = angle
	mesh.position.set (100*Math.cos(angle), 0, 100*Math.sin(angle))
  
  camera1.lookAt (mesh.position)

	requestAnimationFrame(animate);

	if (useGyro)
  	renderer.render (scene, camera)
  else
 ...