From 8a822eddbe2210bc4a0efb2a049d3ae8c85897d0 Mon Sep 17 00:00:00 2001 From: timondev Date: Mon, 10 Oct 2022 16:50:45 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Fixed=20bugs=20regarding=20Three?= =?UTF-8?q?.js?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 146 ++------------------------------- package.json | 1 - src/index.js | 1 - src/lib/ColorWheel.js | 77 +++++++++-------- src/lib/shaders.js | 71 ++-------------- src/lib/utils.js | 9 +- src/rooms/Hall.js | 143 +++++++++++++++++--------------- src/rooms/Panorama.js | 2 +- src/rooms/PanoramaStereo.js | 26 +++--- src/rooms/Sound.js | 109 +++++++++++++----------- src/stations/PanoBalls.js | 32 ++++---- src/systems/BillboardSystem.js | 6 +- 12 files changed, 240 insertions(+), 383 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5524900..e614ab4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,6 @@ "three": "^0.145.0", "three-obj-loader": "^1.1.3", "three-pointerlock": "0.0.2", - "troika-3d-text": "^0.46.4", "troika-three-text": "^0.46.4", "webxr-polyfill": "^2.0.1" }, @@ -5156,7 +5155,8 @@ "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "dev": true }, "node_modules/jsesc": { "version": "2.5.2", @@ -5475,17 +5475,6 @@ "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==", "dev": true }, - "node_modules/loose-envify": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", - "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "dependencies": { - "js-tokens": "^3.0.0 || ^4.0.0" - }, - "bin": { - "loose-envify": "cli.js" - } - }, "node_modules/lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", @@ -5909,6 +5898,8 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "dev": true, + "peer": true, "engines": { "node": ">=0.10.0" } @@ -6392,16 +6383,6 @@ "dev": true, "peer": true }, - "node_modules/prop-types": { - "version": "15.8.1", - "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", - "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dependencies": { - "loose-envify": "^1.4.0", - "object-assign": "^4.1.1", - "react-is": "^16.13.1" - } - }, "node_modules/prr": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", @@ -6516,11 +6497,6 @@ "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==", "dev": true }, - "node_modules/react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" - }, "node_modules/react-refresh": { "version": "0.9.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz", @@ -7345,57 +7321,6 @@ "node": ">=0.10.0" } }, - "node_modules/troika-3d": { - "version": "0.46.0", - "resolved": "https://registry.npmjs.org/troika-3d/-/troika-3d-0.46.0.tgz", - "integrity": "sha512-mzOTcB8OOpvZIoKvbwLLmJ1Elj5jt51jZveT5QZ7HSdlSoSEV7EilYorT1s6qtVl/FX/LCBi8s2ACD8adubuyg==", - "dependencies": { - "troika-core": "^0.46.0", - "troika-three-utils": "^0.46.0" - }, - "peerDependencies": { - "three": ">=0.103.0" - } - }, - "node_modules/troika-3d-text": { - "version": "0.46.4", - "resolved": "https://registry.npmjs.org/troika-3d-text/-/troika-3d-text-0.46.4.tgz", - "integrity": "sha512-BKdss19dFKruXeDyCIou4rgG1jEY54vuxU3R0FNd2IKzFhfx50UdqAykg/vrmKmN6kQrvRplcjYvtMrui9Q8bw==", - "dependencies": { - "troika-3d": "^0.46.0", - "troika-three-text": "^0.46.4", - "troika-three-utils": "^0.46.0" - }, - "peerDependencies": { - "three": ">=0.103.0" - } - }, - "node_modules/troika-animation": { - "version": "0.46.0", - "resolved": "https://registry.npmjs.org/troika-animation/-/troika-animation-0.46.0.tgz", - "integrity": "sha512-4Bete4PY/Hfdu1ioHA1XH8uax4Jj14QemwvLWXm2RI4CH5IW5IrXiFBLbnVjWS7sbzK9Aqg2GdcZk6nmT5gtGg==" - }, - "node_modules/troika-core": { - "version": "0.46.0", - "resolved": "https://registry.npmjs.org/troika-core/-/troika-core-0.46.0.tgz", - "integrity": "sha512-HQRfXtd9aJeHQpXWMYEswvQYIk5H+Wrk9fFvB9RfCZPLjhRbF8vT3+g5OqfQ5A0zf7OY564hpW68zO+jnYWJQg==", - "dependencies": { - "prop-types": "^15.6.2", - "troika-animation": "^0.46.0" - }, - "peerDependencies": { - "react": "^16.5.2", - "react-dom": "^16.5.2" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } - } - }, "node_modules/troika-three-text": { "version": "0.46.4", "resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.46.4.tgz", @@ -11891,7 +11816,8 @@ "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "dev": true }, "jsesc": { "version": "2.5.2", @@ -12075,14 +12001,6 @@ "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==", "dev": true }, - "loose-envify": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", - "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "requires": { - "js-tokens": "^3.0.0 || ^4.0.0" - } - }, "lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", @@ -12455,7 +12373,9 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "dev": true, + "peer": true }, "object-copy": { "version": "0.1.0", @@ -12839,16 +12759,6 @@ "dev": true, "peer": true }, - "prop-types": { - "version": "15.8.1", - "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", - "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "requires": { - "loose-envify": "^1.4.0", - "object-assign": "^4.1.1", - "react-is": "^16.13.1" - } - }, "prr": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", @@ -12955,11 +12865,6 @@ "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==", "dev": true }, - "react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" - }, "react-refresh": { "version": "0.9.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz", @@ -13654,39 +13559,6 @@ "repeat-string": "^1.6.1" } }, - "troika-3d": { - "version": "0.46.0", - "resolved": "https://registry.npmjs.org/troika-3d/-/troika-3d-0.46.0.tgz", - "integrity": "sha512-mzOTcB8OOpvZIoKvbwLLmJ1Elj5jt51jZveT5QZ7HSdlSoSEV7EilYorT1s6qtVl/FX/LCBi8s2ACD8adubuyg==", - "requires": { - "troika-core": "^0.46.0", - "troika-three-utils": "^0.46.0" - } - }, - "troika-3d-text": { - "version": "0.46.4", - "resolved": "https://registry.npmjs.org/troika-3d-text/-/troika-3d-text-0.46.4.tgz", - "integrity": "sha512-BKdss19dFKruXeDyCIou4rgG1jEY54vuxU3R0FNd2IKzFhfx50UdqAykg/vrmKmN6kQrvRplcjYvtMrui9Q8bw==", - "requires": { - "troika-3d": "^0.46.0", - "troika-three-text": "^0.46.4", - "troika-three-utils": "^0.46.0" - } - }, - "troika-animation": { - "version": "0.46.0", - "resolved": "https://registry.npmjs.org/troika-animation/-/troika-animation-0.46.0.tgz", - "integrity": "sha512-4Bete4PY/Hfdu1ioHA1XH8uax4Jj14QemwvLWXm2RI4CH5IW5IrXiFBLbnVjWS7sbzK9Aqg2GdcZk6nmT5gtGg==" - }, - "troika-core": { - "version": "0.46.0", - "resolved": "https://registry.npmjs.org/troika-core/-/troika-core-0.46.0.tgz", - "integrity": "sha512-HQRfXtd9aJeHQpXWMYEswvQYIk5H+Wrk9fFvB9RfCZPLjhRbF8vT3+g5OqfQ5A0zf7OY564hpW68zO+jnYWJQg==", - "requires": { - "prop-types": "^15.6.2", - "troika-animation": "^0.46.0" - } - }, "troika-three-text": { "version": "0.46.4", "resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.46.4.tgz", diff --git a/package.json b/package.json index c177d76..817feda 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,6 @@ "three": "^0.145.0", "three-obj-loader": "^1.1.3", "three-pointerlock": "0.0.2", - "troika-3d-text": "^0.46.4", "troika-three-text": "^0.46.4", "webxr-polyfill": "^2.0.1" }, diff --git a/src/index.js b/src/index.js index fd34349..43572c4 100644 --- a/src/index.js +++ b/src/index.js @@ -236,7 +236,6 @@ export function init() { antialias: true, logarithmicDepthBuffer: false, }); - renderer.gammaFactor = 2.2; renderer.outputEncoding = THREE.sRGBEncoding; renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); diff --git a/src/lib/ColorWheel.js b/src/lib/ColorWheel.js index 643515d..cca0080 100644 --- a/src/lib/ColorWheel.js +++ b/src/lib/ColorWheel.js @@ -1,24 +1,26 @@ -import * as THREE from 'three'; -import {hsv2rgb} from '../lib/ColorUtils.js'; +import * as THREE from "three"; +import { hsv2rgb } from "../lib/ColorUtils.js"; export default class ColorWheel { constructor(ctx, controller, onColorChanged) { this.ctx = ctx; this.radius = 0.1; this.hsv = { h: 0.0, s: 0.0, v: 1.0 }; - this.rgb = {r: 0, g: 0, b: 0}; + this.rgb = { r: 0, g: 0, b: 0 }; this.onColorChanged = onColorChanged; - const geometry = new THREE.CircleBufferGeometry(this.radius, 12); - var vertexShader = '\ + const geometry = new THREE.CircleGeometry(this.radius, 12); + var vertexShader = + "\ varying vec2 vUv;\ void main() {\ vUv = uv;\ vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);\ gl_Position = projectionMatrix * mvPosition;\ }\ - '; + "; - var fragmentShader = '\ + var fragmentShader = + "\ #define M_PI2 6.28318530718\n \ uniform float brightness;\ varying vec2 vUv;\ @@ -37,59 +39,59 @@ export default class ColorWheel { vec3 color = hsb2rgb(vec3((angle / M_PI2) + 0.5, radius, brightness));\ gl_FragColor = vec4(color, 1.0);\ }\ - '; + "; var material = new THREE.ShaderMaterial({ - uniforms: { brightness: { type: 'f', value: this.hsv.v } }, + uniforms: { brightness: { type: "f", value: this.hsv.v } }, vertexShader: vertexShader, - fragmentShader: fragmentShader + fragmentShader: fragmentShader, }); this.mesh = new THREE.Mesh(geometry, material); - this.mesh.name = 'colorWheel'; + this.mesh.name = "colorWheel"; this.controller = controller; - - const geometryLast = new THREE.CircleBufferGeometry(0.025, 12); - let materialBlack = new THREE.MeshBasicMaterial({color: 0x000000}); + const geometryLast = new THREE.CircleGeometry(0.025, 12); + let materialBlack = new THREE.MeshBasicMaterial({ color: 0x000000 }); this.blackMesh = new THREE.Mesh(geometryLast, materialBlack); - this.blackMesh.name = 'black'; + this.blackMesh.name = "black"; this.blackMesh.position.set(0, 0.15, 0); this.ui = new THREE.Group(); this.ui.add(this.mesh); this.ui.add(this.blackMesh); - var geometryRing = new THREE.RingGeometry( 0.005, 0.01, 32 ); - var materialRing = new THREE.MeshBasicMaterial( { color: 0xffff00, side: THREE.DoubleSide } ); - this.colorSelector = new THREE.Mesh( geometryRing, materialRing ); + var geometryRing = new THREE.RingGeometry(0.005, 0.01, 32); + var materialRing = new THREE.MeshBasicMaterial({ + color: 0xffff00, + side: THREE.DoubleSide, + }); + this.colorSelector = new THREE.Mesh(geometryRing, materialRing); this.colorSelector.position.z = 0.01; - this.colorSelector.name = 'colorSelector'; + this.colorSelector.name = "colorSelector"; this.ui.add(this.colorSelector); - this.ui.name = 'ColorWheel'; + this.ui.name = "ColorWheel"; this.ui.visible = false; //this.ui.rotation.x = -Math.PI / 3; this.ui.position.y = 0.1; controller.add(this.ui); - ctx.raycontrol.addState('colorwheel', { + ctx.raycontrol.addState("colorwheel", { colliderMesh: this.ui, order: -1, onHover: (intersection, active, controller) => { if (active) { var point = intersection.point.clone(); this.mesh.worldToLocal(point); - + this.colorSelector.position.x = point.x; this.colorSelector.position.y = point.y; } }, - onHoverLeave: (intersection) => { - }, + onHoverLeave: (intersection) => {}, onSelectStart: (intersection, controller) => { - if (intersection.object.name === 'colorWheel') { - + if (intersection.object.name === "colorWheel") { var point = intersection.point.clone(); this.mesh.updateMatrixWorld(); this.mesh.worldToLocal(point); @@ -101,32 +103,37 @@ export default class ColorWheel { let polarPosition = { r: this.radius * Math.sqrt(uv.x * uv.x + uv.y * uv.y), - theta: Math.PI + Math.atan2(uv.y, uv.x) + theta: Math.PI + Math.atan2(uv.y, uv.x), }; - var angle = ((polarPosition.theta * (180 / Math.PI)) + 180) % 360; + var angle = (polarPosition.theta * (180 / Math.PI) + 180) % 360; this.hsv.h = angle / 360; this.hsv.s = polarPosition.r / this.radius; this.updateColor(); } else { - this.onColorChanged(intersection.object.material.color.clone().multiplyScalar(255)); + this.onColorChanged( + intersection.object.material.color.clone().multiplyScalar(255) + ); } }, - onSelectEnd: (intersection) => { - } + onSelectEnd: (intersection) => {}, }); } - updateColor () { + updateColor() { this.rgb = hsv2rgb(this.hsv); - this.colorSelector.material.color.setRGB(this.rgb.r / 255, this.rgb.g / 255, this.rgb.b / 255); + this.colorSelector.material.color.setRGB( + this.rgb.r / 255, + this.rgb.g / 255, + this.rgb.b / 255 + ); this.onColorChanged(this.rgb); } enter() { - this.ctx.raycontrol.activateState('colorwheel'); + this.ctx.raycontrol.activateState("colorwheel"); } exit() { - this.ctx.raycontrol.deactivateState('colorwheel'); + this.ctx.raycontrol.deactivateState("colorwheel"); } } diff --git a/src/lib/shaders.js b/src/lib/shaders.js index 1b52191..02cfe0d 100644 --- a/src/lib/shaders.js +++ b/src/lib/shaders.js @@ -1,5 +1,5 @@ export var shaders = { -door_frag : ` + door_frag: ` uniform float time; uniform float selected; uniform sampler2D tex; @@ -20,7 +20,7 @@ void main( void ) { } `, -zoom_frag : ` + zoom_frag: ` uniform float time; uniform sampler2D tex; uniform vec2 zoomPos; @@ -41,7 +41,7 @@ void main( void ) { } `, -basic_vert : ` + basic_vert: ` varying vec2 vUv; varying vec3 vPosition; void main() @@ -53,7 +53,7 @@ void main() } `, -panoball_vert : ` + panoball_vert: ` varying vec2 vUv; varying vec3 vPosition; varying vec3 vNormal; @@ -61,62 +61,6 @@ varying vec3 vWorldPos; uniform float time; uniform float selected; -mat4 inverse(mat4 m) { - float - a00 = m[0][0], a01 = m[0][1], a02 = m[0][2], a03 = m[0][3], - a10 = m[1][0], a11 = m[1][1], a12 = m[1][2], a13 = m[1][3], - a20 = m[2][0], a21 = m[2][1], a22 = m[2][2], a23 = m[2][3], - a30 = m[3][0], a31 = m[3][1], a32 = m[3][2], a33 = m[3][3], - - b00 = a00 * a11 - a01 * a10, - b01 = a00 * a12 - a02 * a10, - b02 = a00 * a13 - a03 * a10, - b03 = a01 * a12 - a02 * a11, - b04 = a01 * a13 - a03 * a11, - b05 = a02 * a13 - a03 * a12, - b06 = a20 * a31 - a21 * a30, - b07 = a20 * a32 - a22 * a30, - b08 = a20 * a33 - a23 * a30, - b09 = a21 * a32 - a22 * a31, - b10 = a21 * a33 - a23 * a31, - b11 = a22 * a33 - a23 * a32, - - det = b00 * b11 - b01 * b10 + b02 * b09 + b03 * b08 - b04 * b07 + b05 * b06; - - return mat4( - a11 * b11 - a12 * b10 + a13 * b09, - a02 * b10 - a01 * b11 - a03 * b09, - a31 * b05 - a32 * b04 + a33 * b03, - a22 * b04 - a21 * b05 - a23 * b03, - a12 * b08 - a10 * b11 - a13 * b07, - a00 * b11 - a02 * b08 + a03 * b07, - a32 * b02 - a30 * b05 - a33 * b01, - a20 * b05 - a22 * b02 + a23 * b01, - a10 * b10 - a11 * b08 + a13 * b06, - a01 * b08 - a00 * b10 - a03 * b06, - a30 * b04 - a31 * b02 + a33 * b00, - a21 * b02 - a20 * b04 - a23 * b00, - a11 * b07 - a10 * b09 - a12 * b06, - a00 * b09 - a01 * b07 + a02 * b06, - a31 * b01 - a30 * b03 - a32 * b00, - a20 * b03 - a21 * b01 + a22 * b00) / det; -} - - -mat4 transpose(in mat4 m) { - vec4 i0 = m[0]; - vec4 i1 = m[1]; - vec4 i2 = m[2]; - vec4 i3 = m[3]; - - return mat4( - vec4(i0.x, i1.x, i2.x, i3.x), - vec4(i0.y, i1.y, i2.y, i3.y), - vec4(i0.z, i1.z, i2.z, i3.z), - vec4(i0.w, i1.w, i2.w, i3.w) - ); -} - void main() { vUv = uv; @@ -139,7 +83,7 @@ void main() } `, -panoball_frag : ` + panoball_frag: ` uniform sampler2D tex, texfx; uniform float time; uniform float selected; @@ -176,7 +120,7 @@ void main( void ) { } `, -beam_frag : ` + beam_frag: ` uniform float time; uniform sampler2D tex; varying vec2 vUv; @@ -188,5 +132,4 @@ void main( void ) { gl_FragColor = col; } `, - -}; \ No newline at end of file +}; diff --git a/src/lib/utils.js b/src/lib/utils.js index a9dc8c6..b012d18 100644 --- a/src/lib/utils.js +++ b/src/lib/utils.js @@ -1,8 +1,8 @@ -export function newMarker(x, y, z, color){ - const geo = new THREE.SphereBufferGeometry(0.04); - const mat = new THREE.MeshBasicMaterial({color: color ? color : 0xff0000}); +export function newMarker(x, y, z, color) { + const geo = new THREE.SphereGeometry(0.04); + const mat = new THREE.MeshBasicMaterial({ color: color ? color : 0xff0000 }); const mesh = new THREE.Mesh(geo, mat); - if (typeof x === 'object') { + if (typeof x === "object") { mesh.position.copy(x); } else { mesh.position.set(x, y, z); @@ -17,4 +17,3 @@ export function angleBetween(point1, point2) { export function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min)) + min; } - diff --git a/src/rooms/Hall.js b/src/rooms/Hall.js index b6f213a..600eed7 100644 --- a/src/rooms/Hall.js +++ b/src/rooms/Hall.js @@ -1,13 +1,12 @@ -import * as THREE from 'three'; -import * as panoballs from '../stations/PanoBalls.js'; -import * as paintings from '../stations/Paintings.js'; -import * as newsticker from '../stations/NewsTicker.js'; -import * as xylophone from '../stations/Xylophone.js'; -import * as graffiti from '../stations/Graffiti.js'; -import * as infopanels from '../stations/InfoPanels.js'; - -var - scene, +import * as THREE from "three"; +import * as panoballs from "../stations/PanoBalls.js"; +import * as paintings from "../stations/Paintings.js"; +import * as newsticker from "../stations/NewsTicker.js"; +import * as xylophone from "../stations/Xylophone.js"; +import * as graffiti from "../stations/Graffiti.js"; +import * as infopanels from "../stations/InfoPanels.js"; + +var scene, hall, teleportFloor, fader, @@ -19,12 +18,12 @@ var function createDoorMaterial(ctx) { return new THREE.ShaderMaterial({ uniforms: { - time: {value: 0}, - selected: {value: 0}, - tex: {value: ctx.assets['doorfx_tex']} + time: { value: 0 }, + selected: { value: 0 }, + tex: { value: ctx.assets["doorfx_tex"] }, }, vertexShader: ctx.shaders.basic_vert, - fragmentShader: ctx.shaders.door_frag + fragmentShader: ctx.shaders.door_frag, }); } @@ -34,46 +33,49 @@ export function setup(ctx) { // setup hall model - const hallLightmapTex = assets['lightmap_tex']; - const skyTex = assets['sky_tex']; - const cloudsTex = assets['clouds_tex']; - const foxrTex = assets['foxr_tex']; - const newstickerTex = assets['newsticker_tex']; - const mozillamrTex = assets['mozillamr_tex']; + const hallLightmapTex = assets["lightmap_tex"]; + const skyTex = assets["sky_tex"]; + const cloudsTex = assets["clouds_tex"]; + const foxrTex = assets["foxr_tex"]; + const newstickerTex = assets["newsticker_tex"]; + const mozillamrTex = assets["mozillamr_tex"]; - const hallMaterial = new THREE.MeshBasicMaterial({map: hallLightmapTex}); + const hallMaterial = new THREE.MeshBasicMaterial({ map: hallLightmapTex }); objectMaterials = { - 'hall': hallMaterial, - 'screen': new THREE.MeshBasicMaterial({map: newstickerTex}), - 'xylophone': hallMaterial, - 'xylostick-left': hallMaterial, - 'xylostick-right': hallMaterial, - 'xylostickball-left': hallMaterial.clone(), - 'xylostickball-right': hallMaterial.clone(), - 'lightpanels': new THREE.MeshBasicMaterial(), - 'doorA': createDoorMaterial(ctx), - 'doorB': createDoorMaterial(ctx), - 'doorC': createDoorMaterial(ctx), - 'doorD': createDoorMaterial(ctx), - 'sky': new THREE.MeshBasicMaterial({map: skyTex}), - 'clouds': new THREE.MeshBasicMaterial({map: cloudsTex, transparent: true}), - 'foxr': new THREE.MeshBasicMaterial({map: foxrTex, transparent: true}), - 'mozillamr': new THREE.MeshBasicMaterial({map: mozillamrTex, transparent: true}), + hall: hallMaterial, + screen: new THREE.MeshBasicMaterial({ map: newstickerTex }), + xylophone: hallMaterial, + "xylostick-left": hallMaterial, + "xylostick-right": hallMaterial, + "xylostickball-left": hallMaterial.clone(), + "xylostickball-right": hallMaterial.clone(), + lightpanels: new THREE.MeshBasicMaterial(), + doorA: createDoorMaterial(ctx), + doorB: createDoorMaterial(ctx), + doorC: createDoorMaterial(ctx), + doorD: createDoorMaterial(ctx), + sky: new THREE.MeshBasicMaterial({ map: skyTex }), + clouds: new THREE.MeshBasicMaterial({ map: cloudsTex, transparent: true }), + foxr: new THREE.MeshBasicMaterial({ map: foxrTex, transparent: true }), + mozillamr: new THREE.MeshBasicMaterial({ + map: mozillamrTex, + transparent: true, + }), }; - hall = assets['hall_model'].scene; - hall.traverse(o => { - if (o.name == 'teleport') { + hall = assets["hall_model"].scene; + hall.traverse((o) => { + if (o.name == "teleport") { teleportFloor = o; //o.visible = false; o.material.visible = false; return; - } else if (o.name.startsWith('door')) { + } else if (o.name.startsWith("door")) { doors.push(o); } - if (o.type == 'Mesh' && objectMaterials[o.name]) { + if (o.type == "Mesh" && objectMaterials[o.name]) { o.material = objectMaterials[o.name]; } }); @@ -85,7 +87,7 @@ export function setup(ctx) { panoballs.setup(ctx, hall); infopanels.setup(ctx, hall); - ctx.raycontrol.addState('teleport', { + ctx.raycontrol.addState("teleport", { colliderMesh: teleportFloor, onHover: (intersection, active) => { ctx.teleport.onHover(intersection.point, active); @@ -98,33 +100,36 @@ export function setup(ctx) { }, onSelectEnd: (intersection) => { ctx.teleport.onSelectEnd(intersection.point); - } + }, }); - ctx.raycontrol.addState('doors', { + ctx.raycontrol.addState("doors", { colliderMesh: doors, onHover: (intersection, active) => { const scale = intersection.object.scale; scale.z = Math.min(scale.z + 0.05 * (5.5 - scale.z), 5); }, - onHoverLeave: (intersection) => { - }, + onHoverLeave: (intersection) => {}, onSelectStart: (intersection) => { const transitions = { doorA: 1, doorB: 2, doorC: 3, - doorD: 4 + doorD: 4, }; ctx.goto = transitions[intersection.object.name]; }, - onSelectEnd: (intersection) => {} + onSelectEnd: (intersection) => {}, }); // fade camera to black on walls fader = new THREE.Mesh( - new THREE.PlaneBufferGeometry(), - new THREE.MeshBasicMaterial({color: 0x000000, transparent: true, depthTest: false}) + new THREE.PlaneGeometry(), + new THREE.MeshBasicMaterial({ + color: 0x000000, + transparent: true, + depthTest: false, + }) ); fader.position.z = -0.1; fader.material.opacity = 0; @@ -134,25 +139,25 @@ export function setup(ctx) { } export function enter(ctx) { - ctx.systemsGroup['roomHall'].play(); - ctx.renderer.setClearColor( 0xC0DFFB ); + ctx.systemsGroup["roomHall"].play(); + ctx.renderer.setClearColor(0xc0dffb); ctx.scene.add(scene); xylophone.enter(ctx); graffiti.enter(ctx); infopanels.enter(ctx); - ctx.raycontrol.activateState('doors'); - ctx.raycontrol.activateState('teleport'); + ctx.raycontrol.activateState("doors"); + ctx.raycontrol.activateState("teleport"); paintings.enter(ctx); panoballs.enter(ctx); } export function exit(ctx) { - ctx.systemsGroup['roomHall'].stop(); + ctx.systemsGroup["roomHall"].stop(); ctx.scene.remove(scene); - ctx.raycontrol.deactivateState('doors'); - ctx.raycontrol.deactivateState('teleport'); + ctx.raycontrol.deactivateState("doors"); + ctx.raycontrol.deactivateState("teleport"); xylophone.exit(ctx); } @@ -169,10 +174,12 @@ export function execute(ctx, delta, time) { for (var i = 0; i < doors.length; i++) { if (doors[i].scale.z > 1) { - doors[i].scale.z = Math.max(doors[i].scale.z - delta * doors[i].scale.z, 1); + doors[i].scale.z = Math.max( + doors[i].scale.z - delta * doors[i].scale.z, + 1 + ); } } - } function updateUniforms(time) { @@ -189,10 +196,16 @@ function checkCameraBoundaries(ctx) { const cam = auxVec; const margin = 0.25; var fade = 0; - if (cam.y < margin) { fade = 1 - (cam.y / margin); } - else if (cam.x < -5.4) { fade = (-cam.x - 5.4) / margin; } - else if (cam.x > 8) { fade = (cam.x - 8) / margin; } - else if (cam.z < -6.45) { fade = (-cam.z - 6.45) / margin; } - else if (cam.z > 6.4) { fade = (cam.z - 6.4) / margin; } + if (cam.y < margin) { + fade = 1 - cam.y / margin; + } else if (cam.x < -5.4) { + fade = (-cam.x - 5.4) / margin; + } else if (cam.x > 8) { + fade = (cam.x - 8) / margin; + } else if (cam.z < -6.45) { + fade = (-cam.z - 6.45) / margin; + } else if (cam.z > 6.4) { + fade = (cam.z - 6.4) / margin; + } fader.material.opacity = Math.min(1, Math.max(0, fade)); } diff --git a/src/rooms/Panorama.js b/src/rooms/Panorama.js index 2e16d4d..606c45a 100644 --- a/src/rooms/Panorama.js +++ b/src/rooms/Panorama.js @@ -20,7 +20,7 @@ var panoMaterials = []; export function setup(ctx) { const assets = ctx.assets; - const geometry = new THREE.SphereBufferGeometry(500, 60, 40); + const geometry = new THREE.SphereGeometry(500, 60, 40); for (var i = 0; i < NUM_PANOS; i++) { const panoName = "pano" + (i + 2); panoMaterials[i] = new THREE.MeshBasicMaterial({ diff --git a/src/rooms/PanoramaStereo.js b/src/rooms/PanoramaStereo.js index fe71f59..e5ced58 100644 --- a/src/rooms/PanoramaStereo.js +++ b/src/rooms/PanoramaStereo.js @@ -1,19 +1,25 @@ -import * as THREE from 'three'; +import * as THREE from "three"; var panoL, panoR, context; export function setup(ctx) { const assets = ctx.assets; - const geometry = new THREE.SphereBufferGeometry(500, 60, 40); - const materialL = new THREE.MeshBasicMaterial( { map: assets['stereopanoR'], side: THREE.BackSide } ); - const materialR = new THREE.MeshBasicMaterial( { map: assets['stereopanoL'], side: THREE.BackSide } ); + const geometry = new THREE.SphereGeometry(500, 60, 40); + const materialL = new THREE.MeshBasicMaterial({ + map: assets["stereopanoR"], + side: THREE.BackSide, + }); + const materialR = new THREE.MeshBasicMaterial({ + map: assets["stereopanoL"], + side: THREE.BackSide, + }); panoL = new THREE.Mesh(geometry, materialL); panoL.layers.set(1); panoR = new THREE.Mesh(geometry, materialR); panoR.layers.set(2); - ctx.raycontrol.addState('panoramaStereo', { + ctx.raycontrol.addState("panoramaStereo", { raycaster: false, - onSelectEnd: onSelectEnd + onSelectEnd: onSelectEnd, }); } @@ -24,20 +30,18 @@ export function enter(ctx) { ctx.camera.layers.enable(1); context = ctx; - ctx.raycontrol.activateState('panoramaStereo'); + ctx.raycontrol.activateState("panoramaStereo"); } export function exit(ctx) { ctx.scene.remove(panoL); ctx.scene.remove(panoR); ctx.camera.layers.disable(1); - ctx.raycontrol.deactivateState('panoramaStereo'); + ctx.raycontrol.deactivateState("panoramaStereo"); } -export function execute(ctx, delta, time) { -} +export function execute(ctx, delta, time) {} export function onSelectEnd(evt) { context.goto = 0; } - diff --git a/src/rooms/Sound.js b/src/rooms/Sound.js index 11c0cb6..f24b10a 100644 --- a/src/rooms/Sound.js +++ b/src/rooms/Sound.js @@ -1,22 +1,24 @@ -import * as THREE from 'three'; +import * as THREE from "three"; var scene, listener, timeout, mixer, door, doorMaterial; const soundNames = [ - 'bells', - 'horn', - 'cowbell', - 'guiro', - 'mandolin', - 'squeaker', - 'train', - 'whistle', - 'motorhorn', - 'surdo', - 'trumpet', + "bells", + "horn", + "cowbell", + "guiro", + "mandolin", + "squeaker", + "train", + "whistle", + "motorhorn", + "surdo", + "trumpet", ]; var sounds = {}; -soundNames.forEach( i => { sounds[i] = {animations: [], mesh: null, player: null, shadow: null} }) +soundNames.forEach((i) => { + sounds[i] = { animations: [], mesh: null, player: null, shadow: null }; +}); const MAX_REPETITIONS = 3; var repetitions = MAX_REPETITIONS - 1; @@ -24,25 +26,26 @@ var repetitions = MAX_REPETITIONS - 1; function createDoorMaterial(ctx) { return new THREE.ShaderMaterial({ uniforms: { - time: {value: 0}, - selected: {value: 0}, - tex: {value: ctx.assets['doorfx_tex']} + time: { value: 0 }, + selected: { value: 0 }, + tex: { value: ctx.assets["doorfx_tex"] }, }, vertexShader: ctx.shaders.basic_vert, - fragmentShader: ctx.shaders.door_frag + fragmentShader: ctx.shaders.door_frag, }); } export function setup(ctx) { const assets = ctx.assets; - scene = assets['sound_model'].scene; - door = assets['sound_door_model'].scene; + scene = assets["sound_model"].scene; + door = assets["sound_door_model"].scene; - door.getObjectByName('door_frame').material = - new THREE.MeshBasicMaterial({map: assets['sound_door_lm_tex']}); + door.getObjectByName("door_frame").material = new THREE.MeshBasicMaterial({ + map: assets["sound_door_lm_tex"], + }); doorMaterial = createDoorMaterial(ctx); - door.getObjectByName('door').material = doorMaterial; + door.getObjectByName("door").material = doorMaterial; door.scale.set(0.5, 0.5, 0.5); door.position.set(0.4, 0.6, 1); @@ -54,11 +57,13 @@ export function setup(ctx) { for (let id in sounds) { const mesh = scene.getObjectByName(id); - if (!mesh) { continue; } + if (!mesh) { + continue; + } const sound = new THREE.PositionalAudio(listener); const audioLoader = new THREE.AudioLoader(); - audioLoader.load('assets/ogg/' + id + '.ogg', buffer => { + audioLoader.load("assets/ogg/" + id + ".ogg", (buffer) => { sound.setBuffer(buffer); //sound.setRefDistance(20); }); @@ -68,7 +73,10 @@ export function setup(ctx) { mesh.visible = false; mesh.add(sound); - const clip = THREE.AnimationClip.findByName(assets['sound_model'].animations, id); + const clip = THREE.AnimationClip.findByName( + assets["sound_model"].animations, + id + ); if (clip) { const action = mixer.clipAction(clip, mesh); action.loop = THREE.LoopOnce; @@ -77,22 +85,27 @@ export function setup(ctx) { for (let j = 0; j < mesh.children.length; j++) { const obj = mesh.children[j]; - const clip = THREE.AnimationClip.findByName(assets['sound_model'].animations, `${id}_${obj.name}`); - if (!clip) { continue; } + const clip = THREE.AnimationClip.findByName( + assets["sound_model"].animations, + `${id}_${obj.name}` + ); + if (!clip) { + continue; + } const action = mixer.clipAction(clip, mesh); action.loop = THREE.LoopOnce; sounds[id].animations.push(action); } let shadow = new THREE.Mesh( - new THREE.PlaneBufferGeometry(3, 3), + new THREE.PlaneGeometry(3, 3), new THREE.MeshBasicMaterial({ color: mesh.children[0].material.color, - map: assets['sound_shadow_tex'], + map: assets["sound_shadow_tex"], transparent: true, opacity: 0, depthTest: false, - blending: THREE.AdditiveBlending + blending: THREE.AdditiveBlending, }) ); shadow.position.set(mesh.position.x, 0.001, mesh.position.z); @@ -101,8 +114,8 @@ export function setup(ctx) { sounds[id].shadow = shadow; } - ctx.raycontrol.addState('sound', { - colliderMesh: door.getObjectByName('door'), + ctx.raycontrol.addState("sound", { + colliderMesh: door.getObjectByName("door"), onHover: (intersection, active) => { //teleport.onHover(intersection.point, active); const scale = intersection.object.scale; @@ -117,18 +130,18 @@ export function setup(ctx) { }, onSelectEnd: (intersection) => { //teleport.onSelectEnd(intersection.point); - } + }, }); - const floorTexture = assets['grid_tex']; + const floorTexture = assets["grid_tex"]; const floor = new THREE.Mesh( - new THREE.PlaneBufferGeometry(20, 20), - new THREE.MeshBasicMaterial({map: floorTexture}) + new THREE.PlaneGeometry(20, 20), + new THREE.MeshBasicMaterial({ map: floorTexture }) ); scene.add(floor); floor.rotation.x = -Math.PI / 2; - ctx.raycontrol.addState('teleportSound', { + ctx.raycontrol.addState("teleportSound", { colliderMesh: floor, onHover: (intersection, active) => { ctx.teleport.onHover(intersection.point, active); @@ -141,7 +154,7 @@ export function setup(ctx) { }, onSelectEnd: (intersection) => { ctx.teleport.onSelectEnd(intersection.point); - } + }, }); } @@ -154,23 +167,27 @@ function playSound() { sound.player.stop(); if (sound.animations.length) { sound.mesh.visible = false; - sound.animations.forEach( i => {i.stop()}); + sound.animations.forEach((i) => { + i.stop(); + }); } } - repetitions ++; + repetitions++; if (repetitions == MAX_REPETITIONS) { repetitions = 0; // get next sound do { currentSound = (currentSound + 1) % soundNames.length; sound = sounds[soundNames[currentSound]]; - } while(!sound.mesh); + } while (!sound.mesh); } sound.player.play(); if (sound.animations.length) { sound.mesh.visible = true; - sound.animations.forEach( i => {i.play()}); + sound.animations.forEach((i) => { + i.play(); + }); } sound.shadow.material.opacity = 1; timeout = setTimeout(playSound, 2000); @@ -183,16 +200,16 @@ export function enter(ctx) { ctx.camera.add(listener); timeout = setTimeout(playSound, 2000); - ctx.raycontrol.activateState('teleportSound'); - ctx.raycontrol.activateState('sound'); + ctx.raycontrol.activateState("teleportSound"); + ctx.raycontrol.activateState("sound"); } export function exit(ctx) { ctx.scene.remove(scene); ctx.scene.remove(door); ctx.camera.remove(listener); - ctx.raycontrol.deactivateState('teleportSound'); - ctx.raycontrol.deactivateState('sound'); + ctx.raycontrol.deactivateState("teleportSound"); + ctx.raycontrol.deactivateState("sound"); clearTimeout(timeout); } diff --git a/src/stations/PanoBalls.js b/src/stations/PanoBalls.js index 78d4a3c..49753d0 100644 --- a/src/stations/PanoBalls.js +++ b/src/stations/PanoBalls.js @@ -1,7 +1,6 @@ -import * as THREE from 'three'; +import * as THREE from "three"; -var - panoBalls = [], +var panoBalls = [], panoballsParent = new THREE.Object3D(), bbox = new THREE.Box3(), panoFxMaterial, @@ -11,25 +10,25 @@ var const NUM_PANOBALLS = 6; export function enter(ctx) { - ctx.raycontrol.activateState('panoballs'); + ctx.raycontrol.activateState("panoballs"); } export function setup(ctx, hall) { const assets = ctx.assets; hallRef = hall; - const panoGeo = new THREE.SphereBufferGeometry(0.15, 30, 20); + const panoGeo = new THREE.SphereGeometry(0.15, 30, 20); for (var i = 0; i < NUM_PANOBALLS; i++) { let asset = assets[`pano${i + 1}small`]; var ball = new THREE.Mesh( - new THREE.SphereBufferGeometry(0.15, 30, 20), + new THREE.SphereGeometry(0.15, 30, 20), new THREE.ShaderMaterial({ uniforms: { - time: {value: 0}, - tex: {value: asset}, - texfx: {value: assets['panoballfx_tex']}, - selected: {value: 0} + time: { value: 0 }, + tex: { value: asset }, + texfx: { value: assets["panoballfx_tex"] }, + selected: { value: 0 }, }, vertexShader: ctx.shaders.panoball_vert, fragmentShader: ctx.shaders.panoball_frag, @@ -48,21 +47,20 @@ export function setup(ctx, hall) { hall.add(panoballsParent); - ctx.raycontrol.addState('panoballs', { + ctx.raycontrol.addState("panoballs", { colliderMesh: panoballsParent, onHover: (intersection, active, controller) => { - panoBalls.forEach(panoBall => panoBall.userData.selected = 0); + panoBalls.forEach((panoBall) => (panoBall.userData.selected = 0)); intersection.object.userData.selected = 1; }, onHoverLeave: (intersection) => { intersection.object.userData.selected = 0; }, - onSelectStart: (intersection, controller) => { - }, + onSelectStart: (intersection, controller) => {}, onSelectEnd: (intersection) => { ctx.goto = intersection.object.userData.panoId; intersection.object.userData.selected = 0; - } + }, }); } @@ -77,6 +75,8 @@ export function updateUniforms(time) { for (let i = 0; i < panoBalls.length; i++) { panoBalls[i].material.uniforms.time.value = i + time; panoBalls[i].material.uniforms.selected.value += - (panoBalls[i].userData.selected - panoBalls[i].material.uniforms.selected.value) * 0.1; + (panoBalls[i].userData.selected - + panoBalls[i].material.uniforms.selected.value) * + 0.1; } } diff --git a/src/systems/BillboardSystem.js b/src/systems/BillboardSystem.js index a3aba65..e497526 100644 --- a/src/systems/BillboardSystem.js +++ b/src/systems/BillboardSystem.js @@ -22,7 +22,11 @@ export default class BillboardSystem extends System { let opacity = 0; if (distance < SHOW_DISTANCE) { - opacity = THREE.Math.clamp(Math.sqrt(SHOW_DISTANCE - distance), 0, 1); + opacity = THREE.MathUtils.clamp( + Math.sqrt(SHOW_DISTANCE - distance), + 0, + 1 + ); object3D.lookAt(cameraPosition); }