From c5b62fc23aa878f94640e30c7a2f890d551d0480 Mon Sep 17 00:00:00 2001 From: Lee Hunter Date: Tue, 26 Nov 2024 14:17:51 -0500 Subject: [PATCH 1/5] running babylon dev:2443ag6 --- package-lock.json | 148 +++++++++++++++++++++++++++++ package.json | 4 + src/components/BabylonElement.jsx | 115 ++++++++++++++++++++++ src/components/CollapsibleCards.js | 14 +-- src/components/X3DElement.jsx | 2 +- src/css/_3dViewer.scss | 4 + src/pages/archives/ArchivePage.js | 62 +++++++++++- 7 files changed, 332 insertions(+), 17 deletions(-) create mode 100644 src/components/BabylonElement.jsx create mode 100644 src/css/_3dViewer.scss diff --git a/package-lock.json b/package-lock.json index f1d6e04..abbfd60 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,8 @@ "dependencies": { "@aws-amplify/cli-extensibility-helper": "^3.0.1", "@aws-amplify/ui-react": "^5.3.3", + "@babylonjs/core": "^7.34.4", + "@babylonjs/loaders": "^7.34.4", "@blueprintjs/core": "^4.17.8", "@blueprintjs/icons": "^4.14.5", "@emotion/react": "^11.10.6", @@ -30,6 +32,7 @@ "assign-deep": "^1.0.1", "aws-amplify": "^5.0.23", "aws-amplify-react": "^5.1.9", + "babylonjs": "^7.34.4", "bootstrap": "^5.2.3", "caniuse-lite": "^1.0.30001487", "cypress-file-upload": "^5.0.8", @@ -50,6 +53,7 @@ "query-string": "^8.1.0", "react": "^18.2.0", "react-3d-viewer": "^1.0.12", + "react-babylonjs": "^3.2.1", "react-csv": "^2.2.2", "react-dom": "^18.2.0", "react-focus-lock": "^2.9.4", @@ -12785,6 +12789,32 @@ "node": ">=6.9.0" } }, + "node_modules/@babylonjs/core": { + "version": "7.34.4", + "resolved": "https://registry.npmjs.org/@babylonjs/core/-/core-7.34.4.tgz", + "integrity": "sha512-RwAEixWrTPmxN8WCtBav/fNveejRK5f9Cmc88qMiE3jc0HegVS+WarDS5yldMeIQKSuzOVaRfZo1xEY3CTmmFA==", + "license": "Apache-2.0" + }, + "node_modules/@babylonjs/gui": { + "version": "7.34.4", + "resolved": "https://registry.npmjs.org/@babylonjs/gui/-/gui-7.34.4.tgz", + "integrity": "sha512-yADpmCMSAaLS7vGBtViB8HyDfkBkJ4aMZPspwhtjM5iVqNKkkrQ2cvtVHI69nAO5NLwwOOSlYgHDDhTaAGMWPA==", + "license": "Apache-2.0", + "peer": true, + "peerDependencies": { + "@babylonjs/core": "^7.0.0" + } + }, + "node_modules/@babylonjs/loaders": { + "version": "7.34.4", + "resolved": "https://registry.npmjs.org/@babylonjs/loaders/-/loaders-7.34.4.tgz", + "integrity": "sha512-CZfwtJXOZf5JrABbzxZ9s/5Ig8WZfS3XmYP69fAHoxcVedUNopctimM6KhjJYipeknbm1FUKMJ8TBBT/Tv8lig==", + "license": "Apache-2.0", + "peerDependencies": { + "@babylonjs/core": "^7.0.0", + "babylonjs-gltf2interface": "^7.0.0" + } + }, "node_modules/@bcoe/v8-coverage": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz", @@ -21371,6 +21401,20 @@ "babel-plugin-transform-react-remove-prop-types": "^0.4.24" } }, + "node_modules/babylonjs": { + "version": "7.34.4", + "resolved": "https://registry.npmjs.org/babylonjs/-/babylonjs-7.34.4.tgz", + "integrity": "sha512-ejssY7KbbLrSYtxf+2MdoPezpMh+cCtyf/ZMutdNNYlvFdIS+QUWaNad3GSRABHeBrRvthQtCSsYZx0+wp/+Sw==", + "hasInstallScript": true, + "license": "Apache-2.0" + }, + "node_modules/babylonjs-gltf2interface": { + "version": "7.34.4", + "resolved": "https://registry.npmjs.org/babylonjs-gltf2interface/-/babylonjs-gltf2interface-7.34.4.tgz", + "integrity": "sha512-9K+gfJZ3Vn9AYVk8zrJeXPIzghCChDPH85sI+22VKhsnnyUfZs5lbO+muShOTrlBiOkCQQDyL2S8vOt5D1OIYg==", + "license": "Apache-2.0", + "peer": true + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -38888,6 +38932,29 @@ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" }, + "node_modules/react-babylonjs": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/react-babylonjs/-/react-babylonjs-3.2.1.tgz", + "integrity": "sha512-nre7ArbP5mKmJK4VZ1Qs2qG+e1t/YlurmaE0O/lZUexwudOnbL17BzkHJl2jpu0h9m7otoqVdeKw9A6bDtsV5Q==", + "license": "MIT", + "dependencies": { + "react-reconciler": "^0.27.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "@babylonjs/core": "5.x || 6.x || 7.x", + "@babylonjs/gui": "5.x || 6.x || 7.x", + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, "node_modules/react-beautiful-dnd": { "version": "13.1.1", "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz", @@ -39442,6 +39509,31 @@ "react-dom": "^16 || ^17 || ^18" } }, + "node_modules/react-reconciler": { + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.27.0.tgz", + "integrity": "sha512-HmMDKciQjYmBRGuuhIaKA1ba/7a+UsM5FzOZsMO2JYHt9Jh8reCb7j1eDC95NOyUlKM9KRyvdx0flBuDvYSBoA==", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.21.0" + }, + "engines": { + "node": ">=0.10.0" + }, + "peerDependencies": { + "react": "^18.0.0" + } + }, + "node_modules/react-reconciler/node_modules/scheduler": { + "version": "0.21.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz", + "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.1.0" + } + }, "node_modules/react-redux": { "version": "7.2.9", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz", @@ -58171,6 +58263,24 @@ "to-fast-properties": "^2.0.0" } }, + "@babylonjs/core": { + "version": "7.34.4", + "resolved": "https://registry.npmjs.org/@babylonjs/core/-/core-7.34.4.tgz", + "integrity": "sha512-RwAEixWrTPmxN8WCtBav/fNveejRK5f9Cmc88qMiE3jc0HegVS+WarDS5yldMeIQKSuzOVaRfZo1xEY3CTmmFA==" + }, + "@babylonjs/gui": { + "version": "7.34.4", + "resolved": "https://registry.npmjs.org/@babylonjs/gui/-/gui-7.34.4.tgz", + "integrity": "sha512-yADpmCMSAaLS7vGBtViB8HyDfkBkJ4aMZPspwhtjM5iVqNKkkrQ2cvtVHI69nAO5NLwwOOSlYgHDDhTaAGMWPA==", + "peer": true, + "requires": {} + }, + "@babylonjs/loaders": { + "version": "7.34.4", + "resolved": "https://registry.npmjs.org/@babylonjs/loaders/-/loaders-7.34.4.tgz", + "integrity": "sha512-CZfwtJXOZf5JrABbzxZ9s/5Ig8WZfS3XmYP69fAHoxcVedUNopctimM6KhjJYipeknbm1FUKMJ8TBBT/Tv8lig==", + "requires": {} + }, "@bcoe/v8-coverage": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz", @@ -64766,6 +64876,17 @@ "babel-plugin-transform-react-remove-prop-types": "^0.4.24" } }, + "babylonjs": { + "version": "7.34.4", + "resolved": "https://registry.npmjs.org/babylonjs/-/babylonjs-7.34.4.tgz", + "integrity": "sha512-ejssY7KbbLrSYtxf+2MdoPezpMh+cCtyf/ZMutdNNYlvFdIS+QUWaNad3GSRABHeBrRvthQtCSsYZx0+wp/+Sw==" + }, + "babylonjs-gltf2interface": { + "version": "7.34.4", + "resolved": "https://registry.npmjs.org/babylonjs-gltf2interface/-/babylonjs-gltf2interface-7.34.4.tgz", + "integrity": "sha512-9K+gfJZ3Vn9AYVk8zrJeXPIzghCChDPH85sI+22VKhsnnyUfZs5lbO+muShOTrlBiOkCQQDyL2S8vOt5D1OIYg==", + "peer": true + }, "balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -77795,6 +77916,14 @@ } } }, + "react-babylonjs": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/react-babylonjs/-/react-babylonjs-3.2.1.tgz", + "integrity": "sha512-nre7ArbP5mKmJK4VZ1Qs2qG+e1t/YlurmaE0O/lZUexwudOnbL17BzkHJl2jpu0h9m7otoqVdeKw9A6bDtsV5Q==", + "requires": { + "react-reconciler": "^0.27.0" + } + }, "react-beautiful-dnd": { "version": "13.1.1", "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz", @@ -78218,6 +78347,25 @@ "quill": "^1.3.7" } }, + "react-reconciler": { + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.27.0.tgz", + "integrity": "sha512-HmMDKciQjYmBRGuuhIaKA1ba/7a+UsM5FzOZsMO2JYHt9Jh8reCb7j1eDC95NOyUlKM9KRyvdx0flBuDvYSBoA==", + "requires": { + "loose-envify": "^1.1.0", + "scheduler": "^0.21.0" + }, + "dependencies": { + "scheduler": { + "version": "0.21.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz", + "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==", + "requires": { + "loose-envify": "^1.1.0" + } + } + } + }, "react-redux": { "version": "7.2.9", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz", diff --git a/package.json b/package.json index e692c57..4e1bf2c 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,8 @@ "dependencies": { "@aws-amplify/cli-extensibility-helper": "^3.0.1", "@aws-amplify/ui-react": "^5.3.3", + "@babylonjs/core": "^7.34.4", + "@babylonjs/loaders": "^7.34.4", "@blueprintjs/core": "^4.17.8", "@blueprintjs/icons": "^4.14.5", "@emotion/react": "^11.10.6", @@ -25,6 +27,7 @@ "assign-deep": "^1.0.1", "aws-amplify": "^5.0.23", "aws-amplify-react": "^5.1.9", + "babylonjs": "^7.34.4", "bootstrap": "^5.2.3", "caniuse-lite": "^1.0.30001487", "cypress-file-upload": "^5.0.8", @@ -45,6 +48,7 @@ "query-string": "^8.1.0", "react": "^18.2.0", "react-3d-viewer": "^1.0.12", + "react-babylonjs": "^3.2.1", "react-csv": "^2.2.2", "react-dom": "^18.2.0", "react-focus-lock": "^2.9.4", diff --git a/src/components/BabylonElement.jsx b/src/components/BabylonElement.jsx new file mode 100644 index 0000000..a9f7ba3 --- /dev/null +++ b/src/components/BabylonElement.jsx @@ -0,0 +1,115 @@ +import React, { useEffect } from "react"; +import { registerBuiltInLoaders } from "@babylonjs/loaders/dynamic"; +import * as BABYLON from "@babylonjs/core"; +import "../css/_3dViewer.scss"; + +const BabylonElement = (props) => { + useEffect(() => { + registerBuiltInLoaders(); + const canvasWrapper = document.getElementById("canvas-wrapper"); + const canvas = createCanvas(canvasWrapper); + const engine = new BABYLON.Engine(canvas, true); + const createScene = () => { + const scene = new BABYLON.Scene(engine); + // const camera = new BABYLON.FreeCamera("camera1", + // new BABYLON.Vector3(0, 5, -10), scene); + + // The first parameter can be used to specify which mesh to import. Here we import all meshes + // const env = loadModel(scene, props.env); + const model = loadModel(scene, props.model); + const camera = new BABYLON.ArcRotateCamera( + "camera", + -Math.PI / 2, + Math.PI / 2.5, + 4, + new BABYLON.Vector3(0, 0, 0), + scene + ); + camera.setTarget(BABYLON.Vector3.Zero()); + camera.attachControl(canvas, true); + camera.speed = 0.25; + //temporary light to light the entire scene + const light0 = new BABYLON.HemisphericLight( + "HemiLight", + new BABYLON.Vector3(0, 1, 0), + scene + ); + // const light = new BABYLON.PointLight("sparklight", new BABYLON.Vector3(0, 0, 0), scene); + // light.diffuse = new BABYLON.Color3(0.08627450980392157, 0.10980392156862745, 0.15294117647058825); + // light.intensity = 35; + // light.radius = 1; + + return scene; + }; + const scene = createScene(); + + engine.runRenderLoop(function () { + scene.render(); + }); + + const disableScroll = () => { + [document.body, document.html].forEach((el) => { + el?.classList.add("no-scroll"); + }); + }; + + const enableScroll = () => { + [document.body, document.html].forEach((el) => { + el?.classList.remove("no-scroll"); + }); + }; + + canvas.addEventListener("mouseover", function () { + disableScroll(); + }); + + canvas.addEventListener("mouseout", function () { + enableScroll(); + }); + + window.addEventListener("resize", function () { + engine.resize(); + }); + + return () => { + engine.dispose(); + enableScroll(); + }; + }, [props.model]); + + const createCanvas = (canvasWrapper) => { + const canvas = document.createElement("canvas"); + canvas.style.width = "100%"; + canvas.style.height = "100%"; + canvas.id = "three-d-canvas"; + canvasWrapper.innerHTML = ""; + canvasWrapper.appendChild(canvas); + + return canvas; + }; + + const loadModel = async (scene, url) => { + const filename = url.split("/").pop(); + const path = url.replace(filename, ""); + const response = await BABYLON.SceneLoader.ImportMeshAsync( + null, + path, + filename, + scene + ); + const model = response.meshes[0]; + const allMeshes = model.getChildMeshes(); + + return { model, allMeshes }; + }; + + return ( +
+
+
+
+
+ ); +}; + +export default BabylonElement; diff --git a/src/components/CollapsibleCards.js b/src/components/CollapsibleCards.js index f86a5cf..b4569b3 100644 --- a/src/components/CollapsibleCards.js +++ b/src/components/CollapsibleCards.js @@ -2,18 +2,11 @@ import * as React from "react"; import { styled } from "@mui/material/styles"; import Card from "@mui/material/Card"; import CardHeader from "@mui/material/CardHeader"; -import CardMedia from "@mui/material/CardMedia"; import CardContent from "@mui/material/CardContent"; import CardActions from "@mui/material/CardActions"; import Collapse from "@mui/material/Collapse"; -import Avatar from "@mui/material/Avatar"; import IconButton from "@mui/material/IconButton"; -import Typography from "@mui/material/Typography"; -import { red } from "@mui/material/colors"; -import FavoriteIcon from "@mui/icons-material/Favorite"; -import ShareIcon from "@mui/icons-material/Share"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; -import MoreVertIcon from "@mui/icons-material/MoreVert"; import LocationOnIcon from "@mui/icons-material/LocationOn"; import InfoIcon from "@mui/icons-material/Info"; import CopyrightIcon from "@mui/icons-material/Copyright"; @@ -108,7 +101,6 @@ const getMarker = (marker) => { }; const getLocationData = (data) => { - console.log(data.location); return ( <> {data.location ? ( @@ -123,7 +115,7 @@ const getLocationData = (data) => { }; const modifyKey = (key) => { - if (key == "display_date") { + if (key === "display_date") { return "Date"; } const newKey = key @@ -205,7 +197,7 @@ export default function CollapsibleCard({ ); - } else if (key == "language") { + } else if (key === "language") { return (
{ - console.log("about: ", data); let items = [ "description", "date", @@ -292,7 +283,6 @@ export default function CollapsibleCard({ ) : renderContent(data[key], 0)} -
) : null )} diff --git a/src/components/X3DElement.jsx b/src/components/X3DElement.jsx index 8f79942..fab67e0 100644 --- a/src/components/X3DElement.jsx +++ b/src/components/X3DElement.jsx @@ -68,7 +68,7 @@ class X3DElement extends Component {
- + + +
+ ); + } else if (this.is3D_2DiiifType(item)) { display = ( Date: Sat, 30 Nov 2024 11:15:05 -0500 Subject: [PATCH 2/5] babylon working with gltf/glb --- src/components/BabylonElement.jsx | 138 ++++++++++++++++-------------- src/css/_3dViewer.scss | 14 +++ 2 files changed, 88 insertions(+), 64 deletions(-) diff --git a/src/components/BabylonElement.jsx b/src/components/BabylonElement.jsx index a9f7ba3..5c7f8c6 100644 --- a/src/components/BabylonElement.jsx +++ b/src/components/BabylonElement.jsx @@ -4,78 +4,72 @@ import * as BABYLON from "@babylonjs/core"; import "../css/_3dViewer.scss"; const BabylonElement = (props) => { - useEffect(() => { - registerBuiltInLoaders(); - const canvasWrapper = document.getElementById("canvas-wrapper"); - const canvas = createCanvas(canvasWrapper); - const engine = new BABYLON.Engine(canvas, true); - const createScene = () => { - const scene = new BABYLON.Scene(engine); - // const camera = new BABYLON.FreeCamera("camera1", - // new BABYLON.Vector3(0, 5, -10), scene); - - // The first parameter can be used to specify which mesh to import. Here we import all meshes - // const env = loadModel(scene, props.env); - const model = loadModel(scene, props.model); - const camera = new BABYLON.ArcRotateCamera( - "camera", - -Math.PI / 2, - Math.PI / 2.5, - 4, - new BABYLON.Vector3(0, 0, 0), - scene - ); - camera.setTarget(BABYLON.Vector3.Zero()); - camera.attachControl(canvas, true); - camera.speed = 0.25; - //temporary light to light the entire scene - const light0 = new BABYLON.HemisphericLight( - "HemiLight", - new BABYLON.Vector3(0, 1, 0), - scene - ); - // const light = new BABYLON.PointLight("sparklight", new BABYLON.Vector3(0, 0, 0), scene); - // light.diffuse = new BABYLON.Color3(0.08627450980392157, 0.10980392156862745, 0.15294117647058825); - // light.intensity = 35; - // light.radius = 1; - - return scene; - }; - const scene = createScene(); - - engine.runRenderLoop(function () { - scene.render(); + const disableScroll = () => { + [document.body, document.html].forEach((el) => { + el?.classList.add("no-scroll"); }); + }; - const disableScroll = () => { - [document.body, document.html].forEach((el) => { - el?.classList.add("no-scroll"); - }); - }; + const enableScroll = () => { + [document.body, document.html].forEach((el) => { + el?.classList.remove("no-scroll"); + }); + }; - const enableScroll = () => { - [document.body, document.html].forEach((el) => { - el?.classList.remove("no-scroll"); - }); - }; + const addListeners = (canvas, engine) => { + canvas.addEventListener("mouseover", disableScroll); + canvas.addEventListener("mouseout", enableScroll); - canvas.addEventListener("mouseover", function () { - disableScroll(); + window.addEventListener("resize", () => { + engine.resize(); }); + }; - canvas.addEventListener("mouseout", function () { - enableScroll(); - }); + const removeListeners = (canvas, engine) => { + canvas.removeEventListener("mouseover", disableScroll); + canvas.removeEventListener("mouseout", enableScroll); - window.addEventListener("resize", function () { + window.removeEventListener("resize", () => { engine.resize(); }); + }; - return () => { - engine.dispose(); - enableScroll(); - }; - }, [props.model]); + const createScene = async (canvas, engine, modelURL) => { + const scene = new BABYLON.Scene(engine); + scene.clearColor = new BABYLON.Color4(0, 0, 0, 0); + const model = await loadModel(scene, modelURL); + const modelDimensions = model.ellipsoid; + const modelMaxSize = Math.max( + modelDimensions._x, + modelDimensions._y, + modelDimensions._z + ); + const camera = new BABYLON.ArcRotateCamera( + "camera", + 0, + 0, + 4, + new BABYLON.Vector3(0, 0, 0), + scene + ); + camera.setPosition(new BABYLON.Vector3(0, 0, modelMaxSize * 2)); + camera.setTarget(BABYLON.Vector3.Zero()); + camera.lowerRadiusLimit = modelMaxSize; + camera.upperRadiusLimit = modelMaxSize * 10; + camera.attachControl(canvas, true); + camera.speed = 0.1; + camera.minZ = 0.1; + //temporary light to light the entire scene + const light0 = new BABYLON.HemisphericLight( + "HemiLight", + new BABYLON.Vector3(0, 1, 0), + scene + ); + + engine.runRenderLoop(function () { + scene.render(); + }); + }; const createCanvas = (canvasWrapper) => { const canvas = document.createElement("canvas"); @@ -98,11 +92,27 @@ const BabylonElement = (props) => { scene ); const model = response.meshes[0]; - const allMeshes = model.getChildMeshes(); - return { model, allMeshes }; + return model; }; + useEffect(() => { + registerBuiltInLoaders(); + const canvasWrapper = document.getElementById("canvas-wrapper"); + const canvas = createCanvas(canvasWrapper); + const engine = new BABYLON.Engine(canvas, true); + + createScene(canvas, engine, props.model); + + addListeners(canvas, engine); + + return () => { + removeListeners(canvas, engine); + enableScroll(); + engine.dispose(); + }; + }, [props.model]); + return (
diff --git a/src/css/_3dViewer.scss b/src/css/_3dViewer.scss index 50550cb..82e34ea 100644 --- a/src/css/_3dViewer.scss +++ b/src/css/_3dViewer.scss @@ -2,3 +2,17 @@ height: 100%; overflow: hidden; } +div#canvas-wrapper { + display: inline-block; + width: 100%; + height: 100%; + border: 1px solid var(--dark-gray); + border-radius: 5px; +} +canvas#three_d_canvas { + outline: none; +} + +:focus-visible { + outline: none; +} From 61c8af898b88e13c5d68794cab9768277e3a5944 Mon Sep 17 00:00:00 2001 From: Lee Hunter Date: Tue, 3 Dec 2024 14:12:09 -0500 Subject: [PATCH 3/5] lighting, background color, grid --- package-lock.json | 16 +++++++++++ package.json | 1 + src/components/BabylonElement.jsx | 46 +++++++++++++++++++++++-------- 3 files changed, 51 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index abbfd60..b84ead5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@aws-amplify/ui-react": "^5.3.3", "@babylonjs/core": "^7.34.4", "@babylonjs/loaders": "^7.34.4", + "@babylonjs/materials": "^7.37.0", "@blueprintjs/core": "^4.17.8", "@blueprintjs/icons": "^4.14.5", "@emotion/react": "^11.10.6", @@ -12815,6 +12816,15 @@ "babylonjs-gltf2interface": "^7.0.0" } }, + "node_modules/@babylonjs/materials": { + "version": "7.37.0", + "resolved": "https://registry.npmjs.org/@babylonjs/materials/-/materials-7.37.0.tgz", + "integrity": "sha512-a8vmj2+2moiaV6pU9IfAa1CMz56ydE5hk4LhvZ4kLpfWCH+lrcApzZKKskBTFIAKBZ1NJzwsKEh99ELiDlJ1NA==", + "license": "Apache-2.0", + "peerDependencies": { + "@babylonjs/core": "^7.0.0" + } + }, "node_modules/@bcoe/v8-coverage": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz", @@ -58281,6 +58291,12 @@ "integrity": "sha512-CZfwtJXOZf5JrABbzxZ9s/5Ig8WZfS3XmYP69fAHoxcVedUNopctimM6KhjJYipeknbm1FUKMJ8TBBT/Tv8lig==", "requires": {} }, + "@babylonjs/materials": { + "version": "7.37.0", + "resolved": "https://registry.npmjs.org/@babylonjs/materials/-/materials-7.37.0.tgz", + "integrity": "sha512-a8vmj2+2moiaV6pU9IfAa1CMz56ydE5hk4LhvZ4kLpfWCH+lrcApzZKKskBTFIAKBZ1NJzwsKEh99ELiDlJ1NA==", + "requires": {} + }, "@bcoe/v8-coverage": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz", diff --git a/package.json b/package.json index 4e1bf2c..e17c278 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@aws-amplify/ui-react": "^5.3.3", "@babylonjs/core": "^7.34.4", "@babylonjs/loaders": "^7.34.4", + "@babylonjs/materials": "^7.37.0", "@blueprintjs/core": "^4.17.8", "@blueprintjs/icons": "^4.14.5", "@emotion/react": "^11.10.6", diff --git a/src/components/BabylonElement.jsx b/src/components/BabylonElement.jsx index 5c7f8c6..9852f23 100644 --- a/src/components/BabylonElement.jsx +++ b/src/components/BabylonElement.jsx @@ -1,6 +1,7 @@ import React, { useEffect } from "react"; import { registerBuiltInLoaders } from "@babylonjs/loaders/dynamic"; import * as BABYLON from "@babylonjs/core"; +import { GridMaterial } from "@babylonjs/materials/"; import "../css/_3dViewer.scss"; const BabylonElement = (props) => { @@ -35,8 +36,28 @@ const BabylonElement = (props) => { }; const createScene = async (canvas, engine, modelURL) => { + const AXES_LENGTH = 10; const scene = new BABYLON.Scene(engine); - scene.clearColor = new BABYLON.Color4(0, 0, 0, 0); + scene.environmentTexture = BABYLON.CubeTexture.CreateFromPrefilteredData( + props.env, + scene + ); + const ground = BABYLON.MeshBuilder.CreateGround( + "ground", + { width: AXES_LENGTH, height: AXES_LENGTH, updatable: false }, + scene + ); + const grid = new GridMaterial("grid", scene); + grid.backFaceCulling = false; + grid.mainColor = BABYLON.Color3.White(); + grid.lineColor = BABYLON.Color3.White(); + grid.opacity = 0.25; + + ground.material = grid; + ground.alwaysSelectAsActiveMesh = true; + ground.isPickable = false; + + // scene.clearColor = new BABYLON.Color4(0, 0, 0, 0); const model = await loadModel(scene, modelURL); const modelDimensions = model.ellipsoid; const modelMaxSize = Math.max( @@ -44,29 +65,30 @@ const BabylonElement = (props) => { modelDimensions._y, modelDimensions._z ); + console.log(modelDimensions); + model.position = new BABYLON.Vector3(0, modelDimensions._y, 0); const camera = new BABYLON.ArcRotateCamera( "camera", 0, - 0, + modelDimensions._y, 4, - new BABYLON.Vector3(0, 0, 0), + new BABYLON.Vector3(0, modelDimensions._y, 0), scene ); - camera.setPosition(new BABYLON.Vector3(0, 0, modelMaxSize * 2)); - camera.setTarget(BABYLON.Vector3.Zero()); + camera.setPosition( + new BABYLON.Vector3(0, modelDimensions._y, modelMaxSize * 2) + ); + camera.setTarget( + new BABYLON.Vector3(0, modelDimensions._y, modelMaxSize * 2) + ); + camera.wheelPrecision = 100; camera.lowerRadiusLimit = modelMaxSize; camera.upperRadiusLimit = modelMaxSize * 10; camera.attachControl(canvas, true); - camera.speed = 0.1; camera.minZ = 0.1; - //temporary light to light the entire scene - const light0 = new BABYLON.HemisphericLight( - "HemiLight", - new BABYLON.Vector3(0, 1, 0), - scene - ); engine.runRenderLoop(function () { + camera.setTarget(model.position); scene.render(); }); }; From 4537a10e41ddde902514df8f1466506153a95ebe Mon Sep 17 00:00:00 2001 From: Lee Hunter Date: Fri, 6 Dec 2024 14:28:01 -0500 Subject: [PATCH 4/5] size --- src/components/BabylonElement.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/BabylonElement.jsx b/src/components/BabylonElement.jsx index 9852f23..81b581e 100644 --- a/src/components/BabylonElement.jsx +++ b/src/components/BabylonElement.jsx @@ -57,7 +57,7 @@ const BabylonElement = (props) => { ground.alwaysSelectAsActiveMesh = true; ground.isPickable = false; - // scene.clearColor = new BABYLON.Color4(0, 0, 0, 0); + // scene.clearColor = new BABYLON.Color4(0,0,0,1); const model = await loadModel(scene, modelURL); const modelDimensions = model.ellipsoid; const modelMaxSize = Math.max( @@ -65,13 +65,13 @@ const BabylonElement = (props) => { modelDimensions._y, modelDimensions._z ); - console.log(modelDimensions); + model.position = new BABYLON.Vector3(0, modelDimensions._y, 0); const camera = new BABYLON.ArcRotateCamera( "camera", 0, modelDimensions._y, - 4, + modelMaxSize * 2, new BABYLON.Vector3(0, modelDimensions._y, 0), scene ); From e07dbe103a63e59554bd3097a53f271a98632c21 Mon Sep 17 00:00:00 2001 From: Lee Hunter Date: Tue, 17 Dec 2024 14:58:50 -0500 Subject: [PATCH 5/5] fix search facet links --- src/components/CollapsibleCards.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/CollapsibleCards.js b/src/components/CollapsibleCards.js index b4569b3..6340a16 100644 --- a/src/components/CollapsibleCards.js +++ b/src/components/CollapsibleCards.js @@ -192,7 +192,10 @@ export default function CollapsibleCard({ } else if (facetSearchItems.includes(key)) { return (
- + {value}