From 739d41276982c1c78ad0cb98c61ffa1fd7c5abe6 Mon Sep 17 00:00:00 2001 From: timondev Date: Mon, 10 Oct 2022 12:54:45 +0200 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=94=A7=20Registered=20Ecsy=20Componen?= =?UTF-8?q?ts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/index.js b/src/index.js index f82d331..5e4c6a1 100644 --- a/src/index.js +++ b/src/index.js @@ -196,6 +196,27 @@ export function init() { var w = 100; ecsyWorld = new World(); + + ecsyWorld + .registerComponent(Object3D) + .registerComponent(Rotation) + .registerComponent(Position) + .registerComponent(ParentObject3D) + .registerComponent(Text) + .registerComponent(BoundingBox) + .registerComponent(BoundingSphere) + .registerComponent(Area) + .registerComponent(AreaEntering) + .registerComponent(AreaExiting) + .registerComponent(AreaInside) + .registerComponent(AreaChecker) + .registerComponent(AreaReactor) + .registerComponent(DebugHelper) + .registerComponent(DebugHelperMesh) + .registerComponent(Billboard) + .registerComponent(Children) + .registerComponent(Opacity); + ecsyWorld .registerSystem(SDFTextSystem) .registerSystem(AreaCheckerSystem) From ac2dff2ca8bbc6de657ca34d2b6615f3f1c1722f Mon Sep 17 00:00:00 2001 From: timondev Date: Mon, 10 Oct 2022 12:58:20 +0200 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=94=A7=20Moved=20Components=20Library?= =?UTF-8?q?=20to=20src?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/{components/index.js => components.js} | 0 src/index.js | 2 +- src/rooms/Panorama.js | 53 ++--- src/stations/Graffiti.js | 226 ++++++++++++--------- src/stations/InfoPanels.js | 63 ++++-- src/stations/NewsTicker.js | 80 ++++---- src/systems/AreaCheckerSystem.js | 20 +- src/systems/BillboardSystem.js | 25 ++- src/systems/ControllersSystem.js | 23 ++- src/systems/DebugHelperSystem.js | 2 +- src/systems/HierarchySystem.js | 20 +- src/systems/SDFTextSystem.js | 2 +- src/systems/TransformSystem.js | 20 +- 13 files changed, 309 insertions(+), 227 deletions(-) rename src/{components/index.js => components.js} (100%) diff --git a/src/components/index.js b/src/components.js similarity index 100% rename from src/components/index.js rename to src/components.js diff --git a/src/index.js b/src/index.js index 5e4c6a1..fd34349 100644 --- a/src/index.js +++ b/src/index.js @@ -38,7 +38,7 @@ import { Billboard, Children, Opacity, -} from "./components/index.js"; +} from "./components.js"; import RayControl from "./lib/RayControl.js"; import Teleport from "./lib/Teleport.js"; diff --git a/src/rooms/Panorama.js b/src/rooms/Panorama.js index c30bd32..2e16d4d 100644 --- a/src/rooms/Panorama.js +++ b/src/rooms/Panorama.js @@ -1,16 +1,19 @@ -import * as THREE from 'three'; -import { Text, Position, ParentObject3D } from '../components/index.js'; +import * as THREE from "three"; +import { Text, Position, ParentObject3D } from "../components.js"; -var pano = null, context, panel, panelText; +var pano = null, + context, + panel, + panelText; const NUM_PANOS = 5; const DATA = [ - 'Tiger and Turtle - Magic Mountain\nArt installation in Agerpark, Germany.', - 'Hiking trail at Lake Byllesby Regional Park near Cannon Falls, USA.', - 'Dellwiger Bach natural reserve in Dortmund, Germany.', - 'Zapporthorn summit in Lepontine Alps, Switzerland.', - 'Ruin of romanesque Paulinzella abbey (1106) in Thuringia, Germany.', + "Tiger and Turtle - Magic Mountain\nArt installation in Agerpark, Germany.", + "Hiking trail at Lake Byllesby Regional Park near Cannon Falls, USA.", + "Dellwiger Bach natural reserve in Dortmund, Germany.", + "Zapporthorn summit in Lepontine Alps, Switzerland.", + "Ruin of romanesque Paulinzella abbey (1106) in Thuringia, Germany.", ]; var panoMaterials = []; @@ -19,34 +22,37 @@ export function setup(ctx) { const assets = ctx.assets; const geometry = new THREE.SphereBufferGeometry(500, 60, 40); for (var i = 0; i < NUM_PANOS; i++) { - const panoName = 'pano'+(i + 2); - panoMaterials[i] = new THREE.MeshBasicMaterial( { map: assets[panoName], side: THREE.BackSide }); + const panoName = "pano" + (i + 2); + panoMaterials[i] = new THREE.MeshBasicMaterial({ + map: assets[panoName], + side: THREE.BackSide, + }); } pano = new THREE.Mesh(geometry, panoMaterials[0]); - panel = assets['hall_model'].scene.getObjectByName('infopanel'); - panel.material = new THREE.MeshBasicMaterial({color: 0x040404}); + panel = assets["hall_model"].scene.getObjectByName("infopanel"); + panel.material = new THREE.MeshBasicMaterial({ color: 0x040404 }); panel.position.set(0, 0.1, 0); panel.parent.remove(panel); panelText = ctx.world.createEntity(); panelText .addComponent(Text, { - color: '#ffffff', + color: "#ffffff", fontSize: 0.02, - anchor: 'left', - textAlign: 'left', - baseline: 'center', + anchor: "left", + textAlign: "left", + baseline: "center", maxWidth: 0.34, lineHeight: 1.3, text: DATA[i], }) - .addComponent(ParentObject3D, {value: panel}) - .addComponent(Position, {x: -0.17, y: 0.003, z: 0.01}); + .addComponent(ParentObject3D, { value: panel }) + .addComponent(Position, { x: -0.17, y: 0.003, z: 0.01 }); - ctx.raycontrol.addState('panorama', { + ctx.raycontrol.addState("panorama", { raycaster: false, - onSelectEnd: onSelectEnd + onSelectEnd: onSelectEnd, }); } @@ -61,7 +67,7 @@ export function enter(ctx) { ctx.controllers[1].add(panel); - ctx.raycontrol.activateState('panorama'); + ctx.raycontrol.activateState("panorama"); context = ctx; } @@ -70,11 +76,10 @@ export function exit(ctx) { ctx.scene.remove(pano); ctx.controllers[1].remove(panel); - ctx.raycontrol.deactivateState('panorama'); + ctx.raycontrol.deactivateState("panorama"); } -export function execute(ctx, delta, time) { -} +export function execute(ctx, delta, time) {} export function onSelectEnd(evt) { context.goto = 0; diff --git a/src/stations/Graffiti.js b/src/stations/Graffiti.js index 5c81728..62f5daf 100644 --- a/src/stations/Graffiti.js +++ b/src/stations/Graffiti.js @@ -1,7 +1,15 @@ -import * as THREE from 'three'; -import ColorWheel from '../lib/ColorWheel'; -import {Area, AreaReactor, AreaChecker, Object3D, BoundingBox, ParentObject3D, DebugHelper} from '../components/index'; -import {angleBetween, getRandomInt} from '../lib/utils.js'; +import * as THREE from "three"; +import ColorWheel from "../lib/ColorWheel"; +import { + Area, + AreaReactor, + AreaChecker, + Object3D, + BoundingBox, + ParentObject3D, + DebugHelper, +} from "../components"; +import { angleBetween, getRandomInt } from "../lib/utils.js"; var colorWheel; @@ -24,31 +32,30 @@ function colorize(r, g, b) { ctxTmp.drawImage(brushImg, 0, 0); let imgData = ctxTmp.getImageData(0, 0, canvasTmp.width, canvasTmp.height); for (var t = 0; t < imgData.data.length; t += 4) { - imgData.data[t]= r * imgData.data[t] / 255; - imgData.data[t + 1]= g * imgData.data[t + 1] / 255; - imgData.data[t + 2]= b * imgData.data[t + 2] / 255; + imgData.data[t] = (r * imgData.data[t]) / 255; + imgData.data[t + 1] = (g * imgData.data[t + 1]) / 255; + imgData.data[t + 2] = (b * imgData.data[t + 2]) / 255; } - ctxTmp.putImageData(imgData,0,0); + ctxTmp.putImageData(imgData, 0, 0); paintImg.src = canvasTmp.toDataURL(); } export function setup(ctx, hall) { - let area = ctx.world.createEntity(); - area.name = 'area'; + area.name = "area"; area .addComponent(BoundingBox) //.addComponent(DebugHelper) - .addComponent(ParentObject3D, {value: hall}) + .addComponent(ParentObject3D, { value: hall }) .addComponent(Area); - let component = area.getMutableComponent(BoundingBox); + let component = area.getMutableComponent(BoundingBox); component.min.set(-5, 0, 4.4); component.max.set(3, 3, 7); let checker = ctx.world.createEntity(); let checkerSpray = ctx.world.createEntity(); - let spray = ctx.assets['spray_model'].scene; + let spray = ctx.assets["spray_model"].scene; function attachSprayCan(controllerData) { let controller = controllerData.controller; @@ -58,79 +65,89 @@ export function setup(ctx, hall) { const sound = new THREE.PositionalAudio(listener); sound.loop = true; const audioLoader = new THREE.AudioLoader(); - audioLoader.load('assets/ogg/spray.ogg', buffer => { + audioLoader.load("assets/ogg/spray.ogg", (buffer) => { sound.setBuffer(buffer); - sound.name = 'spraySound'; + sound.name = "spraySound"; controller.add(sound); }); - spray.getObjectByName('spraycan').geometry.rotateY(handedness === "right" ? Math.PI / 2 : -Math.PI / 2); - spray.name = 'spray'; + spray + .getObjectByName("spraycan") + .geometry.rotateY(handedness === "right" ? Math.PI / 2 : -Math.PI / 2); + spray.name = "spray"; spray.visible = false; - const sprayTex = ctx.assets['spray_tex']; - spray.getObjectByName('spraycan').material = new THREE.MeshPhongMaterial({map: sprayTex}); - spray.getObjectByName('spraycolor').material = new THREE.MeshLambertMaterial({color: 0xFF0000}); + const sprayTex = ctx.assets["spray_tex"]; + spray.getObjectByName("spraycan").material = new THREE.MeshPhongMaterial({ + map: sprayTex, + }); + spray.getObjectByName("spraycolor").material = + new THREE.MeshLambertMaterial({ color: 0xff0000 }); controller.add(spray); } function attachColorWheel(controllerData) { let controller = controllerData.controller; colorWheel = new ColorWheel(ctx, controller, (rgb) => { - colorize( - rgb.r, - rgb.g, - rgb.b); - spray.getObjectByName('spraycolor').material.color.setRGB(rgb.r / 255, rgb.g / 255, rgb.b / 255); + colorize(rgb.r, rgb.g, rgb.b); + spray + .getObjectByName("spraycolor") + .material.color.setRGB(rgb.r / 255, rgb.g / 255, rgb.b / 255); }); colorWheel.enter(); } - ctx.raycontrol.addEventListener('controllerConnected', controllerData => { + ctx.raycontrol.addEventListener("controllerConnected", (controllerData) => { if (ctx.raycontrol.matchController(controllerData, "primary")) { attachSprayCan(controllerData); checkerSpray - .addComponent(AreaChecker) - .addComponent(Object3D, {value: controllerData.controller}) - .addComponent(AreaReactor, { - onEntering: entity => { - const obj3D = entity.getComponent(Object3D).value; - obj3D.getObjectByName('Scene').visible = false; - obj3D.getObjectByName('spray').visible = true; - let raycasterContext = obj3D.getObjectByName('raycasterContext'); - raycasterContext.rotation.set(-Math.PI / 2, (controllerData.inputSource.handedness === "right" ? 1 : -1) * Math.PI / 2, 0); - raycasterContext.position.set(0,-0.015,-0.025) - ctx.raycontrol.setLineStyle('basic'); - ctx.raycontrol.activateState('graffiti'); - }, - onExiting: entity => { - const obj3D = entity.getComponent(Object3D).value; - obj3D.getObjectByName('Scene').visible = true; - obj3D.getObjectByName('spray').visible = false; - let raycasterContext = obj3D.getObjectByName('raycasterContext'); - raycasterContext.rotation.set(0,0,0); - raycasterContext.position.set(0,0,0); - ctx.raycontrol.setLineStyle('advanced'); - ctx.raycontrol.deactivateState('graffiti'); - } - }); + .addComponent(AreaChecker) + .addComponent(Object3D, { value: controllerData.controller }) + .addComponent(AreaReactor, { + onEntering: (entity) => { + const obj3D = entity.getComponent(Object3D).value; + obj3D.getObjectByName("Scene").visible = false; + obj3D.getObjectByName("spray").visible = true; + let raycasterContext = obj3D.getObjectByName("raycasterContext"); + raycasterContext.rotation.set( + -Math.PI / 2, + ((controllerData.inputSource.handedness === "right" ? 1 : -1) * + Math.PI) / + 2, + 0 + ); + raycasterContext.position.set(0, -0.015, -0.025); + ctx.raycontrol.setLineStyle("basic"); + ctx.raycontrol.activateState("graffiti"); + }, + onExiting: (entity) => { + const obj3D = entity.getComponent(Object3D).value; + obj3D.getObjectByName("Scene").visible = true; + obj3D.getObjectByName("spray").visible = false; + let raycasterContext = obj3D.getObjectByName("raycasterContext"); + raycasterContext.rotation.set(0, 0, 0); + raycasterContext.position.set(0, 0, 0); + ctx.raycontrol.setLineStyle("advanced"); + ctx.raycontrol.deactivateState("graffiti"); + }, + }); } else { attachColorWheel(controllerData); checker - .addComponent(AreaChecker) - .addComponent(Object3D, {value: controllerData.controller}) - .addComponent(AreaReactor, { - onEntering: entity => { - const obj3D = entity.getComponent(Object3D).value; - obj3D.getObjectByName('Scene').visible = false; - obj3D.getObjectByName('ColorWheel').visible = true; - }, - onExiting: entity => { - const obj3D = entity.getComponent(Object3D).value; - obj3D.getObjectByName('Scene').visible = true; - obj3D.getObjectByName('ColorWheel').visible = false; - } - }); + .addComponent(AreaChecker) + .addComponent(Object3D, { value: controllerData.controller }) + .addComponent(AreaReactor, { + onEntering: (entity) => { + const obj3D = entity.getComponent(Object3D).value; + obj3D.getObjectByName("Scene").visible = false; + obj3D.getObjectByName("ColorWheel").visible = true; + }, + onExiting: (entity) => { + const obj3D = entity.getComponent(Object3D).value; + obj3D.getObjectByName("Scene").visible = true; + obj3D.getObjectByName("ColorWheel").visible = false; + }, + }); } }); @@ -139,77 +156,82 @@ export function setup(ctx, hall) { let maxDistance = 1; brushImg = new Image(); - canvasTmp = document.createElement('canvas'); + canvasTmp = document.createElement("canvas"); //canvasTmp.style.position = "absolute"; //canvasTmp.style.width = "20%"; //canvasTmp.style.backgroundColor = "#333"; - ctxTmp = canvasTmp.getContext('2d'); + ctxTmp = canvasTmp.getContext("2d"); // document.body.appendChild(canvasTmp); brushImg.onload = () => { canvasTmp.width = brushImg.width; canvasTmp.height = brushImg.height; - colorize(0,0,0); - } - brushImg.src = 'assets/spray_brush.png'; + colorize(0, 0, 0); + }; + brushImg.src = "assets/spray_brush.png"; - var drawingCanvas = document.createElement('canvas'); + var drawingCanvas = document.createElement("canvas"); drawingCanvas.width = width; drawingCanvas.height = height; - drawContext = drawingCanvas.getContext('2d'); + drawContext = drawingCanvas.getContext("2d"); drawContext.clearRect(0, 0, width, height); - drawContext.fillStyle = '#fff'; + drawContext.fillStyle = "#fff"; drawContext.fillRect(0, 0, width, height); - let map = new THREE.CanvasTexture( drawingCanvas ); + let map = new THREE.CanvasTexture(drawingCanvas); material = new THREE.MeshBasicMaterial({ color: 0xffffff, - lightMap: ctx.assets['lightmap_tex'], - map: map + lightMap: ctx.assets["lightmap_tex"], + map: map, }); - wall = hall.getObjectByName('graffiti'); + wall = hall.getObjectByName("graffiti"); wall.material = material; var aux2 = new THREE.Vector2(); - ctx.raycontrol.addState('graffiti', { + ctx.raycontrol.addState("graffiti", { colliderMesh: wall, - lineStyleOnIntersection: 'basic', + lineStyleOnIntersection: "basic", onHover: (intersection, active, controller) => { - if (active) - { + if (active) { var distance = intersection.distance; - if (distance > maxDistance) { return; } + if (distance > maxDistance) { + return; + } let x = intersection.uv.x * width; let y = height - intersection.uv.y * height; aux2.set(x, y); drawContext.imageSmoothingEnabled = true; - drawContext.fillStyle = '#f00'; - drawContext.strokeStyle = '#0f0'; + drawContext.fillStyle = "#f00"; + drawContext.strokeStyle = "#0f0"; var dist = lastPosition.distanceTo(aux2); var angle = angleBetween(lastPosition, aux2); let alpha = THREE.Math.clamp(1 - distance, 0, 1); drawContext.globalAlpha = alpha; - for (var i = 0; i < dist; i ++ /* +=4 */) { - var _x = lastPosition.x + (Math.sin(angle) * i); - var _y = lastPosition.y + (Math.cos(angle) * i); - drawContext.save(); - drawContext.translate(_x, _y); - let r = THREE.Math.lerp(0.001, 0.2, distance); - drawContext.scale(r, r); - - drawContext.rotate(Math.PI * 180 / getRandomInt(0, 180)); - - drawContext.drawImage(paintImg, -brushImg.width / 2, -brushImg.height / 2); - drawContext.restore(); + for (var i = 0; i < dist; i++ /* +=4 */) { + var _x = lastPosition.x + Math.sin(angle) * i; + var _y = lastPosition.y + Math.cos(angle) * i; + drawContext.save(); + drawContext.translate(_x, _y); + let r = THREE.Math.lerp(0.001, 0.2, distance); + drawContext.scale(r, r); + + drawContext.rotate((Math.PI * 180) / getRandomInt(0, 180)); + + drawContext.drawImage( + paintImg, + -brushImg.width / 2, + -brushImg.height / 2 + ); + drawContext.restore(); } lastPosition.set(x, y); @@ -221,10 +243,12 @@ export function setup(ctx, hall) { onSelectStart: (intersection, controller) => { var distance = intersection.distance; - if (distance > maxDistance) { return; } + if (distance > maxDistance) { + return; + } lastController = controller; - controller.getObjectByName('spraySound').play(); + controller.getObjectByName("spraySound").play(); let x = intersection.uv.x * width; let y = height - intersection.uv.y * height; @@ -232,9 +256,11 @@ export function setup(ctx, hall) { lastPosition.set(x, y); }, onSelectEnd: (intersection) => { - if (!lastController) { return; } - lastController.getObjectByName('spraySound').stop(); - } + if (!lastController) { + return; + } + lastController.getObjectByName("spraySound").stop(); + }, }); } diff --git a/src/stations/InfoPanels.js b/src/stations/InfoPanels.js index 13402d9..ec035ec 100644 --- a/src/stations/InfoPanels.js +++ b/src/stations/InfoPanels.js @@ -1,40 +1,59 @@ -import * as THREE from 'three'; -import { Children, Object3D, Billboard, Text, Position, ParentObject3D } from '../components/index.js'; -import INFO_DATA from './InfoPanelsData.js'; +import * as THREE from "three"; +import { + Children, + Object3D, + Billboard, + Text, + Position, + ParentObject3D, +} from "../components.js"; +import INFO_DATA from "./InfoPanelsData.js"; -var panels = [], panelTexts = [], panelsEntity = []; +var panels = [], + panelTexts = [], + panelsEntity = []; export function setup(ctx, hall) { for (var i = 0; i < INFO_DATA.length; i++) { - const id = i < 10 ? '0' + i : i; - panels[i] = hall.getObjectByName('infopanel0'+id); + const id = i < 10 ? "0" + i : i; + panels[i] = hall.getObjectByName("infopanel0" + id); panels[i].geometry.computeBoundingBox(); - const panelWidth = panels[i].geometry.boundingBox.max.x - panels[i].geometry.boundingBox.min.x; - const panelHeight = panels[i].geometry.boundingBox.max.y - panels[i].geometry.boundingBox.min.y; + const panelWidth = + panels[i].geometry.boundingBox.max.x - + panels[i].geometry.boundingBox.min.x; + const panelHeight = + panels[i].geometry.boundingBox.max.y - + panels[i].geometry.boundingBox.min.y; const offsety = INFO_DATA[i].offsety || 0; - panels[i].material = new THREE.MeshBasicMaterial({color: 0x040404, transparent: true}); + panels[i].material = new THREE.MeshBasicMaterial({ + color: 0x040404, + transparent: true, + }); panelTexts[i] = ctx.world.createEntity(); panelTexts[i] .addComponent(Text, { - color: '#ffffff', //0xdaa056, + color: "#ffffff", //0xdaa056, fontSize: 0.05, - anchor: 'left', - textAlign: 'left', - baseline: 'top', + anchor: "left", + textAlign: "left", + baseline: "top", maxWidth: panelWidth * 0.8, lineHeight: 1.3, - text: INFO_DATA[i].title + '\n \n' + INFO_DATA[i].description, + text: INFO_DATA[i].title + "\n \n" + INFO_DATA[i].description, }) - .addComponent(ParentObject3D, {value: panels[i]}) - .addComponent(Position, {x: -panelWidth / 2 * 0.82, y: panelHeight / 2 * 0.65 + offsety, z: 0.01}) - - panelsEntity[i] = ctx.world.createEntity(); - panelsEntity[i] - .addComponent(Object3D, {value: panels[i]}) - .addComponent(Billboard, {camera3D: ctx.camera}) - .addComponent(Children, {value: [panelTexts[i]]}); + .addComponent(ParentObject3D, { value: panels[i] }) + .addComponent(Position, { + x: (-panelWidth / 2) * 0.82, + y: (panelHeight / 2) * 0.65 + offsety, + z: 0.01, + }); + panelsEntity[i] = ctx.world.createEntity(); + panelsEntity[i] + .addComponent(Object3D, { value: panels[i] }) + .addComponent(Billboard, { camera3D: ctx.camera }) + .addComponent(Children, { value: [panelTexts[i]] }); } } diff --git a/src/stations/NewsTicker.js b/src/stations/NewsTicker.js index dfad81f..5a6b4b5 100644 --- a/src/stations/NewsTicker.js +++ b/src/stations/NewsTicker.js @@ -1,63 +1,73 @@ //import {Text} from '../lib/text.mjs'; -import * as THREE from 'three'; -import { Text, Rotation, Position, ParentObject3D } from '../components/index.js'; +import * as THREE from "three"; +import { Text, Rotation, Position, ParentObject3D } from "../components.js"; var newsTicker = { - url: 'assets/tweets.json', - hashtag: '#helloWebXR', + url: "assets/tweets.json", + hashtag: "#helloWebXR", hashtagText: null, authorText: null, messageText: null, news: [], - current: 0 + current: 0, }; var screenMaterial; export function setup(ctx, hall) { - const newsTickerMesh = hall.getObjectByName('newsticker'); + const newsTickerMesh = hall.getObjectByName("newsticker"); ctx.world.createEntity(); - screenMaterial = hall.getObjectByName('screen').material; + screenMaterial = hall.getObjectByName("screen").material; newsTicker.hashtagText = ctx.world.createEntity(); - newsTicker.hashtagText.addComponent(Text, { - color: '#f6cdde', //0xdaa056, - fontSize: 0.1, - anchor: 'right', - textAlign: 'right' - }).addComponent(ParentObject3D, {value: newsTickerMesh}); + newsTicker.hashtagText + .addComponent(Text, { + color: "#f6cdde", //0xdaa056, + fontSize: 0.1, + anchor: "right", + textAlign: "right", + }) + .addComponent(ParentObject3D, { value: newsTickerMesh }); newsTicker.authorText = ctx.world.createEntity(); - newsTicker.authorText.addComponent(Text, { - color: '#7f0c38', //0x67bccd, - fontSize: 0.1, - anchor: 'left', - }).addComponent(ParentObject3D, {value: newsTickerMesh}); + newsTicker.authorText + .addComponent(Text, { + color: "#7f0c38", //0x67bccd, + fontSize: 0.1, + anchor: "left", + }) + .addComponent(ParentObject3D, { value: newsTickerMesh }); newsTicker.messageText = ctx.world.createEntity(); - newsTicker.messageText.addComponent(Text, { - color: 0x000000, - fontSize: 0.13, - maxWidth: 2.3, - lineHeight: 1, - textAlign: 'left', - baseline: 'top', - anchor: 'left' - }).addComponent(ParentObject3D, {value: newsTickerMesh}); + newsTicker.messageText + .addComponent(Text, { + color: 0x000000, + fontSize: 0.13, + maxWidth: 2.3, + lineHeight: 1, + textAlign: "left", + baseline: "top", + anchor: "left", + }) + .addComponent(ParentObject3D, { value: newsTickerMesh }); - ['hashtag', 'author', 'message'].forEach( i => { - - newsTicker[`${i}Text`].addComponent(Position, hall.getObjectByName(i).position); - newsTicker[`${i}Text`].addComponent(Rotation, {x: 0, y: Math.PI, z: 0}); + ["hashtag", "author", "message"].forEach((i) => { + newsTicker[`${i}Text`].addComponent( + Position, + hall.getObjectByName(i).position + ); + newsTicker[`${i}Text`].addComponent(Rotation, { x: 0, y: Math.PI, z: 0 }); }); newsTicker.hashtagText.getMutableComponent(Text).text = newsTicker.hashtag; - fetch(newsTicker.url).then(res => res.json()).then(res => { - newsTicker.news = res; - nextNews(); - }); + fetch(newsTicker.url) + .then((res) => res.json()) + .then((res) => { + newsTicker.news = res; + nextNews(); + }); } function nextNews() { diff --git a/src/systems/AreaCheckerSystem.js b/src/systems/AreaCheckerSystem.js index 2ba8c9e..51e61c0 100644 --- a/src/systems/AreaCheckerSystem.js +++ b/src/systems/AreaCheckerSystem.js @@ -1,6 +1,14 @@ -import * as THREE from 'three'; -import {System} from 'ecsy'; -import {Area, AreaInside, AreaExiting, AreaEntering, Object3D, AreaChecker, BoundingBox} from '../components/index.js'; +import * as THREE from "three"; +import { System } from "ecsy"; +import { + Area, + AreaInside, + AreaExiting, + AreaEntering, + Object3D, + AreaChecker, + BoundingBox, +} from "../components.js"; export class AreaCheckerSystem extends System { execute(delta, time) { @@ -29,6 +37,6 @@ AreaCheckerSystem.queries = { components: [Area, BoundingBox], }, checkers: { - components: [AreaChecker, Object3D] - } -} \ No newline at end of file + components: [AreaChecker, Object3D], + }, +}; diff --git a/src/systems/BillboardSystem.js b/src/systems/BillboardSystem.js index 9d1dd91..a3aba65 100644 --- a/src/systems/BillboardSystem.js +++ b/src/systems/BillboardSystem.js @@ -1,6 +1,12 @@ -import * as THREE from 'three'; -import {System} from 'ecsy'; -import {Billboard, Object3D, Children, Text, Position} from '../components/index.js'; +import * as THREE from "three"; +import { System } from "ecsy"; +import { + Billboard, + Object3D, + Children, + Text, + Position, +} from "../components.js"; const SHOW_DISTANCE = 4; @@ -8,15 +14,14 @@ var cameraPosition = new THREE.Vector3(); export default class BillboardSystem extends System { execute(delta, time) { - window.context.camera.getWorldPosition(cameraPosition); - this.queries.entities.results.forEach(entity => { + this.queries.entities.results.forEach((entity) => { const object3D = entity.getComponent(Object3D).value; const distance = cameraPosition.distanceTo(object3D.position); let opacity = 0; - if (distance < SHOW_DISTANCE){ + if (distance < SHOW_DISTANCE) { opacity = THREE.Math.clamp(Math.sqrt(SHOW_DISTANCE - distance), 0, 1); object3D.lookAt(cameraPosition); } @@ -24,7 +29,7 @@ export default class BillboardSystem extends System { object3D.material.opacity = opacity; // panels text parent if (entity.hasComponent(Children)) { - entity.getComponent(Children).value.forEach(children => { + entity.getComponent(Children).value.forEach((children) => { let prevOpacity = children.getComponent(Text).opacity; if (prevOpacity !== opacity) { children.getMutableComponent(Text).opacity = opacity; @@ -37,6 +42,6 @@ export default class BillboardSystem extends System { BillboardSystem.queries = { entities: { - components: [Billboard, Object3D] - } -} + components: [Billboard, Object3D], + }, +}; diff --git a/src/systems/ControllersSystem.js b/src/systems/ControllersSystem.js index fd48658..dcf15e2 100644 --- a/src/systems/ControllersSystem.js +++ b/src/systems/ControllersSystem.js @@ -1,6 +1,15 @@ -import * as THREE from 'three'; -import {System} from 'ecsy'; -import {Area, AreaReactor, AreaInside, AreaExiting, AreaEntering, Object3D, AreaChecker, BoundingBox} from '../components/index.js'; +import * as THREE from "three"; +import { System } from "ecsy"; +import { + Area, + AreaReactor, + AreaInside, + AreaExiting, + AreaEntering, + Object3D, + AreaChecker, + BoundingBox, +} from "../components.js"; export class ControllersSystem extends System { execute(delta, time) { @@ -26,7 +35,7 @@ ControllersSystem.queries = { components: [AreaChecker, Object3D, AreaInside], listen: { added: true, - removed: true - } - } -} + removed: true, + }, + }, +}; diff --git a/src/systems/DebugHelperSystem.js b/src/systems/DebugHelperSystem.js index b3775ec..a0995f4 100644 --- a/src/systems/DebugHelperSystem.js +++ b/src/systems/DebugHelperSystem.js @@ -3,7 +3,7 @@ import { DebugHelper, DebugHelperMesh, BoundingBox, -} from "../components/index.js"; +} from "../components.js"; import { System, Not } from "ecsy"; import * as THREE from "three"; diff --git a/src/systems/HierarchySystem.js b/src/systems/HierarchySystem.js index af4397e..63e4616 100644 --- a/src/systems/HierarchySystem.js +++ b/src/systems/HierarchySystem.js @@ -1,24 +1,24 @@ -import * as THREE from 'three'; -import {System} from 'ecsy'; -import {Object3D, ParentObject3D} from '../components/index.js'; +import * as THREE from "three"; +import { System } from "ecsy"; +import { Object3D, ParentObject3D } from "../components.js"; export default class HierarchySystem extends System { execute(delta, time) { - this.queries.entities.added.forEach(entity => { + this.queries.entities.added.forEach((entity) => { const parent = entity.getComponent(ParentObject3D).value; const object = entity.getComponent(Object3D).value; parent.add(object); }); - this.queries.entities.changed.forEach(entity => { + this.queries.entities.changed.forEach((entity) => { const parent = entity.getComponent(ParentObject3D).value; const object = entity.getComponent(Object3D).value; parent.add(object); }); - this.queries.entities.removed.forEach(entity => { + this.queries.entities.removed.forEach((entity) => { const parent = entity.getComponent(ParentObject3D, true).value; parent.remove(entity.getComponent(Object3D, true).value); }); @@ -31,7 +31,7 @@ HierarchySystem.queries = { listen: { added: true, removed: true, - changed: true // [Component] - } - } -} + changed: true, // [Component] + }, + }, +}; diff --git a/src/systems/SDFTextSystem.js b/src/systems/SDFTextSystem.js index 5815bd1..f0cf5f2 100644 --- a/src/systems/SDFTextSystem.js +++ b/src/systems/SDFTextSystem.js @@ -1,7 +1,7 @@ import * as THREE from "three"; import { System } from "ecsy"; import { Text as TextMesh } from "troika-three-text"; -import { Object3D, Text } from "../components/index.js"; +import { Object3D, Text } from "../components.js"; const anchorMapping = { left: 0, diff --git a/src/systems/TransformSystem.js b/src/systems/TransformSystem.js index fdc523c..b90715f 100644 --- a/src/systems/TransformSystem.js +++ b/src/systems/TransformSystem.js @@ -1,13 +1,13 @@ -import {System} from 'ecsy'; -import {Object3D, Rotation, Position} from '../components/index.js'; +import { System } from "ecsy"; +import { Object3D, Rotation, Position } from "../components.js"; -let updateRotation = entity => { +let updateRotation = (entity) => { const rotation = entity.getComponent(Rotation); const object3D = entity.getComponent(Object3D).value; object3D.rotation.set(rotation.x, rotation.y, rotation.z); }; -let updatePosition = entity => { +let updatePosition = (entity) => { const position = entity.getComponent(Position); const object3D = entity.getComponent(Object3D).value; object3D.position.copy(position); @@ -30,14 +30,14 @@ TransformSystem.queries = { components: [Position, Object3D], listen: { added: true, - changed: true - } + changed: true, + }, }, rotation: { components: [Rotation, Object3D], listen: { added: true, - changed: true - } - } -} \ No newline at end of file + changed: true, + }, + }, +};