|
@@ -1,7 +1,7 @@
|
|
|
<!DOCTYPE html>
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
<html lang="en">
|
|
|
<head>
|
|
<head>
|
|
|
- <title>three.js vr - haptics</title>
|
|
|
|
|
|
|
+ <title>three.js xr - haptics</title>
|
|
|
<meta charset="utf-8">
|
|
<meta charset="utf-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|
|
<link type="text/css" rel="stylesheet" href="main.css">
|
|
<link type="text/css" rel="stylesheet" href="main.css">
|
|
@@ -9,7 +9,7 @@
|
|
|
<body>
|
|
<body>
|
|
|
|
|
|
|
|
<div id="info">
|
|
<div id="info">
|
|
|
- <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> vr - haptics
|
|
|
|
|
|
|
+ <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> xr - haptics
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Import maps polyfill -->
|
|
<!-- Import maps polyfill -->
|
|
@@ -29,7 +29,7 @@
|
|
|
|
|
|
|
|
import * as THREE from 'three';
|
|
import * as THREE from 'three';
|
|
|
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
|
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
|
|
- import { VRButton } from 'three/addons/webxr/VRButton.js';
|
|
|
|
|
|
|
+ import { XRButton } from 'three/addons/webxr/XRButton.js';
|
|
|
import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';
|
|
import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';
|
|
|
|
|
|
|
|
let container;
|
|
let container;
|
|
@@ -90,11 +90,7 @@
|
|
|
controls.update();
|
|
controls.update();
|
|
|
|
|
|
|
|
const floorGeometry = new THREE.PlaneGeometry( 4, 4 );
|
|
const floorGeometry = new THREE.PlaneGeometry( 4, 4 );
|
|
|
- const floorMaterial = new THREE.MeshStandardMaterial( {
|
|
|
|
|
- color: 0xeeeeee,
|
|
|
|
|
- roughness: 1.0,
|
|
|
|
|
- metalness: 0.0
|
|
|
|
|
- } );
|
|
|
|
|
|
|
+ const floorMaterial = new THREE.ShadowMaterial( { opacity: 0.25 } );
|
|
|
const floor = new THREE.Mesh( floorGeometry, floorMaterial );
|
|
const floor = new THREE.Mesh( floorGeometry, floorMaterial );
|
|
|
floor.rotation.x = - Math.PI / 2;
|
|
floor.rotation.x = - Math.PI / 2;
|
|
|
floor.receiveShadow = true;
|
|
floor.receiveShadow = true;
|
|
@@ -153,13 +149,9 @@
|
|
|
renderer.xr.enabled = true;
|
|
renderer.xr.enabled = true;
|
|
|
container.appendChild( renderer.domElement );
|
|
container.appendChild( renderer.domElement );
|
|
|
|
|
|
|
|
- document.body.appendChild( VRButton.createButton( renderer ) );
|
|
|
|
|
-
|
|
|
|
|
- document.getElementById( 'VRButton' ).addEventListener( 'click', () => {
|
|
|
|
|
|
|
+ document.body.appendChild( XRButton.createButton( renderer ) );
|
|
|
|
|
|
|
|
- initAudio();
|
|
|
|
|
-
|
|
|
|
|
- } );
|
|
|
|
|
|
|
+ document.getElementById( 'XRButton' ).addEventListener( 'click', initAudio );
|
|
|
|
|
|
|
|
// controllers
|
|
// controllers
|
|
|
|
|
|
Mr.doob
