CoolFace
Apppublic

gentilessa/gias-3js-targets-split

sourceHugging Facemitupdated 1y agoView on Hugging Face
0likes
App README

Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

Files used

  • —main.mjs
  • —scene.js
  • —targets.js
  • —terrain.js
  • —elevation.js
  • —boundary.js
  • —ui.js
  • —OrbitControls.js
  • —three.module.js
  • —Line2.js
  • —LineGeometry.js
  • —LineMaterial.js

Thick Boundary Lines with Three.js Fat Lines

This app uses thick and glowing boundary lines via Three.js Fat Lines using Line2, LineGeometry, and LineMaterial from the Three.js examples.

Setup

  • —Download these files from the Three.js examples/jsm/lines directory and upload to your Space:
  • —Line2.js
  • —LineGeometry.js
  • —LineMaterial.js
  • —three.module.js (core Three.js build, if not using CDN)
  • —Import in your code as modules:
js
    import { Line2 } from './Line2.js';
    import { LineGeometry } from './LineGeometry.js';
    import { LineMaterial } from './LineMaterial.js';
  • —Always set resolution on each `LineMaterial` after creation and on window resize:
js
    material.resolution.set(window.innerWidth, window.innerHeight);

Troubleshooting

  • —If you see `SyntaxError: expected expression, got '<'`: This means you are trying to import a file that is actually an HTML page (not raw JS). Double-check your paths and that the files are the actual JS module files, not a preview or HTML wrapper.
  • —If you see only a thin line: Ensure you’re using Line2 and LineMaterial, not the default THREE.Line or THREE.LineBasicMaterial.

Project Features

  • —Interactive 3D geological data viewer with:
  • —Dynamic terrain draped from real elevation data
  • —Fat, glowing 3D boundary lines
  • —Depth axis, HUD controls, and Tweakpane for user interaction

Credits