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>

は、シーン。

ただし、レンダリングループ内のジオメトリに新しい頂点をプッシュすることでアトラクタの描画をアニメートできません。そうすると、画面上に行が表示されなくなります。 JavaScriptのコメント欄の73行目以降で、私がこのアプローチを試した場所を知ることができます。

検索の中には、Three.jsのBufferGeometryクラスを使用するという考えがあります。しかし、私はそのクラスが正確に何をするのか、このインスタンスにどのように適用するのかは不明です。

ガイダンスをいただければ幸いです。

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; 

であなたのグローバルvariabelsを入れて、あなたは追加のラインセグメント

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の座標を設定する方法を、updatePositions()機能に小さな変更を加えることです例