From 22f4cf8a740bdfd7c1c4a41d2e82480c221ac7ec Mon Sep 17 00:00:00 2001
From: boytchev <70705048+boytchev@users.noreply.github.com>
Date: Sun, 28 Jul 2024 14:43:21 +0300
Subject: [PATCH] Added first vr example

---
 docs/example-vr.html | 69 ++++++++++++++++++++++++++++++++++++++++++++
 src/importmap.js     |  4 +--
 src/mannequin.js     |  7 +++--
 src/scene.js         |  1 +
 4 files changed, 76 insertions(+), 5 deletions(-)
 create mode 100644 docs/example-vr.html
diff --git a/docs/example-vr.html b/docs/example-vr.html
new file mode 100644
index 0000000..5d37160
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/importmap.js b/src/importmap.js
index 478fcb3..3bd48b6 100644
--- 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
index 4ce280a..c5bc8fe 100644
--- 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
index 335c3b3..842825c 100644
--- 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 );
