Анимация чертежа строки в 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 и далее.

В результате некоторых поисков возникла идея использования класса 3.от Three.js. Однако я не совсем понимаю, что именно делает этот класс или как его применять в этом случае.

Любое руководство будет оценено по достоинству.

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 пример