-
Alfakhori authoredb6e48247
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Cube Demo</title> <!-- three.js --> <script src="https://unpkg.com/three@0.126.0/build/three.js"></script></head><body><!-- Starting an immersive WebXR session requires user interaction. We start this one with a simple button. --><button onclick="activateXR()">Start Cube Demo</button><script>async function activateXR() { // ------------------------------------------------// BASIC SETUP// ------------------------------------------------// Create an empty scenevar scene = new THREE.Scene();// Create a basic perspective cameravar camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );camera.position.z = 4;// Create a renderer with Antialiasingvar renderer = new THREE.WebGLRenderer({antialias:true});// Configure renderer clear colorrenderer.setClearColor("#000000");// Configure renderer sizerenderer.setSize( window.innerWidth, window.innerHeight );// Append Renderer to DOMdocument.body.appendChild( renderer.domElement );// ------------------------------------------------// FUN STARTS HERE// ------------------------------------------------// Create a Cube Mesh with basic materialvar geometry = new THREE.BoxGeometry( 1, 1, 1 );var material = new THREE.MeshBasicMaterial( { color: "#433F81" } );var cube = new THREE.Mesh( geometry, material );// Add cube to Scenescene.add( cube );// Render Loopvar render = function () { requestAnimationFrame( render ); cube.rotation.x += 0.01; cube.rotation.y += 0.01; // Render the scene renderer.render(scene, camera);};render();}</script></body></html>