diff options
| -rw-r--r-- | src/graph.js | 40 |
1 files changed, 25 insertions, 15 deletions
diff --git a/src/graph.js b/src/graph.js index 075eb97..57779a3 100644 --- a/src/graph.js +++ b/src/graph.js @@ -2,7 +2,7 @@ import * as THREE from "three"; import ForceGraph3D from "3d-force-graph"; import SpriteText from "three-spritetext"; import { union } from "./utils/set_utils.js"; -import { randint, choice, pad } from "./utils/index.js"; +import { randint, choice, pad, isDesktop } from "./utils/index.js"; import { addSkyGradient } from "./sky.js"; const IMG_SCALE = 16; @@ -85,6 +85,7 @@ export default function buildGraph({ db, handlers }) { const highlightNodes = new Set(); const highlightLinks = new Set(); let selectedNode = null; + let textures = []; let objects = []; /** build group */ @@ -93,9 +94,10 @@ export default function buildGraph({ db, handlers }) { graph(document.querySelector("#graph")) .graphData(data) .showNavInfo(false) + .enableNodeDrag(isDesktop) .nodeLabel((node) => node.title) .nodeThreeObject((node) => { - let sprite, material, texture, video; + let sprite, material, texture; let catNumber = node.id + 1; // if (catNumber !== 48) return null; // 3D object @@ -122,21 +124,11 @@ export default function buildGraph({ db, handlers }) { } // Videos and images else if (node.data.thumbnail?.uri) { - // Video thumbs const isVideo = node.data.thumbnail.type === "video"; - if (isVideo) { - video = document.createElement("video"); - video.src = node.data.thumbnail.uri; - video.muted = true; - video.loop = true; - video.autoplay = true; - video.play(); - texture = new THREE.VideoTexture(video); - } - // Image thumbs - else { - texture = new THREE.TextureLoader().load(node.data.thumbnail.uri); + if (!(catNumber in textures)) { + textures[catNumber] = createTexture(node); } + texture = textures[catNumber]; const aspect = node.data.thumbnail.width / node.data.thumbnail.height; material = new THREE.SpriteMaterial({ map: texture }); sprite = new THREE.Sprite(material); @@ -191,6 +183,24 @@ export default function buildGraph({ db, handlers }) { // graph.renderer().setClearColor(0x000000, 0); addSkyGradient(graph.scene()); + const createTexture = (node) => { + // Video thumbs + const isVideo = node.data.thumbnail.type === "video"; + if (isVideo) { + const video = document.createElement("video"); + video.src = node.data.thumbnail.uri; + video.muted = true; + video.loop = true; + video.autoplay = true; + video.play(); + return new THREE.VideoTexture(video); + } + // Image thumbs + else { + return new THREE.TextureLoader().load(node.data.thumbnail.uri); + } + }; + const reorient = () => { const quaternion = graph.camera().quaternion; objects.forEach(reorientObject(quaternion)); |