[英]How to draw Three js line geometry with tween animation effect?
我是Three.js的新手。
我想在3D空間上繪制曲線(基於一些參數方程),使用THREE.JS
來說明繪圖的路徑。
為了實現這一點,我基本上嘗試了兩種方式:
方法一:更新幾何中的值。 :
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);
}
APPROACH TWO:使用Tween.js更新功能。 參考
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);
}
我怎樣才能在這個鏈接中實現這一點(它在2D空間中我試圖在3D空間中實現)?
PS: 我可以為場景添加形狀和線條,也可以使用tween.js為整個對象設置動畫。 但問題是動畫畫線。 請幫忙。
1.我創建了一個緩沖幾何,通過指定它的大小等於我需要繪制線的點數。
var buffer_geometry = new THREE.BufferGeometry();
buffer_geometry.attributes = {
position: {
itemSize: 3,
array: new Float32Array(numberofpoints)
}
};
2.保持位置數組在渲染時更新它
positions = buffer_geometry.attributes.position.array;
3.在更新功能中,每個6個相鄰點由曲線上的x,y,z值更新:
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;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.