Added first vr example

boytchev · Jul 28, 2024 · 22f4cf8 · 22f4cf8
1 parent 1fdf057
commit 22f4cf8
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 5 deletions.
diff --git a/docs/example-vr.html b/docs/example-vr.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+	<script src="../src/importmap.js"></script>
+</head>
+
+<body>
+	<script type="module">
+
+	import "mannequin";
+	import "./fonts/label.js";
+	import { VRButton } from 'three/addons/webxr/VRButton.js';
+
+	createScene( animate );
+
+	document.body.appendChild( VRButton.createButton( renderer ) );
+	console.log(renderer)
+	renderer.xr.enabled = true;
+
+	var man = new Male();
+	man.position.x = -1;
+
+	var woman = new Female();
+	woman.position.x = 1;
+
+	// stick
+	var geometry = new THREE.CylinderGeometry( 0.4, 0.4, 72 ),
+		material = new THREE.MeshPhongMaterial( { color: 'crimson' } ),
+		stick = new THREE.Mesh( geometry, material );
+
+	stick.rotation.x = rad( 90 );
+	stick.position.set( -1, 0.25, 0 );
+	stick.castShadow = true;
+
+	man.r_fingers.attach( stick );
+	woman.r_fingers.attach( stick.clone() );
+
+	// posture from example-posture.html
+	var A = { "version": 7, "data": [[ 0, -7.2, 0 ], [ 90, -85, 74.8 ], [ 16.1, -29.5, 26.3 ], [ 3.5, -34.8, 6.1 ], [ 14.1, -2.9, -19.8 ], [ 30 ], [ -6, -6, -42.6 ], [ 14.6, -46.9, 98.9 ], [ 90 ], [ 4.9, 9, -15.4 ], [ 68.9, -34.7, -2.1 ], [ 155 ], [ -20, 0, 0 ], [ -90, 70, 85, 0, -5, 0, -5 ], [ 0, 0, -10, 0, -10, 0, -10 ], [ 0, 0, -10, 0, -10, 0, -10 ], [ 0, 0, -10, 0, -10, 0, -10 ], [ 0, 0, -10, 0, -10, 0, -10 ], [ -77, 4.9, -1.1 ], [ 55 ], [ -5, -60, -20 ], [ 148.7, -4.4, 127.3, 0, 50, 0, 35 ], [ 0, 0, 70, 0, 70, 0, 70 ], [ 0, 0, 70, 0, 70, 0, 70 ], [ 0, 0, 70, 0, 70, 0, 70 ], [ 0, 0, 70, 0, 70, 0, 70 ]] };
+
+	// posture from example-posture-standing.html
+	var B = { "version": 7, "data": [[ 0, 2.8, 0 ], [ 0, -90, 0 ], [ 0, 0, -2 ], [ 0, 0, 5 ], [ 16, 0, 0 ], [ 0 ], [ -16.1, -5.8, -1.7 ], [ -16, 0, 0 ], [ 0 ], [ 16.1, 5.8, -1.7 ], [ 15.1, -11.3, -12 ], [ 30 ], [ 5, 0, 0 ], [ -90, 70, 100, 0, 10, 0, 10 ], [ 0, 0, 20, 0, 20, 0, 20 ], [ 0, 0, 20, 0, 20, 0, 20 ], [ 0, 0, 20, 0, 20, 0, 20 ], [ 0, 0, 20, 0, 20, 0, 20 ], [ -28.4, 8.1, -18.3 ], [ 70 ], [ -5, 28, 37.4 ], [ 148.7, -4.4, 127.3, 0, 50, 0, 35 ], [ 0, 0, 70, 0, 70, 0, 70 ], [ 0, 0, 70, 0, 70, 0, 70 ], [ 0, 0, 70, 0, 70, 0, 70 ], [ 0, 0, 70, 0, 70, 0, 70 ]] };
+
+	man.posture = A;
+	woman.posture = A;
+
+	function animate( t ) {
+
+		var k = THREE.MathUtils.clamp( 0.5 + sin( t ), 0, 1 );
+
+		// blend posture between A and B
+		man.posture = Mannequin.blend( A, B, k );
+		man.rotation.y = Math.PI / 2;
+
+		// copy posture from one figure to another
+		woman.posture = man.posture;
+		woman.rotation.y = -Math.PI / 2;
+
+		man.stepOnGround( );
+		woman.stepOnGround( );
+
+	}
+
+	</script>
+</body>
+
+</html>
diff --git a/src/importmap.js b/src/importmap.js
@@ -7,8 +7,8 @@ const im = document.createElement( 'script' );
 im.type = 'importmap';
 im.textContent = JSON.stringify( {
 	imports: {
-		"three": "https://cdn.jsdelivr.net/npm/three@0.166.0/build/three.module.js",
-		"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.166.0/examples/jsm/",
+		"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+		"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 		"mannequin": PATH+"/mannequin.js",
 		"mannequin/": PATH+"/"
 	}

diff --git a/src/mannequin.js b/src/mannequin.js
@@ -18,7 +18,7 @@
 
 import * as THREE from 'three';
 import { cos, GROUND_LEVEL, rad, setColors, sin } from './globals.js';
-import { createScene, scene } from './scene.js';
+import { createScene, scene, renderer } from './scene.js';
 import { Mannequin } from './bodies/Mannequin.js';
 import { Female } from './bodies/Female.js';
 import { Male } from './bodies/Male.js';
@@ -115,11 +115,12 @@ window.sin = sin;
 window.cos = cos;
 window.rad = rad;
 window.THREE = THREE;
-window.scene = scene;
+window.scene = scene; // reset in scene.js
+window.renderer = renderer; // reset in scene.js
 window.createScene = createScene;
 window.setColors = setColors;
 window.GROUND_LEVEL = GROUND_LEVEL;
 
 export { createScene, Female, Male, Child, Mannequin };
 export { rad, sin, cos, grad, setColors, GROUND_LEVEL } from './globals.js';
-export { scene, animateFrame } from './scene.js';
+export { scene, animateFrame, renderer } from './scene.js';
diff --git a/src/scene.js b/src/scene.js
@@ -33,6 +33,7 @@ function createScene( animateFunction ) {
 	scene = new THREE.Scene();
 	scene.background = new THREE.Color( 'gainsboro' );
 	window.scene = scene;
+	window.renderer = renderer;
 
 	camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 0.1, 2000 );
 	camera.position.set( 0, 0, 5 );