Get started with three.meshline CDN

MIT licensed

Three.meshline is a Three.js function that creates a horizontal line mesh.

Tags:
  • lines
  • threejs
  • mesh
  • line

Stable version

Copied!

How to start using three.meshline CDN


// Import required Three.js modules
import * as THREE from 'three';
import { MeshLine, MeshLineGeometry, MeshLineMaterial } from 'https://cdn.cdnhub.io/three.meshline/1.4.0/THREE.MeshLine.js';

// Create scene, camera, and renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Create a geometry for a line with 100 points
const geometry = new MeshLineGeometry().setPositions(new Float32Array(new Float32Array(new Array(101)).map((_, i) => i / 100 * 10 - 5)));

// Create a material for the line
const material = new MeshLineMaterial({ color: 0xff0000 });

// Create a MeshLine using the geometry and material
const line = new MeshLine(geometry, material);
scene.add(line);

// Set camera position and render
camera.position.z = 5;
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();
Copied!
Copied!

All versions