Обновить положение вершины после рендеринга в ThreeJS

Я хочу обновить позицию вершины ПОСЛЕ рендеринга. Измененная вершина и оператор обновления после рендеринга в следующем коде не имеют никакого эффекта.

Я прошу вас указать, что мне здесь не хватает.

var mat = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } ); 
var wireframe = new THREE.LineSegments( geo, mat ); 
scene.add( wireframe ); 
wireframe.geometry.attributes.position.array[0] = 300; 
wireframe.geometry.attributes.position.array[1] = 300; wireframe.geometry.attributes.position.array[2] = 3; 
wireframe.geometry.verticesNeedUpdate = true;

camera.position.z = 1000; 
renderer.render(scene, camera);

wireframe.geometry.attributes.position.array[0] = 3;
wireframe.geometry.verticesNeedUpdate = true;  

Всего 1 ответ


Во-первых, никогда не включайте three.js из threejs.org. Он сломается при обновлении. Всегда используйте свою собственную копию или версионный CDN

вам нужно установить

wireframe.geometry.attributes.position.needsUpdate = true;

И ничто не изменится визуально в three.js, если вы не визуализируете после изменения чего-либо. Просто добавление еще одного вызова для рендера показывает ваши изменения

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geo = new THREE.EdgesGeometry(new THREE.BoxGeometry(500, 500, 500));
var mat = new THREE.LineBasicMaterial({
  color: 0xffffff,
  linewidth: 2
});
var wireframe = new THREE.LineSegments(geo, mat);

scene.add(wireframe);

wireframe.geometry.attributes.position.array[0] = 300;
wireframe.geometry.attributes.position.array[1] = 300;
wireframe.geometry.attributes.position.array[2] = 300;

camera.position.z = 1000;
renderer.render(scene, camera);

wireframe.geometry.attributes.position.array[0] = 0;
wireframe.geometry.attributes.position.array[1] = 0;
wireframe.geometry.attributes.position.array[2] = 0;

wireframe.geometry.attributes.position.needsUpdate = true;

renderer.render(scene, camera);
<script src="https://cdn.jsdelivr.net/npm/three@0.112.1/build/three.min.js"></script>

Вы можете проверить эти учебники


Есть идеи?

10000