在three.js中围绕一个圆旋转一条线
提问于 2020-02-21 13:20:57
var lineGeometry = new THREE.Geometry();
var lineMaterial = new THREE.LineBasicMaterial({
color: 0x000000
});
lineGeometry.vertices.push(
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(0, 10, 0),
);
var line = new THREE.Line(lineGeometry, lineMaterial);
scene.add(line);我想以循环的方式更新这条线的端点。在其他语言中，我会增加一些变量并更新端点，比如radius * cos(dt)和radius * sin(dt)。在three.js中，我尝试了以下几种方法，但不起作用：
var dt = 0;
function render(){
dt += 0.01;
line.geometry.vertices[1].x = 10*Math.cos(dt);
line.geometry.vertices[1].z = 10*Math.sin(dt);
renderer.render(scene, camera);
requestAnimationFrame(render);
}编辑：我不想使用line.rotation.z += 0.01方法。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-02-21 13:56:03
line.geometry.verticesNeedUpdate = true;在调用render之前添加上面的行。这将向three.js发出信号，表明顶点缓冲区已经更改，因此它将对其进行适当的更新。
由于您提到使用line.rotation，我必须指出，与旋转线型相比，更新顶点效率很低。旋转线条形状时，只需更新形状的转换矩阵。但是当您更新顶点时，three.js需要重新上传整个顶点集到GPU。对于单个线段来说，这似乎是微不足道的，但是如果您以后打算使用更大的形状，那么这是一个很坏的习惯。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60346343
复制相关文章
点击加载更多
腾讯云开发者
