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!