javascript - 在 Three.js 中对线条的绘制进行动画处理

Question

我想使用 Three.js 在屏幕上绘制线条动画。在本例中，我要绘制的线是洛伦兹吸引子，使用 this YouTube tutorial作为指导。

我迄今为止创建的内容的片段可在以下位置找到:

// CONFIGURE SCENE
// ------------------------------------

// Create Scene - acts as container
var scene = new THREE.Scene();

// Create camera - (field of view, aspect ratio, near and far planes)
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );	

// Renderer - webgl
var renderer = new THREE.WebGLRenderer( { alpha: true,  antialias: true } );
renderer.setClearColor( 0x000000, 0 ); // set to show background of page

// Tell renderer to render to size of window
renderer.setSize( window.innerWidth, window.innerHeight );

// Add renderer to DOM
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);

// ADD GEOMETRY
// ------------------------------------
var x = -12.1;
var y = -22;
var z = 0;

var a = 10; // sigma
var b = 28; // beta
var c = 8/3; // rho

var dt, dx, dy, dz;
var points = [];

// A mesh is made up of geometry and material
// Geometry is like a scaffold. Made up of x,y,z coordinates called vertices 
// Material is the fill (faces) of the geometry

// Create Material (MeshBasic is not influenced by light)
var material = new THREE.LineBasicMaterial({
    color: 0x0000ff
});

var geometry = new THREE.Geometry();

// Create mesh, passing in geometry and material
var line = new THREE.Line(geometry, material);

// Calculate the 50000 Lorenz attractor vertices
for (var i = 0; i < 50000; i++) {
	dt = 0.01;
    dx = (a * (y - x)) * dt;
    dy = (x * (b - z) - y) * dt;
    dz = (x * y - c * z) * dt;
    
    x = x + dx;
    y = y + dy;
    z = z + dz;

    geometry.vertices.push(new THREE.Vector3(x, y, z));
}

// Add line to scene
scene.add(line);

// Move the camera out, else our camera will be at 0,0,0 and the attractor won't be visible by default
camera.position.z = 80;

// RENDER LOOP
// ------------------------------------
function render() {

	/**
	// Does not work - experimenting with animating the drawing of the attractor
	// ------------------------------------
	// Calculate the Lorenz attractor vertices
	dt = 0.01;
	dx = (a * (y - x)) * dt;
	dy = (x * (b - z) - y) * dt;
	dz = (x * y - c * z) * dt;
			
	x = x + dx;
	y = y + dy;
	z = z + dz;

	var vect = new THREE.Vector3(x, y, z); // Create three.js vector
	geometry.vertices.push(vect); // Add vertice to geometry
	// ------------------------------------
	**/

	renderer.render(scene, camera); // Render scene and camera

	// Rotate the attractor
	line.rotation.x += 0.001;
	line.rotation.y += 0.001;

	requestAnimationFrame(render); // Call animation loop recursively 
}
render(); // Initial call to loop

body {
  margin: 0;
  overflow: hidden;
  background-color: #ccc;
}
  canvas {
    width: 100%;
    height: 100%;
}

  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.js"></script>
  <script src="https://s3-eu-west-1.amazonaws.com/code-pen/OrbitControls.js"></script>

如您所见，在将洛伦兹吸引子添加到场景之前，我能够成功绘制洛伦兹吸引子。

但是，我无法通过将新顶点推到渲染循环内的几何体上来对吸引器的绘制进行动画处理。这样做会导致该线在屏幕上不可见。您可以在 JavaScript 从第 73 行开始的注释部分中看到我在哪里尝试过这种方法。

一些搜索提出了使用 Three.js 的 BufferGeometry 的想法类(class)。但是，我不清楚该类到底是做什么的，或者如何在这个实例中应用它。

如有任何指导，我们将不胜感激。

Answer 1

查看 this SO answer ，您可以将此答案与您的 jsbin 代码结合起来。您所要做的就是将全局变量与吸引子首字母缩写

var MAX_POINTS = 50000;

var x = -12.1;
var y = -22;
var z = 0;

var a = 10; // sigma
var b = 28; // beta
var c = 8/3; // rho

var dt, dx, dy, dz; 

并对 updatePositions() 函数进行一些小更改，了解如何设置添加线段的坐标

var index = 0;
...
dt = 0.01;
dx = (a * (y - x)) * dt;
dy = (x * (b - z) - y) * dt;
dz = (x * y - c * z) * dt;

x = x + dx;
y = y + dy;
z = z + dz;

jsfiddle示例