Comment dessiner la géométrie de ligne Three js avec effet d'animation interpolaire?

Je suis nouveau dans Three.js.

Je veux dessiner des courbes (basées sur certaines équations paramétriques) sur l'espace 3D, en utilisant THREE.JS , pour illustrer le chemin du dessin.

Pour ce faire, j'ai essentiellement essayé de deux façons:

APPROCHE UN: mettre à jour les valeurs en géométrie. :

• Visionneuse Android utilisant GSAP: tentative d'enlever la référence locale non-JNI, déversement de thread
• RequestAnimationFrame appelé juste avant la fin du cadre?
• Création d'un effet de saturation de la souris sur la souris
• Effet de "tremblement" étrange lors de l'animation de la largeur avec jQuery (uniquement dans Chrome!)
• Comment créer une animation circulaire avec différents objets en utilisant jQuery?

 var lineGeometry = new THREE.Geometry(); lineGeometry.vertices.push(new THREE.Vector3(starting_x,starting_y,starting_z)); var lineMaterial = new THREE.LineBasicMaterial({color: 0xffffff}); var line = new THREE.Mesh(lineGeometry, lineMaterial); scene.add(line); function render() { requestAnimationFrame(animate); //calculate x,y,z based on my equation lineGeometry.vertices.push(new THREE.Vector3(x,y,z)); renderer.render(scene, camera); } 

APPROCHE DEUX: en utilisant la fonction de mise à jour Tween.js. Référencé sur

 var lineGeometry = new THREE.Geometry(); lineGeometry.vertices.push(new THREE.Vector3(starting_x,starting_y,starting_z)); var lineMaterial = new THREE.LineBasicMaterial({color: 0xffffff}); var line = new THREE.Mesh(lineGeometry, lineMaterial); scene.add(line); var position = {x: -15, y: 0, z: 0}; var target = {x: 4, y: 0, z: -15}; var tween = new TWEEN.Tween(position).to(target, 8000); tween.easing(TWEEN.Easing.Elastic.InOut); tween.onUpdate(function() { lineGeometry.vertices.push(position.x, position.y, position.z); }); tween.start(); animate(); function animate() { render(); requestAnimationFrame(animate); TWEEN.update(); } function render() { renderer.render(scene, camera); } 

Comment puis-je réaliser cela comme dans ce lien (c'est dans l'espace 2D et j'essayais de réaliser dans l'espace 3D)?

PS: Je peux ajouter des formes et des lignes à la scène également animer l'objet entier avec tween.js. Mais le problème est d'animer le dessin de ligne. Aidez-nous.

• Existe-t-il un moyen de créer deux animations jQuery (correctement) simultanément?
• Animation angular2 avec styles variables
• CSS3 Transitions avec Javascript Fallback
• JQuery stop (true, true) pour passer à la fin de toutes les animations en file d'attente
• Animer une ligne tracée entre 2 éléments sans toile, lier par ID

 var buffer_geometry = new THREE.BufferGeometry(); buffer_geometry.attributes = { position: { itemSize: 3, array: new Float32Array(numberofpoints) } }; 

 positions = buffer_geometry.attributes.position.array; 

  positions[ i * 6 ] = x; positions[ i * 6 + 1 ] = y; positions[ i * 6 + 2] = z; positions[ i * 6 + 3] = x + 0.1; positions[ i * 6 + 4] = y + 0.1; positions[ i * 6 + 5] = z + 0.1;