587 lines
17 KiB
HTML
587 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<title>Web VR boilerplate</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<style>
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #000;
|
|
color: #fff;
|
|
margin: 0px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
/* Position the button on the bottom of the page. */
|
|
|
|
#ui {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
text-align: center;
|
|
font-family: 'Karla', sans-serif;
|
|
z-index: 1;
|
|
}
|
|
|
|
#magic-window {
|
|
display: block;
|
|
color: white;
|
|
margin-top: 1em;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="ui">
|
|
<div id="vr-button"></div>
|
|
<a id="magic-window">Try it without a headset</a>
|
|
</div>
|
|
</body>
|
|
|
|
<script>
|
|
/*
|
|
* Debug parameters.
|
|
*/
|
|
WebVRConfig = {
|
|
/**
|
|
* webvr-polyfill configuration
|
|
*/
|
|
|
|
// Forces availability of VR mode.
|
|
//FORCE_ENABLE_VR: true, // Default: false.
|
|
// Complementary filter coefficient. 0 for accelerometer, 1 for gyro.
|
|
//K_FILTER: 0.98, // Default: 0.98.
|
|
// How far into the future to predict during fast motion.
|
|
//PREDICTION_TIME_S: 0.040, // Default: 0.040 (in seconds).
|
|
// Flag to disable touch panner. In case you have your own touch controls
|
|
//TOUCH_PANNER_DISABLED: true, // Default: false.
|
|
// Enable yaw panning only, disabling roll and pitch. This can be useful for
|
|
// panoramas with nothing interesting above or below.
|
|
//YAW_ONLY: true, // Default: false.
|
|
// Enable the deprecated version of the API (navigator.getVRDevices).
|
|
//ENABLE_DEPRECATED_API: true, // Default: false.
|
|
// Scales the recommended buffer size reported by WebVR, which can improve
|
|
// performance. Making this very small can lower the effective resolution of
|
|
// your scene.
|
|
BUFFER_SCALE: 0.5, // default: 1.0
|
|
// Allow VRDisplay.submitFrame to change gl bindings, which is more
|
|
// efficient if the application code will re-bind it's resources on the
|
|
// next frame anyway.
|
|
// Dirty bindings include: gl.FRAMEBUFFER_BINDING, gl.CURRENT_PROGRAM,
|
|
// gl.ARRAY_BUFFER_BINDING, gl.ELEMENT_ARRAY_BUFFER_BINDING,
|
|
// and gl.TEXTURE_BINDING_2D for texture unit 0
|
|
// Warning: enabling this might lead to rendering issues.
|
|
//DIRTY_SUBMIT_FRAME_BINDINGS: true // default: false
|
|
};
|
|
</script>
|
|
|
|
<!--
|
|
A polyfill for Promises. Needed for IE and Edge.
|
|
-->
|
|
<script src="node_modules/es6-promise/dist/es6-promise.min.js"></script>
|
|
|
|
<!--
|
|
three.js 3d library
|
|
-->
|
|
<script src="node_modules/three/build/three.min.js"></script>
|
|
|
|
<!--
|
|
VRControls.js acquires positional information from connected VR devices and applies the transformations to a three.js camera object.
|
|
-->
|
|
<script src="node_modules/three/examples/js/controls/VRControls.js"></script>
|
|
|
|
<!--
|
|
VREffect.js handles stereo camera setup and rendering.
|
|
-->
|
|
<script src="node_modules/three/examples/js/effects/VREffect.js"></script>
|
|
|
|
<!--
|
|
A polyfill for WebVR using the Device{Motion,Orientation}Event API.
|
|
-->
|
|
<script src="node_modules/webvr-polyfill/build/webvr-polyfill.min.js"></script>
|
|
|
|
<!--
|
|
A set of UI controls for entering VR mode.
|
|
-->
|
|
<script src="node_modules/webvr-ui/build/webvr-ui.min.js"></script>
|
|
|
|
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.5.0.js"></script>
|
|
|
|
<script src="./orbit-gamepad.js"></script>
|
|
|
|
|
|
<script>
|
|
var pubnub = new PubNub({
|
|
publishKey: 'pub-c-7f43492c-431c-4404-b7a7-96ee3f60086a',
|
|
subscribeKey: 'sub-c-1fd379da-067e-11e7-83b6-0619f8945a4f'
|
|
})
|
|
|
|
var heightOfUser = 1.6;
|
|
|
|
if (isClient()) {
|
|
// Subscribe to the demo_tutorial channel
|
|
pubnub.addListener({
|
|
message: function(message) {
|
|
if (vrButton.isPresenting()) {
|
|
var newMatrix = message.message;
|
|
console.log(newMatrix);
|
|
camera.matrix.fromArray(message.message.camera);
|
|
camera.matrix.decompose(camera.position, camera.quaternion, camera.scale);
|
|
dollyCam.matrix.fromArray(message.message.dollyCam);
|
|
dollyCam.matrix.decompose(dollyCam.position, dollyCam.quaternion, dollyCam.scale);
|
|
effect.render(scene, camera);
|
|
controls.update();
|
|
}
|
|
}
|
|
})
|
|
|
|
pubnub.subscribe({
|
|
channels: ['cameramatrix']
|
|
});
|
|
}
|
|
|
|
function isClient() {
|
|
return window.location.hash === '#client';
|
|
}
|
|
|
|
var oldCameraMatrix;
|
|
var CAM_DELTA = 0.02;
|
|
|
|
function matrixChanged(oldMatrix, newMatrix) {
|
|
if (!oldMatrix) {
|
|
return true;
|
|
}
|
|
var oldLength = oldMatrix.length;
|
|
var newLength = newMatrix.length;
|
|
if (oldLength != newLength) {
|
|
return true;
|
|
}
|
|
|
|
for (var i = 0; i < newLength; i++) {
|
|
if (Math.abs(oldMatrix[i] - newMatrix[i]) > CAM_DELTA) {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
function publishSampleMessage() {
|
|
|
|
if (window.location.hash !== '#presenter') {
|
|
return;
|
|
}
|
|
|
|
var newCameraMatrix = camera.matrix.toArray();
|
|
var newDollyCamMatrix = dollyCam.matrix.toArray();
|
|
var publishConfig = {
|
|
channel: "cameramatrix",
|
|
message: {
|
|
camera: newCameraMatrix,
|
|
dollyCam: newDollyCamMatrix
|
|
}
|
|
}
|
|
|
|
if (matrixChanged(oldCameraMatrix, newCameraMatrix)) {
|
|
pubnub.publish(publishConfig, function(status, response) {
|
|
//console.log(status, response);
|
|
})
|
|
oldCameraMatrix = newCameraMatrix;
|
|
}
|
|
}
|
|
// Last time the scene was rendered.
|
|
var lastRenderTime = 0;
|
|
// Currently active VRDisplay.
|
|
var vrDisplay;
|
|
// How big of a sphere to render.
|
|
var boxSize = 100;
|
|
// Various global THREE.Objects.
|
|
var scene;
|
|
var cube;
|
|
var controls;
|
|
var orbitControls;
|
|
var effect;
|
|
var camera;
|
|
var dollyCam;
|
|
// EnterVRButton for rendering enter/exit UI.
|
|
var vrButton;
|
|
|
|
|
|
function loadFont(afterFont) {
|
|
|
|
var loader = new THREE.FontLoader();
|
|
loader.load('fonts/helvetiker_regular.typeface.json', function(response) {
|
|
|
|
font = response;
|
|
if (afterFont) {
|
|
afterFont();
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
function degreesToRadians(degrees) {
|
|
return degrees * (Math.PI / 180.0);
|
|
}
|
|
|
|
function onLoad() {
|
|
// Setup three.js WebGL renderer. Note: Antialiasing is a big performance hit.
|
|
// Only enable it if you actually need to.
|
|
var renderer = new THREE.WebGLRenderer({
|
|
antialias: true
|
|
});
|
|
renderer.setPixelRatio(window.devicePixelRatio);
|
|
|
|
// Append the canvas element created by the renderer to document body element.
|
|
document.body.appendChild(renderer.domElement);
|
|
|
|
// Create a three.js scene.
|
|
scene = new THREE.Scene();
|
|
|
|
// Create a three.js camera.
|
|
var aspect = window.innerWidth / window.innerHeight;
|
|
camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 10000);
|
|
|
|
var dummyControls = {
|
|
update: function() {}
|
|
};
|
|
|
|
controls = (!isClient()) ? new THREE.VRControls(camera) : dummyControls;
|
|
controls.standing = true;
|
|
camera.position.y = heightOfUser;
|
|
var oldUpdate = controls.update;
|
|
controls.update = function() {
|
|
oldUpdate();
|
|
publishSampleMessage();
|
|
};
|
|
|
|
// The dolly has to be a PerspectiveCamera, as opposed
|
|
// to a simple Object3D, since that's what
|
|
// OrbitControls expects.
|
|
dollyCam = new THREE.PerspectiveCamera(75, aspect, 0.1, 10000);
|
|
/*var orbitControls = new THREE.OrbitControls(dollyCam); */
|
|
|
|
dollyCam.add(camera);
|
|
//orbitControls = new OrbitControls(dollyCam);
|
|
scene.add(dollyCam);
|
|
|
|
|
|
// Apply VR stereo rendering to renderer.
|
|
effect = new THREE.VREffect(renderer);
|
|
effect.setSize(window.innerWidth, window.innerHeight);
|
|
|
|
// Add a repeating grid as a skybox.
|
|
var loader = new THREE.TextureLoader();
|
|
loader.load('img/livada.jpg', onTextureLoaded);
|
|
|
|
// Create 3D objects.
|
|
var geometry = new THREE.SphereGeometry(0.5, 0.5, 0.5);
|
|
var material = new THREE.MeshNormalMaterial();
|
|
cube = new THREE.Mesh(geometry, material);
|
|
|
|
// Position cube mesh to be right in front of you.
|
|
cube.position.set(0, heightOfUser, -1);
|
|
|
|
// Add cube mesh to your three.js scene
|
|
//scene.add(cube);
|
|
|
|
window.addEventListener('resize', onResize, true);
|
|
window.addEventListener('vrdisplaypresentchange', onResize, true);
|
|
|
|
// Initialize the WebVR UI.
|
|
var uiOptions = {
|
|
color: 'black',
|
|
background: 'white',
|
|
corners: 'square'
|
|
};
|
|
vrButton = new webvrui.EnterVRButton(renderer.domElement, uiOptions);
|
|
vrButton.on('exit', function() {
|
|
camera.quaternion.set(0, 0, 0, 1);
|
|
camera.position.set(0, heightOfUser, 0);
|
|
});
|
|
vrButton.on('hide', function() {
|
|
document.getElementById('ui').style.display = 'none';
|
|
});
|
|
vrButton.on('show', function() {
|
|
document.getElementById('ui').style.display = 'inherit';
|
|
});
|
|
document.getElementById('vr-button').appendChild(vrButton.domElement);
|
|
document.getElementById('magic-window').addEventListener('click', function() {
|
|
vrButton.requestEnterFullscreen();
|
|
});
|
|
|
|
var light = new THREE.PointLight(0xffffff, 1, 300);
|
|
light.position.set(0, 4.9, 0);
|
|
scene.add(light);
|
|
|
|
loadFont(function() {
|
|
displayText("Web VR", {
|
|
color: 0xffaa00,
|
|
size: 0.5,
|
|
height: 0.01,
|
|
specular: 0xaaaaaa
|
|
}, {
|
|
x: -1.2,
|
|
y: heightOfUser + 0.5,
|
|
z: -2
|
|
});
|
|
|
|
displayText("By Senad Uka", {
|
|
color: 0x00ff00,
|
|
size: 0.3,
|
|
height: 0.01,
|
|
specular: 0xaaaaaa
|
|
}, {
|
|
x: 2,
|
|
y: heightOfUser + 2,
|
|
z: -2
|
|
}, {
|
|
x: 0.1,
|
|
y: degreesToRadians(-35),
|
|
z: 0
|
|
});
|
|
|
|
displayText("JS Meetup Sarajevo", {
|
|
color: 0xaaff12,
|
|
size: 0.3,
|
|
height: 0.02,
|
|
specular: 0x11aaaa
|
|
}, {
|
|
x: 2,
|
|
y: heightOfUser - 1,
|
|
z: -2
|
|
}, {
|
|
x: degreesToRadians(-40),
|
|
y: degreesToRadians(0),
|
|
z: 0
|
|
});
|
|
});
|
|
|
|
displayPicture('./img/jsmeetup.jpeg');
|
|
}
|
|
|
|
function onTextureLoaded(texture) {
|
|
texture.wrapS = THREE.RepeatWrapping;
|
|
texture.wrapT = THREE.RepeatWrapping;
|
|
//texture.repeat.set(boxSize, boxSize);
|
|
|
|
var geometry = new THREE.SphereGeometry(boxSize, boxSize, boxSize);
|
|
var material = new THREE.MeshBasicMaterial({
|
|
map: texture,
|
|
/* color: 0x01BE00,
|
|
side: THREE.BackSide */
|
|
});
|
|
|
|
|
|
// Align the skybox to the floor (which is at y=0).
|
|
skybox = new THREE.Mesh(geometry, material);
|
|
skybox.position.y = boxSize / 3;
|
|
skybox.scale.x = -1;
|
|
scene.add(skybox);
|
|
|
|
// For high end VR devices like Vive and Oculus, take into account the stage
|
|
// parameters provided.
|
|
setupStage();
|
|
}
|
|
|
|
|
|
// Request animation frame loop function
|
|
function animate(timestamp) {
|
|
var delta = Math.min(timestamp - lastRenderTime, 500);
|
|
lastRenderTime = timestamp;
|
|
|
|
// Apply rotation to cube mesh
|
|
cube.rotation.y += delta * 0.0006;
|
|
|
|
// Only update controls if we're presenting.
|
|
if (vrButton.isPresenting()) {
|
|
controls.update();
|
|
}
|
|
// Render the scene.
|
|
effect.render(scene, camera);
|
|
|
|
vrDisplay.requestAnimationFrame(animate);
|
|
}
|
|
|
|
function onResize(e) {
|
|
effect.setSize(window.innerWidth, window.innerHeight);
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.updateProjectionMatrix();
|
|
}
|
|
|
|
// Get the HMD, and if we're dealing with something that specifies
|
|
// stageParameters, rearrange the scene.
|
|
function setupStage() {
|
|
navigator.getVRDisplays().then(function(displays) {
|
|
if (displays.length > 0) {
|
|
vrDisplay = displays[0];
|
|
if (vrDisplay.stageParameters) {
|
|
setStageDimensions(vrDisplay.stageParameters);
|
|
}
|
|
vrDisplay.requestAnimationFrame(animate);
|
|
}
|
|
});
|
|
}
|
|
|
|
function setStageDimensions(stage) {
|
|
// Make the skybox fit the stage.
|
|
var material = skybox.material;
|
|
scene.remove(skybox);
|
|
|
|
// Size the skybox according to the size of the actual stage.
|
|
var geometry = new THREE.BoxGeometry(stage.sizeX, boxSize, stage.sizeZ);
|
|
skybox = new THREE.Mesh(geometry, material);
|
|
|
|
// Place it on the floor.
|
|
skybox.position.y = boxSize / 2;
|
|
//scene.add(skybox);
|
|
|
|
// Place the cube in the middle of the scene, at user height.
|
|
cube.position.set(0, heightOfUser, 0);
|
|
}
|
|
|
|
var currentCityTextMesh;
|
|
|
|
function displayText(text,
|
|
format = {
|
|
color: 0xffaa00,
|
|
specular: 0xaaaaaa,
|
|
size: 0.5,
|
|
height: 0.01,
|
|
},
|
|
position = {
|
|
y: heightOfUser,
|
|
x: 0,
|
|
z: -1
|
|
}, rotation = {
|
|
x: 0,
|
|
y: 0,
|
|
z: 0
|
|
|
|
}) {
|
|
currentCityText = new THREE.TextGeometry(text, {
|
|
size: format.size,
|
|
height: format.height,
|
|
font: font,
|
|
curveSegments: 12,
|
|
bevelThickness: 0.01,
|
|
bevelSize: 0.01,
|
|
bevelEnabled: false
|
|
});
|
|
|
|
currentCityTextMesh = new THREE.Mesh(currentCityText, new THREE.MeshPhongMaterial({
|
|
color: format.color,
|
|
specular: format.specular
|
|
}));
|
|
|
|
|
|
currentCityTextMesh.position.y = position.y;
|
|
currentCityTextMesh.position.z = position.z;
|
|
currentCityTextMesh.position.x = position.x;
|
|
|
|
|
|
currentCityTextMesh.rotateX(rotation.x);
|
|
currentCityTextMesh.rotateY(rotation.y);
|
|
currentCityTextMesh.rotateZ(rotation.z);
|
|
|
|
scene.add(currentCityTextMesh);
|
|
}
|
|
|
|
function displayPicture(picture,
|
|
format = {
|
|
width: 5,
|
|
height: 2.5,
|
|
depth: 0.1,
|
|
},
|
|
position = {
|
|
y: heightOfUser,
|
|
x: 0,
|
|
z: -9
|
|
}, rotation = {
|
|
x: 0,
|
|
y: 0,
|
|
z: 0
|
|
|
|
}) {
|
|
|
|
// Add a repeating grid as a skybox.
|
|
var loader = new THREE.TextureLoader();
|
|
loader.load(picture, function(texture) {
|
|
|
|
var geometry = new THREE.BoxGeometry(format.width, format.height, format.depth);
|
|
var material = new THREE.MeshBasicMaterial({
|
|
map: texture,
|
|
/* color: 0x01BE00,
|
|
side: THREE.BackSide */
|
|
});
|
|
var display = new THREE.Mesh(geometry, material);
|
|
|
|
display.position.y = position.y;
|
|
display.position.z = position.z;
|
|
display.position.x = position.x;
|
|
|
|
|
|
display.rotateX(rotation.x);
|
|
display.rotateY(rotation.y);
|
|
display.rotateZ(rotation.z);
|
|
|
|
scene.add(display);
|
|
});
|
|
}
|
|
|
|
|
|
function buttonPressed(buttonNumber) {
|
|
var keyPanSpeed = 1;
|
|
var direction = camera.getWorldDirection();
|
|
var vectorUp = new THREE.Vector3(0, 1, 0);
|
|
var strafeVector = new THREE.Vector3().crossVectors(vectorUp, direction).normalize();
|
|
|
|
switch (buttonNumber) {
|
|
|
|
case 6:
|
|
|
|
dollyCam.position.add(direction.multiplyScalar(keyPanSpeed));
|
|
controls.update();
|
|
break;
|
|
|
|
case 7:
|
|
dollyCam.position.add(direction.multiplyScalar(-keyPanSpeed));
|
|
controls.update();
|
|
break;
|
|
|
|
case 8:
|
|
dollyCam.position.add(strafeVector.multiplyScalar(keyPanSpeed))
|
|
controls.update();
|
|
break;
|
|
|
|
case 9:
|
|
dollyCam.position.add(strafeVector.multiplyScalar(-keyPanSpeed))
|
|
controls.update();
|
|
break;
|
|
case 0:
|
|
dollyCam.position.x = 0;
|
|
dollyCam.position.y = 0;
|
|
dollyCam.position.z = 0;
|
|
controls.update();
|
|
break;
|
|
|
|
}
|
|
//alert(buttonNumber);
|
|
}
|
|
|
|
window.addEventListener('load', onLoad);
|
|
</script>
|
|
|
|
<script src="./gamepad.js"></script>
|
|
|
|
</html>
|