222 lines
7.2 KiB
HTML
222 lines
7.2 KiB
HTML
<!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="https://cdn.jsdelivr.net/npm/three@0.96.0/build/three.min.js"></script>
|
|
<!-- needed for loading GLTF files -->
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.96.0/examples/js/loaders/GLTFLoader.js"></script>
|
|
<!-- needed for loading Truetype Fonts -->
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.96.0/examples/js/loaders/TTFLoader.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.96.0/examples/js/libs/opentype.min.js"></script>
|
|
|
|
<!-- needed to enter VR -->
|
|
<script src="./static/js/webvr.js"></script>
|
|
|
|
<!-- stats (fps, polygons, fps) -->
|
|
<script src="./static/js/vrstats.js" type="module"></script>
|
|
|
|
<!-- mouse/touch/vr-controller support -->
|
|
<script src="./static/js/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>
|
|
|
|
|
|
<div id="overlay">
|
|
<h1>Application Name</h1>
|
|
<div id="loading-indicator">
|
|
<label>loading</label>
|
|
<progress max="100" value="0" id="progress"></progress>
|
|
</div>
|
|
<h3 id="click-to-play">click to start</h3>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import {POINTER_CLICK, POINTER_ENTER, POINTER_EXIT, Pointer} from './static/js/pointer.js'
|
|
import VRStats from "./static/js/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;
|
|
|
|
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 );
|
|
|
|
//load a cat texture
|
|
const texture_loader = new THREE.TextureLoader()
|
|
//cat from http://creative-commons-cats.tumblr.com/page/3
|
|
const texture = texture_loader.load('./static/img/cat.jpg')
|
|
|
|
//create a cube
|
|
cube = new THREE.Mesh(
|
|
new THREE.BoxGeometry(1,1,1),
|
|
new THREE.MeshLambertMaterial({color:'white', map:texture})
|
|
)
|
|
//camera is at z=0, so move the cube back so we can see it
|
|
cube.position.z = -5
|
|
//move cube up to camera height (~1.5m)
|
|
cube.position.y = 1.5
|
|
//make it clickable
|
|
cube.userData.clickable = true
|
|
scene.add(cube)
|
|
|
|
//a standard light
|
|
const light = new THREE.DirectionalLight( 0xffffff, 1.0 );
|
|
light.position.set( 1, 1, 1 ).normalize();
|
|
scene.add( light );
|
|
|
|
|
|
|
|
|
|
|
|
// enable stats visible inside VR
|
|
stats = new VRStats(renderer)
|
|
camera.add(stats)
|
|
scene.add(camera)
|
|
|
|
//class which handles mouse and VR controller
|
|
pointer = new Pointer(scene,renderer,camera, {
|
|
|
|
//Pointer searches everything in the scene by default
|
|
//override this to match just certain things
|
|
intersectionFilter: ((o) => o.userData.clickable),
|
|
|
|
//make the camera pan when moving the mouse. good for simulating head turning on desktop
|
|
cameraFollowMouse:false,
|
|
|
|
// set to true to move the controller node forward and tilt with the mouse.
|
|
// good for testing VR controls on desktop
|
|
mouseSimulatesController:false,
|
|
|
|
})
|
|
|
|
|
|
//change cube to red BG when clicking
|
|
on(cube,POINTER_CLICK,()=>{
|
|
console.log("clicking on the cube")
|
|
cube.material.color.set(0xff0000)
|
|
})
|
|
//change cube to green BG when hovering over it
|
|
on(cube,POINTER_ENTER,()=>{
|
|
console.log("entering the cube")
|
|
cube.material.color.set(0x00ff00)
|
|
})
|
|
on(cube,POINTER_EXIT,()=>{
|
|
console.log('exiting the cube')
|
|
cube.material.color.set(0xffffff)
|
|
})
|
|
|
|
}
|
|
|
|
//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.002
|
|
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>
|