Add loader and demo code...

manthrax · Jan 16, 2024 · 0af4c26 · 0af4c26
commit 0af4c26
Show file tree

Hide file tree

Showing 18 changed files with 759 additions and 0 deletions.
diff --git a/DSTLoader.js b/DSTLoader.js
diff --git a/assets/NormalMap (10).png b/assets/NormalMap (10).png
diff --git a/assets/Sample2/CAT2.JPG b/assets/Sample2/CAT2.JPG
diff --git a/assets/Sample2/CAT2.dst b/assets/Sample2/CAT2.dst
diff --git a/assets/Sample2/CAT2.ofm b/assets/Sample2/CAT2.ofm
diff --git a/assets/Sample2/CAT2stch.jpg b/assets/Sample2/CAT2stch.jpg
diff --git a/assets/Sample3/ELECTRNCSJK14.JPG b/assets/Sample3/ELECTRNCSJK14.JPG
diff --git a/assets/Sample3/ELECTRNCSJK14.dst b/assets/Sample3/ELECTRNCSJK14.dst
diff --git a/assets/Sample3/ELECTRNCSJK14.ofm b/assets/Sample3/ELECTRNCSJK14.ofm
diff --git a/assets/Sample3/ELECTRNCSJK14stch.jpg b/assets/Sample3/ELECTRNCSJK14stch.jpg
diff --git a/assets/Sample5/WOLFHD7.JPG b/assets/Sample5/WOLFHD7.JPG
diff --git a/assets/Sample5/WOLFHD7.dst b/assets/Sample5/WOLFHD7.dst
diff --git a/assets/Sample5/WOLFHD7.ofm b/assets/Sample5/WOLFHD7.ofm
diff --git a/assets/Sample5/WOLFHD7stch.jpg b/assets/Sample5/WOLFHD7stch.jpg
diff --git a/assets/image (73).jpg b/assets/image (73).jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!--link rel="stylesheet" href="/style.css" /-->
+    <script type="importmap">
+    {
+        "imports": {
+            "three": "https://threejs.org/build/three.module.js",
+            "threeModules/": "https://threejs.org/examples/jsm/",
+            "three/addons/": "https://threejs.org/examples/jsm/"
+        }
+    }
+    </script>
+    <script type="module" src="./script.js" defer></script>
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,170 @@
+/*
+All the THREEJS boilerplate to set up the app and rendering
+*/
+
+import * as THREE from "three";
+import { OrbitControls } from "threeModules/controls/OrbitControls.js";
+import { TGALoader } from "threeModules/loaders/TGALoader.js";
+import { RGBELoader } from "threeModules/loaders/RGBELoader.js";
+import { GLTFLoader } from "threeModules/loaders/GLTFLoader.js";
+import * as BufferGeometryUtils from "threeModules/utils/BufferGeometryUtils.js";
+import { GUI } from "threeModules/libs/lil-gui.module.min.js";
+
+let {
+  Scene,
+  WebGLRenderer,
+  PerspectiveCamera,
+  Mesh,
+  BufferGeometry,
+  CircleGeometry,
+  BoxGeometry,
+  MeshBasicMaterial,
+  Vector3,
+  AnimationMixer,
+  Object3D,
+  TextureLoader,
+  Sprite,
+  SpriteMaterial,
+  RepeatWrapping,
+} = THREE;
+let vec3 = Vector3;
+let { random, abs, sin, cos, min, max } = Math;
+let rnd = (rng = 1) => random() * rng;
+let srnd = (rng = 1) => random() * rng * 2 - rng;
+console.log("Hello 🌎");
+
+let renderer = new WebGLRenderer({
+  antialias: true,
+  alpha:true
+});
+renderer.toneMapping = THREE.ACESFilmicToneMapping;
+renderer.toneMappingEnabled = true;
+renderer.setClearColor(0xcccccc);
+
+let stl = renderer.domElement.style;
+stl.position = "absolute";
+stl.left = stl.top = "0px";
+
+document.body.appendChild(renderer.domElement);
+
+let scene = new Scene();
+let camera = new PerspectiveCamera();
+scene.add(camera);
+let controls = new OrbitControls(camera, renderer.domElement);
+camera.position.set(-3,2,6);
+controls.target.set(0.36,  -0.23,  1.4);
+controls.maxPolarAngle = Math.PI * 0.5;
+
+renderer.shadowMap.enabled = true;
+renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
+
+//Create a DirectionalLight and turn on shadows for the light
+const dlight = new THREE.DirectionalLight(0xffffff, 0.9);
+dlight.position.set(0, 0, -25); //default; light shining from top
+dlight.castShadow = true; // default false
+scene.add(dlight);
+//Set up shadow properties for the light
+dlight.shadow.mapSize.width = 1024; // default
+dlight.shadow.mapSize.height = 1024; // default
+dlight.shadow.camera.near = 0.5; // default
+dlight.shadow.camera.far = 50; // default
+dlight.shadow.camera.left = dlight.shadow.camera.bottom = -8;
+dlight.shadow.camera.top = dlight.shadow.camera.right = 8;
+dlight.shadow.bias = 0.001;
+
+let dlh;
+
+let lightParam = {
+  pitch: -0.13,
+  yaw: -2.2,
+};
+dlight.target.position.set(0, 0.0, 0);
+scene.add(dlight.target);
+let repoLight = () => {
+  let { pitch, yaw } = lightParam;
+  let lpitch = Math.sin(pitch);
+  dlight.position.set(
+    Math.sin(yaw) * lpitch,
+    Math.cos(pitch),
+    Math.cos(yaw) * lpitch
+  );
+  dlight.position.multiplyScalar(5.5);
+  dlight.lookAt(dlight.target.position);
+  dlight.updateMatrix();
+  dlight.updateMatrixWorld();
+  dlh && dlh.update();
+};
+//repoLight()
+//scene.add(new THREE.AmbientLight("white", 1.));
+
+let gui;
+if(1)gui = new GUI({
+  width: 200,
+  visible: false,
+});
+
+gui&&gui
+  .add(lightParam, "pitch", -Math.PI * 0.5, 0)
+  .name("LightPitch")
+  .onChange((val) => {
+    repoLight();
+  });
+gui&&gui
+  .add(lightParam, "yaw", -Math.PI, Math.PI)
+  .name("LightYaw")
+  .onChange((val) => {
+    repoLight();
+  });
+
+//SET UP THE ENVIRONMENT MAP
+//camera.add(new THREE.PointLight("white", 10.01));
+scene.add(camera)
+let pmremGenerator = new THREE.PMREMGenerator(renderer);
+pmremGenerator.compileEquirectangularShader();
+let envMap;
+if(1)new RGBELoader()
+  .setPath("")
+  .load(
+    "https://cdn.glitch.global/364206c7-9713-48db-9215-72a591a6a9bd/pretville_street_1k.hdr?v=1658931258610",
+    function (texture) {
+      envMap = pmremGenerator.fromEquirectangular(texture).texture;
+
+     // scene.background = envMap;
+      scene.environment = envMap;
+
+      texture.dispose();
+      pmremGenerator.dispose();
+    }
+  );
+
+let v0 = new vec3();
+let v1 = new vec3();
+let v2 = new vec3();
+let v3 = new vec3();
+
+controls.enableDamping = true;
+
+
+let onWindowResize = (event) => {
+  let width = window.innerWidth;
+  let height = window.innerHeight;
+  renderer.setSize(width, height);
+  camera.aspect = width / height;
+  camera.updateProjectionMatrix();
+};
+
+onWindowResize();
+window.addEventListener("resize", onWindowResize, false);
+
+/** PUT YOUR THREEJS CODE YOU NEED HELP WITH HERE!!! **/
+
+
+import Test from "./test.js"
+let test = new Test({THREE,scene,camera,renderer,controls,gltfLoader:new GLTFLoader(),gui})
+//Render the stuff...
+renderer.setAnimationLoop((dt) => {
+  let time = (performance.now() / 100) | 0;
+  test&&test.update&&test.update();
+  controls.update();  
+  renderer.render(scene, camera);
+});
diff --git a/test.js b/test.js
@@ -0,0 +1,143 @@
+import DSTLoader from "./DSTLoader.js";
+
+export default function Test({
+  THREE,
+  scene,
+  renderer,
+  camera,
+  controls,
+  gltfLoader,
+  gui,
+}) {
+  //scene.background = new THREE.Color(0xffffff);
+  //scene.add(new THREE.HemisphereLight(0xffffcc, 0x333399, 1.0));
+
+  camera.position.set(0, 0.0, 25); //9,0,-15)
+  controls.target.set(0, 0.0, 0);
+  let dstLoader = new DSTLoader(THREE);
+
+  let animLines;
+  let lcount;
+  let texLoader = new THREE.TextureLoader();
+  texLoader.load(
+    "./assets/NormalMap%20(10).png",
+    (normalMap) => {
+      new THREE.TextureLoader().load(
+        "./assets/image%20(73).jpg",
+        (tex) => {
+          tex.colorSpace = THREE.SRGBColorSpace;
+          tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
+          normalMap.wrapS = normalMap.wrapT = THREE.RepeatWrapping;
+          normalMap.colorSpace = THREE.LinearSRGBColorSpace;
+
+          let loadDST = (url, cbfn, options) => {
+            dstLoader.load(
+              url,
+              (lines) => {
+                scene.add(lines.mesh);
+                lines.mesh.material.map = tex;
+                lines.mesh.material.normalMap = normalMap;
+                lines.drawRange = 1;
+                gui.add(lines, "quads");
+                gui.add(lines, "drawRange", 0, 1);
+                gui.add(lines, "threadThickness", 0.0, 10);
+                gui.add(lines, "jumpThreadThickness", 0.0, 10);
+                let pal = lines.palette;
+
+                pal.forEach((c, i) => {
+                  let p = {};
+                  p["color" + i] = new THREE.Color(c);
+                  gui.addColor(p, "color" + i).onChange((v, vv) => {
+                    pal[i] = "#" + v.getHexString();
+                    lines.palette = pal;
+                  });
+                });
+
+                let pplane;
+                gui.add(
+                  {
+                    makeTex: () => {
+                      pplane && pplane.material.map.dispose();
+                      let tex = lines.toTexture(renderer, scene, 2048);
+
+                      let { width, height } = tex.source.data;
+                      let pl =
+                        pplane ||
+                        (pplane = new THREE.Mesh(
+                          new THREE.PlaneGeometry(width, height),
+                          new THREE.MeshBasicMaterial({
+                            map: tex,
+                            transparent: true,
+                          })
+                        ));
+                      pplane.scale.set(0.004, 0.004, 0.004);
+
+                      pl.material.map = tex;
+                      pl.position.copy(lines.mesh.position);
+                      pl.position.y += 10;
+                      scene.add(pl);
+                    },
+                  },
+                  "makeTex"
+                );
+                cbfn(lines);
+              },
+              options
+            );
+          };
+          loadDST(
+            "./assets/Sample5/WOLFHD7.dst",
+            (lines) => {
+              lines.mesh.position.x -= 10;
+            },
+            {
+              threadThickness: 2,
+              jumpThreadThickness: 0.01,
+              palette: ["white", "lightgray", "darkgray", "black", "white"],
+              // palette:null,
+            }
+          );
+
+          loadDST(
+            "./assets/Sample2/CAT2.dst",
+            (lines) => {
+              lines.mesh.position.x += 10;
+            },
+            {
+              threadThickness: 2,
+              jumpThreadThickness: 0.01,
+              palette: ["orange", "white", "pink", "white", "black"],
+            }
+          );
+
+          loadDST(
+            "./assets/Sample3/ELECTRNCSJK14.dst",
+            (lines) => {},
+            {
+              threadThickness: 3,
+              jumpThreadThickness: 0.01,
+              palette: [
+                "white",
+                "white",
+                "white",
+                "gray",
+                "brown",
+                "white",
+                "blue",
+                "pink",
+                "brown",
+                "teal",
+                "white",
+                "black",
+                "white",
+              ],
+              //palette:[],
+            }
+          );
+        }
+      );
+    }
+  );
+
+  this.update = () => {};
+}