WebXR Experiment

testing webxr with Three.js

by falldeaf

HTML

https://jsfiddle.net/falldeaf/rLwyz408/8/#run<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VR Experiment</title>
    <style>
			body { margin: 0; }
		</style>
	</head>
	<body>
    <canvas id="c" width="500" height="300"></canvas>
	</body>
</html>

JavaScript

import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r125/build/three.module.js';
import {VRButton} from 'https://threejsfundamentals.org/threejs/resources/threejs/r125/examples/jsm/webxr/VRButton.js';

const scene = new THREE.Scene();
			const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

			const renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );
			renderer.xr.enabled = true;
      document.body.appendChild( VRButton.createButton( renderer ) );

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

			camera.position.z = 5;

			const animate = function () {
				requestAnimationFrame( animate );

				cube.rotation.x += 0.01;
				cube.rotation.y += 0.01;

				renderer.render( scene, camera );
			};

			//animate();
      
renderer.setAnimationLoop( function () {
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

	renderer.render( scene, camera );
} );