在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); \t 
 

 
// 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++) { 
 
\t 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() { 
 

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

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

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

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

 
\t 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>

正如你所看到的，我能够成功地绘制Lorenz吸引，加上之前现场。

但是，我无法通过将新顶点推到渲染循环内的几何图形上来动画吸引器的图形。这样做会导致该行在屏幕上不可见。您可以在73行以后的JavaScript注释部分中看到我在这种方法下的实验。

一些搜索引发了使用Three.js的BufferGeometry类的想法。但是，我不清楚这个班究竟做了什么或者如何在这个例子中应用它。

任何指导，将不胜感激。

Answer 1

看着this SO answer，你可以结合这个答案和你的jsbin代码。所有你需要做的就是把你的全球variabels与吸引缩写

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