I am trying to create an animation of a Lorenz attractor using Three.js. I found a helpful YouTube tutorial that serves as a guide for this project.
You can view a snippet of my current progress here:
// SETTING UP THE SCENE
// ------------------------------------
// Setting up the scene
var scene = new THREE.Scene();
...
// ADDING GEOMETRY
// ------------------------------------
var x = -12.1;
var y = -22;
var z = 0;
...
// Rendering loop function
function render() {
...
}
render(); // Initial call to the rendering loopbody {
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>Although I have successfully drawn the Lorenz attractor, I am facing challenges in animating the drawing process. When attempting to push new vertices onto the geometry within the render loop, the line becomes invisible on the screen. This issue is highlighted in the commented-out section of JavaScript starting from line 73.
I have read about the potential solution of utilizing Three.js's BufferGeometry class. However, I am unsure about how to implement it effectively in this context.
If anyone could provide guidance on how to animate the drawing of the attractor using Three.js or shed light on the application of the BufferGeometry class, I would greatly appreciate it.