Line animation ThreeJS
ThreeJS draw line with animation
by AKosmachyov
CSS
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
JavaScript
import {
WebGLRenderer,
Scene,
PerspectiveCamera,
Vector3,
LineBasicMaterial,
Clock,
Group,
AnimationMixer,
BufferGeometry,
Line,
NumberKeyframeTrack,
AnimationClip
} from "https://threejs.org/build/three.module.js";
import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
var renderer, scene, camera, controls;
const clock = new Clock();
var mixer;
const points = [
[-0.36664525, -0.10947785, 0.046916813], [-0.36692896, -0.10949561, 0.045177102],
[-0.36692896, -0.10949561, 0.045177102], [-0.36740094, -0.109046996, 0.04425852],
[-0.36740094, -0.109046996, 0.04425852], [-0.36939454, -0.10644929, 0.039979294],
[-0.36939454, -0.10644929, 0.039979294], [-0.36924666, -0.10626322, 0.039851464],
[-0.36924666, -0.10626322, 0.039851464], [-0.36908317, -0.10625997, 0.039993413],
[-0.36908317, -0.10625997, 0.039993413], [-0.36884966, -0.10639346, 0.04018011],
[-0.36884966, -0.10639346, 0.04018011], [-0.36855415, -0.10663211, 0.04036987],
[-0.36855415, -0.10663211, 0.04036987], [-0.36821684, -0.10692939, 0.040591106],
[-0.36821684, -0.10692939, 0.040591106], [-0.36782336, -0.10731025, 0.040792957],
[-0.36782336, -0.10731025, 0.040792957], [-0.36739337, -0.10767262, 0.04081653],
[-0.36739337, -0.10767262, 0.04081653], [-0.36696225, -0.10808329, 0.04086826],
[-0.36696225, -0.10808329, 0.04086826], [-0.36651945, -0.10849321, 0.04093668],
[-0.36651945, -0.10849321, 0.04093668], [-0.3660869, -0.10886204, 0.041133083],
[-0.3660869, -0.10886204, 0.041133083], [-0.3656629, -0.109191254, 0.041313544],
[-0.3656629, -0.109191254, 0.041313544], [-0.36526364, -0.10944857, 0.041368306],
[-0.36526364, -0.10944857, 0.041368306], [-0.36505476, -0.109732196, 0.041054845],
[-0.36505476, -0.109732196, 0.041054845], [-0.36480078, -0.10983284, 0.041020878],
[-0.36480078, -0.10983284, 0.041020878], [-0.36448702, -0.109932125, 0.041197352],
...