三个js顶点不更新 [英] three js vertices does not update

问题描述

我正在使用three.js r67，顶点不更新。
我设置geometry.dynamic = true，geometry.verticesNeedUpdate = true。
圈子正在移动，但行是静态的....

I'm using three.js r67, and vertices does not updated. I set geometry.dynamic = true, geometry.verticesNeedUpdate = true. Circle is moving, but line is static....

有人可以帮助我吗？

var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();

var g = new THREE.CircleGeometry( 4, 16 );
var m = new THREE.MeshBasicMaterial({color: 0x114949});
var circle = new THREE.Mesh( g, m );

circle.position.x = 2;
circle.position.y = 2;
circle.position.z = -1;
scene.add( circle );

var material = new THREE.LineBasicMaterial({color: 0xDF4949, linewidth: 5});

var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(0, 0, 0));
geometry.vertices.push(new THREE.Vector3(1, 1, 0));
geometry.verticesNeedUpdate = true;
geometry.dynamic = true;

var line = new THREE.Line(geometry, material);
scene.add(line);

var update = function() {
  circle.position.x += 0.01;
  line.geometry.vertices[0].x = circle.position.x;
};

var render = function() {
  renderer.render(scene, camera);
};

var loop = function() {
  update();
  render();
  requestAnimationFrame(loop, renderer.canvas);
};
loop();

推荐答案

如果要更改几何的顶点，需要设置 geometry.verticesNeedUpdate = true; 。

If you want change the vertices of your geometry, you need to set geometry.verticesNeedUpdate = true;.

function update() {
    circle.position.x += 0.01;
    line.geometry.vertices[ 0 ].x = circle.position.x;
    line.geometry.verticesNeedUpdate = true;
};

渲染后， geometry.verticesNeedUpdate 已重置到 false ，所以每次更改几何顶点时，都需要将其重置为 true 。

After rendering, geometry.verticesNeedUpdate is reset to false, so you need to reset it to true every time the geometry vertices are changed.

编辑：如果您使用 BufferGeometry ，请改用此模式：

If you are using BufferGeometry, use this pattern instead:

geometry.attributes.position.needsUpdate = true;

three.js r.74

three.js r.74

这篇关于三个js顶点不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！