我是Three.js.的新手
我想在三维空间上绘制曲线(基于一些参数方程),使用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);
}
方法二:使用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;