在threejs中渲染后更新頂點位置

Question

我想在渲染后更新頂點位置。 下面代碼中的改變頂點和渲染后的update語句沒有任何作用。

我要求你指出我在這里遺漏了什么。

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;  

Answer 1

首先永遠不要包含來自threejs.org 的three.js它會隨着更新而中斷。 始終使用您自己的副本或版本化的 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>

你可能想看看這些教程