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