{
height={characterIconSize * pixelRatio}
ref={canvasRef}
/>
- 
+
+
@@ -107,7 +109,7 @@ const CharacterIcon = () => {
);
};
-export const AvatarIcon = ({ className }) => {
+export const AvatarIcon = () => {
const { state, setState } = useContext( AppContext );
const handleCharacterBtnClick = () => {
@@ -124,7 +126,7 @@ export const AvatarIcon = ({ className }) => {
return (
);
-};
+};
\ No newline at end of file
diff --git a/src/AvatarIcon.module.css b/src/AvatarIcon.module.css
index 158c34501c..89cf02e8ad 100644
--- a/src/AvatarIcon.module.css
+++ b/src/AvatarIcon.module.css
@@ -1,14 +1,3 @@
-@keyframes rotate {
- 0% {
- transform: rotate(0deg);
- }
- 50% {
- transform: rotate(180deg);
- }
- 100% {
- transform: rotate(360deg);
- }
-}
@keyframes hueRotate {
0% {
filter: hue-rotate(0deg);
@@ -53,23 +42,17 @@
transform: scale(1.4);
} */
-.characterIcon.loaded .placeholderImg {
- display: none;
-}
.characterIcon .placeholderImg {
position: absolute;
top: 10px;
left: 10px;
width: calc( var(--canvas-size) - 10px * 2);
height: calc( var(--canvas-size) - 10px * 2);
-
- animation-name: rotate;
- animation-duration: 1s;
- animation-iteration-count: infinite;
- animation-timing-function: linear;
-
z-index: 1;
}
+.characterIcon.loaded .placeholderImg {
+ display: none;
+}
.avatarIcon .characterIcon {
display: flex;
diff --git a/src/BigButton.jsx b/src/BigButton.jsx
new file mode 100644
index 0000000000..c5c4627539
--- /dev/null
+++ b/src/BigButton.jsx
@@ -0,0 +1,18 @@
+import React, { useEffect, useState, useRef, useContext } from 'react';
+import classnames from 'classnames';
+import styles from './BigButton.module.css';
+
+export const BigButton = ({
+ highlight = false,
+ onClick,
+ children,
+}) => {
+ return (
+
+ {children}
+
+ );
+};
\ No newline at end of file
diff --git a/src/BigButton.module.css b/src/BigButton.module.css
new file mode 100644
index 0000000000..2dcb70eda7
--- /dev/null
+++ b/src/BigButton.module.css
@@ -0,0 +1,49 @@
+@keyframes highlight {
+ 0% {
+ border-color: #FFF;
+ }
+ 50% {
+ border-color: #808080;
+ }
+ 100% {
+ border-color: #808080;
+ }
+}
+@keyframes highlight2 {
+ 0% {
+ background-color: #FFF;
+ color: #000;
+ }
+ 50% {
+ background-color: #000;
+ color: #FFF;
+ }
+ 100% {
+ background-color: #000;
+ color: #FFF;
+ }
+}
+.bigButton {
+ display: flex;
+ margin: 15px 30px;
+ margin-top: auto;
+ padding: 10px;
+ border: 2px solid #FFF;
+ font-family: 'GeoSans';
+ font-size: 20px;
+ justify-content: center;
+ color: #FFF;
+ cursor: pointer;
+ opacity: 0.3;
+ animation: highlight 1s step-end infinite;
+ transition: opacity 0.3s ease-out;
+}
+.bigButton:hover {
+ animation: none;
+ opacity: 1;
+ transition: opacity 1s cubic-bezier(0, 1, 0, 1);
+}
+.bigButton.highlight {
+ animation: highlight2 0.15s step-end infinite;
+ opacity: 1;
+}
\ No newline at end of file
diff --git a/src/CachedLoader.jsx b/src/CachedLoader.jsx
new file mode 100644
index 0000000000..bad9cfc06b
--- /dev/null
+++ b/src/CachedLoader.jsx
@@ -0,0 +1,53 @@
+export class CachedLoader extends EventTarget {
+ constructor({
+ loadFn,
+ }) {
+ super();
+
+ this.loadFn = loadFn;
+ this.loading = false;
+ this.cache = new Map();
+ this.promiseCache = new Map();
+ }
+ #setLoading(loading) {
+ this.loading = loading;
+ this.dispatchEvent(new MessageEvent('loadingchange', {
+ data: {
+ loading,
+ },
+ }));
+ }
+ async loadItem(url, value, {signal = null} = {}) {
+ this.#setLoading(true);
+
+ try {
+ let promise = this.promiseCache.get(url);
+ if (!promise) {
+ promise = this.loadFn(url, value, {signal})
+ .catch(err => {
+ // console.warn(err);
+ return null;
+ })
+ .then(result => {
+ signal.removeEventListener('abort', abort);
+ return result;
+ });
+ this.promiseCache.set(url, promise);
+ const abort = () => {
+ this.promiseCache.delete(url);
+ };
+ signal.addEventListener('abort', abort);
+ }
+
+ const result = await promise;
+ return result;
+ } finally {
+ this.#setLoading(false);
+ }
+ }
+ destroy() {
+ for (const url of this.promiseCache.keys()) {
+ URL.revokeObjectURL(url);
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/CharacterBanner.jsx b/src/CharacterBanner.jsx
new file mode 100644
index 0000000000..4536a7af7d
--- /dev/null
+++ b/src/CharacterBanner.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from './CharacterBanner.module.css';
+
+export const CharacterBanner = () => {
+ return (
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/CharacterBanner.module.css b/src/CharacterBanner.module.css
new file mode 100644
index 0000000000..f0ca45be68
--- /dev/null
+++ b/src/CharacterBanner.module.css
@@ -0,0 +1,20 @@
+.menu {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-image: linear-gradient(to bottom, #333, #000);
+ font-family: 'PlazaRegular';
+ color: #FFF;
+ font-size: 36px;
+}
+.menu h1,
+.menu p
+{
+ margin: 30px;
+}
+.menu h1 {
+ font-size: 50px;
+ font-family: 'WinchesterCaps';
+}
\ No newline at end of file
diff --git a/src/ClaimsNotification.jsx b/src/ClaimsNotification.jsx
new file mode 100644
index 0000000000..b2e3d99e17
--- /dev/null
+++ b/src/ClaimsNotification.jsx
@@ -0,0 +1,60 @@
+// import * as THREE from 'three';
+import React, {useState, useEffect, useContext} from 'react';
+import classnames from 'classnames';
+// import style from './DragAndDrop.module.css';
+// import {world} from '../world.js';
+// import {getRandomString, handleUpload} from '../util.js';
+// import {registerIoEventHandler, unregisterIoEventHandler} from './components/general/io-handler/IoHandler.jsx';
+// import {registerLoad} from './LoadingBox.jsx';
+// import {ObjectPreview} from './ObjectPreview.jsx';
+// import game from '../game.js';
+// import {getRenderer} from '../renderer.js';
+// import metaversefile from 'metaversefile';
+import { AppContext } from './components/app';
+
+import styles from './ClaimsNotification.module.css';
+
+import dropManager from '../drop-manager.js';
+
+const ClaimsNotification = () => {
+ const {state, setState} = useContext(AppContext);
+ const [numClaims, setNumClaims] = useState(0);
+
+ useEffect(() => {
+ const claimschange = e => {
+ console.log('set num claims', e.data.claims.length);
+ setNumClaims(e.data.claims.length);
+ };
+ dropManager.addEventListener('claimschange', claimschange);
+ return () => {
+ dropManager.removeEventListener('claimschange', claimschange);
+ };
+ }, []);
+
+ const open = numClaims > 0 && state.openedPanel === null;
+
+ const onClick = e => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ setState({
+ openedPanel: 'CharacterPanel',
+ });
+ };
+
+ return (
+ Ann's shop
+You break it you buy it!
+
+
+ );
+};
+export {
+ ClaimsNotification,
+};
\ No newline at end of file
diff --git a/src/ClaimsNotification.module.css b/src/ClaimsNotification.module.css
new file mode 100644
index 0000000000..3de9e880b2
--- /dev/null
+++ b/src/ClaimsNotification.module.css
@@ -0,0 +1,78 @@
+@keyframes flash {
+ 0% {
+ transform: translate3d(0, 0, 0);
+ opacity: 1;
+ }
+ 50% {
+ transform: translate3d(-77px, 30px, 300px) rotateZ(45deg);
+ opacity: 1;
+ }
+ 75% {
+ opacity: 1;
+ }
+ 100% {
+ transform: translate3d(-60px, -50px, -500px) rotateX(90deg) rotateZ(45deg);
+ opacity: 0;
+ }
+}
+
+.claimsNotification {
+ --height: 70px;
+ --margin: 10px;
+
+ position: fixed;
+ display: flex;
+ left: 350px;
+ bottom: -120px;
+ height: var(--height);
+ margin-bottom: 45px;
+ padding-right: 500px;
+ background-image: linear-gradient(to bottom, #333, #111);
+ border-radius: 10px;
+ color: #FFF;
+ font-size: 22px;
+ font-family: 'WinchesterCaps';
+ letter-spacing: 1px;
+ align-items: center;
+ cursor: pointer;
+ transition: transform 0.5s cubic-bezier(0, 1, 0, 1);
+}
+.claimsNotification.open {
+ transform: translateY(-110px);
+}
+.claimsNotification:hover {
+ background-image: linear-gradient(to bottom, #444, #222);
+}
+.claimsNotification .icon {
+ --size: 28px;
+
+ height: var(--size);
+ width: var(--size);
+ margin: 0 10px;
+}
+/* .claimsNotification .icon,
+.claimsNotification .label
+{
+ padding-right: 10px;
+} */
+.claimsNotification .value {
+ --size: 28px;
+
+ display: flex;
+ width: var(--size);
+ height: var(--size);
+ padding: 0 10px;
+ margin-left: 10px;
+ align-items: center;
+ /* background: #FFF; */
+ background-image: radial-gradient(#3a3a3a, transparent);
+ border-radius: 1000px;
+ box-shadow: inset 0 0 8px #000000a0;
+ /* color: #000; */
+ font-family: 'PlazaRegular';
+ font-size: 22px;
+ justify-content: center;
+}
+.claimsNotification .label {
+ margin: 0 10px;
+}
\ No newline at end of file
diff --git a/src/DomRenderer.jsx b/src/DomRenderer.jsx
new file mode 100644
index 0000000000..0570b47e42
--- /dev/null
+++ b/src/DomRenderer.jsx
@@ -0,0 +1,306 @@
+import * as THREE from 'three';
+import React, {useState, useEffect, useRef} from 'react';
+import gameManager from '../game.js';
+import {camera} from '../renderer.js';
+import cameraManager from '../camera-manager.js';
+import {getLocalPlayer} from '../players.js';
+
+// import {CharacterBanner} from './CharacterBanner.jsx';
+import domRenderEngine, {DomRenderEngine} from '../dom-renderer.jsx';
+
+const floatFactor = 0.05;
+const floatTime = 3000;
+const transtionTime = 1000;
+const scaleEpsilon = 0.01;
+
+const localVector = new THREE.Vector3();
+const localVector2 = new THREE.Vector3();
+const localQuaternion = new THREE.Quaternion();
+const localMatrix = new THREE.Matrix4();
+const localMatrix2 = new THREE.Matrix4();
+const localMatrix3 = new THREE.Matrix4();
+
+const scaleMatrix = new THREE.Matrix4().makeScale(1 + scaleEpsilon, 1 + scaleEpsilon, 1 + scaleEpsilon);
+
+const _getFov = () => camera.projectionMatrix.elements[ 5 ] * (window.innerHeight / 2);
+
+function epsilon(value) {
+ return value;
+ // return Math.abs(value) < 1e-10 ? 0 : value;
+}
+function getObjectCSSMatrix( matrix, cameraCSSMatrix ) {
+ var elements = matrix.elements;
+ var matrix3d = 'matrix3d(' +
+ epsilon( elements[ 0 ] ) + ',' +
+ epsilon( elements[ 1 ] ) + ',' +
+ epsilon( elements[ 2 ] ) + ',' +
+ epsilon( elements[ 3 ] ) + ',' +
+ epsilon( - elements[ 4 ] ) + ',' +
+ epsilon( - elements[ 5 ] ) + ',' +
+ epsilon( - elements[ 6 ] ) + ',' +
+ epsilon( - elements[ 7 ] ) + ',' +
+ epsilon( elements[ 8 ] ) + ',' +
+ epsilon( elements[ 9 ] ) + ',' +
+ epsilon( elements[ 10 ] ) + ',' +
+ epsilon( elements[ 11 ] ) + ',' +
+ epsilon( elements[ 12 ] ) + ',' +
+ epsilon( elements[ 13 ] ) + ',' +
+ epsilon( elements[ 14 ] ) + ',' +
+ epsilon( elements[ 15 ] ) +
+ ')';
+
+ /* if ( isIE ) {
+
+ return 'translate(-50%,-50%)' +
+ 'translate(' + _widthHalf + 'px,' + _heightHalf + 'px)' +
+ cameraCSSMatrix +
+ matrix3d;
+
+ } */
+
+ return matrix3d;
+}
+function getCameraCSSMatrix( matrix ) {
+ const {elements} = matrix;
+ return 'matrix3d(' +
+ epsilon( elements[ 0 ] ) + ',' +
+ epsilon( - elements[ 1 ] ) + ',' +
+ epsilon( elements[ 2 ] ) + ',' +
+ epsilon( elements[ 3 ] ) + ',' +
+ epsilon( elements[ 4 ] ) + ',' +
+ epsilon( - elements[ 5 ] ) + ',' +
+ epsilon( elements[ 6 ] ) + ',' +
+ epsilon( elements[ 7 ] ) + ',' +
+ epsilon( elements[ 8 ] ) + ',' +
+ epsilon( - elements[ 9 ] ) + ',' +
+ epsilon( elements[ 10 ] ) + ',' +
+ epsilon( elements[ 11 ] ) + ',' +
+ epsilon( elements[ 12 ] ) + ',' +
+ epsilon( - elements[ 13 ] ) + ',' +
+ epsilon( elements[ 14 ] ) + ',' +
+ epsilon( elements[ 15 ] ) +
+ ')';
+}
+
+const DomRendererChild = ({
+ dom,
+ innerWidth,
+ innerHeight,
+ range = 5,
+}) => {
+ const {width, height} = dom;
+ const scaleFactor = DomRenderEngine.getScaleFactor(width, height);
+ const [visible, setVisible] = useState(false);
+ const iframeContainer2Ref = useRef();
+
+ // tracking
+ useEffect(() => {
+ const iframeContainer2 = iframeContainer2Ref.current;
+
+ if (iframeContainer2) {
+ const frame = e => {
+ const {timestamp} = e.data;
+
+ const _animateMenuFloat = () => {
+ const now = timestamp;
+
+ dom.floatNode.position.set(0, 0, 0);
+ dom.floatNode.position.y += Math.sin((now % floatTime)/floatTime * 2 * Math.PI) * floatFactor;
+ dom.floatNode.position.y += Math.cos(((now / 2) % floatTime)/floatTime * 2 * Math.PI) * floatFactor/2;
+ dom.floatNode.position.y += Math.sin(((now / 4) % floatTime)/floatTime * 2 * Math.PI) * floatFactor/4;
+ dom.floatNode.updateMatrixWorld();
+ };
+ _animateMenuFloat();
+
+ const floatNodeMatrixWorld = localMatrix3
+ .multiplyMatrices(dom.floatNode.matrixWorld, scaleMatrix);
+
+ const _updateCameraContainerMatrix = () => {
+ const fov = _getFov();
+ const cameraCSSMatrix = getCameraCSSMatrix(
+ localMatrix.copy(camera.matrixWorldInverse)
+ .premultiply(
+ localMatrix2.makeTranslation(0, 0, fov)
+ )
+ .multiply(
+ floatNodeMatrixWorld
+ )
+ );
+ iframeContainer2.style.transform = cameraCSSMatrix;
+ };
+ _updateCameraContainerMatrix();
+ };
+ gameManager.addEventListener('frame', frame);
+
+ return () => {
+ gameManager.removeEventListener('frame', frame);
+ };
+ }
+ }, [iframeContainer2Ref]);
+
+ // visibility
+ useEffect(() => {
+ const frame = e => {
+ const {timestamp} = e.data;
+ const startTime = timestamp;
+ const endTime = startTime + transtionTime;
+
+ const _updateVisibility = () => {
+ const localPlayer = getLocalPlayer();
+ const distance = localPlayer.position.distanceTo(dom.position);
+ const isInRange = distance < range;
+ if (isInRange && !visible) {
+ setVisible(true);
+ dom.startAnimation(true, startTime, endTime);
+ } else if (visible && !isInRange) {
+ setVisible(false);
+ dom.startAnimation(false, startTime, endTime);
+ }
+ };
+ _updateVisibility();
+
+ const _updateAnimation = () => {
+ dom.update(timestamp)
+ };
+ _updateAnimation();
+ };
+ gameManager.addEventListener('frame', frame);
+
+ return () => {
+ gameManager.removeEventListener('frame', frame);
+ };
+ }, [visible]);
+
+ const preventDefault = e => {
+ // e.preventDefault();
+ e.stopPropagation();
+ };
+
+ return (
+ {numClaims}
+ Claims
+
+
+ );
+}
+
+const DomRendererChildren = ({
+ domRenderEngine,
+ innerWidth,
+ innerHeight,
+ fov,
+}) => {
+ const [epoch, setEpoch] = useState(0);
+
+ useEffect(() => {
+ const update = () => {
+ setEpoch(epoch + 1);
+ };
+ domRenderEngine.addEventListener('update', update);
+ return () => {
+ domRenderEngine.removeEventListener('update', update);
+ };
+ }, [epoch]);
+
+ return <>
+ {domRenderEngine.doms.map((dom, i) => {
+ return (
+
+ {dom.render()}
+
+
+
+ );
+};
+export {
+ DomRenderer,
+};
\ No newline at end of file
diff --git a/src/DomRenderer.module.css b/src/DomRenderer.module.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/Header.jsx b/src/Header.jsx
index 55fb96e22b..84f488d5de 100644
--- a/src/Header.jsx
+++ b/src/Header.jsx
@@ -14,10 +14,10 @@ import { Tokens } from './tabs/tokens';
import { registerIoEventHandler, unregisterIoEventHandler } from './components/general/io-handler';
import { AppContext } from './components/app';
import { AvatarIcon } from './AvatarIcon';
+import { StoryTime } from './StoryTime';
import { User } from './User';
import styles from './Header.module.css';
-import { UIMode } from './components/general/ui-mode/index.jsx';
//
@@ -262,17 +262,14 @@ export default function Header() {
localPlayer={localPlayer}
npcs={npcs}
/>
+ */}
-
-
-
-
+ {
+ const frontCanvasRef = useRef();
+ const backCanvasRef = useRef();
+
+ useEffect(() => {
+ const canvas = frontCanvasRef.current;
+ if (canvas) {
+ const ctx = canvas.getContext('2d');
+ if (imageBitmap) {
+ ctx.drawImage(imageBitmap, 0, 0);
+ } else {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ }
+ }
+ }, [frontCanvasRef, imageBitmap]);
+
+ useEffect(() => {
+ const canvas = backCanvasRef.current;
+ if (canvas) {
+ const ctx = canvas.getContext('2d');
+ if (backImageBitmap) {
+ ctx.drawImage(backImageBitmap, 0, 0);
+ } else {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ }
+ }
+ }, [backCanvasRef, backImageBitmap]);
+
+ const _getStyle = front => {
+ return {
+ transform: `rotateY(${(rotateY + ((+flip ^ +front) ? 0 : Math.PI)).toFixed(8)}rad) rotateX(${rotateX.toFixed(8)}rad)`,
+ };
+ };
+
+ return (
+
+ {backImageBitmap ? (
+
+ ) : null}
+ {imageBitmap ? (
+
+ ) : null}
+
+ );
+};
\ No newline at end of file
diff --git a/src/ImageBitmapCanvas.module.css b/src/ImageBitmapCanvas.module.css
new file mode 100644
index 0000000000..b6bca039a2
--- /dev/null
+++ b/src/ImageBitmapCanvas.module.css
@@ -0,0 +1,15 @@
+.imageBitmapCanvas {
+ position: relative;
+ display: flex;
+}
+.imageBitmapCanvas .canvas {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: inherit;
+ height: inherit;
+ backface-visibility: hidden;
+}
+.imageBitmapCanvas .backCanvas {
+ transform: rotateY(180deg);
+}
\ No newline at end of file
diff --git a/src/LightArrow.jsx b/src/LightArrow.jsx
index cf42be3f97..9944d20615 100644
--- a/src/LightArrow.jsx
+++ b/src/LightArrow.jsx
@@ -191,13 +191,16 @@ const _downloadArrowImage = async () => {
};
export const LightArrow = function({
+ className,
enabled = true,
+ up = false,
down = false,
animate = false,
x,
y,
ax,
ay,
+ onClick,
}) {
const canvasRef = useRef();
@@ -244,13 +247,16 @@ export const LightArrow = function({
className={classnames(
styles.lightArrowContainer,
enabled ? styles.enabled : null,
+ up ? styles.up : null,
down ? styles.down : null,
+ className,
)}
style={{
transform: `translate(${x}px, ${y}px)`,
left: ax,
top: ay,
}}
+ onClick={onClick}
>
{
+ return (
+ 
+ );
+};
\ No newline at end of file
diff --git a/src/PlaceholderImg.module.css b/src/PlaceholderImg.module.css
new file mode 100644
index 0000000000..c23fe4bcd8
--- /dev/null
+++ b/src/PlaceholderImg.module.css
@@ -0,0 +1,18 @@
+@keyframes rotate {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 50% {
+ transform: rotate(180deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+.placeholderImg {
+ animation-name: rotate;
+ animation-duration: 1s;
+ animation-iteration-count: infinite;
+ animation-timing-function: linear;
+}
\ No newline at end of file
diff --git a/src/QuickMenu.jsx b/src/QuickMenu.jsx
index 8698853d34..3a1b909012 100644
--- a/src/QuickMenu.jsx
+++ b/src/QuickMenu.jsx
@@ -51,13 +51,21 @@ const chevronSize = 50;
export default function QuickMenu() {
const [open, setOpen] = useState(false);
const [down, setDown] = useState(false);
- const [selectedSlice, setSelectedSlice] = useState(-1);
+ const [selectedSlice, _setSelectedSlice] = useState(-1);
const [selectedDepth, setSelectedDepth] = useState(-1);
const [coords, setCoords] = useState([0, 0]);
const [emoteIconImages, setEmoteIconImages] = useState(null);
const [chevronImage, setChevronImage] = useState(null);
const canvasRef = useRef();
+ const setSelectedSlice = v => {
+ if (v !== selectedSlice) {
+ _setSelectedSlice(v);
+ // XXX this needs to be quieter (configurable per-sound volume)
+ // sounds.playSoundName('menuClick');
+ }
+ };
+
const _getSelectedEmote = () => {
if (selectedSlice !== -1 && selectedDepth !== -1) {
return emotes[selectedSlice].name + (selectedDepth === 0 ? 'Soft' : '');
@@ -86,7 +94,7 @@ export default function QuickMenu() {
if (game.inputFocused()) return true;
if (!e.repeat) {
- if (e.keyCode === 81) { // Q
+ if (e.keyCode === 81 && !e.ctrlKey) { // Q
cameraManager.requestPointerLock();
setOpen(true);
diff --git a/src/RpgText.jsx b/src/RpgText.jsx
index 6b869f884a..0cc3c94d0e 100644
--- a/src/RpgText.jsx
+++ b/src/RpgText.jsx
@@ -8,10 +8,11 @@ export const RpgText = ({
text,
textSpeed = chatTextSpeed,
}) => {
+ const [lastText, setLastText] = useState(text);
const [progressText, setProgressText] = useState('');
useEffect(() => {
- if (text.length === 0) {
+ if (!text.startsWith(lastText)) {
setProgressText('');
} else if (progressText.length < text.length) {
const timeout = setTimeout(() => {
@@ -23,7 +24,10 @@ export const RpgText = ({
clearTimeout(timeout);
};
}
- }, [text, progressText]);
+ if (text !== lastText) {
+ setLastText(text);
+ }
+ }, [text, progressText, lastText]);
return
0 ? styles.open : null)}>{progressText}
;
};
\ No newline at end of file
diff --git a/src/StoryTime.jsx b/src/StoryTime.jsx
new file mode 100644
index 0000000000..e8c9c89f15
--- /dev/null
+++ b/src/StoryTime.jsx
@@ -0,0 +1,141 @@
+// import * as THREE from 'three';
+import React, {useState, useEffect} from 'react';
+import * as sounds from '../sounds.js';
+import storyManager from '../story.js';
+import {registerIoEventHandler, unregisterIoEventHandler} from './components/general/io-handler';
+import {MegaChatBox} from './components/play-mode/mega-chat-box';
+
+import styles from './StoryTime.module.css';
+
+const _progressConversation = () => {
+ const conversation = storyManager.getConversation();
+ conversation.progress();
+
+ sounds.playSoundName('menuNext');
+};
+
+export const StoryTime = () => {
+ const [message, setMessage] = useState(null);
+ const [options, setOptions] = useState(null);
+ const [option, setOption] = useState(null);
+ const [hoverIndex, setHoverIndex] = useState(null);
+ const [progressing, setProgressing] = useState(false);
+ const [finished, setFinished] = useState(false);
+
+ const _continue = () => {
+ if (!progressing) {
+ _progressConversation();
+ }
+ };
+
+ useEffect(() => {
+ function conversationstart(e) {
+ const {conversation} = e.data;
+ conversation.addEventListener('message', e => {
+ const {message} = e.data;
+ setFinished(false);
+ setMessage(message);
+ });
+ conversation.addEventListener('options', e => {
+ const {options} = e.data;
+ if (options) {
+ setOptions(options);
+ setOption(null);
+ }
+ });
+ conversation.addEventListener('hoverindex', e => {
+ const {hoverIndex} = e.data;
+ setHoverIndex(hoverIndex);
+
+ sounds.playSoundName('menuMove');
+ });
+ conversation.addEventListener('option', e => {
+ const {option} = e.data;
+ setOption(option);
+ });
+
+ conversation.addEventListener('progressstart', e => {
+ setProgressing(true);
+ });
+ conversation.addEventListener('progressend', e => {
+ setProgressing(false);
+ });
+
+ conversation.addEventListener('finish', e => {
+ setFinished(true);
+
+ sounds.playSoundName('menuDone');
+ });
+
+ conversation.addEventListener('close', e => {
+ setMessage(null);
+ });
+ }
+ storyManager.addEventListener('conversationstart', conversationstart);
+
+ return () => {
+ storyManager.removeEventListener('conversationstart', conversationstart);
+ };
+ }, []);
+
+ useEffect(() => {
+ if (message) {
+ const handleKeyDown = event => {
+
+ if (event.which === 13) { // enter
+ _continue();
+
+ return false;
+ }
+ };
+
+ registerIoEventHandler('keydown', handleKeyDown);
+
+ return () => {
+ unregisterIoEventHandler('keydown', handleKeyDown);
+ };
+ }
+ }, [message, progressing]);
+
+ useEffect(() => {
+ // console.log('check options', options, option);
+ if (options && option) {
+ // console.log('set timeout', options, option);
+ const timeout = setTimeout(() => {
+ // console.log('clear options');
+ setOptions(null);
+ setOption(null);
+ setHoverIndex(null);
+ }, 1000);
+
+ return () => {
+ // console.log('clear options timeout');
+ clearTimeout(timeout);
+ };
+ }
+ }, [options, option]);
+
+ return (
+
+ {
+ const conversation = storyManager.getConversation();
+ conversation.progressOptionSelect(option);
+
+ sounds.playSoundName('menuSelect');
+ }}
+ onClick={e => {
+ if (!progressing) {
+ _progressConversation();
+ }
+ }}
+ />
+
+ );
+};
\ No newline at end of file
diff --git a/src/StoryTime.module.css b/src/StoryTime.module.css
new file mode 100644
index 0000000000..ea1ea3cee0
--- /dev/null
+++ b/src/StoryTime.module.css
@@ -0,0 +1,11 @@
+.storyTime {
+ display: flex;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ pointer-events: none;
+
+ --width: 350px;
+}
\ No newline at end of file
diff --git a/src/User.jsx b/src/User.jsx
index a846d37335..84a50369b9 100644
--- a/src/User.jsx
+++ b/src/User.jsx
@@ -16,7 +16,7 @@ import * as sounds from '../sounds.js';
//
-export const User = ({ className, address, setAddress, setLoginFrom }) => {
+export const User = ({ address, setAddress, setLoginFrom }) => {
const { state, setState } = useContext( AppContext );
const [ensName, setEnsName] = useState('');
@@ -224,10 +224,9 @@ export const User = ({ className, address, setAddress, setLoginFrom }) => {
open ? styles.open : null,
loggedIn ? styles.loggedIn : null,
loggingIn ? styles.loggingIn : null,
- className
) }
>
- {
+
{
e.preventDefault();
e.stopPropagation();
diff --git a/src/User.module.css b/src/User.module.css
index d79ce5096d..5c558ff690 100644
--- a/src/User.module.css
+++ b/src/User.module.css
@@ -46,19 +46,14 @@
/* */
.user .keyWrap {
+ position: absolute;
top: 0;
right: 0;
width: 180px;
perspective: 400px;
perspective-origin: -100px 100px;
pointer-events: all;
- transition: transform 200ms cubic-bezier( 0, 1, 0, 1 );
-}
-
-.user .keyWrap.hiddenUI {
- transform: translateX( 100% );
}
-
.user:not(.loggedIn) .keyWrap {
cursor: pointer;
}
diff --git a/src/components/app/App.jsx b/src/components/app/App.jsx
index 92f4ef1cee..506caf16bb 100644
--- a/src/components/app/App.jsx
+++ b/src/components/app/App.jsx
@@ -1,7 +1,8 @@
import React, { useState, useEffect, useRef, createContext } from 'react';
+import classnames from 'classnames';
-import { defaultAvatarUrl } from '../../../constants';
+import { defaultPlayerSpec } from '../../../constants';
import game from '../../../game';
import sceneNames from '../../../scenes/scenes.json';
@@ -11,7 +12,6 @@ import universe from '../../../universe.js';
import metaversefileApi from '../../../metaversefile-api';
import cameraManager from '../../../camera-manager';
import { world } from '../../../world';
-import { handleStoryKeyControls } from '../../../story';
import { ActionMenu } from '../general/action-menu';
import { Crosshair } from '../general/crosshair';
@@ -29,10 +29,14 @@ import { PlayMode } from '../play-mode';
import { EditorMode } from '../editor-mode';
import Header from '../../Header.jsx';
import QuickMenu from '../../QuickMenu.jsx';
-import { UIMode } from '../general/ui-mode';
+import {ClaimsNotification} from '../../ClaimsNotification.jsx';
+import {DomRenderer} from '../../DomRenderer.jsx';
+// import * as voices from '../../../voices';
+import {handleStoryKeyControls} from '../../../story';
import styles from './App.module.css';
import '../../fonts.css';
+import raycastManager from '../../../raycast-manager';
//
@@ -49,7 +53,8 @@ const _startApp = async ( weba, canvas ) => {
await weba.startLoop();
const localPlayer = metaversefileApi.useLocalPlayer();
- await localPlayer.setAvatarUrl( defaultAvatarUrl );
+ // console.log('set player spec', defaultPlayerSpec);
+ await localPlayer.setPlayerSpec(defaultPlayerSpec);
};
@@ -79,29 +84,53 @@ const _getCurrentRoom = () => {
export const AppContext = createContext();
const useWebaverseApp = (() => {
+ let webaverse = null;
+ return () => {
+ if ( webaverse === null ) {
+ webaverse = new Webaverse();
+ }
+ return webaverse;
+ };
+})();
- let webaverse = null;
+const Canvas = ({
+ app,
+}) => {
+ const canvasRef = useRef( null );
+ const [domHover, setDomHover] = useState( null );
- return () => {
+ useEffect( () => {
- if ( webaverse === null ) {
+ if ( canvasRef.current ) {
- webaverse = new Webaverse();
+ _startApp( app, canvasRef.current );
}
- return webaverse;
+ }, [ app, canvasRef ] );
- };
+ useEffect( () => {
+ const domhoverchange = e => {
+ const {domHover} = e.data;
+ // console.log('dom hover change', domHover);
+ setDomHover( domHover );
+ };
+ raycastManager.addEventListener('domhoverchange', domhoverchange);
-})();
+ return () => {
+ raycastManager.removeEventListener('domhoverchange', domhoverchange);
+ };
+ }, []);
+
+ return (
+
+ );
+};
export const App = () => {
const [ state, setState ] = useState({ openedPanel: null });
- const [ uiMode, setUIMode ] = useState( 'normal' );
- const canvasRef = useRef( null );
const app = useWebaverseApp();
const [ selectedApp, setSelectedApp ] = useState( null );
const [ selectedScene, setSelectedScene ] = useState( _getCurrentSceneSrc() );
@@ -134,24 +163,13 @@ export const App = () => {
}
- if ( state.openedPanel ) {
-
- setUIMode( 'normal' );
-
- }
-
}, [ state.openedPanel ] );
useEffect( () => {
const handleStoryKeyUp = ( event ) => {
- if ( game.inputFocused() ) {
-
- return;
-
- }
-
+ if ( game.inputFocused() ) return;
handleStoryKeyControls( event );
};
@@ -166,37 +184,6 @@ export const App = () => {
}, [] );
- useEffect( () => {
-
- if ( uiMode === 'none' ) {
-
- setState({ openedPanel: null });
-
- }
-
- const handleKeyDown = ( event ) => {
-
- if ( event.ctrlKey && event.code === 'KeyH' ) {
-
- setUIMode( uiMode === 'normal' ? 'none' : 'normal' );
- return false;
-
- }
-
- return true;
-
- };
-
- registerIoEventHandler( 'keydown', handleKeyDown );
-
- return () => {
-
- unregisterIoEventHandler( 'keydown', handleKeyDown );
-
- };
-
- }, [ uiMode ] );
-
useEffect( () => {
const handleClick = () => {
@@ -268,16 +255,6 @@ export const App = () => {
useEffect( _loadUrlState, [] );
- useEffect( () => {
-
- if ( canvasRef.current ) {
-
- _startApp( app, canvasRef.current );
-
- }
-
- }, [ canvasRef ] );
-
//
const onDragOver = e => {
@@ -299,15 +276,20 @@ export const App = () => {
onDragEnd={onDragEnd}
onDragOver={onDragOver}
>
-
+
-
+
+ {
);
diff --git a/src/components/app/App.module.css b/src/components/app/App.module.css
index 098c8f9747..1887250a5b 100644
--- a/src/components/app/App.module.css
+++ b/src/components/app/App.module.css
@@ -1,56 +1,60 @@
* {
- box-sizing: border-box;
+ box-sizing: border-box;
}
@keyframes spin {
- 0% { transform: rotate(0deg); }
- 100% { transform: rotate(360deg); }
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
}
html, body {
- position: fixed;
- width: 100%;
- height: 100%;
- overflow: hidden;
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
- margin: 0;
- font-family: 'Muli';
- font-size: 12px;
+ margin: 0;
+ font-family: 'Muli';
+ font-size: 12px;
- --color: #ec407a;
- --color2: #ffa726;
- --color3: #42a5f5;
+ --color: #ec407a;
+ --color2: #ffa726;
+ --color3: #42a5f5;
}
-body {
- background-color: #000;
-}
+/* body {
+ background-color: #000;
+} */
.App {
- height: 100%;
- width: 100%;
- /* text-align: center; */
+ height: 100%;
+ width: 100%;
+ /* text-align: center; */
}
.canvas {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- width: 100vw;
- height: 100vh;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ width: 100vw;
+ height: 100vh;
+}
+
+.canvas.domHover {
+ pointer-events: none;
}
/* */
::-webkit-scrollbar {
- width: 1em;
+ width: 1em;
}
::-webkit-scrollbar-track {
- box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+ box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-thumb {
- background-color: darkgrey;
- outline: 1px solid slategrey;
+ background-color: darkgrey;
+ outline: 1px solid slategrey;
}
\ No newline at end of file
diff --git a/src/components/editor-mode/index.jsx b/src/components/editor-mode/index.jsx
index 92009ca2ac..7e12065352 100644
--- a/src/components/editor-mode/index.jsx
+++ b/src/components/editor-mode/index.jsx
@@ -4,7 +4,6 @@ import React from 'react';
import { MagicMenu } from './magic-menu';
import { SceneMenu } from './scene-menu';
import { Inspector } from './inspector';
-import { UIMode } from '../general/ui-mode';
//
@@ -16,15 +15,13 @@ export const EditorMode = ({ selectedScene, setSelectedScene, selectedRoom, setS
return (
-
-
+
diff --git a/src/components/editor-mode/scene-menu/SceneMenu.jsx b/src/components/editor-mode/scene-menu/SceneMenu.jsx
index 2548d8a6e6..d9edd99dd3 100644
--- a/src/components/editor-mode/scene-menu/SceneMenu.jsx
+++ b/src/components/editor-mode/scene-menu/SceneMenu.jsx
@@ -2,7 +2,6 @@
import React, { useState, useEffect, useContext, useRef } from 'react';
import classnames from 'classnames';
-import { world } from '../../../../world'
import universe from '../../../../universe'
import voiceInput from '../../../../voice-input/voice-input';
import sceneNames from '../../../../scenes/scenes.json';
@@ -23,7 +22,7 @@ sceneNames.forEach( ( name ) => {
//
-export const SceneMenu = ({ className, multiplayerConnected, selectedScene, setSelectedScene, selectedRoom, setSelectedRoom }) => {
+export const SceneMenu = ({ multiplayerConnected, selectedScene, setSelectedScene, selectedRoom, setSelectedRoom }) => {
const { state, setState } = useContext( AppContext );
const sceneNameInputRef = useRef( null );
@@ -127,7 +126,7 @@ export const SceneMenu = ({ className, multiplayerConnected, selectedScene, setS
setState({ openedPanel: null });
- if ( ! world.isConnected() ) {
+ if ( ! universe.isConnected() ) {
universe.pushUrl( `/?src=${ encodeURIComponent( selectedScene ) }&room=${ room.name }` );
@@ -261,7 +260,7 @@ export const SceneMenu = ({ className, multiplayerConnected, selectedScene, setS
//
return (
-
+
);
diff --git a/src/components/general/equipment/equipment.module.css b/src/components/general/equipment/equipment.module.css
index e7b157a9b1..ac4283fde9 100644
--- a/src/components/general/equipment/equipment.module.css
+++ b/src/components/general/equipment/equipment.module.css
@@ -145,7 +145,7 @@
/* */
-.item {
+.object {
--size: 80px;
display: flex;
@@ -155,8 +155,8 @@
cursor: pointer;
user-select: none;
}
-.item .background,
-.item .highlight
+.object .background,
+.object .highlight
{
position: absolute;
width: var(--size);
@@ -164,57 +164,74 @@
border-radius: 1000px;
transform-origin: 50% 50%;
}
-.item .background {
+.object .background {
background-color: #111;
}
-.item .highlight {
+.object .highlight {
background-color: #FFF;
transform: scale(0, 0);
transition: transform 0.3s cubic-bezier(0, 1, 0, 1);
}
-.item:hover .highlight,
-.item.selected .highlight
+.object:hover .highlight,
+.object.selected .highlight
{
transform: none;
}
-.item:active .highlight,
-.item:active .background
+.object:active .highlight,
+.object:active .background
{
transform: scale(0.9, 0.9);
}
-.item.selected .highlight {
+.object.selected .highlight {
background-image: radial-gradient(#7e57c2, #512da8);
}
-.item .canvas,
-.item .name,
-.item .level {
+.object.highlighted {
+ background-image: linear-gradient(to bottom, #ff7043, #e64a19);
+}
+.object.highlighted .background {
+ background-color: #7e57c2;
+}
+.object .canvas,
+.object .name,
+.object .level {
pointer-events: none;
}
-.item .canvas {
+.object .canvas {
position: relative;
width: var(--size);
height: var(--size);
}
-.item .row {
+.object .row {
display: flex;
align-items: baseline;
}
-.item .name,
-.item .level
+.object .name,
+.object .level
{
font-family: 'PlazaRegular';
}
-.item .name {
+.object .name {
margin-right: auto;
font-size: 18px;
}
-.item .level {
+.object .level {
font-size: 13px;
color: #666;
}
/* */
+.land {
+
+}
+.land .canvas {
+ --size: 300px;
+ width: var(--size);
+ height: var(--size);
+}
+
+/* */
+
.menuFooter {
--item-size: 100px;
diff --git a/src/components/general/io-handler/IoHandler.jsx b/src/components/general/io-handler/IoHandler.jsx
index 7bb3302dbb..60df22f46a 100644
--- a/src/components/general/io-handler/IoHandler.jsx
+++ b/src/components/general/io-handler/IoHandler.jsx
@@ -5,7 +5,7 @@ import ioManager from '../../../../io-manager.js';
//
-const types = [ 'keydown', 'keypress', 'keyup', 'click', 'mousedown', 'mouseup', 'mousemove', 'mouseenter', 'mouseleave', 'wheel', 'paste' ];
+const types = [ 'keydown', 'keypress', 'keyup', 'click', 'dblclick', 'mousedown', 'mouseup', 'mousemove', 'mouseenter', 'mouseleave', 'wheel', 'paste' ];
const ioEventHandlers = {};
for ( const type of types.concat(['']) ) {
diff --git a/src/components/general/map-gen/MapGen.jsx b/src/components/general/map-gen/MapGen.jsx
index 8d22b75016..8e93b6f061 100644
--- a/src/components/general/map-gen/MapGen.jsx
+++ b/src/components/general/map-gen/MapGen.jsx
@@ -2,54 +2,79 @@ import * as THREE from 'three';
import React, { useState, useEffect, useRef, useContext } from 'react';
import classnames from 'classnames';
import metaversefile from 'metaversefile';
-const {useLocalPlayer, useLoreAIScene, useSceneCruncher} = metaversefile;
+const {useLocalPlayer, useLoreAIScene} = metaversefile;
// import {world} from '../../../../world.js';
// import webaverse from '../../../../webaverse.js';
import {registerIoEventHandler, unregisterIoEventHandler} from '../io-handler';
import {MiniHup} from '../../../MiniHup.jsx';
// import {RpgText} from '../../../RpgText.jsx';
-import {getRenderer, rootScene, scene} from '../../../../renderer.js';
+import {getRenderer, rootScene, scene, sceneLowPriority} from '../../../../renderer.js';
import game from '../../../../game.js';
import {world} from '../../../../world.js';
import universe from '../../../../universe.js';
import cameraManager from '../../../../camera-manager.js';
+import story from '../../../../story.js';
+// import raycastManager from '../../../../raycast-manager.js';
import {snapshotMapChunk} from '../../../../scene-cruncher.js';
import {Text} from 'troika-three-text';
// import alea from '../../../../alea.js';
// import easing from '../../../../easing.js';
import musicManager from '../../../../music-manager.js';
+import {buildMaterial} from '../../../../shaders.js';
import {chatManager} from '../../../../chat-manager.js';
+import physicsManager from '../../../../physics-manager.js';
import {
makeRng,
- numBlocksPerChunk,
- voxelPixelSize,
+ // numBlocksPerChunk,
+ // voxelPixelSize,
chunkWorldSize,
placeNames,
- MapBlock,
+ // MapBlock,
createMapChunk,
createMapChunkMesh,
} from '../../../../procgen/procgen.js';
import styles from './map-gen.module.css';
import { AppContext } from '../../app';
+//
+
const localVector = new THREE.Vector3();
const localVector2 = new THREE.Vector3();
// const localVector3 = new THREE.Vector3();
-const localVectorX = new THREE.Vector3();
-const localVectorX2 = new THREE.Vector3();
+// const localVectorX = new THREE.Vector3();
+// const localVectorX2 = new THREE.Vector3();
const localVector2D = new THREE.Vector2();
const localQuaternion = new THREE.Quaternion();
+const localEuler = new THREE.Euler();
const localVector4D = new THREE.Vector4();
const localMatrix = new THREE.Matrix4();
-const localMatrix2 = new THREE.Matrix4();
-const localArray = [];
+// const localMatrix2 = new THREE.Matrix4();
+// const localArray = [];
// const localColor = new THREE.Color();
const localRaycaster = new THREE.Raycaster();
+const localPlane = new THREE.Plane();
+
+//
+const fakeGeometry = new THREE.BufferGeometry();
+const forwardDirection = new THREE.Vector3(0, 0, -1);
+const oneVector = new THREE.Vector3(1, 1, 1);
+const zeroVector = new THREE.Vector3(0, 0, 0);
+const upVector = new THREE.Vector3(0, 1, 0);
const downQuaternion = new THREE.Quaternion().setFromAxisAngle(
new THREE.Vector3(1, 0, 0),
-Math.PI / 2,
);
+const renderY = 60;
+
+//
+
+const seed = 'lol';
+const physicsInstance = 'map';
+const physicsScene = physicsManager.getScene(physicsInstance);
+
+(physicsInstance);
+const voxelPixelSize = 16;
//
@@ -187,19 +212,44 @@ export const MapGen = () => {
const { state, setState } = useContext( AppContext );
const [width, setWidth] = useState(window.innerWidth);
const [height, setHeight] = useState(window.innerHeight);
- const [position, setPosition] = useState(new THREE.Vector3(0, 0, 0));
- const [scale, setScale] = useState(1);
+ // const [position, setPosition] = useState(() => new THREE.Vector3(0, 100, 0));
+ // const [quaternion, setQuaternion] = useState(() => downQuaternion.clone());
+ // const [target, setTarget] = useState(() => position.clone().add(new THREE.Vector3(0, 0, -10).applyQuaternion(quaternion)));
+ // const [scale, setScale] = useState(1);
const [mouseState, setMouseState] = useState(null);
const [mapScene, setMapScene] = useState(() => new THREE.Scene());
- const [camera, setCamera] = useState(() => new THREE.OrthographicCamera());
- const [chunks, setChunks] = useState([]);
+ const [camera, setCamera] = useState(() => {
+ const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10 * 1000);
+ camera.position.y = 100;
+ camera.quaternion.copy(downQuaternion);
+ camera.updateMatrixWorld();
+ return camera;
+ });
+ // const [chunks, setChunks] = useState([]);
const [hoveredObject, setHoveredObject] = useState(null);
const [selectedChunk, setSelectedChunk] = useState(null);
const [selectedObject, setSelectedObject] = useState(null);
const [lastSelectTime, setLastSelectTime] = useState(-Infinity);
- const [chunkCache, setChunkCache] = useState(new Map());
+ // const [chunkCache, setChunkCache] = useState(new Map());
const [text, setText] = useState('');
+ const [firedropMeshApp, setFiredropMeshApp] = useState(null);
const [haloMeshApp, setHaloMeshApp] = useState(null);
+ const [silksMeshApp, setSilksMeshApp] = useState(null);
+ const [cometMeshApp, setCometMeshApp] = useState(null);
+ const [flareMeshApp, setFlareMeshApp] = useState(null);
+ const [magicMeshApp, setMagicMeshApp] = useState(null);
+ const [limitMeshApp, setLimitMeshApp] = useState(null);
+ const [terrainApp, setTerrainApp] = useState(null);
+ const [hoveredPhysicsMesh, setHighlightPhysicsMesh] = useState(null);
+ const [selectedPhysicsMesh, setSelectedPhysicsMesh] = useState(null);
+ const [loaded, setLoaded] = useState(false);
+
+ const [hoveredPhysicsObject, setHoveredPhysicsObject] = useState(null);
+ const [hoveredPoint, setHoveredPoint] = useState(null);
+ const [selectedPhysicsObject, setSelectedPhysicsObject] = useState(null);
+
+ const [animation, setAnimation] = useState(null);
+
const canvasRef = useRef();
//
@@ -207,15 +257,19 @@ export const MapGen = () => {
const open = state.openedPanel === 'MapGenPanel';
const selectedObjectName = selectedObject ? selectedObject.name : '';
+ // const renderer = getRenderer();
+ // const pixelRatio = renderer.getPixelRatio();
+ const pixelRatio = window.devicePixelRatio;
+
//
- useEffect(() => {
+ /* useEffect(() => {
if (open) {
- musicManager.playCurrentMusic('overworld', {
+ musicManager.playCurrentMusicName('overworld', {
repeat: true,
});
} else { musicManager.stopCurrentMusic(); }
- }, [open]);
+ }, [open]); */
//
@@ -225,24 +279,48 @@ export const MapGen = () => {
};
+ const getRenderPosition = () => {
+ return camera.position.clone()
+ .add(new THREE.Vector3(0, 0, -16).applyQuaternion(camera.quaternion))
+ .toArray();
+ };
+ const _updateTerrainApp = () => {
+ if (terrainApp) {
+ const renderPosition = getRenderPosition();
+ terrainApp.setComponent('renderPosition', renderPosition);
+ }
+ };
+ const setPosition = p => {
+ camera.position.copy(p);
+ camera.updateMatrixWorld();
+
+ _updateTerrainApp();
+ };
+ const setQuaternion = q => {
+ camera.quaternion.copy(q);
+ camera.updateMatrixWorld();
+
+ _updateTerrainApp();
+ };
const updateCamera = () => {
+ debugger;
const renderer = getRenderer();
- const pixelRatio = renderer.getPixelRatio();
+ // const pixelRatio = renderer.getPixelRatio();
- camera.position.set(-position.x / voxelPixelSize, 1, -position.z / voxelPixelSize);
- camera.quaternion.copy(downQuaternion);
- camera.scale.setScalar(pixelRatio * scale);
- camera.updateMatrixWorld();
+ setPosition(position);
+ setQuaternion(quaternion);
+ // camera.scale.setScalar(pixelRatio * scale);
+ // camera.updateMatrixWorld();
- camera.left = -(width / voxelPixelSize) / 2;
+ /* camera.left = -(width / voxelPixelSize) / 2;
camera.right = (width / voxelPixelSize) / 2;
camera.top = (height / voxelPixelSize) / 2;
camera.bottom = -(height / voxelPixelSize) / 2;
camera.near = 0;
- camera.far = 1000;
- camera.updateProjectionMatrix();
+ camera.far = 10 * 1000;
+ camera.updateProjectionMatrix(); */
};
- const getChunksInRange = () => {
+ /* const getChunksInRange = () => {
const chunks = [];
const bottomLeft = localVectorX.set(-1, 1, 0)
.unproject(camera)
@@ -266,15 +344,15 @@ export const MapGen = () => {
}
return chunks;
- };
+ }; */
const setRaycasterFromEvent = (raycaster, e) => {
const width = window.innerWidth;
const height = window.innerHeight;
- const renderer = getRenderer();
- const pixelRatio = renderer.getPixelRatio();
+ // const renderer = getRenderer();
+ // const pixelRatio = renderer.getPixelRatio();
const mouse = localVector2D.set(
- (e.clientX / pixelRatio / width) * 2 - 1,
- -(e.clientY / pixelRatio / height) * 2 + 1
+ (e.clientX / width) * 2 - 1,
+ -(e.clientY / height) * 2 + 1
);
raycaster.setFromCamera(mouse, camera);
};
@@ -300,7 +378,7 @@ export const MapGen = () => {
(async () => {
const localPlayer = useLocalPlayer();
const aiScene = useLoreAIScene();
- const comment = await aiScene.generateComment(selectedChunk.name);
+ const comment = await aiScene.generateLocationComment(selectedChunk.name);
const message = `${selectedChunk.name}. ${comment}`;
const preloadedMessage = localPlayer.voicer.preloadMessage(message);
await chatManager.waitForVoiceTurn(() => {
@@ -312,50 +390,144 @@ export const MapGen = () => {
}
};
- /* useEffect(() => {
- if (text) {
- const timeout = setTimeout(() => {
- setText('');
- }, 5000);
- return () => {
- clearTimeout(timeout);
- };
- }
- }, [text]); */
+ const _addHacks = () => {
+ // open
+ useEffect( () => {
- // open
- useEffect( () => {
+ function handleKeyUp ( event ) {
- function handleKeyUp ( event ) {
+ if (game.inputFocused()) return true;
- if (game.inputFocused()) return true;
+ switch ( event.which ) {
- switch ( event.which ) {
+ case 74: { // J
- case 75: { // K
+ if (!firedropMeshApp) {
+ const localPlayer = useLocalPlayer();
+ const position = localPlayer.position.clone()
+ .add(new THREE.Vector3(0, 0, -3).applyQuaternion(localPlayer.quaternion));
+
+ const firedropMeshApp = metaversefile.createApp({
+ position,
+ });
+ (async () => {
+ const {modules} = metaversefile.useDefaultModules();
+ const m = modules['firedrop'];
+ await firedropMeshApp.addModule(m);
+ })();
+ scene.add(firedropMeshApp);
+
+ setFiredropMeshApp(firedropMeshApp);
+ } else {
+ firedropMeshApp.parent.remove(firedropMeshApp);
+ firedropMeshApp.destroy();
- if (!haloMeshApp) {
- const haloMeshApp = metaversefile.createApp();
- (async () => {
- const {modules} = metaversefile.useDefaultModules();
- const m = modules['halo'];
- await haloMeshApp.addModule(m);
- })();
- scene.add(haloMeshApp);
+ setFiredropMeshApp(null);
+ }
+
+ return false;
+ }
+
+ case 75: { // K
- setHaloMeshApp(haloMeshApp);
- } else {
- scene.remove(haloMeshApp);
- haloMeshApp.destroy();
+ if (!haloMeshApp) {
+ const haloMeshApp = metaversefile.createApp();
+ (async () => {
+ const {modules} = metaversefile.useDefaultModules();
+ const m = modules['halo'];
+ await haloMeshApp.addModule(m);
+ })();
+ scene.add(haloMeshApp);
- setHaloMeshApp(null);
+ setHaloMeshApp(haloMeshApp);
+ } else {
+ haloMeshApp.parent.remove(haloMeshApp);
+ haloMeshApp.destroy();
+
+ setHaloMeshApp(null);
+ }
+
+ return false;
}
- return false;
+ case 76: { // L
+
+ if (!silksMeshApp) {
+ const silksMeshApp = metaversefile.createApp();
+ (async () => {
+ const {modules} = metaversefile.useDefaultModules();
+ const m = modules['silks'];
+ await silksMeshApp.addModule(m);
+ })();
+ scene.add(silksMeshApp);
+
+ setSilksMeshApp(silksMeshApp);
+ } else {
+ silksMeshApp.parent.remove(silksMeshApp);
+ silksMeshApp.destroy();
+
+ setSilksMeshApp(null);
+ }
+
+ return false;
+
+ }
+
+ case 80: { // P
+
+ if (!cometMeshApp) {
+ const cometMeshApp = metaversefile.createApp();
+ (async () => {
+ const {modules} = metaversefile.useDefaultModules();
+ const m = modules['comet'];
+ await cometMeshApp.addModule(m);
+ })();
+ scene.add(cometMeshApp);
+ const localPlayer = useLocalPlayer();
+ cometMeshApp.position.copy(localPlayer.position)
+ .add(new THREE.Vector3(0, 3, -3).applyQuaternion(localPlayer.quaternion));
+ localEuler.setFromQuaternion(localPlayer.quaternion, 'YXZ');
+ localEuler.x = 0;
+ localEuler.z = 0;
+ cometMeshApp.quaternion.setFromEuler(localEuler);
+ cometMeshApp.updateMatrixWorld();
+
+ setCometMeshApp(cometMeshApp);
+ } else {
+ cometMeshApp.parent.remove(cometMeshApp);
+ cometMeshApp.destroy();
+
+ setCometMeshApp(null);
+ }
+
+ return false;
+
}
- case 76: { // L
-
+ case 186: { // ;
+
+ if (!flareMeshApp) {
+ const flareMeshApp = metaversefile.createApp();
+ (async () => {
+ const {modules} = metaversefile.useDefaultModules();
+ const m = modules['flare'];
+ await flareMeshApp.addModule(m);
+ })();
+ scene.add(flareMeshApp);
+
+ setFlareMeshApp(flareMeshApp);
+ } else {
+ flareMeshApp.parent.remove(flareMeshApp);
+ flareMeshApp.destroy();
+
+ setFlareMeshApp(null);
+ }
+
+ return false;
+
+ }
+ case 222: { // '
+
(async () => {
const chunkWorldSize = new THREE.Vector3(64, 64, 64);
const chunkWorldResolution = new THREE.Vector2(2048, 2048);
@@ -371,54 +543,109 @@ export const MapGen = () => {
);
scene.add(mesh);
})();
-
+
return false;
- }
+ }
- case 77: { // M
+ case 188: { // ,
- if ( state.openedPanel === 'MapGenPanel' ) {
+ if (!magicMeshApp) {
+ const magicMeshApp = metaversefile.createApp();
+ (async () => {
+ const {modules} = metaversefile.useDefaultModules();
+ const m = modules['magic'];
+ await magicMeshApp.addModule(m);
+ })();
+ sceneLowPriority.add(magicMeshApp);
- setState({ openedPanel: null });
+ setMagicMeshApp(magicMeshApp);
+ } else {
+ magicMeshApp.parent.remove(magicMeshApp);
+ magicMeshApp.destroy();
+
+ setMagicMeshApp(null);
+ }
+
+ return false;
- if ( ! cameraManager.pointerLockElement ) {
+ }
- cameraManager.requestPointerLock();
+ case 190: { // .
- }
+ if (!limitMeshApp) {
+ const limitMeshApp = metaversefile.createApp();
+ (async () => {
+ const {modules} = metaversefile.useDefaultModules();
+ const m = modules['limit'];
+ await limitMeshApp.addModule(m);
+ })();
+ sceneLowPriority.add(limitMeshApp);
+ setLimitMeshApp(limitMeshApp);
} else {
+ limitMeshApp.parent.remove(limitMeshApp);
+ limitMeshApp.destroy();
- if ( cameraManager.pointerLockElement ) {
+ setLimitMeshApp(null);
+ }
- cameraManager.exitPointerLock();
+ return false;
- }
+ }
- setState({ openedPanel: 'MapGenPanel' });
+ case 77: { // M
- }
+ if ( state.openedPanel === 'MapGenPanel' ) {
- return false;
+ setState({ openedPanel: null });
- }
+ if ( ! cameraManager.pointerLockElement ) {
- }
+ cameraManager.requestPointerLock();
- return true;
+ }
- }
+ } else {
- registerIoEventHandler( 'keyup', handleKeyUp );
+ if ( cameraManager.pointerLockElement ) {
- return () => {
+ cameraManager.exitPointerLock();
- unregisterIoEventHandler( 'keyup', handleKeyUp );
+ }
- };
+ setState({ openedPanel: 'MapGenPanel' });
+
+ }
+
+ return false;
+
+ }
+
+ case 219: { // [
+
+ story.startCinematicIntro();
+
+ return false;
+ }
+
+ }
+
+ return true;
+
+ }
+
+ registerIoEventHandler( 'keyup', handleKeyUp );
+
+ return () => {
- }, [ state.openedPanel, haloMeshApp ]);
+ unregisterIoEventHandler( 'keyup', handleKeyUp );
+
+ };
+
+ }, [ state.openedPanel, firedropMeshApp, haloMeshApp, silksMeshApp, cometMeshApp, flareMeshApp, magicMeshApp, limitMeshApp ]);
+ };
+ _addHacks();
// resize
useEffect(() => {
@@ -435,27 +662,123 @@ export const MapGen = () => {
// mousemove
useEffect(() => {
function mouseMove(e) {
+ // console.log('mouse move', !!mouseState);
if (mouseState) {
- const dx = e.movementX;
- const dy = e.movementY;
+ const totalX = mouseState.startX - e.clientX;
+ const totalY = mouseState.startY - e.clientY;
+
+ // console.log('move button', e.button, e.buttons, e);
+ if (
+ !!(mouseState.buttons & 1) || // left click
+ (e.shiftKey && !!(mouseState.buttons & 4)) // shift + right click
+ ) {
+ const {forwardTarget} = mouseState;
+
+ const backDirection = new THREE.Vector3(0, 0, 1).applyQuaternion(camera.quaternion);
+ localPlane.setFromNormalAndCoplanarPoint(backDirection, forwardTarget);
+
+ const oldEvent = {
+ clientX: mouseState.x,
+ clientY: mouseState.y,
+ };
+ setRaycasterFromEvent(localRaycaster, oldEvent);
+
+ const startIntersectionPoint = localRaycaster.ray.intersectPlane(localPlane, localVector);
+
+ setRaycasterFromEvent(localRaycaster, e);
+ const endIntersectionPoint = localRaycaster.ray.intersectPlane(localPlane, localVector2);
+
+ if (startIntersectionPoint && endIntersectionPoint) {
+ const intersectionDelta = endIntersectionPoint.clone().sub(startIntersectionPoint);
+ const p = camera.position.clone()
+ .sub(intersectionDelta);
+ setPosition(p);
+ }
- const renderer = getRenderer();
- const pixelRatio = renderer.getPixelRatio();
- setPosition(new THREE.Vector3(
- position.x + dx * scale / pixelRatio,
- 0,
- position.z + dy * scale / pixelRatio
- ));
+ /* const p = position.clone()
+ .add(new THREE.Vector3(-dx, dy, 0).applyQuaternion(quaternion));
+ setPosition(p); */
+ } else if (mouseState.buttons & 4) { // middle click
+ // setRaycasterFromEvent(localRaycaster, e);
+
+ // const dx = e.movementX;
+ // const dy = e.movementY;
+
+ const {startPosition, startQuaternion, forwardTarget} = mouseState;
+ // const offset = startPosition.clone().sub(forwardTarget);
+ // const offsetNegative = offset.clone().negate();
+ /* const target = position.clone()
+ .add(offset.clone().applyQuaternion(quaternion)); */
+ // localEuler.setFromQuaternion(quaternion, 'YXZ');
+ localEuler.setFromQuaternion(startQuaternion, 'YXZ');
+ localEuler.x += totalY * Math.PI * 2 * 0.001;
+ localEuler.y += totalX * Math.PI * 2 * 0.001;
+ localQuaternion.setFromEuler(localEuler)
+ // .multiply(startQuaternion);
+
+ const d = startPosition.distanceTo(forwardTarget);
+
+ const p = forwardTarget.clone()
+ .add(
+ new THREE.Vector3(0, 0, d)
+ .applyQuaternion(localQuaternion)
+ );
+ const q = localQuaternion.clone(); /* new THREE.Quaternion().setFromRotationMatrix(
+ localMatrix.lookAt(
+ p,
+ forwardTarget,
+ upVector
+ )
+ ); */
+
+ setPosition(p);
+ setQuaternion(q);
+ } else if (mouseState.buttons & 2) { // right click
+ /* const p = position.clone();
+ const q = quaternion.clone();
+
+ setPosition(p);
+ setQuaternion(q); */
+ }
setMouseState({
x: e.clientX,
y: e.clientY,
+ // totalX,
+ // totalY,
+ startX: mouseState.startX,
+ startY: mouseState.startY,
+ buttons: mouseState.buttons,
+ startPosition: mouseState.startPosition,
+ startQuaternion: mouseState.startQuaternion,
+ forwardTarget: mouseState.forwardTarget,
moved: true,
});
} else {
- setRaycasterFromEvent(localRaycaster, e);
+ let physicsObject = null;
+ let hoveredPoint = null;
+
+ // console.log('try hit', !!terrainApp, !!hoveredPhysicsMesh);
+ if (terrainApp) {
+ setRaycasterFromEvent(localRaycaster, e);
+
+ localQuaternion.setFromUnitVectors(forwardDirection, localRaycaster.ray.direction);
+ const raycastResult = physicsScene.raycast(localRaycaster.ray.origin, localQuaternion);
+ if (raycastResult) {
+ // window.raycastResult = raycastResult;
+ const physicsId = raycastResult.objectId;
+ const physicsObjects = terrainApp.getPhysicsObjects();
+ physicsObject = physicsObjects.find(physicsObject => physicsObject.physicsId === physicsId);
+ if (physicsObject) {
+ hoveredPoint = new THREE.Vector3().fromArray(raycastResult.point);
+ }
+ }
+ }
- localArray.length = 0;
+ setHoveredPhysicsObject(physicsObject);
+ setHoveredPoint(hoveredPoint);
+
+ /* localArray.length = 0;
const intersections = localRaycaster.intersectObjects(mapScene.children, false, localArray);
if (intersections.length > 0) {
const {object} = intersections[0];
@@ -467,7 +790,7 @@ export const MapGen = () => {
setHoveredObject(object);
} else {
setHoveredObject(null);
- }
+ } */
}
}
// listen on document to handle mouse move outside of window
@@ -475,52 +798,175 @@ export const MapGen = () => {
return () => {
document.removeEventListener('mousemove', mouseMove);
};
- }, [mouseState, chunks, position.x, position.z, scale]);
+ }, [
+ mouseState,
+ /* chunks, */
+ terrainApp,
+ // position.x, position.y, position.z,
+ // quaternion.x, quaternion.y, quaternion.z, quaternion.w,
+ // target.x, target.y, target.z,
+ // scale,
+ ]);
+
+ // physics objects
+ useEffect(() => {
+ if (hoveredPhysicsMesh) {
+ if (hoveredPhysicsObject) {
+ const {physicsMesh} = hoveredPhysicsObject;
+ const timestamp = performance.now();
+
+ hoveredPhysicsMesh.geometry = physicsMesh.geometry;
+ hoveredPhysicsMesh.matrixWorld.copy(physicsMesh.matrixWorld)
+ .decompose(hoveredPhysicsMesh.position, hoveredPhysicsMesh.quaternion, hoveredPhysicsMesh.scale);
+
+ hoveredPhysicsMesh.material.uniforms.uTime.value = (timestamp%1500)/1500;
+ hoveredPhysicsMesh.material.uniforms.uTime.needsUpdate = true;
+ hoveredPhysicsMesh.material.uniforms.uColor.value.setHex(buildMaterial.uniforms.uColor.value.getHex());
+ hoveredPhysicsMesh.material.uniforms.uColor.needsUpdate = true;
+ hoveredPhysicsMesh.visible = true;
+ hoveredPhysicsMesh.updateMatrixWorld();
+ } else {
+ hoveredPhysicsMesh.visible = false;
+ }
+ }
+ }, [hoveredPhysicsMesh, hoveredPhysicsObject]);
+
+ useEffect(() => {
+ if (selectedPhysicsMesh) {
+ if (selectedPhysicsObject) {
+ const {physicsMesh} = selectedPhysicsObject;
+ const timestamp = performance.now();
+
+ selectedPhysicsMesh.geometry = physicsMesh.geometry;
+ selectedPhysicsMesh.matrixWorld.copy(physicsMesh.matrixWorld)
+ .decompose(selectedPhysicsMesh.position, selectedPhysicsMesh.quaternion, selectedPhysicsMesh.scale);
+
+ selectedPhysicsMesh.material.uniforms.uTime.value = (timestamp%1500)/1500;
+ selectedPhysicsMesh.material.uniforms.uTime.needsUpdate = true;
+ selectedPhysicsMesh.material.uniforms.uColor.value.setHex(0x66bb6a);
+ selectedPhysicsMesh.material.uniforms.uColor.needsUpdate = true;
+ selectedPhysicsMesh.visible = true;
+ selectedPhysicsMesh.updateMatrixWorld();
+ } else {
+ selectedPhysicsMesh.visible = false;
+ }
+ }
+ }, [selectedPhysicsMesh, selectedPhysicsObject]);
// wheel
useEffect(() => {
if ( state.openedPanel === 'MapGenPanel' ) {
function wheel(e) {
- setRaycasterFromEvent(localRaycaster, e);
- localRaycaster.ray.origin.multiplyScalar(voxelPixelSize);
-
- const oldScale = scale;
- const newScale = Math.min(Math.max(scale * (1 + e.deltaY * 0.001), 0.01), 20);
- const scaleFactor = newScale / oldScale;
-
- localMatrix.compose(
- position,
- downQuaternion,
- localVector2.setScalar(scaleFactor)
- )
- .premultiply(
- localMatrix2.makeTranslation(localRaycaster.ray.origin.x, 0, localRaycaster.ray.origin.z)
- )
- .premultiply(
- localMatrix2.makeScale(scaleFactor, scaleFactor, scaleFactor)
+ if (!mouseState) {
+ setRaycasterFromEvent(localRaycaster, e);
+ // localRaycaster.ray.origin.multiplyScalar(voxelPixelSize);
+
+ /* const target = localRaycaster.ray.origin.clone()
+ .add(localRaycaster.ray.direction.clone().multiplyScalar(3)); */
+
+ const backDirection = localRaycaster.ray.direction.clone()
+ .multiplyScalar(-1);
+ // console.log('got back direction', backDirection.toArray().join(','));
+ const p = camera.position.clone()
+ .add(backDirection.clone().multiplyScalar(e.deltaY * 0.1));
+ setPosition(p);
+
+ /* const oldScale = scale;
+ const newScale = Math.min(Math.max(scale * (1 + e.deltaY * 0.001), 0.01), 20);
+ const scaleFactor = newScale / oldScale;
+
+ localMatrix.compose(
+ position,
+ downQuaternion,
+ localVector2.setScalar(scaleFactor)
)
- .premultiply(
- localMatrix2.makeTranslation(-localRaycaster.ray.origin.x, 0, -localRaycaster.ray.origin.z)
- )
- .decompose(localVector, localQuaternion, localVector2);
-
- setPosition(localVector.clone());
- setScale(newScale);
- setMouseState(null);
+ .premultiply(
+ localMatrix2.makeTranslation(localRaycaster.ray.origin.x, 0, localRaycaster.ray.origin.z)
+ )
+ .premultiply(
+ localMatrix2.makeScale(scaleFactor, scaleFactor, scaleFactor)
+ )
+ .premultiply(
+ localMatrix2.makeTranslation(-localRaycaster.ray.origin.x, 0, -localRaycaster.ray.origin.z)
+ )
+ .decompose(localVector, localQuaternion, localVector2);
+
+ setPosition(localVector.clone());
+ setScale(newScale); */
+
+ setPosition(p);
+ setMouseState(null);
+ }
return false;
+
}
registerIoEventHandler('wheel', wheel);
return () => {
unregisterIoEventHandler('wheel', wheel);
};
}
- }, [state.openedPanel, mouseState, position.x, position.z, scale]);
+ }, [state.openedPanel, mouseState]);
// click
useEffect(() => {
- function click(e) {
+ /* function click(e) {
+ console.log('click', e);
if ( state.openedPanel === 'MapGenPanel' ) {
+ return false;
+ } else {
+ return true;
+ }
+ } */
+ function dblclick(e) {
+ // console.log('dbl click', e);
+ if ( state.openedPanel === 'MapGenPanel' ) {
+ setSelectedPhysicsObject(hoveredPhysicsObject);
+
+ if (hoveredPhysicsObject) {
+ const {physicsMesh} = hoveredPhysicsObject;
+ const {geometry} = physicsMesh;
+ const {boundingBox} = geometry;
+
+ // window.hoveredPhysicsObject = hoveredPhysicsObject;
+
+ const center = boundingBox.getCenter(new THREE.Vector3());
+ const offset = camera.position.clone().sub(center);
+
+ const endPosition = center.clone()
+ .add(
+ offset.clone()
+ .normalize()
+ .multiplyScalar(16 * 2)
+ )
+ /* .add(
+ new THREE.Vector3(0, 16/2, 0)
+ ); */
+ const endQuaternion = new THREE.Quaternion().setFromRotationMatrix(
+ new THREE.Matrix4()
+ .lookAt(
+ camera.position,
+ center,
+ upVector
+ )
+ );
+
+ const now = performance.now();
+ const startTime = now;
+ const endTime = startTime + 1000;
+ const animation = {
+ startTime,
+ endTime,
+ startPosition: camera.position.clone(),
+ startQuaternion: camera.quaternion.clone(),
+ endPosition,
+ endQuaternion,
+ };
+ setAnimation(animation);
+ } else {
+ setAnimation(null);
+ }
+
return false;
} else {
return true;
@@ -528,8 +974,15 @@ export const MapGen = () => {
}
function mouseUp(e) {
if ( state.openedPanel === 'MapGenPanel') {
- if (mouseState && !mouseState.moved && hoveredObject) {
- selectObject();
+ if (mouseState && !mouseState.moved) {
+ const chunk = terrainApp?.getChunkForPhysicsObject(hoveredPhysicsObject);
+ if (chunk) {
+ // console.log('got chunk', chunk, hoveredPhysicsObject);
+ setSelectedPhysicsObject(selectedPhysicsObject !== hoveredPhysicsObject ? hoveredPhysicsObject : null);
+ } else {
+ // console.log('did not get chunk', hoveredPhysicsObject);
+ setSelectedPhysicsObject(null);
+ }
}
setMouseState(null);
return false;
@@ -537,49 +990,141 @@ export const MapGen = () => {
return true;
}
}
- registerIoEventHandler('click', click);
+ // registerIoEventHandler('click', click);
+ registerIoEventHandler('dblclick', dblclick);
registerIoEventHandler('mouseup', mouseUp);
return () => {
- unregisterIoEventHandler('click', click);
+ // unregisterIoEventHandler('click', click);
+ unregisterIoEventHandler('dblclick', dblclick);
unregisterIoEventHandler('mouseup', mouseUp);
};
- }, [ state.openedPanel, mouseState, hoveredObject ] );
+ }, [ state.openedPanel, terrainApp, mouseState, /*hoveredObject, */ hoveredPhysicsObject, selectedPhysicsObject ] );
- // update chunks
+ // initialize terrain
+ useEffect(async () => {
+ if (state.openedPanel === 'MapGenPanel' && !loaded) {
+ setLoaded(true);
+
+ // lights
+ const ambientLight = new THREE.AmbientLight(0xffffff, 2);
+ mapScene.add(ambientLight);
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 2);
+ directionalLight.position.set(1, 2, 3);
+ mapScene.add(directionalLight);
+
+ // highlight physics meshes
+ const hoveredPhysicsMesh = new THREE.Mesh(
+ fakeGeometry,
+ buildMaterial.clone()
+ );
+ hoveredPhysicsMesh.frustumCulled = false;
+ mapScene.add(hoveredPhysicsMesh);
+ setHighlightPhysicsMesh(hoveredPhysicsMesh);
+
+ const selectedPhysicsMesh = new THREE.Mesh(
+ fakeGeometry,
+ buildMaterial.clone()
+ );
+ selectedPhysicsMesh.frustumCulled = false;
+ mapScene.add(selectedPhysicsMesh);
+ setSelectedPhysicsMesh(selectedPhysicsMesh);
+
+ // apps
+ await Promise.all([
+ (async () => {
+ // street base
+ const streetBaseApp = await metaversefile.createAppAsync({
+ start_url: '../street-base/',
+ components: {
+ seed: 'lol',
+ },
+ });
+ mapScene.add(streetBaseApp);
+ // setStreetBaseApp(streetBaseApp);
+ })(),
+ (async () => {
+ // terrain app
+ const terrainApp = await metaversefile.createAppAsync({
+ start_url: '../metaverse_modules/land/',
+ components: {
+ seed,
+ physicsInstance,
+ renderPosition: getRenderPosition(),
+ minLodRange: 3,
+ lods: 3,
+ }
+ });
+ mapScene.add(terrainApp);
+ setTerrainApp(terrainApp);
+ })(),
+ ]);
+ }
+ }, [state.openedPanel, loaded]);
+
+ // update camera
useEffect(() => {
- if ( state.openedPanel === 'MapGenPanel' ) {
- updateCamera();
+ if (state.openedPanel === 'MapGenPanel') {
+ // updateCamera();
- const newChunks = getChunksInRange();
- setChunks(newChunks);
+ // const newChunks = getChunksInRange();
+ // setChunks(newChunks);
}
- }, [canvasRef, state.openedPanel, width, height, position.x, position.z, scale]);
+ }, [
+ canvasRef,
+ state.openedPanel,
+ width, height,
+ // position.x, position.y, position.z,
+ // quaternion.x, quaternion.y, quaternion.z, quaternion.w,
+ // scale,
+ ]);
// render
useEffect(() => {
const canvas = canvasRef.current;
if (canvas && state.openedPanel === 'MapGenPanel') {
- updateCamera();
+ // updateCamera();
const ctx = canvas.getContext('2d');
- async function render(e) {
- const {timestamp, timeDiff} = e.data;
- const renderer = getRenderer();
-
+ function update() {
+ if (animation) {
+ const now = performance.now();
+ const factor = (now - animation.startTime) / (animation.endTime - animation.startTime);
+
+ setPosition(
+ animation.startPosition.clone()
+ .lerp(animation.endPosition, factor)
+ );
+ setQuaternion(
+ animation.startQuaternion.clone()
+ .slerp(animation.endQuaternion, factor)
+ );
+ // camera.updateMatrixWorld();
+
+ if (factor >= 1) {
+ setAnimation(null);
+ }
+ }
+ }
+ function render(e) {
+ // const {timestamp, timeDiff} = e.data;
+
+ update();
+
// push state
+ const renderer = getRenderer();
const oldViewport = renderer.getViewport(localVector4D);
- for (const chunk of chunks) {
+ /* for (const chunk of chunks) {
chunk.update(timestamp, timeDiff);
- }
+ } */
renderer.setViewport(0, 0, width, height);
// renderer.setClearColor(0xFF0000, 1);
renderer.clear();
renderer.render(mapScene, camera);
- ctx.clearRect(0, 0, width, height);
+ ctx.clearRect(0, 0, width * pixelRatio, height * pixelRatio);
ctx.drawImage(renderer.domElement, 0, 0);
// pop state
@@ -590,17 +1135,49 @@ export const MapGen = () => {
world.appManager.removeEventListener('frame', render);
};
}
- }, [canvasRef, state.openedPanel, width, height, chunks, position.x, position.z, scale]);
+ }, [canvasRef, state.openedPanel, width, height, /* chunks, */ animation]);
function mouseDown(e) {
e.preventDefault();
e.stopPropagation();
+ const maxDistance = 100;
+
+ const startPosition = camera.position.clone();
+ const startQuaternion = camera.quaternion.clone();
+ const forwardTarget = (() => {
+ if (hoveredPoint) {
+ const distance = camera.position.distanceTo(hoveredPoint);
+ return camera.position.clone()
+ .add(new THREE.Vector3(0, 0, -distance).applyQuaternion(camera.quaternion));
+ } else {
+ localPlane.setFromNormalAndCoplanarPoint(upVector, localVector.set(0, renderY, 0));
+ setRaycasterFromEvent(localRaycaster, e);
+ const startIntersectionPoint = localRaycaster.ray.intersectPlane(localPlane, localVector);
+ const distance = startIntersectionPoint ? camera.position.distanceTo(startIntersectionPoint) : Infinity;
+ if (distance < maxDistance) {
+ return camera.position.clone()
+ .add(new THREE.Vector3(0, 0, -distance).applyQuaternion(camera.quaternion));
+ } else {
+ return camera.position.clone()
+ .add(new THREE.Vector3(0, 0, -maxDistance).applyQuaternion(camera.quaternion));
+ }
+ }
+ })();
+
+ // console.log('new mouse state');
setMouseState({
x: e.clientX,
y: e.clientY,
+ startX: e.clientX,
+ startY: e.clientY,
+ buttons: e.buttons,
+ startPosition,
+ startQuaternion,
+ forwardTarget,
moved: false,
});
+ setAnimation(null);
}
function goClick(e) {
e.preventDefault();
@@ -635,8 +1212,8 @@ export const MapGen = () => {