Hello @Jan, I stumbled upon your query regarding updating/refreshing the scene in Three.js.
It seems you are facing issues while trying to update the scene due to multiple tasks being performed simultaneously. My suggestion would be to simplify by focusing on creating a PlaneGeometry within a canvas window and incorporating a button to refresh the scene by moving just one vertex initially before adding additional complexity.
$(document).ready(function() {
console.log("BEGIN");
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
}
function refresh() {
console.log("Refreshing...");
plane.geometry.vertices[0].z = 50;
plane.geometry.verticesNeedUpdate = true;
}
var width = 600;
var height = 400;
var refreshButton = document.createElement("input");
refreshButton.type = "button";
refreshButton.value = "REFRESH SCENE";
refreshButton.onclick = function(){refresh()};
document.body.appendChild(refreshButton);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.PlaneGeometry(300, 168, 300 , 168);
var material = new THREE.MeshBasicMaterial({color: 0xffff00, side: THREE.DoubleSide});
var plane = new THREE.Mesh(geometry, material);
scene.add(plane);
camera.position.set(200, 200, 200);
camera.up = new THREE.Vector3(0, 0, 1);
camera.lookAt(new THREE.Vector3(50, 0, 0));
scene.add(camera);
render();
});
This setup will generate a button and a canvas window displaying a yellow PlaneGeometry. Clicking the button will move plane.geometry.vertices[0] to a z-coordinate of 50 (from its initial position) refreshing the display in the canvas window (located at the far right corner of the PlaneGeometry).
Furthermore, this process can be extended to manipulate all vertices individually using an algorithm to create dynamic transformations rather than random shaking for a more nuanced effect.
Additionally, utilizing:
var ray = new THREE.Ray(camera.position, vector.subSelf(camera.position).normalize()),intersects = ray.intersectObject(plane);
You can interact with a specific vertex on the PlaneGeometry canvas, triggering various reactions among other vertices over time.
I trust this insight proves beneficial! =^)