lume / three-meshline

Mesh-based replacement for `THREE.Line` to allow lines thicker than 1 pixel and other features.
https://docs.lume.io/three-meshline/
MIT License
42 stars 4 forks source link

"How to use" guide code silently fails. #13

Open kwmbe opened 10 months ago

kwmbe commented 10 months ago

When putting the code from Create an array of 3D coordinates until Use MeshLineGeometry and MeshLineMaterial to create a MeshLine in a working scene, no errors are shown in the console, but no meshlines are displayed either.

Example code:

import * as THREE from "three";
import { MeshLine, MeshLineMaterial, MeshLineGeometry } from "@lume/three-meshline";

const renderer = new THREE.WebGLRenderer();
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight);

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const points = [];
for (let j = 0; j < Math.PI; j += (2 * Math.PI) / 100) {
  points.push(Math.cos(j), Math.sin(j), 0);
}

const geometry = new MeshLineGeometry().setPoints(points);
const material = new MeshLineMaterial({
  resolution: new THREE.Vector2(window.innerWidth, window.innerHeight),
  lineWidth: 5,
});

scene.add(new MeshLine(geometry, material));

const animate = () => {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

animate();

The scene works, since vanilla 3js objects work. I have also tried adding the <script> tags to the HTML body, even though it didn't seem necessary to me, but that didn't change anything, other than a warning about Asm.js optimiser when adding the 2nd <script> tag.

I don't think I'm missing anything obvious here?