Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
webxr-polyfill/examples/boombox/index.html
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
115 lines (106 sloc)
3.29 KB
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
| <html> | |
| <head> | |
| <title>Boombox</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> | |
| <style> | |
| body, html { | |
| padding: 0; | |
| margin: 0; | |
| width: 100%; | |
| height: 100%; | |
| -webkit-user-select: none; | |
| user-select: none; | |
| } | |
| #target { | |
| width: 100%; | |
| height: 100%; | |
| position: absolute; | |
| } | |
| .common-message { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| font-size: 20px; | |
| } | |
| </style> | |
| <link rel="stylesheet" href="../common.css"/> | |
| <script src="../libs/three.min.js"></script> | |
| <script src="../libs/three-gltf-loader.js"></script> | |
| <!-- | |
| <script type="module" src="../../polyfill/XRPolyfill.js"></script> | |
| <script nomodule src="../../dist/webxr-polyfill.js"></script> | |
| --> | |
| <script src="../../dist/webxr-polyfill.js"></script> | |
| <script src="../common.js"></script> | |
| </head> | |
| <body> | |
| <div id="target" /> | |
| <div onclick="hideMe(this)" id="description"> | |
| <h2>Boombox</h2> | |
| <h5>(click to dismiss)</h5> | |
| <p>Shows a boombox in a VR environment.</p> | |
| </div> | |
| <script> | |
| /* | |
| ARSimplestExample shows how to populate the content scene | |
| */ | |
| class ARSimplestExample extends XRExampleBase { | |
| constructor(domElement){ | |
| super(domElement, false) | |
| } | |
| // Called during construction to allow the app to populate the THREE.Scene | |
| initializeScene(){ | |
| // Add a box on the floor | |
| const box = new THREE.Mesh( | |
| new THREE.BoxBufferGeometry(0.1, 0.1, 0.1), | |
| new THREE.MeshPhongMaterial({ color: '#DDFFDD' }) | |
| ) | |
| box.position.set(0, 0, 0) | |
| this.floorGroup.add(box) | |
| this.scene.background = new THREE.Color(0x222222) | |
| // Add some lights to the scene | |
| this.scene.add(new THREE.AmbientLight('#FFF', 0.2)) | |
| const directionalLight = new THREE.DirectionalLight('#FFF', 0.6) | |
| directionalLight.position.set(0, 10, 0) | |
| this.scene.add(directionalLight) | |
| // Create the environment map | |
| const path = '../textures/Park2/' | |
| const format = '.jpg' | |
| this.envMap = new THREE.CubeTextureLoader().load([ | |
| path + 'posx' + format, path + 'negx' + format, | |
| path + 'posy' + format, path + 'negy' + format, | |
| path + 'posz' + format, path + 'negz' + format | |
| ]) | |
| this.envMap.format = THREE.RGBFormat | |
| this.scene.background = this.envMap | |
| // Add the boom box | |
| loadGLTF('../models/BoomBox/glTF-pbrSpecularGlossiness/BoomBox.gltf').then(gltf => { | |
| gltf.scene.scale.set(15, 15, 15) | |
| gltf.scene.position.set(0, 1, -1.2) | |
| gltf.scene.quaternion.setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI) | |
| gltf.scene.traverse(node => { | |
| if (node.material && (node.material.isMeshStandardMaterial || (node.material.isShaderMaterial && node.material.envMap !== undefined))){ | |
| node.material.envMap = this.envMap | |
| node.material.needsUpdate = true | |
| } | |
| }) | |
| this.floorGroup.add(gltf.scene) | |
| }).catch((...params) =>{ | |
| console.error('could not load gltf', ...params) | |
| }) | |
| } | |
| } | |
| window.addEventListener('DOMContentLoaded', () => { | |
| setTimeout(() => { | |
| try { | |
| window.pageApp = new ARSimplestExample(document.getElementById('target')) | |
| } catch(e) { | |
| console.error('page error', e) | |
| } | |
| }, 1000) | |
| }) | |
| </script> | |
| </body> | |
| </html> |