Steff: Die Seite wurde neu angelegt: „== Links == ThreeJS - Snippets == Techniques == === Timebased Tick / Loop Function === Für Animationen können wir in einem Loop die Szene Rendern, Objek…“

2021-12-30T20:11:51Z

Die Seite wurde neu angelegt: „== Links == ThreeJS - Snippets == Techniques == === Timebased Tick / Loop Function === Für Animationen können wir in einem Loop die Szene Rendern, Objek…“

Neue Seite

== Links ==
[[ThreeJS - Snippets]]
== Techniques ==
=== Timebased Tick / Loop Function ===
Für Animationen können wir in einem Loop die Szene Rendern, Objekte verändern, Szene erneut Rendern usw. In JavaScript kann man dazu die window.requestAnimationFrame Funktion nutzen. Damit die zeitlichen Abläufe nicht von der Rechnerleistung sondern rein von der Zeit abhängen gibt es einige Möglichkeiten diesen Loop umzusetzen.

Die Beispiele setzen eine Setup mit einem Camera Object 'camera', einer Szene scene, und einem Renderer 'renderer' voraus. Du kannst z.B. das Beispiel auf der Hauptseite nutzen.
==== Pure JavaScript calculation ====
<syntaxhighlight lang="javascript">
let time = Date.now()
const tick = () =>
{
// JS based time calculation
const currentTime = Date.now()
const deltaTime = currentTime - time
time = currentTime
//console.log(deltaTime)
// Update objects
mesh.rotation.y += 0.001 * deltaTime
renderer.render(scene, camera)
// tell JS to call tick on the next frame
window.requestAnimationFrame(tick)
}
// go...
tick()
</syntaxhighlight>

==== ThreeJS Clock Object ====
<syntaxhighlight lang="javascript">
const clock = new THREE.Clock()
const tick = () =>
{
// Hint: do NOT use clock.getDelta() - it can cause problems (buggy in end of 2021)
const elapsedTime = clock.getElapsedTime()
//console.log(elapsedTime)
mesh.rotation.y = elapsedTime * Math.PI * 2 // one revolution / s
camera.lookAt(mesh.position)
camera.position.z = Math.sin(elapsedTime) // back and forth
// Render
renderer.render(scene, camera)
window.requestAnimationFrame(tick)
}
tick()
</syntaxhighlight>

==== GSAP Animation ====
<syntaxhighlight lang="javascript">
// GSAP has it's own requestAnimationFrame, thus no time calculation needed
// we just let gsap update our values and tick does render each frame
gsap.to(mesh.position,{ duration: 1, delay: 1, x: 2 })
gsap.to(mesh.position,{ duration: 1, delay: 1, x: 0 })
const tick = () =>
{
// Render on each frame
renderer.render(scene, camera)
window.requestAnimationFrame(tick)
}
// GO...
tick()
</syntaxhighlight>

Three.js - Animation - Versionsgeschichte

Steff: Die Seite wurde neu angelegt: „== Links == ThreeJS - Snippets == Techniques == === Timebased Tick / Loop Function === Für Animationen können wir in einem Loop die Szene Rendern, Objek…“