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.
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:
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 aboutAsm.js optimiser
when adding the 2nd<script>
tag.I don't think I'm missing anything obvious here?