Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added handler for WebGL disabled error

Browse Source
This commit is contained in:
Mitchell McCaffrey 2021-02-18 11:41:44 +11:00
parent 5b3b41904e
commit 4deae0ef50
1 changed files with 63 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
src/components/dice/DiceInteraction.js
View File

@ -1,4 +1,5 @@
import React, { useRef, useEffect } from "react";
import React, { useRef, useEffect, useState } from "react";
import { Box, Text } from "theme-ui";
import { Engine } from "@babylonjs/core/Engines/engine";
import { Scene } from "@babylonjs/core/scene";
import { Vector3, Color4, Matrix } from "@babylonjs/core/Maths/math";
@ -18,60 +19,68 @@ import ReactResizeDetector from "react-resize-detector";
import usePreventTouch from "../../hooks/usePreventTouch";
import Banner from "../Banner";
const diceThrowSpeed = 2;
function DiceInteraction({ onSceneMount, onPointerDown, onPointerUp }) {
const [error, setError] = useState();
const sceneRef = useRef();
const engineRef = useRef();
const canvasRef = useRef();
const containerRef = useRef();
useEffect(() => {
const canvas = canvasRef.current;
const engine = new Engine(canvas, true, {
preserveDrawingBuffer: true,
stencil: true,
});
const scene = new Scene(engine);
scene.clearColor = new Color4(0, 0, 0, 0);
// Enable physics
scene.enablePhysics(new Vector3(0, -98, 0), new AmmoJSPlugin(true, AMMO));
try {
const canvas = canvasRef.current;
const engine = new Engine(canvas, true, {
preserveDrawingBuffer: true,
stencil: true,
});
const scene = new Scene(engine);
scene.clearColor = new Color4(0, 0, 0, 0);
// Enable physics
scene.enablePhysics(new Vector3(0, -98, 0), new AmmoJSPlugin(true, AMMO));
let camera = new TargetCamera("camera", new Vector3(0, 33.5, 0), scene);
camera.fov = 0.65;
camera.setTarget(Vector3.Zero());
let camera = new TargetCamera("camera", new Vector3(0, 33.5, 0), scene);
camera.fov = 0.65;
camera.setTarget(Vector3.Zero());
onSceneMount && onSceneMount({ scene, engine, canvas });
onSceneMount && onSceneMount({ scene, engine, canvas });
engineRef.current = engine;
sceneRef.current = scene;
engineRef.current = engine;
sceneRef.current = scene;
engine.runRenderLoop(() => {
const scene = sceneRef.current;
const selectedMesh = selectedMeshRef.current;
if (selectedMesh && scene) {
const ray = scene.createPickingRay(
scene.pointerX,
scene.pointerY,
Matrix.Identity(),
camera
);
const currentPosition = selectedMesh.getAbsolutePosition();
let newPosition = ray.origin.scale(camera.globalPosition.y);
newPosition.y = currentPosition.y;
const delta = newPosition.subtract(currentPosition);
selectedMesh.setAbsolutePosition(newPosition);
const velocity = delta.scale(1000 / scene.deltaTime);
selectedMeshVelocityWindowRef.current = selectedMeshVelocityWindowRef.current.slice(
Math.max(
selectedMeshVelocityWindowRef.current.length -
selectedMeshVelocityWindowSize,
0
)
);
selectedMeshVelocityWindowRef.current.push(velocity);
}
});
engine.runRenderLoop(() => {
const scene = sceneRef.current;
const selectedMesh = selectedMeshRef.current;
if (selectedMesh && scene) {
const ray = scene.createPickingRay(
scene.pointerX,
scene.pointerY,
Matrix.Identity(),
camera
);
const currentPosition = selectedMesh.getAbsolutePosition();
let newPosition = ray.origin.scale(camera.globalPosition.y);
newPosition.y = currentPosition.y;
const delta = newPosition.subtract(currentPosition);
selectedMesh.setAbsolutePosition(newPosition);
const velocity = delta.scale(1000 / scene.deltaTime);
selectedMeshVelocityWindowRef.current = selectedMeshVelocityWindowRef.current.slice(
Math.max(
selectedMeshVelocityWindowRef.current.length -
selectedMeshVelocityWindowSize,
0
)
);
selectedMeshVelocityWindowRef.current.push(velocity);
}
});
} catch (error) {
setError(error);
}
}, [onSceneMount]);
const selectedMeshRef = useRef();
@ -128,9 +137,11 @@ function DiceInteraction({ onSceneMount, onPointerDown, onPointerUp }) {
function handleResize(width, height) {
const engine = engineRef.current;
engine.resize();
canvasRef.current.width = width;
canvasRef.current.height = height;
if (engine) {
engine.resize();
canvasRef.current.width = width;
canvasRef.current.height = height;
}
}
usePreventTouch(containerRef);
@ -155,6 +166,13 @@ function DiceInteraction({ onSceneMount, onPointerDown, onPointerUp }) {
style={{ outline: "none" }}
/>
</ReactResizeDetector>
<Banner isOpen={!!error} onRequestClose={() => setError()}>
<Box p={1}>
<Text as="p" variant="body2">
Error: {error && error.message}
</Text>
</Box>
</Banner>
</div>
);
}