首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >三个js顶点不更新

三个js顶点不更新
EN

Stack Overflow用户
提问于 2014-07-02 20:30:16
回答 1查看 22K关注 0票数 20

我使用的是three.js r67,顶点似乎没有更新。我设置了geometry.dynamic = truegeometry.verticesNeedUpdate = true。圆在移动,但线是静止的.

有人能帮我吗?

代码语言:javascript
复制
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();
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-07-03 00:35:05

如果要更改几何体的顶点,则需要设置geometry.verticesNeedUpdate = true;

代码语言:javascript
复制
function update() {
    circle.position.x += 0.01;
    line.geometry.vertices[ 0 ].x = circle.position.x;
    line.geometry.verticesNeedUpdate = true;
};

渲染后,geometry.verticesNeedUpdate将重置为false,因此每次更改几何体顶点时,都需要将其重置为true

编辑:如果您使用的是BufferGeometry,请改用以下模式:

代码语言:javascript
复制
geometry.attributes.position.needsUpdate = true;

three.js r.74

票数 43
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/24531109

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档