Three.js - Particles - Versionsgeschichte

134.3.241.3: /* GUI mit onChange / onFinishChange */

2022-01-16T19:19:56Z

GUI mit onChange / onFinishChange

2022-01-16T19:19:09Z

2021-12-31T14:22:28Z

Zufällige Farben und Positionen

2021-12-31T13:57:10Z

Transparenz und Blending

2021-12-31T13:42:08Z

Eigene Geometrie mit zufälligen Punkten

2021-12-31T12:45:43Z

Eigene Geometrie mit zufälligen Punkten

2021-12-31T12:35:46Z

Eigene Geometrie mit zufälligen Punkten

2021-12-31T12:31:11Z

Eigene Geometrie mit zufälligen Punkten

2021-12-31T12:30:54Z

Eigene Geometrie mit zufälligen Punkten

2021-12-31T12:30:24Z

@@ Zeile 481: / Zeile 481: @@
 '''To update these millions of particles on each frame with a good framerate, we need to create our own material with our own shaders. But shaders are for a later lesson.'''
-== GUI mit onChange / onFinishChange ==
+== GUI zum generieren von Objekten mit onChange / onFinishChange ==
 <syntaxhighlight lang="javascript">

← Nächstältere Version		Version vom 16. Januar 2022, 19:19 Uhr
Zeile 480:		Zeile 480:
	'''		'''
	'''To update these millions of particles on each frame with a good framerate, we need to create our own material with our own shaders. But shaders are for a later lesson.'''		'''To update these millions of particles on each frame with a good framerate, we need to create our own material with our own shaders. But shaders are for a later lesson.'''
		+
		+	== GUI mit onChange / onFinishChange ==
		+
		+	<syntaxhighlight lang="javascript">
		+	gui.add(params, 'count').min(100).max(1000000).step(100).onFinishChange(generateGalaxy)
		+	gui.add(params, 'size').min(0.001).max(0.1).step(0.001).onFinishChange(generateGalaxy)
		+	</syntaxhighlight>
		+	Vorsicht Memory-Leaks -> darauf achten, dass alte Geometrien / Materialien gelöscht werden:
		+	<syntaxhighlight lang="javascript">
		+	const generateGalaxy = () => {
		+	if(points != null){
		+	/**
		+	* Destroy old galaxy
		+	*/
		+	pGeometry.dispose()
		+	pMaterial.dispose()
		+	scene.remove(points)
		+	}
		+	//...
		+	}
		+	</syntaxhighlight>

@@ Zeile 112: / Zeile 112: @@
 const particles = new THREE.Points(particlesGeometry, particlesMaterial)
 scene.add(particles)
 </syntaxhighlight>

@@ Zeile 70: / Zeile 70: @@
      sizeAttenuation: true, //change size if near/far?
 })
 </syntaxhighlight>

← Nächstältere Version		Version vom 31. Dezember 2021, 13:42 Uhr
Zeile 50:		Zeile 50:

	scene.add(particles)		scene.add(particles)
		+	</syntaxhighlight>
		+
		+	=== Transparenz und Blending ===
		+	<syntaxhighlight lang="javascript">
		+	const particlesMaterial = new THREE.PointsMaterial({
		+	color: '#ff88cc',
		+	transparent: true,
		+	alphaMap: particlesTexture,
		+
		+	// 3 Solutions for better alpha with not much performance impact
		+	//alphaTest: 0.001, // beware of artefacts at borders
		+	//depthTest: false, // works if just one color
		+	depthWrite: false, // many times the right solution
		+
		+	// 1 Solution for blending particles (beware of performance)
		+	blending: THREE.AdditiveBlending
		+
		+	size: 0.1,
		+	sizeAttenuation: true, //change size if near/far?
		+	})
	</syntaxhighlight>		</syntaxhighlight>

@@ Zeile 31: / Zeile 31: @@
 const particlesGeometry = new THREE.BufferGeometry()
 const count = 500
 const positionsArray = new Float32Array(count * 3) //3 vals per point
 for (let i = 0; i < positionsArray.length; i++) {
-     positionsArray[i] = (Math.random() - 0.5) * 3
+     positionsArray[i] = (Math.random() - 0.5) * 4
-−
+}
-const positionsAttribute = new THREE.BufferAttribute(positionsArray, 3) //3 means 3 values belong together (one 3D Koordinate)
+// put array values in geometry
-particlesGeometry.setAttribute('position',positionsAttribute) // Punkte einfügen
+particlesGeometry.setAttribute(
 // Material

@@ Zeile 26: / Zeile 26: @@
   */
 // Geometry
 const particlesGeometry = new THREE.BufferGeometry()
 const count = 500
@@ Zeile 39: / Zeile 38: @@
 // Material
 const particlesMaterial = new THREE.PointsMaterial({size: 0.02})
 // Points
 const particles = new THREE.Points(particlesGeometry, particlesMaterial)

@@ Zeile 2: / Zeile 2: @@
 The good thing with particles is that you can have hundreds of thousands of them on screen with a reasonable frame rate. The downside is that each particle is composed of a plane (two triangles) always facing the camera.
 == Tutorial ==
 Based on: https://threejs-journey.com/lessons/18