Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
ba64209
commit 3413d89
Showing
4 changed files
with
528 additions
and
6 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,208 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>WebVR + ThreeJS Application</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> | ||
|
|
||
| <!-- required --> | ||
| <script src="../boilerplate/node_modules/three/build/three.min.js"></script> | ||
| <!-- needed for loading GLTF files --> | ||
| <script src="../boilerplate/node_modules/three/examples/js/loaders/GLTFLoader.js"></script> | ||
|
|
||
| <!-- needed to enter VR --> | ||
| <script src="../boilerplate/webvr.js"></script> | ||
|
|
||
| <!-- stats (fps, polygons, fps) --> | ||
| <script src="../boilerplate/vrstats.js" type="module"></script> | ||
|
|
||
| <!-- mouse/touch/vr-controller support --> | ||
| <!--<script src="./pointer.js" type="module"></script>--> | ||
|
|
||
| <style type="text/css"> | ||
| html, body { | ||
| margin:0; | ||
| padding:0; | ||
| overflow: hidden; | ||
| } | ||
| #overlay { | ||
| position: fixed; | ||
| font-size: 5vh; | ||
| width: 100vw; | ||
| height: 100vh; | ||
| background-color: rgba(0,0,0,0.5); | ||
| text-align: center; | ||
| } | ||
| #loading-indicator { | ||
| display: block; | ||
| } | ||
| #click-to-play { | ||
| /*display: none;*/ | ||
| color: black; | ||
| background-color: white; | ||
| border: 1px solid black; | ||
| } | ||
|
|
||
| /* this button is generated by the VR subsystem, disabled if not available */ | ||
| #enter-vr { | ||
| position: absolute; | ||
| bottom: 20px; | ||
| left: 50%; | ||
| transform: translate(-50%,0); | ||
| } | ||
| </style> | ||
|
|
||
| </head> | ||
| <body> | ||
|
|
||
| <canvas id="debug-canvas" width="64" height="16" style="position:absolute;"></canvas> | ||
|
|
||
|
|
||
| <script type="module"> | ||
| import {POINTER_CLICK, POINTER_ENTER, POINTER_EXIT, Pointer} from '../boilerplate/pointer.js' | ||
| import VRStats from "../boilerplate/vrstats.js" | ||
|
|
||
| //JQuery-like selector | ||
| const $ = (sel) => document.querySelector(sel) | ||
| const on = (elem, type, cb) => elem.addEventListener(type,cb) | ||
|
|
||
| // global constants and variables for your app go here | ||
| let camera, scene, renderer, pointer, stats; | ||
|
|
||
|
|
||
| function generateTexture() { | ||
| const canvas = document.getElementById('debug-canvas') | ||
| const c = canvas.getContext('2d') | ||
| c.fillStyle = 'black' | ||
| c.fillRect(0,0,canvas.width, canvas.height) | ||
| c.fillStyle = 'red' | ||
| c.fillRect(0, 0, 30, canvas.height) | ||
| c.fillStyle = 'white' | ||
| c.fillRect(30, 0, 4, canvas.height) | ||
| c.fillStyle = 'green' | ||
| c.fillRect(34, 0, 30, canvas.height) | ||
| } | ||
|
|
||
|
|
||
| function generateOrnament(data) { | ||
| var points = []; | ||
| for ( var i = 0; i <= 16; i ++ ) { | ||
| points.push( new THREE.Vector2( Math.sin( i * 0.195 ) * 1.8 + 0, i*0.2 )); | ||
| } | ||
| var geometry = new THREE.LatheBufferGeometry( points, 8 ); | ||
| const tex = new THREE.CanvasTexture(document.getElementById('debug-canvas')) | ||
| tex.wrapS = THREE.RepeatWrapping | ||
| tex.repeat.set(8,1) | ||
| const mesh = new THREE.Mesh(geometry, new THREE.MeshStandardMaterial({ | ||
| // wireframe:true, | ||
| color:'white', | ||
| metalness:0.3, | ||
| roughness:0.3, | ||
| // vertexColors: THREE.VertexColors, | ||
| //required for flat shading | ||
| map:tex, | ||
| // flatShading:true, | ||
| })) | ||
| return mesh | ||
| } | ||
|
|
||
|
|
||
| let cube | ||
| //called on setup. Customize this | ||
| function initContent(scene,camera,renderer) { | ||
| //set the background color of the scene | ||
| scene.background = new THREE.Color( 0xcccccc ); | ||
|
|
||
| //a standard light | ||
| const light = new THREE.DirectionalLight( 0xffffff, 1.0 ); | ||
| light.position.set( -1, 3, 1 ).normalize(); | ||
| scene.add( light ); | ||
|
|
||
| const ambient = new THREE.AmbientLight(0xffffff,0.5) | ||
| scene.add(ambient) | ||
|
|
||
|
|
||
| const tex = generateTexture() | ||
| cube = generateOrnament(tex) | ||
| cube.position.z = -5 | ||
| //move cube up to camera height (~1.5m) | ||
| cube.position.y = 0.75 | ||
| scene.add(cube) | ||
|
|
||
|
|
||
| // enable stats visible inside VR | ||
| stats = new VRStats(renderer) | ||
| camera.add(stats) | ||
| scene.add(camera) | ||
|
|
||
| } | ||
|
|
||
| //called on every frame. customize this | ||
| function render(time) { | ||
| //update the pointer and stats, if configured | ||
| if(pointer) pointer.tick(time) | ||
| if(stats) stats.update(time) | ||
| //rotate the cube on every tick | ||
| if(cube) cube.rotation.y += 0.02 | ||
| renderer.render( scene, camera ); | ||
| } | ||
|
|
||
|
|
||
| // you shouldn't need to modify much below here | ||
|
|
||
| function initScene() { | ||
| //create DIV for the canvas | ||
| const container = document.createElement( 'div' ); | ||
| document.body.appendChild( container ); | ||
| scene = new THREE.Scene(); | ||
| camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 50 ); | ||
| renderer = new THREE.WebGLRenderer( { antialias: true } ); | ||
| renderer.setPixelRatio( window.devicePixelRatio ); | ||
| renderer.setSize( window.innerWidth, window.innerHeight ); | ||
| renderer.gammaOutput = true | ||
| renderer.vr.enabled = true; | ||
| container.appendChild( renderer.domElement ); | ||
| document.body.appendChild( WEBVR.createButton( renderer ) ); | ||
|
|
||
| initContent(scene,camera,renderer) | ||
|
|
||
| window.addEventListener( 'resize', ()=>{ | ||
| camera.aspect = window.innerWidth / window.innerHeight; | ||
| camera.updateProjectionMatrix(); | ||
| renderer.setSize( window.innerWidth, window.innerHeight ); | ||
| }, false ); | ||
|
|
||
| THREE.DefaultLoadingManager.onStart = (url, loaded, total) => { | ||
| console.log(`loading ${url}. loaded ${loaded} of ${total}`) | ||
| } | ||
| THREE.DefaultLoadingManager.onLoad = () => { | ||
| console.log(`loading complete`) | ||
| console.log("really setting it up now") | ||
| $('#loading-indicator').style.display = 'none' | ||
| $('#click-to-play').style.display = 'block' | ||
| const overlay = $('#overlay') | ||
| $("#click-to-play").addEventListener('click',()=>{ | ||
| overlay.style.visibility = 'hidden' | ||
| if($('#enter-vr')) $('#enter-vr').removeAttribute('disabled') | ||
| }) | ||
| } | ||
| THREE.DefaultLoadingManager.onProgress = (url, loaded, total) => { | ||
| console.log(`prog ${url}. loaded ${loaded} of ${total}`) | ||
| $("#progress").setAttribute('value',100*(loaded/total)) | ||
| } | ||
| THREE.DefaultLoadingManager.onError = (url) => { | ||
| console.log(`error loading ${url}`) | ||
| } | ||
|
|
||
|
|
||
| } | ||
|
|
||
|
|
||
|
|
||
| // initPage() | ||
| initScene() | ||
| renderer.setAnimationLoop(render) | ||
|
|
||
| </script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.