ThreeJS - Versionsgeschichte

134.3.74.15: /* Debugging */

2022-03-17T20:20:45Z

Debugging

134.3.74.15 am 17. Februar 2022 um 02:31 Uhr

2022-02-17T02:31:21Z

134.3.241.3: /* lil-gui */

2021-12-27T11:07:20Z

lil-gui

134.3.241.3: /* lil-gui */

2021-12-26T23:32:47Z

lil-gui

134.3.241.3: /* Debugging */

2021-12-26T23:11:07Z

Debugging

134.3.241.3: /* Debugging */

2021-12-26T23:07:54Z

Debugging

134.3.241.3: /* lil-gui */

2021-12-26T22:45:57Z

lil-gui

134.3.241.3: /* Debug UI */

2021-12-26T22:41:56Z

Debug UI

134.3.241.3: /* Debug UI */

2021-12-26T22:21:25Z

Debug UI

134.3.241.3 am 26. Dezember 2021 um 22:06 Uhr

2021-12-26T22:06:13Z

← Nächstältere Version		Version vom 17. März 2022, 20:20 Uhr
Zeile 184:		Zeile 184:

	Auch Funktionen kann man übergeben, diese werden dann per Klick ausgelöst.		Auch Funktionen kann man übergeben, diese werden dann per Klick ausgelöst.
		+
		+	=== JavaScript Module oder Vanilla ===
		+	In moderneren Setups nutzt man heute Loader wie Webpack und lädt Plugins als Module. Es gibt aber alle Plugins auch als konventionelle Skripte.
		+
		+	Konventionell:
		+	<syntaxhighlight lang="javascript">
		+	<script src="\node_modules\three\build\three.js"></script>
		+	<script src="\node_modules\three\examples\js\loaders\GLTFLoader.js"></script>
		+	<script src="index.js"></script>
		+	// Achtung bei manchen Modulen geht das hier anders als bei den Modulimporten:
		+	// You should instantiate the GLTFLoader constructor using its parent class constructor that is the 'THREE' constructor
		+	var loader = new THREE.GLTFLoader();
		+	</syntaxhighlight>
		+
		+	Modern:
		+	<syntaxhighlight lang="javascript">import './style.css'
		+	import * as THREE from 'three'
		+	import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
		+	import * as dat from 'lil-gui'
		+	import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
		+	import { gsap } from "gsap";
		+	import { ScrollTrigger } from "gsap/ScrollTrigger.js";
		+	gsap.registerPlugin(ScrollTrigger)
		+	//...
		+	// Hier kann die Loader Klasse direkt angesprochen werden.
		+	const gltfLoader = new GLTFLoader()
		+	</syntaxhighlight>
		+
		+	You should instantiate the GLTFLoader constructor using its parent class constructor that is the 'THREE' constructor, like I have shown above. This will resolve the issue.

@@ Zeile 3: / Zeile 3: @@
   https://threejs.org/editor/ (Szenen und Objekte erstellen und expportieren)
   https://threejs-journey.com/ Bruno Simon Course (registriert mit dev@stephanschlegel.de)
   [[ThreeJS - Snippets]]

@@ Zeile 141: / Zeile 141: @@
 Beispiel inkl. kleiner GSAP Animation:
 <syntaxhighlight lang="javascript">
 import GUI from 'lil-gui';
 /**
   * Debug
   */
-const gui = new GUI()
+const gui = new GUI({
+    width:400
 const params = {
      color: 0xff0000,
@@ Zeile 153: / Zeile 156: @@
          console.log('spin')
          let tl = new gsap.timeline
-         tl.to(mesh.rotation,{y: mesh.rotation.y + 2*Math.PI, duration: 1.5, ease: "circ"})
+         tl.to(mesh.rotation,{y: mesh.rotation.y + 0.5*Math.PI, duration: 1.5, ease: "circ"})
          //...
+     }

@@ Zeile 139: / Zeile 139: @@
   npm i --save lil-gui
-Beispiel:
+Beispiel inkl. kleiner GSAP Animation:
 <syntaxhighlight lang="javascript">
 import GUI from 'lil-gui';
@@ Zeile 152: / Zeile 152: @@
+     {
          console.log('spin')
+     }
+}

@@ Zeile 142: / Zeile 142: @@
 <syntaxhighlight lang="javascript">
 import GUI from 'lil-gui';
 /**
   * Debug
   */
-const gui new GUI()
+const gui = new GUI()
 //...
-// Slider: @param object, 'property', min, max, step
+// Debug
-gui.add(mesh.position,'y',-2,2,0.1)
+//gui.add(mesh.position,'y',-2,2,0.1) // OR
-//gui.add(mesh.position,'y').min(-2).max(3).step(0.1) // chain version
+gui.add(mesh.position,'y')
 </syntaxhighlight>

@@ Zeile 121: / Zeile 121: @@
 == Debugging ==
 === Debug UI ===
 Dat.GUI ist (Ende 21) nicht mehr aktuell. Stattdessen kann man lil-gui verwenden.

@@ Zeile 133: / Zeile 133: @@
      Bruno Simon's debug panel https://bruno-simon.com/#debug
 ==== lil-gui ====
 Mit Webpack / npm
   npm i --save lil-gui

← Nächstältere Version		Version vom 26. Dezember 2021, 22:06 Uhr
Zeile 118:		Zeile 118:
	const aspectRatio = width/height // width and height of renderer viewport		const aspectRatio = width/height // width and height of renderer viewport
	const camera = new THREE.OrthographicCamera(-1 * aspectRatio,1 * aspectRatio,1,-1)		const camera = new THREE.OrthographicCamera(-1 * aspectRatio,1 * aspectRatio,1,-1)
		+
		+	== Debugging ==
		+	=== Debug UI ===
		+	Others
		+
		+	Dat.GUI https://github.com/dataarts/dat.gui
		+	lil-gui https://lil-gui.georgealways.com/
		+	control-panel https://github.com/freeman-lab/control-panel
		+	ControlKit https://github.com/automat/controlkit.js
		+	Uil https://github.com/lo-th/uil
		+	Tweakpane https://cocopon.github.io/tweakpane/
		+	Guify https://github.com/colejd/guify
		+	Oui https://github.com/wearekuva/oui
		+	Bruno Simon's debug panel https://bruno-simon.com/#debug