CODEWITHSUNDEEP
javascriptthree.js
Aquarius_Girl
Aquarius_Girl

Reputation: 22946

Update a vertex position AFTER rendering in threejs

I want to update a vertex position AFTER rendering. The changed vertex and the update statement after the rendering in the following code doesn't have any effect.

I request you to point out what am I missing here. 

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;

Upvotes: 1

Views: 1459

Answers (1)

user128511
user128511

Reputation:

First off never include three.js from threejs.org It will break as they update. Always use your own copy or a versioned cdn

you need to set

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

And the nothing will change visually in three.js unless you render after changing something. Just adding another call to render shows your change

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/[email protected]/build/three.min.js"></script>

you might want to check out these tutorials

Upvotes: 2

Related Questions