ThreeJS - Snippets - Versionsgeschichte

134.3.74.15: /* Animation Basics */

2022-02-17T00:39:04Z

Animation Basics

2022-02-05T20:06:02Z

Particles

2022-02-05T19:49:45Z

Particles

2022-02-05T19:41:51Z

Nützliche Schnipsel

2022-02-05T19:33:19Z

lil-gui

2022-02-05T19:32:12Z

lil-gui

2022-02-05T08:37:27Z

Textures

2022-01-16T18:15:25Z

Helfer

2022-01-05T12:04:54Z

Models Importieren

2022-01-05T11:37:16Z

Models Importieren

@@ Zeile 82: / Zeile 82: @@
 </syntaxhighlight>
-== Animation Basics ==
+== Animation ==
   [[Three.js - Animation]]
 === Timebased Tick / Loop Function ===
 ==== ThreeJS Clock Object ====

@@ Zeile 706: / Zeile 706: @@
 for(let i = 0; i < firefliesCount; i++)
+{
-     positionArray[i * 3 + 0] = Math.random() * 4
+     positionArray[i * 3 + 0] = ( Math.random() -0.5) * 4.5 // x from -0.5 to 4
-     positionArray[i * 3 + 1] = Math.random() * 4
+     positionArray[i * 3 + 1] = ( Math.random() + 0.05) * 3 // y from 0.05 to 2.95
-     positionArray[i * 3 + 2] = Math.random() * 4
+     positionArray[i * 3 + 2] = ( Math.random() ) * 4.5 // z from 0 to 4.5
+}

@@ Zeile 678: / Zeile 678: @@
 Benötigen eine Geometry, ein Material, ein Points Objekt (statt wie sonst ein Mesh)
   [[Three.js - Particles]]
-Starter Example
+'''Starter Examples'''
 <syntaxhighlight lang="javascript">
 /**
@@ Zeile 693: / Zeile 693: @@
 const particles = new THREE.Points(particlesGeometry, particlesMaterial)
 scene.add(particles)
 </syntaxhighlight>

@@ Zeile 840: / Zeile 840: @@
      graves.add(grave)
+}
 </syntaxhighlight>

@@ Zeile 239: / Zeile 239: @@
 gui.add(params, 'spin')
 </syntaxhighlight>
-Renderer Farben Beispiel
+'''Beispiel: Renderer ClearColor'''
 <syntaxhighlight lang="javascript">
 // Debug
@@ Zeile 246: / Zeile 246: @@
 params.clearColor = '#2b4945'
 //...
-renderer.setClearColor(debugObject.clearColor)
+renderer.setClearColor(params.clearColor)
-gui.addColor(debugObject, 'clearColor').onChange( () => {renderer.setClearColor(debugObject.clearColor)})
+gui.addColor(params, 'clearColor').onChange( () => {renderer.setClearColor(params.clearColor)})
 </syntaxhighlight>

@@ Zeile 243: / Zeile 243: @@
   https://threejs.org/docs/index.html?q=texture#api/en/constants/Textures
   [[three.js - Textures]] - ausführliche Infos zu TextureLoader Callbacks, LoadingManager...
+ [[three.js - baked map texture]]
 === Beispiel ===
 <syntaxhighlight lang="javascript">

@@ Zeile 4: / Zeile 4: @@
   [[Three.js - Shaders]]
 == Helfer ==
 === Axes Helper ===

@@ Zeile 694: / Zeile 694: @@
      () => {console.log('progress')},
      () => {console.log('error')}
+)
 </syntaxhighlight>

@@ Zeile 678: / Zeile 678: @@
 <syntaxhighlight lang="javascript">
 const gltfLoader = new GLTFLoader()
 gltfLoader.load(
@@ Zeile 687: / Zeile 689: @@
              scene.add(child)
+         }
+         //scene.add(gltf.scene)
          //scene.add(gltf.scene.children[1])
      },