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例子