Wikizone - Benutzerbeiträge [de]

Three.js - Particles

2022-01-16T19:19:56Z

134.3.241.3: /* GUI mit onChange / onFinishChange */

[[ThreeJS - Snippets]]

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.

== Snippets ==
=== Basic Example ===
<syntaxhighlight lang="javascript">
/**
* Particles
*/
// Geometry
const particlesGeometry = new THREE.SphereBufferGeometry(1,32,32)
// Material
const particlesMaterial = new THREE.PointsMaterial({
size: 0.02,
sizeAttenuation: true, //change size if near/far - default ist true
})
// Points
const particles = new THREE.Points(particlesGeometry, particlesMaterial)
scene.add(particles)
</syntaxhighlight>
=== Eigene Geometrie mit zufälligen Punkten ===
Um Punkte zu einer Geometrie hinzuzufügen muss man
* die Punkte in ein Array packen
* Das Array der Geometrie hinzufügen. Dazu einfach das positions Attribut füllen.
<syntaxhighlight lang="javascript">
/**
* Particles
*/
// Geometry
const particlesGeometry = new THREE.BufferGeometry()
const count = 500
// create array
const positionsArray = new Float32Array(count * 3) //3 vals per point
// fill array
for (let i = 0; i < positionsArray.length; i++) {
positionsArray[i] = (Math.random() - 0.5) * 4
}
// put array values in geometry
particlesGeometry.setAttribute(
'position',
new THREE.BufferAttribute(positionsArray,3) //3 means 3 values belong together (one 3D Koordinate)
)

// Material
const particlesMaterial = new THREE.PointsMaterial({size: 0.02})

// Points
const particles = new THREE.Points(particlesGeometry, particlesMaterial)

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>

=== Zufällige Farben und Positionen ===
Ähnlich wie bei der Position erzeugen wir für die Farben ein Array mit Zufallszahlen und übergeben diese, dieses mal an das Color Attribut. Achtung vertexColor muss auf true gestellt werden:
<syntaxhighlight lang="javascript">
/**
* Textures
*/
const textureLoader = new THREE.TextureLoader()
const particlesTexture = textureLoader.load('/textures/particles/2.png')

/**
* Particles
*/
// Geometry
//const particlesGeometry = new THREE.SphereBufferGeometry(1,32,32)
const particlesGeometry = new THREE.BufferGeometry()
const count = 20000
const positionsArray = new Float32Array(count * 3)
const colorsArray = new Float32Array(count * 3)
for (let i = 0; i < positionsArray.length; i++) {
positionsArray[i] = (Math.random() - 0.5) * 10 // -5 to 5
colorsArray[i] = Math.random() // 0 to 1
}
particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positionsArray,3))
particlesGeometry.setAttribute('color', new THREE.BufferAttribute(colorsArray,3))

// Material
const particlesMaterial = new THREE.PointsMaterial({
color: '#ff88cc',
transparent: true,
alphaMap: particlesTexture,
depthWrite: false, // many times the right solution
// To set color for each point (vertex9 we need to set:
vertexColors: true,
size: 0.1,
sizeAttenuation: true, //change size if near/far?
})

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

=== Wave Animation (bad way) ===
Man kann die Positionen der Partikel direkt im ArrayBuffer manipulieren. Dies solltest du aber nur für eine Hand voll Punkte und nicht für tausende von Objekten verwenden. Bessere Lösung: Custom Shader
<syntaxhighlight lang="javascript">
const tick = () =>
{
const elapsedTime = clock.getElapsedTime()

// Update particles

// You can apply a rotation on the whole object
// particles.rotation.y = elapsedTime * 0.1

// Or update individual vertices
// NOTE - ONLY USE THIS FOR A FEW PARTICLES.
// FOR MANY PARTICLES YOU SHOULD USE A CUSTOM SHADER
for(let i=0; i < count; i++){
const i3 = i * 3 // x = i3, y = i3+1, z = i3+2
// get x value of this particle
const x = particlesGeometry.attributes.position.array[i3]
// and use it as a offset for y
particlesGeometry.attributes.position.array[i3+1] = Math.sin(elapsedTime + x)
}
// tell Three.js, that this attribute has changed
particlesGeometry.attributes.position.needsUpdate = true
// Update controls
controls.update()

// Render
renderer.render(scene, camera)

// Call tick again on the next frame
window.requestAnimationFrame(tick)
}

tick()
</syntaxhighlight>

== Tutorial ==
Based on: https://threejs-journey.com/lessons/18
=== Geometry ===

You can use any of the basic Three.js geometries. For the same reasons as for the Mesh, it's preferable to use BufferGeometries. Each vertex of the geometry will become a particle:
<syntaxhighlight lang="javascript">
/**
* Particles
*/
// Geometry
const particlesGeometry = new THREE.SphereGeometry(1, 32, 32)
</syntaxhighlight>

=== PointsMaterial ===

We need a special type of material called '''PointsMaterial'''. This material can already do a lot, but we will discover how to create our '''own particles material''' to go even further in a future lesson.

The PointsMaterial has multiple properties specific to particles like the size to control all '''particles size''' and the '''sizeAttenuation''' to specify if distant particles should be smaller than close particles:

<syntaxhighlight lang="javascript">
// Material
const particlesMaterial = new THREE.PointsMaterial({
size: 0.02,
sizeAttenuation: true
})
</syntaxhighlight>

As always, we can also '''change those properties''' after creating the material:
<syntaxhighlight lang="javascript">
const particlesMaterial = new THREE.PointsMaterial()
particlesMaterial.size = 0.02
particlesMaterial.sizeAttenuation = true
</syntaxhighlight>

=== Points ===

Finally, we can create the final particles the same way we create a Mesh, but this time by using the Points class. Don't forget to add it to the scene:

<syntaxhighlight lang="javascript">
// Points
const particles = new THREE.Points(particlesGeometry, particlesMaterial)
scene.add(particles)
</syntaxhighlight>

That was easy. Let's customize those particles.

=== Custom geometry ===

To create a custom geometry, '''we can start from a BufferGeometry''', and add a position attribute as we did in the Geometries lesson. Replace the SphereGeometry with custom geometry and add the 'position' attribute as we did before:

<syntaxhighlight lang="javascript">
// Geometry
const particlesGeometry = new THREE.BufferGeometry()
const count = 500

const positions = new Float32Array(count * 3) // Multiply by 3 because each position is composed of 3 values (x, y, z)

for(let i = 0; i < count * 3; i++) // Multiply by 3 for same reason
{
positions[i] = (Math.random() - 0.5) * 10 // Math.random() - 0.5 to have a random value between -0.5 and +0.5
}

particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)) // Create the Three.js BufferAttribute and specify that each information is composed of 3 values
</syntaxhighlight>

Don't be frustrated if you can't pull out this code by yourself. It's a little complex, and variables are using strange formats.

You should get a bunch of particles all around the scene. Now is an excellent time to have fun and test the limits of your computer. Try 5000, 50000, 500000 maybe. You can have millions of particles and still have a reasonable frame rate.

You can imagine that there are limits. On an inferior computer or a smartphone, you won't be able to have a 60fps experience with millions of particles. We are also going to add effects that will drastically reduce the frame rate. But still, that's quite impressive.

For now, let's keep the count to 5000 and change the size to 0.1:

<syntaxhighlight lang="javascript">
const count = 5000

// ...

particlesMaterial.size = 0.1

// ...
</syntaxhighlight>

=== Color, map and alpha map ===

We can '''change the color of all particles''' with the color property on the PointsMaterial. Don't forget that you need to use the Color class if you're changing this property after instancing the material:

particlesMaterial.color = new THREE.Color('#ff88cc')

We can also use the '''map property to put a texture on those particles'''. Use the TextureLoader already in the code to load one of the textures located in /static/textures/particles/:

<syntaxhighlight lang="javascript">
/**
* Textures
*/
const textureLoader = new THREE.TextureLoader()
const particleTexture = textureLoader.load('/textures/particles/2.png')

// ...

particlesMaterial.map = particleTexture
</syntaxhighlight>

These textures are resized versions of the pack provided by Kenney and you can find the full pack here: https://www.kenney.nl/assets/particle-pack. But you can also create your own.

As you can see, the color property is changing the map, just like with the other materials.

If you look closely, you'll see that the front particles are hiding the back particles.

We need to '''activate transparency''' with transparent and use the texture on the '''alphaMap property''' instead of the map:
<syntaxhighlight lang="javascript">
// particlesMaterial.map = particleTexture
particlesMaterial.transparent = true
particlesMaterial.alphaMap = particleTexture
</syntaxhighlight>

Now that's better, but we can still randomly see some edges of the particles.

That is because the particles are drawn in the same order as they are created, and WebGL doesn't really know which one is in front of the other.

There are multiple ways of fixing this.
==== Using alphaTest ====

The alphaTest is a value between 0 and 1 that enables the WebGL to know when not to render the pixel according to that pixel's transparency. By default, the value is 0 meaning that the pixel will be rendered anyway. '''If we use a small value such as 0.001, the pixel won't be rendered if the alpha is 0''':

particlesMaterial.alphaTest = 0.001

This solution isn't perfect and if you watch closely, you can still see glitches, but it's already more satisfying.
==== Using depthTest ====

When drawing, the WebGL tests if what's being drawn is closer than what's already drawn. That is called depth testing and can be deactivated (you can comment the alphaTest):

// particlesMaterial.alphaTest = 0.001
particlesMaterial.depthTest = false

While this solution seems to completely '''fix our problem''', deactivating the depth testing might '''create bugs if you have other objects in your scene or particles with different colors'''. The particles might be drawn as if they were above the rest of the scene.

Add a cube to the scene to see that:
<syntaxhighlight lang="javascript">
const cube = new THREE.Mesh(
new THREE.BoxGeometry(),
new THREE.MeshBasicMaterial()
)
scene.add(cube)
</syntaxhighlight>

==== Using depthWrite ====

As we said, the WebGL is testing if what's being drawn is closer than what's already drawn. The depth of what's being drawn is stored in what we call a depth buffer. Instead of not testing if the particle is closer than what's in this depth buffer, we can tell the WebGL not to write particles in that depth buffer (you can comment the depthTest):

// particlesMaterial.alphaTest = 0.001
// particlesMaterial.depthTest = false
particlesMaterial.depthWrite = false

In our case, this solution will '''fix the problem with almost no drawback'''. Sometimes, '''other objects might be drawn behind or in front of the particles''' depending on many factors like the transparency, in which order you added the objects to your scene, etc.

We saw multiple techniques, and there is no perfect solution. You'll have to adapt and '''find the best combination''' according to the project.

=== Blending ===

Currently, the WebGL draws the pixels one on top of the other.

By changing the blending property, we can tell the WebGL not only to draw the pixel, but also to '''add the color of that pixel to the color of the pixel already drawn'''. That will have a saturation effect that can look amazing.

To test that, simply change the blending property to ''THREE.AdditiveBlending'' (keep the depthWrite property):

<syntaxhighlight lang="javascript">
// particlesMaterial.alphaTest = 0.001
// particlesMaterial.depthTest = false
particlesMaterial.depthWrite = false
particlesMaterial.blending = THREE.AdditiveBlending
</syntaxhighlight>

Add more particles (let's say 20000) to better enjoy this effect.

But be careful, this effect will impact the performances, and you won't be able to have as many particles as before at 60fps.

Now, we can remove the cube.

=== Different colors ===

We can have a different color for each particle. We first need to add a new attribute named color as we did for the position. A color is composed of red, green, and blue (3 values), so the code will be very similar to the position attribute. We can actually use the same loop for these two attributes:

<syntaxhighlight lang="javascript">
const positions = new Float32Array(count * 3)
const colors = new Float32Array(count * 3)

for(let i = 0; i < count * 3; i++)
{
positions[i] = (Math.random() - 0.5) * 10
colors[i] = Math.random()
}

particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
particlesGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3))
</syntaxhighlight>

Be careful with singulars and plurals.

To activate those vertex colors, simply change the '''vertexColors property to true''':

particlesMaterial.vertexColors = true

The '''main color''' of the material '''still affects these vertex colors'''. Feel free to change that color or even comment it.

// particlesMaterial.color = new THREE.Color('#ff88cc')

=== Animate ===

There are multiple ways of animating particles.
==== By using the points as an object ====

Because the '''Points''' class inherits from the '''Object3D''' class, you can '''move, rotate and scale''' the points as you wish.

Rotate the particles in the tick function:
<syntaxhighlight lang="javascript">
const tick = () =>
{
const elapsedTime = clock.getElapsedTime()

// Update particles
particles.rotation.y = elapsedTime * 0.2

// ...
}
</syntaxhighlight>

While this is already cool, we want '''more control over each particle.'''
By changing the attributes

Another solution would be to '''update each vertex position separately'''. This way, vertices can have different trajectories. We are going to animate the particles as if they were floating on waves but first, let's see how we can update the vertices.

Start by commenting the previous rotation we did on the whole particles:
<syntaxhighlight lang="javascript">
const tick = () =>
{
// ...

// particles.rotation.y = elapsedTime * 0.2

// ...
}
</syntaxhighlight>

To update each vertex, we have to '''update the right part in the position attribute''' because all the vertices are stored in this '''one dimension array''' where the first 3 values correspond to the x, y and z coordinates of the first vertex, then the next 3 values correspond to the x, y and z of the second vertex, etc.

We only want the vertices to move up and down, meaning that we are going to update the y axis only. Because the position attribute is a one dimension array, we have to '''go through it 3 by 3 and only update the second value which is the y coordinate'''.

Let's start by going through each vertices:
<syntaxhighlight lang="javascript">
const tick = () =>
{
// ...

for(let i = 0; i < count; i++)
{
const i3 = i * 3
}

// ...
}
</syntaxhighlight>

Here, we chose to have a simple for loop that goes from 0 to count and we created a '''i3 variable inside that goes 3 by 3 simply by multiplying i by 3.'''

The easiest way to simulate '''waves movement''' is to use a simple '''sinus'''. First, we are going to update all vertices to go up and down on the same frequency.

The y coordinate can be access in the array at the index i3 + 1:
<syntaxhighlight lang="javascript">
const tick = () =>
{
// ...

for(let i = 0; i < count; i++)
{
const i3 = i * 3

particlesGeometry.attributes.position.array[i3 + 1] = Math.sin(elapsedTime)
}

// ...
}
</syntaxhighlight>

Unfortunately, nothing is moving. The problem is that '''Three.js has to be notified that the geometry changed'''. To do that, we have to set the '''needsUpdate to true''' on the position attribute once we are done updating the vertices:
<syntaxhighlight lang="javascript">
const tick = () =>
{
// ...

for(let i = 0; i < count; i++)
{
const i3 = i * 3

particlesGeometry.attributes.position.array[i3 + 1] = Math.sin(elapsedTime)
}
particlesGeometry.attributes.position.needsUpdate = true

// ...
}
</syntaxhighlight>

All the particles should be moving up and down like a plane.

That's a good start and we are almost there. All we need to do now is '''apply an offset to the sinus between the particles''' so that we get that '''wave shape.'''

To do that, we can '''use the x coordinate'''. And to get this value we can use the same technique that we used for the y coordinate but instead of i3 + 1, it's just i3:
<syntaxhighlight lang="javascript">
const tick = () =>
{
// ...

for(let i = 0; i < count; i++)
{
let i3 = i * 3

const x = particlesGeometry.attributes.position.array[i3]
particlesGeometry.attributes.position.array[i3 + 1] = Math.sin(elapsedTime + x)
}
particlesGeometry.attributes.position.needsUpdate = true

// ...
}
</syntaxhighlight>

You should get beautiful waves of particles. Unfortunately, '''you should avoid this technique'''. If we have 20000 particles, we are going through each one, calculating a new position, and updating the whole attribute on each frame. That can work with a small number of particles, but '''we want millions of particles.
By using a custom shader
'''
'''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 zum generieren von Objekten 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>

Three.js - Particles

2022-01-16T19:19:09Z

134.3.241.3:

[[ThreeJS - Snippets]]

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.

== Snippets ==
=== Basic Example ===
<syntaxhighlight lang="javascript">
/**
* Particles
*/
// Geometry
const particlesGeometry = new THREE.SphereBufferGeometry(1,32,32)
// Material
const particlesMaterial = new THREE.PointsMaterial({
size: 0.02,
sizeAttenuation: true, //change size if near/far - default ist true
})
// Points
const particles = new THREE.Points(particlesGeometry, particlesMaterial)
scene.add(particles)
</syntaxhighlight>
=== Eigene Geometrie mit zufälligen Punkten ===
Um Punkte zu einer Geometrie hinzuzufügen muss man
* die Punkte in ein Array packen
* Das Array der Geometrie hinzufügen. Dazu einfach das positions Attribut füllen.
<syntaxhighlight lang="javascript">
/**
* Particles
*/
// Geometry
const particlesGeometry = new THREE.BufferGeometry()
const count = 500
// create array
const positionsArray = new Float32Array(count * 3) //3 vals per point
// fill array
for (let i = 0; i < positionsArray.length; i++) {
positionsArray[i] = (Math.random() - 0.5) * 4
}
// put array values in geometry
particlesGeometry.setAttribute(
'position',
new THREE.BufferAttribute(positionsArray,3) //3 means 3 values belong together (one 3D Koordinate)
)

// Material
const particlesMaterial = new THREE.PointsMaterial({size: 0.02})

// Points
const particles = new THREE.Points(particlesGeometry, particlesMaterial)

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>

=== Zufällige Farben und Positionen ===
Ähnlich wie bei der Position erzeugen wir für die Farben ein Array mit Zufallszahlen und übergeben diese, dieses mal an das Color Attribut. Achtung vertexColor muss auf true gestellt werden:
<syntaxhighlight lang="javascript">
/**
* Textures
*/
const textureLoader = new THREE.TextureLoader()
const particlesTexture = textureLoader.load('/textures/particles/2.png')

/**
* Particles
*/
// Geometry
//const particlesGeometry = new THREE.SphereBufferGeometry(1,32,32)
const particlesGeometry = new THREE.BufferGeometry()
const count = 20000
const positionsArray = new Float32Array(count * 3)
const colorsArray = new Float32Array(count * 3)
for (let i = 0; i < positionsArray.length; i++) {
positionsArray[i] = (Math.random() - 0.5) * 10 // -5 to 5
colorsArray[i] = Math.random() // 0 to 1
}
particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positionsArray,3))
particlesGeometry.setAttribute('color', new THREE.BufferAttribute(colorsArray,3))

// Material
const particlesMaterial = new THREE.PointsMaterial({
color: '#ff88cc',
transparent: true,
alphaMap: particlesTexture,
depthWrite: false, // many times the right solution
// To set color for each point (vertex9 we need to set:
vertexColors: true,
size: 0.1,
sizeAttenuation: true, //change size if near/far?
})

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

=== Wave Animation (bad way) ===
Man kann die Positionen der Partikel direkt im ArrayBuffer manipulieren. Dies solltest du aber nur für eine Hand voll Punkte und nicht für tausende von Objekten verwenden. Bessere Lösung: Custom Shader
<syntaxhighlight lang="javascript">
const tick = () =>
{
const elapsedTime = clock.getElapsedTime()

// Update particles

// You can apply a rotation on the whole object
// particles.rotation.y = elapsedTime * 0.1

// Or update individual vertices
// NOTE - ONLY USE THIS FOR A FEW PARTICLES.
// FOR MANY PARTICLES YOU SHOULD USE A CUSTOM SHADER
for(let i=0; i < count; i++){
const i3 = i * 3 // x = i3, y = i3+1, z = i3+2
// get x value of this particle
const x = particlesGeometry.attributes.position.array[i3]
// and use it as a offset for y
particlesGeometry.attributes.position.array[i3+1] = Math.sin(elapsedTime + x)
}
// tell Three.js, that this attribute has changed
particlesGeometry.attributes.position.needsUpdate = true
// Update controls
controls.update()

// Render
renderer.render(scene, camera)

// Call tick again on the next frame
window.requestAnimationFrame(tick)
}

tick()
</syntaxhighlight>

== Tutorial ==
Based on: https://threejs-journey.com/lessons/18
=== Geometry ===

You can use any of the basic Three.js geometries. For the same reasons as for the Mesh, it's preferable to use BufferGeometries. Each vertex of the geometry will become a particle:
<syntaxhighlight lang="javascript">
/**
* Particles
*/
// Geometry
const particlesGeometry = new THREE.SphereGeometry(1, 32, 32)
</syntaxhighlight>

=== PointsMaterial ===

We need a special type of material called '''PointsMaterial'''. This material can already do a lot, but we will discover how to create our '''own particles material''' to go even further in a future lesson.

The PointsMaterial has multiple properties specific to particles like the size to control all '''particles size''' and the '''sizeAttenuation''' to specify if distant particles should be smaller than close particles:

<syntaxhighlight lang="javascript">
// Material
const particlesMaterial = new THREE.PointsMaterial({
size: 0.02,
sizeAttenuation: true
})
</syntaxhighlight>

As always, we can also '''change those properties''' after creating the material:
<syntaxhighlight lang="javascript">
const particlesMaterial = new THREE.PointsMaterial()
particlesMaterial.size = 0.02
particlesMaterial.sizeAttenuation = true
</syntaxhighlight>

=== Points ===

Finally, we can create the final particles the same way we create a Mesh, but this time by using the Points class. Don't forget to add it to the scene:

<syntaxhighlight lang="javascript">
// Points
const particles = new THREE.Points(particlesGeometry, particlesMaterial)
scene.add(particles)
</syntaxhighlight>

That was easy. Let's customize those particles.

=== Custom geometry ===

To create a custom geometry, '''we can start from a BufferGeometry''', and add a position attribute as we did in the Geometries lesson. Replace the SphereGeometry with custom geometry and add the 'position' attribute as we did before:

<syntaxhighlight lang="javascript">
// Geometry
const particlesGeometry = new THREE.BufferGeometry()
const count = 500

const positions = new Float32Array(count * 3) // Multiply by 3 because each position is composed of 3 values (x, y, z)

for(let i = 0; i < count * 3; i++) // Multiply by 3 for same reason
{
positions[i] = (Math.random() - 0.5) * 10 // Math.random() - 0.5 to have a random value between -0.5 and +0.5
}

particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)) // Create the Three.js BufferAttribute and specify that each information is composed of 3 values
</syntaxhighlight>

Don't be frustrated if you can't pull out this code by yourself. It's a little complex, and variables are using strange formats.

You should get a bunch of particles all around the scene. Now is an excellent time to have fun and test the limits of your computer. Try 5000, 50000, 500000 maybe. You can have millions of particles and still have a reasonable frame rate.

You can imagine that there are limits. On an inferior computer or a smartphone, you won't be able to have a 60fps experience with millions of particles. We are also going to add effects that will drastically reduce the frame rate. But still, that's quite impressive.

For now, let's keep the count to 5000 and change the size to 0.1:

<syntaxhighlight lang="javascript">
const count = 5000

// ...

particlesMaterial.size = 0.1

// ...
</syntaxhighlight>

=== Color, map and alpha map ===

We can '''change the color of all particles''' with the color property on the PointsMaterial. Don't forget that you need to use the Color class if you're changing this property after instancing the material:

particlesMaterial.color = new THREE.Color('#ff88cc')

We can also use the '''map property to put a texture on those particles'''. Use the TextureLoader already in the code to load one of the textures located in /static/textures/particles/:

<syntaxhighlight lang="javascript">
/**
* Textures
*/
const textureLoader = new THREE.TextureLoader()
const particleTexture = textureLoader.load('/textures/particles/2.png')

// ...

particlesMaterial.map = particleTexture
</syntaxhighlight>

These textures are resized versions of the pack provided by Kenney and you can find the full pack here: https://www.kenney.nl/assets/particle-pack. But you can also create your own.

As you can see, the color property is changing the map, just like with the other materials.

If you look closely, you'll see that the front particles are hiding the back particles.

We need to '''activate transparency''' with transparent and use the texture on the '''alphaMap property''' instead of the map:
<syntaxhighlight lang="javascript">
// particlesMaterial.map = particleTexture
particlesMaterial.transparent = true
particlesMaterial.alphaMap = particleTexture
</syntaxhighlight>

Now that's better, but we can still randomly see some edges of the particles.

That is because the particles are drawn in the same order as they are created, and WebGL doesn't really know which one is in front of the other.

There are multiple ways of fixing this.
==== Using alphaTest ====

The alphaTest is a value between 0 and 1 that enables the WebGL to know when not to render the pixel according to that pixel's transparency. By default, the value is 0 meaning that the pixel will be rendered anyway. '''If we use a small value such as 0.001, the pixel won't be rendered if the alpha is 0''':

particlesMaterial.alphaTest = 0.001

This solution isn't perfect and if you watch closely, you can still see glitches, but it's already more satisfying.
==== Using depthTest ====

When drawing, the WebGL tests if what's being drawn is closer than what's already drawn. That is called depth testing and can be deactivated (you can comment the alphaTest):

// particlesMaterial.alphaTest = 0.001
particlesMaterial.depthTest = false

While this solution seems to completely '''fix our problem''', deactivating the depth testing might '''create bugs if you have other objects in your scene or particles with different colors'''. The particles might be drawn as if they were above the rest of the scene.

Add a cube to the scene to see that:
<syntaxhighlight lang="javascript">
const cube = new THREE.Mesh(
new THREE.BoxGeometry(),
new THREE.MeshBasicMaterial()
)
scene.add(cube)
</syntaxhighlight>

==== Using depthWrite ====

As we said, the WebGL is testing if what's being drawn is closer than what's already drawn. The depth of what's being drawn is stored in what we call a depth buffer. Instead of not testing if the particle is closer than what's in this depth buffer, we can tell the WebGL not to write particles in that depth buffer (you can comment the depthTest):

// particlesMaterial.alphaTest = 0.001
// particlesMaterial.depthTest = false
particlesMaterial.depthWrite = false

In our case, this solution will '''fix the problem with almost no drawback'''. Sometimes, '''other objects might be drawn behind or in front of the particles''' depending on many factors like the transparency, in which order you added the objects to your scene, etc.

We saw multiple techniques, and there is no perfect solution. You'll have to adapt and '''find the best combination''' according to the project.

=== Blending ===

Currently, the WebGL draws the pixels one on top of the other.

By changing the blending property, we can tell the WebGL not only to draw the pixel, but also to '''add the color of that pixel to the color of the pixel already drawn'''. That will have a saturation effect that can look amazing.

To test that, simply change the blending property to ''THREE.AdditiveBlending'' (keep the depthWrite property):

<syntaxhighlight lang="javascript">
// particlesMaterial.alphaTest = 0.001
// particlesMaterial.depthTest = false
particlesMaterial.depthWrite = false
particlesMaterial.blending = THREE.AdditiveBlending
</syntaxhighlight>

Add more particles (let's say 20000) to better enjoy this effect.

But be careful, this effect will impact the performances, and you won't be able to have as many particles as before at 60fps.

Now, we can remove the cube.

=== Different colors ===

We can have a different color for each particle. We first need to add a new attribute named color as we did for the position. A color is composed of red, green, and blue (3 values), so the code will be very similar to the position attribute. We can actually use the same loop for these two attributes:

<syntaxhighlight lang="javascript">
const positions = new Float32Array(count * 3)
const colors = new Float32Array(count * 3)

for(let i = 0; i < count * 3; i++)
{
positions[i] = (Math.random() - 0.5) * 10
colors[i] = Math.random()
}

particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
particlesGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3))
</syntaxhighlight>

Be careful with singulars and plurals.

To activate those vertex colors, simply change the '''vertexColors property to true''':

particlesMaterial.vertexColors = true

The '''main color''' of the material '''still affects these vertex colors'''. Feel free to change that color or even comment it.

// particlesMaterial.color = new THREE.Color('#ff88cc')

=== Animate ===

There are multiple ways of animating particles.
==== By using the points as an object ====

Because the '''Points''' class inherits from the '''Object3D''' class, you can '''move, rotate and scale''' the points as you wish.

Rotate the particles in the tick function:
<syntaxhighlight lang="javascript">
const tick = () =>
{
const elapsedTime = clock.getElapsedTime()

// Update particles
particles.rotation.y = elapsedTime * 0.2

// ...
}
</syntaxhighlight>

While this is already cool, we want '''more control over each particle.'''
By changing the attributes

Another solution would be to '''update each vertex position separately'''. This way, vertices can have different trajectories. We are going to animate the particles as if they were floating on waves but first, let's see how we can update the vertices.

Start by commenting the previous rotation we did on the whole particles:
<syntaxhighlight lang="javascript">
const tick = () =>
{
// ...

// particles.rotation.y = elapsedTime * 0.2

// ...
}
</syntaxhighlight>

To update each vertex, we have to '''update the right part in the position attribute''' because all the vertices are stored in this '''one dimension array''' where the first 3 values correspond to the x, y and z coordinates of the first vertex, then the next 3 values correspond to the x, y and z of the second vertex, etc.

We only want the vertices to move up and down, meaning that we are going to update the y axis only. Because the position attribute is a one dimension array, we have to '''go through it 3 by 3 and only update the second value which is the y coordinate'''.

Let's start by going through each vertices:
<syntaxhighlight lang="javascript">
const tick = () =>
{
// ...

for(let i = 0; i < count; i++)
{
const i3 = i * 3
}

// ...
}
</syntaxhighlight>

Here, we chose to have a simple for loop that goes from 0 to count and we created a '''i3 variable inside that goes 3 by 3 simply by multiplying i by 3.'''

The easiest way to simulate '''waves movement''' is to use a simple '''sinus'''. First, we are going to update all vertices to go up and down on the same frequency.

The y coordinate can be access in the array at the index i3 + 1:
<syntaxhighlight lang="javascript">
const tick = () =>
{
// ...

for(let i = 0; i < count; i++)
{
const i3 = i * 3

particlesGeometry.attributes.position.array[i3 + 1] = Math.sin(elapsedTime)
}

// ...
}
</syntaxhighlight>

Unfortunately, nothing is moving. The problem is that '''Three.js has to be notified that the geometry changed'''. To do that, we have to set the '''needsUpdate to true''' on the position attribute once we are done updating the vertices:
<syntaxhighlight lang="javascript">
const tick = () =>
{
// ...

for(let i = 0; i < count; i++)
{
const i3 = i * 3

particlesGeometry.attributes.position.array[i3 + 1] = Math.sin(elapsedTime)
}
particlesGeometry.attributes.position.needsUpdate = true

// ...
}
</syntaxhighlight>

All the particles should be moving up and down like a plane.

That's a good start and we are almost there. All we need to do now is '''apply an offset to the sinus between the particles''' so that we get that '''wave shape.'''

To do that, we can '''use the x coordinate'''. And to get this value we can use the same technique that we used for the y coordinate but instead of i3 + 1, it's just i3:
<syntaxhighlight lang="javascript">
const tick = () =>
{
// ...

for(let i = 0; i < count; i++)
{
let i3 = i * 3

const x = particlesGeometry.attributes.position.array[i3]
particlesGeometry.attributes.position.array[i3 + 1] = Math.sin(elapsedTime + x)
}
particlesGeometry.attributes.position.needsUpdate = true

// ...
}
</syntaxhighlight>

You should get beautiful waves of particles. Unfortunately, '''you should avoid this technique'''. If we have 20000 particles, we are going through each one, calculating a new position, and updating the whole attribute on each frame. That can work with a small number of particles, but '''we want millions of particles.
By using a custom shader
'''
'''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>

ThreeJS - Snippets

2022-01-16T18:15:25Z

134.3.241.3: /* Helfer */

== Links ==
[[ThreeJS]]
[[Three.js - Particles]]
[[Three.js - Shaders]]

== Basics ==
<syntaxhighlight lang="javascript">
/**
* Test cube
*/
const cube = new THREE.Mesh(
new THREE.BoxGeometry(1, 1, 1),
new THREE.MeshBasicMaterial()
)
scene.add(cube)
</syntaxhighlight>
== Helfer ==
=== Axes Helper ===
Koordinatenachsen anzeigen
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

== Viewport Settings ==

=== Handle Viewport Resizing ===
<syntaxhighlight lang="javascript">
window.addEventListener('resize', () =>{
console.log('window resized')
// Update sizes
sizes.width = window.innerWidth
sizes.height = window.innerHeight
// Update camera
camera.aspect = sizes.width/sizes.height
camera.updateProjectionMatrix()
// Update renderer
renderer.setSize(sizes.width,sizes.height)
renderer.setPixelRatio( Math.min(window.devicePixelRatio, 2) ) // in case monitor changed in double monitor settings
})
</syntaxhighlight>

=== Handle Pixel Ratio Setting (Retina Displays) ===
Retina Displays haben eine Pixel Ratio von 2. D.h. das Display kann einen "Software"Bildpixel nochmal auf 4 physische Pixel verteilen und damit vor allem Vektoren nochmal '''schärfer''' darstellen. ThreeJS kann diese zusätzlichen Pixel ebenfalls nutzen wenn man dem renderer die Pixel Ratio mitgibt. Allerdings muss der Renderer auch mehr tun.

Moderne Handys haben Ratios bis zu 5, das ist allerdings sinnlos mehr als 2 oder 3 sehen wir bei normalem Betrachtungsabstand eh nicht. Deshalb setzen wir wenn möglich einen Ratio so hoch wie das Gerät kann aber '''nicht höher als 2''' um die Performance zu erhalten.

<syntaxhighlight lang="javascript">
renderer.setPixelRatio( Math.min(window.devicePixelRatio, 2) )
</syntaxhighlight>

=== Handle Fullscreen Mode ===

<syntaxhighlight lang="javascript">
// Handle Fullscreen
// including safari (needs webkit prefix)
window.addEventListener('dblclick', () =>
{
const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement

if(!fullscreenElement)
{
if(canvas.requestFullscreen)
{
canvas.requestFullscreen()
}
else if(canvas.webkitRequestFullscreen)
{
canvas.webkitRequestFullscreen()
}
}
else
{
if(document.exitFullscreen)
{
document.exitFullscreen()
}
else if(document.webkitExitFullscreen)
{
document.webkitExitFullscreen()
}
}
})
</syntaxhighlight>

== Animation Basics ==
[[Three.js - Animation]]
=== Timebased Tick / Loop Function ===
==== 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>

== Nützliche Snippets für Animationen ==

=== Kreisbewegung / Circular Movement ===
myObject.position.y = Math.sin(elapsedTime) //(-1 -> 1 -> -1 -> ...)
myObject.position.x = Math.cos(elapsedTime)

=== Cursor auswerten ===
<syntaxhighlight lang="javascript">
// Sizes
const sizes = { width: 800, height: 600}
// Cursor
const cursor = {
x: 0,
y: 0
}
window.addEventListener('mousemove', (event) =>
{
//cursor.x = event.clientX / sizes.width // 0 <= x <= 1
cursor.x = event.clientX / sizes.width - 0.5// -0.5 <= x <= +0.5
cursor.y = event.clientY / sizes.height - 0.5// -0.5 <= x <= +0.5
console.log('x: ' + cursor.x)
console.log('y: ' + cursor.y)
})
// ...
// Update camera with position
camera.position.x = cursor.x * 10
camera.position.y = cursor.y * 10
</syntaxhighlight>

=== Kamera auf einer Kreisbahn ===
Das obige Beispiel läßt sich ausbauen. Die Mausbewegung gibt uns nun cursor.x Werte von -0.5 bis 0.5. Wenn wir auf zwei Achsen sinus und cosinus kombinieren bekommen wir eine '''Kreisbahn um den Mittelpunkt''' auf der Ebene dieser beiden Achsen. Eine '''volle Umdrehung''' bekommen wir wenn wir mit 2xPi multiplizieren. Den Abstand vergrößern wir wenn wir das Ergebnis mit irgendeinem Faktor multiplizieren.

<syntaxhighlight lang="javascript">
// Update camera
camera.position.x = Math.sin(cursor.x * 2 * Math.PI) * 3
camera.position.z = Math.cos(cursor.x * 2 * Math.PI) * 3
camera.position.y = cursor.y * 5 // damit wir auch etwas von oben oder unten schauen können
camera.lookAt(mesh.position) // look at center
</syntaxhighlight>

Für eine Kreisbahn um ein Objekt das nicht im Mittelpunkt ist, müßten wir noch die Koordinaten des Objekts auslesen und zu den Kamerakoordinaten addieren. So könnten wir den kompletten Kreis verschieben.

=== Bouncing Sphere + Shadow ===
<syntaxhighlight lang="javascript">
// Update the sphere
sphere.position.x = Math.cos(elapsedTime) * 1.5
sphere.position.z = Math.sin(elapsedTime) * 1.5
sphere.position.y = Math.abs(Math.sin(elapsedTime * 3))

// Update the shadow accordingly
sphereShadow.position.x = sphere.position.x
sphereShadow.position.z = sphere.position.z
sphereShadow.material.opacity = (1 - sphere.position.y) * 0.3
</syntaxhighlight>

== Orbit Controls ==
https://threejs.org/docs/index.html?q=controls#examples/en/controls/OrbitControls
ThreeJS spart mit eigenen Control Klassen eine Menge Arbeit. OrbitControls müssen zusätzlich geladen werden. Also in HTML
<script src="/javascripts/OrbitControls.js"></script>
Oder z.B. in Webpack:
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
Dann erstellt man einfach ein OrbitControl Objekt und übergibt die Kamera und ein DOM Objekt (i.d.R. das Canvas).
const controls = new OrbitControls(camera,canvas)

== Geometry Snippets ==
=== Create Geometry / Geometry Objekt erzeugen ===
[[Three.js - eigene Geometrie erzeugen]]
Beispiel: viele zufällige Dreiecke erzeugen
<syntaxhighlight lang="javascript">
// Object
// const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2)
const geometry = new THREE.BufferGeometry()
const count = 50
const positionsArray = new Float32Array(count * 3 * 3)
for (let i = 0; i < positionsArray.length; i++) {
positionsArray[i] = Math.random() - 0.5 //-0.5 < x < 0.5
}
const positionsAttribute = new THREE.BufferAttribute(positionsArray,3) // use vals 3 by 3
geometry.setAttribute('position',positionsAttribute) // position is the attribute name in shaders

// Example Array
// const positionsArray = new Float32Array([
// 0,0,0,
// 0,1,0,
// 1,0,0
// ])
</syntaxhighlight>

== Debugging ==
=== lil-gui ===
<syntaxhighlight lang="javascript">
// https://lil-gui.georgealways.com/#
import GUI from 'lil-gui';
/**
* Debug
*/
const gui = new GUI({
width:400
})
gui.close()
//...
// Debug
//gui.add(mesh.position,'y',-2,2,0.1) // OR
gui.add(mesh.position,'y')
.min(-2)
.max(3)
.step(0.1)
.name('elevation') // chain version
gui.add(mesh,'visible')
gui.add(material,'wireframe')
// we can not use material.color as it's not an object
// thus we use a separately created object...
// ... and update material when this param changed:
gui.addColor(params,'color')
.onChange( ()=>
{
material.color.set(params.color)
})
gui.add(params, 'spin')
</syntaxhighlight>

== Textures ==
https://threejs.org/docs/index.html?q=texture#api/en/constants/Textures
[[three.js - Textures]] - ausführliche Infos zu TextureLoader Callbacks, LoadingManager...

=== Beispiel ===
<syntaxhighlight lang="javascript">
/**
* Textures
*/
const textureLoader = new THREE.TextureLoader()

const doorColorTexture = textureLoader.load('/textures/door/color.jpg')
const doorAlphaTexture = textureLoader.load('/textures/door/alpha.jpg')
const doorAmbientOcclusionTexture = textureLoader.load('/textures/door/ambientOcclusion.jpg')
const doorHeightTexture = textureLoader.load('/textures/door/height.jpg')
const doorNormalTexture = textureLoader.load('/textures/door/normal.jpg')
const doorMetalnessTexture = textureLoader.load('/textures/door/metalness.jpg')
const doorRoughnessTexture = textureLoader.load('/textures/door/roughness.jpg')

// HOW TO REPEAT TILES - uv wrapping
const repeat = 10;

const grassColorTexture = textureLoader.load('/textures/grass/color.jpg')
const grassNormalTexture = textureLoader.load('/textures/grass/normal.jpg')
const grassRoughnessTexture = textureLoader.load('/textures/grass/roughness.jpg')

grassColorTexture.repeat.set(repeat,repeat)
grassNormalTexture.repeat.set(repeat,repeat)
grassRoughnessTexture.repeat.set(repeat,repeat)

grassColorTexture.wrapS = THREE.RepeatWrapping
grassNormalTexture.wrapS = THREE.RepeatWrapping
grassRoughnessTexture.wrapS = THREE.RepeatWrapping

grassColorTexture.wrapT = THREE.RepeatWrapping
grassNormalTexture.wrapT = THREE.RepeatWrapping
grassRoughnessTexture.wrapT = THREE.RepeatWrapping

//...

/**
* Objects
*/

// Door
const door = new THREE.Mesh(
new THREE.PlaneGeometry(2,2,100,100),// HEIGHTMAP NEEDS SOME SUBDIVISIONS
new THREE.MeshStandardMaterial({
map: doorColorTexture,
transparent: true, // NEEDED FOR ALPHA TO WORK
alphaMap: doorAlphaTexture,
aoMap: doorAmbientOcclusionTexture,
displacementMap: doorHeightTexture,
displacementScale: 0.05,
normalMap: doorNormalTexture,
metalnessMap: doorMetalnessTexture,
roughnessMap: doorRoughnessTexture,
//wireframe: true
})
)
// AOMAP NEEDS HIS OWN UV ATTRIBUTE (here we copy from geometry)
door.geometry.setAttribute('uv2', new THREE.Float32BufferAttribute(door.geometry.attributes.uv.array, 2))

house.add(door)

// Floor
const floor = new THREE.Mesh(
new THREE.PlaneGeometry(20, 20),
new THREE.MeshStandardMaterial({
//color: '#a9c388',
map: grassColorTexture,
normalMap: grassNormalTexture,
roughnessMap: grassRoughnessTexture
})
)

floor.rotation.x = - Math.PI * 0.5
floor.position.y = 0

scene.add(floor)
</syntaxhighlight>

== Materials ==
[[three.js - materials]] - Mehr Info und weitere Materialien.

=== MeshBasicMaterial ===
<syntaxhighlight lang="javascript">
const material = new THREE.MeshBasicMaterial()
material.color.set(0xaabb00)
material.map = doorColorTexture
material.side = DoubleSide
material.wireframe = true
material.transparent = true
material.opacity = 0.5
material.alphaMap = doorAlphaTexture
</syntaxhighlight>

=== MeshMatcapMaterial ===
https://github.com/nidorx/matcaps - gute Quelle
<syntaxhighlight lang="javascript">
// MATCAP - simulate lights / good for modelling
const textureLoader = new THREE.TextureLoader()
const matcapTexture = textureLoader.load('textures/matcaps/1.jpg')
const material = new THREE.MeshMatcapMaterial()
material.matcap = matcapTexture
</syntaxhighlight>

=== MeshStandardMaterial ===
Standard Physical Based Rendering Material

<syntaxhighlight lang="javascript">
// TEXTURES
const textureLoader = new THREE.TextureLoader()
const doorColorTexture = textureLoader.load('textures/door/color.jpg')
const doorAlphaTexture = textureLoader.load('textures/door/alpha.jpg')
const doorAmbientOcclusionTexture = textureLoader.load('textures/door/ambientOcclusion.jpg')
const doorHeightTexture = textureLoader.load('textures/door/height.jpg')
const doorMetalnessTexture = textureLoader.load('textures/door/metalness.jpg')
const doorNormalTexture = textureLoader.load('textures/door/normal.jpg')
const doorRoughnessTexture = textureLoader.load('textures/door/roughness.jpg')

// STANDARD MATERIAL
const material = new THREE.MeshStandardMaterial()
material.side = DoubleSide
material.map = doorColorTexture

material.roughness = 1 // default
material.roughnessMap = doorRoughnessTexture

material.metalness = 0 // default
material.metalnessMap = doorMetalnessTexture

material.aoMap = doorAmbientOcclusionTexture
material.aoMapIntensity = 1.1

material.displacementMap = doorHeightTexture
material.displacementScale = 0.03

material.normalMap = doorNormalTexture
material.normalScale.set(0.5,0.5)

material.transparent = true // needed for alpha to work
material.alphaMap = doorAlphaTexture

// OBJECTS
const plane = new THREE.Mesh(
new THREE.PlaneGeometry(1,1,100,100), // subdivisions needed for height map
material
)
// copy uv coordinates to uv2 attribute needed by aomap
plane.geometry.setAttribute(
'uv2',
new THREE.BufferAttribute(plane.geometry.attributes.uv.array,2)
)
</syntaxhighlight>

=== Environment Map ===
[[Three.js - Environment Map (Panorama)]]

<syntaxhighlight lang="javascript">
// ENVIRONMENTAL MAP
const cubeTextureLoader = new THREE.CubeTextureLoader()
// load cube-images in the right order...
const environmentMapTexture = cubeTextureLoader.load([
'/textures/environmentMaps/4/px.png',
'/textures/environmentMaps/4/nx.png',
'/textures/environmentMaps/4/py.png',
'/textures/environmentMaps/4/ny.png',
'/textures/environmentMaps/4/pz.png',
'/textures/environmentMaps/4/nz.png',
])
const material = new THREE.MeshStandardMaterial()
material.envMap = environmentMapTexture
material.metalness = 0.7
material.roughness = 0.2

gui.add(material, 'metalness').min(0).max(1).step(0.0001)
gui.add(material, 'roughness').min(0).max(1).step(0.0001)

</syntaxhighlight>

=== Hinweise ===
Eigenschaften kann man als Konstruktor Objekt übergeben oder direkt setzen oder über set (manchmal praktischer, wenn als Eigenschaftswert ein Objekt erwartet wird (z.B. bei der Farbe ein Farbobjekt)

== 3D Text ==
[[Three.js - 3D Text]]
http://gero3.github.io/facetype.js/ - Konvertieren von Fonts nach Facetype
=== Fontloader ===
Hinweis: Seit three.js 133 muss der Fontloader und die Fontgeometry importiert werden.
https://threejs.org/docs/index.html?q=fontloa#examples/en/loaders/FontLoader
====Basic Example====
<syntaxhighlight lang="javascript">
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js'
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js'//i.e. with webpack
//...
/**
* Fonts
*/
const fontLoader = new FontLoader()

fontLoader.load(
//'/fonts/helvetiker_regular.typeface.json',
'/fonts/BebasNeueBook_Regular.json',
(font) =>
{
console.log('font loaded')
const textGeometry = new TextGeometry(
'KHOLJA',
{
font: font,
size: 0.5,
height: 0.2, // more like extrusion depth
curveSegments: 8,
bevelEnabled: true,
bevelThickness: 0.03,
bevelSize: 0.01,
bevelOffset: 0,
bevelSegments: 4
}
)
textGeometry.center() // easy method to center the text
const textMaterial = new THREE.MeshBasicMaterial()
textMaterial.wireframe = true
const text = new THREE.Mesh(textGeometry,textMaterial)
scene.add(text)
}
)
</syntaxhighlight>

== Lights ==
[[Three.js - Lights]]
=== Light Starters ===
==== Neutral Starter ====
<syntaxhighlight lang="javascript">
/**
* Lights
*/
// Ambient light
const ambientLight = new THREE.AmbientLight('#ffffff', 0.5)
gui.add(ambientLight, 'intensity').min(0).max(1).step(0.001)
scene.add(ambientLight)

// Directional light
const directionalLight = new THREE.DirectionalLight('#ffffff', 0.5)
directionalLight.position.set(4, 5, - 2)
gui.add(directionalLight, 'intensity').min(0).max(1).step(0.001)
gui.add(directionalLight.position, 'x').min(- 5).max(5).step(0.001)
gui.add(directionalLight.position, 'y').min(- 5).max(5).step(0.001)
gui.add(directionalLight.position, 'z').min(- 5).max(5).step(0.001)
scene.add(moonLight)
</syntaxhighlight>

==== Moonlight Starter ====
<syntaxhighlight lang="javascript">
/**
* Lights
*/
// Ambient light
const ambientLight = new THREE.AmbientLight('#b9d5ff', 0.5)
gui.add(ambientLight, 'intensity').min(0).max(1).step(0.001)
scene.add(ambientLight)

// Directional light
const moonLight = new THREE.DirectionalLight('#b9d5ff', 0.5)
moonLight.position.set(4, 5, - 2)
gui.add(moonLight, 'intensity').min(0).max(1).step(0.001)
gui.add(moonLight.position, 'x').min(- 5).max(5).step(0.001)
gui.add(moonLight.position, 'y').min(- 5).max(5).step(0.001)
gui.add(moonLight.position, 'z').min(- 5).max(5).step(0.001)
scene.add(moonLight)
</syntaxhighlight>

== Shadows / Schatten ==
[[Three.js - Shadows]] - Ausführliche Infos zu Schatten

=== Komplettes Beispiel ===
<syntaxhighlight lang="javascript">
//...
/**
* Lights
*/
// Ambient light
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
gui.add(ambientLight, 'intensity').min(0).max(1).step(0.001)
scene.add(ambientLight)

// Directional light
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
directionalLight.position.set(2, 2, - 1)
gui.add(directionalLight, 'intensity').min(0).max(1).step(0.001)
gui.add(directionalLight.position, 'x').min(- 5).max(5).step(0.001)
gui.add(directionalLight.position, 'y').min(- 5).max(5).step(0.001)
gui.add(directionalLight.position, 'z').min(- 5).max(5).step(0.001)

// Add Shadow and mapsize
directionalLight.castShadow = true
directionalLight.shadow.mapSize.x = 1024
directionalLight.shadow.mapSize.y = 1024
// Shadow camera settings...
directionalLight.shadow.camera.near = 1
directionalLight.shadow.camera.far = 6
// ...important for quality
directionalLight.shadow.camera.left = -2
directionalLight.shadow.camera.right = 2
directionalLight.shadow.camera.top = 2
directionalLight.shadow.camera.bottom = -2
// adding a bit of a cheap blur
// directionalLight.shadow.radius = 4

scene.add(directionalLight)

// Shadow camera helper
const directionalLightCameraHelper = new THREE.CameraHelper(directionalLight.shadow.camera)
scene.add(directionalLightCameraHelper)

// ...

/**
* Objects
*/
sphere.castShadow = true
// ...
plane.receiveShadow = true
// ...
scene.add(sphere, plane)

/**
* Renderer
*/
const renderer = new THREE.WebGLRenderer({
canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

// Renderer Shadowmap settings
renderer.shadowMap.enabled = true
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
</syntaxhighlight>

==== Shadow Baking ====
Wie Texturen kann man auch Schatten baken. Nachteil. Bei Bewegung des Objekts bewegt sich der
<syntaxhighlight lang="javascript">
/**
* Textures
*/
const textureLoader = new THREE.TextureLoader()
const bakedShadow = textureLoader.load('/textures/bakedShadow.jpg')
//...
const plane = new THREE.Mesh(
new THREE.PlaneGeometry(5, 5),
new THREE.MeshBasicMaterial({
map: bakedShadow
})
)
// we don't need the rendered shadows in this case
renderer.shadowMap.enabled = false
</syntaxhighlight>

==== Dynamic Shadow Baking ====
'''Beispiel Kugel mit animiertem Fake-Schatten'''
<syntaxhighlight lang="javascript">
const textureLoader = new THREE.TextureLoader()
const simpleShadow = textureLoader.load('/textures/simpleShadow.jpg')

// Sphere Shadow
const sphereShadow = new THREE.Mesh(
new THREE.PlaneGeometry(1.5, 1.5),
new THREE.MeshBasicMaterial({
color: 0x000000,
transparent: true,
alphaMap: simpleShadow
})
)
sphereShadow.rotation.x = - Math.PI * 0.5
sphereShadow.position.y = plane.position.y + 0.01

scene.add(sphere, sphereShadow, plane)

//...

/**
* Animate
*/
const clock = new THREE.Clock()

const tick = () =>
{
const elapsedTime = clock.getElapsedTime()

// Update the sphere
sphere.position.x = Math.cos(elapsedTime) * 1.5
sphere.position.z = Math.sin(elapsedTime) * 1.5
sphere.position.y = Math.abs(Math.sin(elapsedTime * 3))

// Update the shadow accordingly
sphereShadow.position.x = sphere.position.x
sphereShadow.position.z = sphere.position.z
sphereShadow.material.opacity = (1 - sphere.position.y) * 0.3

// Update controls
controls.update()

// Render
renderer.render(scene, camera)

// Call tick again on the next frame
window.requestAnimationFrame(tick)
}

tick()
</syntaxhighlight>

== Fog ==
[[Three.js - Fog]]
<syntaxhighlight lang="javascript">
//...
// Fog
const fog = new THREE.Fog('#262837', 1, 15)
scene.fog = fog
//...
renderer.setClearColor('#262837')
</syntaxhighlight>

== Particles ==
Benötigen eine Geometry, ein Material, ein Points Objekt (statt wie sonst ein Mesh)
[[Three.js - Particles]]
Starter Example
<syntaxhighlight lang="javascript">
/**
* Particles
*/
// Geometry
const particlesGeometry = new THREE.SphereBufferGeometry(1,32,32)
// Material
const particlesMaterial = new THREE.PointsMaterial({
size: 0.02,
sizeAttenuation: true, //perspective smaller if far
})
// Points
const particles = new THREE.Points(particlesGeometry, particlesMaterial)
scene.add(particles)
</syntaxhighlight>

== Models Importieren ==
[[Three.js - Import Models]]

<syntaxhighlight lang="javascript">
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
//...
const gltfLoader = new GLTFLoader()
gltfLoader.load(
'/models/FlightHelmet/glTF/FlightHelmet.gltf',
(gltf) => {
console.log(gltf) //success - show what we got
const children = [...gltf.scene.children] // duplicate
for(const child of children){
scene.add(child)
}
//scene.add(gltf.scene)
//scene.add(gltf.scene.children[1])
},
() => {console.log('progress')},
() => {console.log('error')}
)
</syntaxhighlight>
=== DRACO Loader nutzen ===

<syntaxhighlight lang="javascript">
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
//...
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath("/draco/") // get webassembly version (faster but you have to provide the appropriate draco files)

const gltfLoader = new GLTFLoader()
gltfLoader.setDRACOLoader(dracoLoader)
gltfLoader.load(
'/models/Duck/glTF-Draco/Duck.gltf',
(gltf) => {
scene.add(gltf.scene)
}
)
</syntaxhighlight>

== Starters ==
[[Three.js - Starters]]

== Helpers ==
=== Nützliche Renderer Settings ===
<syntaxhighlight lang="javascript">
/**
* Renderer
*/
const renderer = new THREE.WebGLRenderer({
canvas: canvas,
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.setClearColor('#262837')
</syntaxhighlight>
=== Nützliche Animation Settings ===
<syntaxhighlight lang="javascript">
/**
* Animate
*/
const clock = new THREE.Clock()

const tick = () =>
{
const elapsedTime = clock.getElapsedTime()

// Update material (used for own Shader only)
material.uniforms.uTime.value = elapsedTime

// Update controls (used for orbit controls only)
controls.update()

// Render
renderer.render(scene, camera)

// Call tick again on the next frame
window.requestAnimationFrame(tick)
}

tick()
</syntaxhighlight>
=== Orbit Controls ===
Don't forget to update in tick function, when animating
<syntaxhighlight lang="javascript">
// Controls
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true
</syntaxhighlight>

=== Optimizations ===
==== Materialien und Geometrien wiederverwenden ====
Das Erstellen von komplexen Objekten kann zeit- und speicherintensiv sein.
<syntaxhighlight lang="javascript">
console.time('donuts')
for(let i = 0; i < 100; i++)
{
const donutGeometry = new THREE.TorusGeometry(0.3, 0.2, 20, 45)
const donutMaterial = new THREE.MeshMatcapMaterial({ matcap: matcapTexture })
const donut = new THREE.Mesh(donutGeometry, donutMaterial)
scene.add(donut)
}
console.timeend('donuts')
</syntaxhighlight>
Zwei Zeilen umgestellt aber weit '''über 100mal schneller !'''
<syntaxhighlight lang="javascript">
console.time('donuts')
const donutGeometry = new THREE.TorusGeometry(0.3, 0.2, 20, 45)
const donutMaterial = new THREE.MeshMatcapMaterial({ matcap: matcapTexture })
for(let i = 0; i < 100; i++)
{
const donut = new THREE.Mesh(donutGeometry, donutMaterial)
scene.add(donut)
}
console.timeend('donuts')
</syntaxhighlight>

=== Nützliche Schnipsel ===
==== Objekte auf Ringbahn positionieren ====
<syntaxhighlight lang="javascript">
// Graveyard
const graves = new THREE.Group()
scene.add(graves)
const graveGeometry = new THREE.BoxGeometry(0.6, 0.8, 0.2)
const graveMaterial = new THREE.MeshStandardMaterial({color: '#b2b6b1'})

for (let i = 0; i < 50; i++) {
const min = 4 // minimaler Radius
const max = 8.5 // maximaler Radius
const radius = min + Math.random() * (max-min)// Radius zwischen min und max
const angle = Math.random() * 2*Math.PI // 0 < angle < 2PI (voller Kreis im Bogenmaß)
// (Bogen)Winkel in x,z Koordinaten umrechnen. Ohne * radius wäre Abstand 1
const x = Math.sin(angle) * radius
const z = Math.cos(angle) * radius
const y = 0.35

const grave = new THREE.Mesh(graveGeometry, graveMaterial)
grave.position.set(x,y,z)
// Setze Grabsteine leicht schief und verdreht
grave.rotation.y = (Math.random() - 0.5) * 0.4
grave.rotation.z = (Math.random() - 0.5) * 0.3

graves.add(grave)
}
</syntaxhighlight>

=== Cool Colors ===
<pre>
#ac8e82 - brown walls
#a9c388 - green night grass
#89c854 - green bush
#b35f45 - greek roof red
#b2b6b1 - grey tombstone
#b9d5ff - blue moonlight
#ff7d49 - orange warm light
#262837 - blueish fog
</pre>

3D-Drucker kalibrieren und einstellen

2022-01-15T19:13:56Z

134.3.241.3: /* Ablauf */

== Ablauf ==
Was kann man Einstellen und auf was hat es Einfluss?
* Laufwägen - Andruck der Rollen checken
* Motoren eSteps kalibrieren
** Achsen für Maßhaltigkeit (Calibration Cube)
** Extruder für Flow

== Bedleveling - Druckbett einstellen ==
https://drucktipps3d.de/bettleveling-bettleveling-und-immer-wieder-bettleveling/

* Bett vorheizen
* Autohome
* Stepper aus (außer z bei bettwewegern)
* links vorn, links hinten, rechts hinten, rechts vorn
* 2. Runde, Mitte
=== Feintuning ===
Feinausrichtung.

Dder erste Layer entscheidet.

* Druckobjekt aus 5 Quadraten mit ca. 20mm Kantenlänge, Höhe 0,2mm (1 Layer)
* 4 Ecken und der Mitte anordnen.
* Im Slicer Skirt mit ca. 5 Linien hinzu
* Geschwindigkeit drastisch reduzieren (direkt im Drucker regeln z.B. 30%), dann kann man direkt reagieren und die Haftung ist gut.

Beim Druck des Skirt könnt Ihr optisch und mit dem Finger fühlen ob und wie die Plastewurst auf dem Druckbett haftet und könnt das Druckbett nachjustieren.
An den Quadraten bekommt Ihr das Ergebnis Eurer Bemühung. Eine saubere geschlossene Fläche ist das Ziel. Fehlerbilder für Düsenabstand und andere Druckprobleme findet Ihr mit Erklärung auf der Seite von Simplify 3D.

Wiederholt diesen Ausdruck bis das Ergebnis perfekt ist.

== Probleme und Lösungen ==

=== Stringing ===
* Feuchtes Filament
* Nozzle verschmuzt
* Retraction zu schwach oder/und zu schnell
* Kühlung falsch
* Bowdenzug hat viel Spiel
* Temperatur falsch (Heattower drucken)

=== Über- Unterextrudierung ===

=== Betthaftung ===
* Auflagefläche zu klein
* Nozzle zu weit weg (Druckbett leveln)
* Fett auf der Fläche
* Temperatur falsch (vor allem bei ABS etc wichtig)

== Tests ==

=== Flow Control / Fluss einstellen ===
Den Flow kann man in Cura einstellen.
Landen pro Schicht wirklich 0.4mm auf dem Bett, wenn 0.4mm eingestellt sind?
Abhängig haupsächlich von:
* Extruderkalibrierung
* Filament - Wenn das dicker ist kommt mehr raus

==== Flow Tests ====
20mm Calibration Cube laden (Wandstärke 1 Schicht)

Cura:
Linienbreite 0.4mm, Wandanzahl: 1
Obere Untere Schichten 0 (nur Wände)
Infill keins
Flow steht auf 100%

Nach dem Drucken Wandstärke messen (am besten nur oben wg. Elefantenfüßen)

Soll-Wandstärke x 100 / IstWandstärke = Flow

z.B. 0.4 * 100 / 0.48 = 83,5

im Zweifel vlt. eher Aufrunden (Ungenauigkeiten, Hitze... tragen eher breiter auf)

=== Extruder Fördermenge / eSteps einstellen ===

10cm fördern, tatsächliche Fördermenge messen
Neue Steps = Alte Steps / Tatsächlich geförderte Länge * gewünschte Länge
Neue Werte über Display oder über Terminalsoftware im Drucker speichern.
==
Die wichtigsten Befehle für Pronterface:

M503 = gespeicherte e Steps anzeigen lassen

M92 E(neue Steps) = neue e Steps im System hinterlegen (Punkte keine Kommas!)

M500 = neuen Wert in der Firmware speichern

https://www.pronterface.com/

Regeln

25%-75% Regel

3D-Drucker kalibrieren und einstellen

2022-01-15T13:14:14Z

134.3.241.3: Die Seite wurde neu angelegt: „== Ablauf == Was kann man Einstellen und auf was hat es Einfluss? * Laufwägen - Andruck der Rollen checken * Motoren eSteps kalibrieren ** Achsen für Maßhal…“

== Ablauf ==
Was kann man Einstellen und auf was hat es Einfluss?
* Laufwägen - Andruck der Rollen checken
* Motoren eSteps kalibrieren
** Achsen für Maßhaltigkeit (Calibration Cube)
** Extruder für Flow

== Probleme und Lösungen ==

=== Stringing ===
* Feuchtes Filament
* Nozzle verschmuzt
* Retraction zu schwach oder/und zu schnell
* Kühlung falsch
* Bowdenzug hat viel Spiel
* Temperatur falsch (Heattower drucken)

=== Über- Unterextrudierung ===

=== Betthaftung ===
* Auflagefläche zu klein
* Nozzle zu weit weg (Druckbett leveln)
* Fett auf der Fläche
* Temperatur falsch (vor allem bei ABS etc wichtig)

== Tests ==

=== Flow Control / Fluss einstellen ===
Den Flow kann man in Cura einstellen.
Landen pro Schicht wirklich 0.4mm auf dem Bett, wenn 0.4mm eingestellt sind?
Abhängig haupsächlich von:
* Extruderkalibrierung
* Filament - Wenn das dicker ist kommt mehr raus

==== Flow Tests ====
20mm Calibration Cube laden (Wandstärke 1 Schicht)

Cura:
Linienbreite 0.4mm, Wandanzahl: 1
Obere Untere Schichten 0 (nur Wände)
Infill keins
Flow steht auf 100%

Nach dem Drucken Wandstärke messen (am besten nur oben wg. Elefantenfüßen)

Soll-Wandstärke x 100 / IstWandstärke = Flow

z.B. 0.4 * 100 / 0.48 = 83,5

im Zweifel vlt. eher Aufrunden (Ungenauigkeiten, Hitze... tragen eher breiter auf)

=== Extruder Fördermenge / eSteps einstellen ===

10cm fördern, tatsächliche Fördermenge messen
Neue Steps = Alte Steps / Tatsächlich geförderte Länge * gewünschte Länge
Neue Werte über Display oder über Terminalsoftware im Drucker speichern.
==
Die wichtigsten Befehle für Pronterface:

M503 = gespeicherte e Steps anzeigen lassen

M92 E(neue Steps) = neue e Steps im System hinterlegen (Punkte keine Kommas!)

M500 = neuen Wert in der Firmware speichern

https://www.pronterface.com/

Regeln

25%-75% Regel

3D-Druck

2022-01-15T12:46:56Z

134.3.241.3: Die Seite wurde neu angelegt: „== Links == 3D-Drucker kalibrieren und einstellen“

== Links ==
[[3D-Drucker kalibrieren und einstellen]]

Mac - Applescript

2022-01-05T13:22:53Z

134.3.241.3:

Mit Applescript kann man viel auf dem Mac automatisieren.

[[Applescript - Browser Screenshots automatisieren]]

== Automator ==
Automator vereinfacht das Scripting und ist im Prinzip ein Tool um Skripte aus vorgefertigten Bausteinen zusammenzuklicken
https://mac.appstorm.net/how-to/productivity-how-to/automator-the-ultimate-automation-assistant/#more-4345

== Mac - Scripts ==
=== .mov -> .mp4 mit Handbreak CLI ===
Benötigt handbreak
https://handbrake.fr/downloads.php
=== .mov -> .gif mit ffmpeg ===

converting .mov files (created by MacOS screencasts for example) to small .gif files that you can easily send via email.

You will then have a quick action after right clicking any .mov file and can simply convert it to a small and optimised .gif file.

* fire up automator
* create a new quick action
* add a shell script to your workflow
* paste the following code and don’t forget to choose “as arguments” in the pass input dropdown
* save it
<syntaxhighlight lang="shellscript">
for f
do
if [[ $f == *.mov ]]; then
/usr/local/bin/ffmpeg -i "$f" -pix_fmt rgb24 -r 10 -f gif - | /usr/local/bin/gifsicle --optimize=3 > "$f".gif
fi
done
</syntaxhighlight>
This is how everything should look after you are finished.
mov_to_giv_automator

You '''need ffmpeg and gifsicle installed''' so if you haven’t install them via homebrew.

brew install ffmpeg
brew install gifsicle

Mac - Applescript

2022-01-05T13:18:15Z

134.3.241.3: /* Automater */

ThreeJS - Snippets

2022-01-05T12:04:54Z

134.3.241.3: /* Models Importieren */

== Links ==
[[ThreeJS]]
[[Three.js - Particles]]
[[Three.js - Shaders]]

== Helfer ==
=== Axes Helper ===
Koordinatenachsen anzeigen
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

== Viewport Settings ==

=== Handle Viewport Resizing ===
<syntaxhighlight lang="javascript">
window.addEventListener('resize', () =>{
console.log('window resized')
// Update sizes
sizes.width = window.innerWidth
sizes.height = window.innerHeight
// Update camera
camera.aspect = sizes.width/sizes.height
camera.updateProjectionMatrix()
// Update renderer
renderer.setSize(sizes.width,sizes.height)
renderer.setPixelRatio( Math.min(window.devicePixelRatio, 2) ) // in case monitor changed in double monitor settings
})
</syntaxhighlight>

=== Handle Pixel Ratio Setting (Retina Displays) ===
Retina Displays haben eine Pixel Ratio von 2. D.h. das Display kann einen "Software"Bildpixel nochmal auf 4 physische Pixel verteilen und damit vor allem Vektoren nochmal '''schärfer''' darstellen. ThreeJS kann diese zusätzlichen Pixel ebenfalls nutzen wenn man dem renderer die Pixel Ratio mitgibt. Allerdings muss der Renderer auch mehr tun.

Moderne Handys haben Ratios bis zu 5, das ist allerdings sinnlos mehr als 2 oder 3 sehen wir bei normalem Betrachtungsabstand eh nicht. Deshalb setzen wir wenn möglich einen Ratio so hoch wie das Gerät kann aber '''nicht höher als 2''' um die Performance zu erhalten.

<syntaxhighlight lang="javascript">
renderer.setPixelRatio( Math.min(window.devicePixelRatio, 2) )
</syntaxhighlight>

=== Handle Fullscreen Mode ===

<syntaxhighlight lang="javascript">
// Handle Fullscreen
// including safari (needs webkit prefix)
window.addEventListener('dblclick', () =>
{
const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement

if(!fullscreenElement)
{
if(canvas.requestFullscreen)
{
canvas.requestFullscreen()
}
else if(canvas.webkitRequestFullscreen)
{
canvas.webkitRequestFullscreen()
}
}
else
{
if(document.exitFullscreen)
{
document.exitFullscreen()
}
else if(document.webkitExitFullscreen)
{
document.webkitExitFullscreen()
}
}
})
</syntaxhighlight>

== Animation Basics ==
[[Three.js - Animation]]
=== Timebased Tick / Loop Function ===
==== 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>

== Nützliche Snippets für Animationen ==

=== Kreisbewegung / Circular Movement ===
myObject.position.y = Math.sin(elapsedTime) //(-1 -> 1 -> -1 -> ...)
myObject.position.x = Math.cos(elapsedTime)

=== Cursor auswerten ===
<syntaxhighlight lang="javascript">
// Sizes
const sizes = { width: 800, height: 600}
// Cursor
const cursor = {
x: 0,
y: 0
}
window.addEventListener('mousemove', (event) =>
{
//cursor.x = event.clientX / sizes.width // 0 <= x <= 1
cursor.x = event.clientX / sizes.width - 0.5// -0.5 <= x <= +0.5
cursor.y = event.clientY / sizes.height - 0.5// -0.5 <= x <= +0.5
console.log('x: ' + cursor.x)
console.log('y: ' + cursor.y)
})
// ...
// Update camera with position
camera.position.x = cursor.x * 10
camera.position.y = cursor.y * 10
</syntaxhighlight>

=== Kamera auf einer Kreisbahn ===
Das obige Beispiel läßt sich ausbauen. Die Mausbewegung gibt uns nun cursor.x Werte von -0.5 bis 0.5. Wenn wir auf zwei Achsen sinus und cosinus kombinieren bekommen wir eine '''Kreisbahn um den Mittelpunkt''' auf der Ebene dieser beiden Achsen. Eine '''volle Umdrehung''' bekommen wir wenn wir mit 2xPi multiplizieren. Den Abstand vergrößern wir wenn wir das Ergebnis mit irgendeinem Faktor multiplizieren.

<syntaxhighlight lang="javascript">
// Update camera
camera.position.x = Math.sin(cursor.x * 2 * Math.PI) * 3
camera.position.z = Math.cos(cursor.x * 2 * Math.PI) * 3
camera.position.y = cursor.y * 5 // damit wir auch etwas von oben oder unten schauen können
camera.lookAt(mesh.position) // look at center
</syntaxhighlight>

Für eine Kreisbahn um ein Objekt das nicht im Mittelpunkt ist, müßten wir noch die Koordinaten des Objekts auslesen und zu den Kamerakoordinaten addieren. So könnten wir den kompletten Kreis verschieben.

=== Bouncing Sphere + Shadow ===
<syntaxhighlight lang="javascript">
// Update the sphere
sphere.position.x = Math.cos(elapsedTime) * 1.5
sphere.position.z = Math.sin(elapsedTime) * 1.5
sphere.position.y = Math.abs(Math.sin(elapsedTime * 3))

// Update the shadow accordingly
sphereShadow.position.x = sphere.position.x
sphereShadow.position.z = sphere.position.z
sphereShadow.material.opacity = (1 - sphere.position.y) * 0.3
</syntaxhighlight>

== Orbit Controls ==
https://threejs.org/docs/index.html?q=controls#examples/en/controls/OrbitControls
ThreeJS spart mit eigenen Control Klassen eine Menge Arbeit. OrbitControls müssen zusätzlich geladen werden. Also in HTML
<script src="/javascripts/OrbitControls.js"></script>
Oder z.B. in Webpack:
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
Dann erstellt man einfach ein OrbitControl Objekt und übergibt die Kamera und ein DOM Objekt (i.d.R. das Canvas).
const controls = new OrbitControls(camera,canvas)

== Geometry Snippets ==
=== Create Geometry / Geometry Objekt erzeugen ===
[[Three.js - eigene Geometrie erzeugen]]
Beispiel: viele zufällige Dreiecke erzeugen
<syntaxhighlight lang="javascript">
// Object
// const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2)
const geometry = new THREE.BufferGeometry()
const count = 50
const positionsArray = new Float32Array(count * 3 * 3)
for (let i = 0; i < positionsArray.length; i++) {
positionsArray[i] = Math.random() - 0.5 //-0.5 < x < 0.5
}
const positionsAttribute = new THREE.BufferAttribute(positionsArray,3) // use vals 3 by 3
geometry.setAttribute('position',positionsAttribute) // position is the attribute name in shaders

// Example Array
// const positionsArray = new Float32Array([
// 0,0,0,
// 0,1,0,
// 1,0,0
// ])
</syntaxhighlight>

== Debugging ==
=== lil-gui ===
<syntaxhighlight lang="javascript">
// https://lil-gui.georgealways.com/#
import GUI from 'lil-gui';
/**
* Debug
*/
const gui = new GUI({
width:400
})
gui.close()
//...
// Debug
//gui.add(mesh.position,'y',-2,2,0.1) // OR
gui.add(mesh.position,'y')
.min(-2)
.max(3)
.step(0.1)
.name('elevation') // chain version
gui.add(mesh,'visible')
gui.add(material,'wireframe')
// we can not use material.color as it's not an object
// thus we use a separately created object...
// ... and update material when this param changed:
gui.addColor(params,'color')
.onChange( ()=>
{
material.color.set(params.color)
})
gui.add(params, 'spin')
</syntaxhighlight>

== Textures ==
https://threejs.org/docs/index.html?q=texture#api/en/constants/Textures
[[three.js - Textures]] - ausführliche Infos zu TextureLoader Callbacks, LoadingManager...

=== Beispiel ===
<syntaxhighlight lang="javascript">
/**
* Textures
*/
const textureLoader = new THREE.TextureLoader()

const doorColorTexture = textureLoader.load('/textures/door/color.jpg')
const doorAlphaTexture = textureLoader.load('/textures/door/alpha.jpg')
const doorAmbientOcclusionTexture = textureLoader.load('/textures/door/ambientOcclusion.jpg')
const doorHeightTexture = textureLoader.load('/textures/door/height.jpg')
const doorNormalTexture = textureLoader.load('/textures/door/normal.jpg')
const doorMetalnessTexture = textureLoader.load('/textures/door/metalness.jpg')
const doorRoughnessTexture = textureLoader.load('/textures/door/roughness.jpg')

// HOW TO REPEAT TILES - uv wrapping
const repeat = 10;

const grassColorTexture = textureLoader.load('/textures/grass/color.jpg')
const grassNormalTexture = textureLoader.load('/textures/grass/normal.jpg')
const grassRoughnessTexture = textureLoader.load('/textures/grass/roughness.jpg')

grassColorTexture.repeat.set(repeat,repeat)
grassNormalTexture.repeat.set(repeat,repeat)
grassRoughnessTexture.repeat.set(repeat,repeat)

grassColorTexture.wrapS = THREE.RepeatWrapping
grassNormalTexture.wrapS = THREE.RepeatWrapping
grassRoughnessTexture.wrapS = THREE.RepeatWrapping

grassColorTexture.wrapT = THREE.RepeatWrapping
grassNormalTexture.wrapT = THREE.RepeatWrapping
grassRoughnessTexture.wrapT = THREE.RepeatWrapping

//...

/**
* Objects
*/

// Door
const door = new THREE.Mesh(
new THREE.PlaneGeometry(2,2,100,100),// HEIGHTMAP NEEDS SOME SUBDIVISIONS
new THREE.MeshStandardMaterial({
map: doorColorTexture,
transparent: true, // NEEDED FOR ALPHA TO WORK
alphaMap: doorAlphaTexture,
aoMap: doorAmbientOcclusionTexture,
displacementMap: doorHeightTexture,
displacementScale: 0.05,
normalMap: doorNormalTexture,
metalnessMap: doorMetalnessTexture,
roughnessMap: doorRoughnessTexture,
//wireframe: true
})
)
// AOMAP NEEDS HIS OWN UV ATTRIBUTE (here we copy from geometry)
door.geometry.setAttribute('uv2', new THREE.Float32BufferAttribute(door.geometry.attributes.uv.array, 2))

house.add(door)

// Floor
const floor = new THREE.Mesh(
new THREE.PlaneGeometry(20, 20),
new THREE.MeshStandardMaterial({
//color: '#a9c388',
map: grassColorTexture,
normalMap: grassNormalTexture,
roughnessMap: grassRoughnessTexture
})
)

floor.rotation.x = - Math.PI * 0.5
floor.position.y = 0

scene.add(floor)
</syntaxhighlight>

== Materials ==
[[three.js - materials]] - Mehr Info und weitere Materialien.

=== MeshBasicMaterial ===
<syntaxhighlight lang="javascript">
const material = new THREE.MeshBasicMaterial()
material.color.set(0xaabb00)
material.map = doorColorTexture
material.side = DoubleSide
material.wireframe = true
material.transparent = true
material.opacity = 0.5
material.alphaMap = doorAlphaTexture
</syntaxhighlight>

=== MeshMatcapMaterial ===
https://github.com/nidorx/matcaps - gute Quelle
<syntaxhighlight lang="javascript">
// MATCAP - simulate lights / good for modelling
const textureLoader = new THREE.TextureLoader()
const matcapTexture = textureLoader.load('textures/matcaps/1.jpg')
const material = new THREE.MeshMatcapMaterial()
material.matcap = matcapTexture
</syntaxhighlight>

=== MeshStandardMaterial ===
Standard Physical Based Rendering Material

<syntaxhighlight lang="javascript">
// TEXTURES
const textureLoader = new THREE.TextureLoader()
const doorColorTexture = textureLoader.load('textures/door/color.jpg')
const doorAlphaTexture = textureLoader.load('textures/door/alpha.jpg')
const doorAmbientOcclusionTexture = textureLoader.load('textures/door/ambientOcclusion.jpg')
const doorHeightTexture = textureLoader.load('textures/door/height.jpg')
const doorMetalnessTexture = textureLoader.load('textures/door/metalness.jpg')
const doorNormalTexture = textureLoader.load('textures/door/normal.jpg')
const doorRoughnessTexture = textureLoader.load('textures/door/roughness.jpg')

// STANDARD MATERIAL
const material = new THREE.MeshStandardMaterial()
material.side = DoubleSide
material.map = doorColorTexture

material.roughness = 1 // default
material.roughnessMap = doorRoughnessTexture

material.metalness = 0 // default
material.metalnessMap = doorMetalnessTexture

material.aoMap = doorAmbientOcclusionTexture
material.aoMapIntensity = 1.1

material.displacementMap = doorHeightTexture
material.displacementScale = 0.03

material.normalMap = doorNormalTexture
material.normalScale.set(0.5,0.5)

material.transparent = true // needed for alpha to work
material.alphaMap = doorAlphaTexture

// OBJECTS
const plane = new THREE.Mesh(
new THREE.PlaneGeometry(1,1,100,100), // subdivisions needed for height map
material
)
// copy uv coordinates to uv2 attribute needed by aomap
plane.geometry.setAttribute(
'uv2',
new THREE.BufferAttribute(plane.geometry.attributes.uv.array,2)
)
</syntaxhighlight>

=== Environment Map ===
[[Three.js - Environment Map (Panorama)]]

<syntaxhighlight lang="javascript">
// ENVIRONMENTAL MAP
const cubeTextureLoader = new THREE.CubeTextureLoader()
// load cube-images in the right order...
const environmentMapTexture = cubeTextureLoader.load([
'/textures/environmentMaps/4/px.png',
'/textures/environmentMaps/4/nx.png',
'/textures/environmentMaps/4/py.png',
'/textures/environmentMaps/4/ny.png',
'/textures/environmentMaps/4/pz.png',
'/textures/environmentMaps/4/nz.png',
])
const material = new THREE.MeshStandardMaterial()
material.envMap = environmentMapTexture
material.metalness = 0.7
material.roughness = 0.2

gui.add(material, 'metalness').min(0).max(1).step(0.0001)
gui.add(material, 'roughness').min(0).max(1).step(0.0001)

</syntaxhighlight>

=== Hinweise ===
Eigenschaften kann man als Konstruktor Objekt übergeben oder direkt setzen oder über set (manchmal praktischer, wenn als Eigenschaftswert ein Objekt erwartet wird (z.B. bei der Farbe ein Farbobjekt)

== 3D Text ==
[[Three.js - 3D Text]]
http://gero3.github.io/facetype.js/ - Konvertieren von Fonts nach Facetype
=== Fontloader ===
Hinweis: Seit three.js 133 muss der Fontloader und die Fontgeometry importiert werden.
https://threejs.org/docs/index.html?q=fontloa#examples/en/loaders/FontLoader
====Basic Example====
<syntaxhighlight lang="javascript">
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js'
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js'//i.e. with webpack
//...
/**
* Fonts
*/
const fontLoader = new FontLoader()

fontLoader.load(
//'/fonts/helvetiker_regular.typeface.json',
'/fonts/BebasNeueBook_Regular.json',
(font) =>
{
console.log('font loaded')
const textGeometry = new TextGeometry(
'KHOLJA',
{
font: font,
size: 0.5,
height: 0.2, // more like extrusion depth
curveSegments: 8,
bevelEnabled: true,
bevelThickness: 0.03,
bevelSize: 0.01,
bevelOffset: 0,
bevelSegments: 4
}
)
textGeometry.center() // easy method to center the text
const textMaterial = new THREE.MeshBasicMaterial()
textMaterial.wireframe = true
const text = new THREE.Mesh(textGeometry,textMaterial)
scene.add(text)
}
)
</syntaxhighlight>

== Lights ==
[[Three.js - Lights]]
=== Light Starters ===
==== Neutral Starter ====
<syntaxhighlight lang="javascript">
/**
* Lights
*/
// Ambient light
const ambientLight = new THREE.AmbientLight('#ffffff', 0.5)
gui.add(ambientLight, 'intensity').min(0).max(1).step(0.001)
scene.add(ambientLight)

// Directional light
const directionalLight = new THREE.DirectionalLight('#ffffff', 0.5)
directionalLight.position.set(4, 5, - 2)
gui.add(directionalLight, 'intensity').min(0).max(1).step(0.001)
gui.add(directionalLight.position, 'x').min(- 5).max(5).step(0.001)
gui.add(directionalLight.position, 'y').min(- 5).max(5).step(0.001)
gui.add(directionalLight.position, 'z').min(- 5).max(5).step(0.001)
scene.add(moonLight)
</syntaxhighlight>

==== Moonlight Starter ====
<syntaxhighlight lang="javascript">
/**
* Lights
*/
// Ambient light
const ambientLight = new THREE.AmbientLight('#b9d5ff', 0.5)
gui.add(ambientLight, 'intensity').min(0).max(1).step(0.001)
scene.add(ambientLight)

// Directional light
const moonLight = new THREE.DirectionalLight('#b9d5ff', 0.5)
moonLight.position.set(4, 5, - 2)
gui.add(moonLight, 'intensity').min(0).max(1).step(0.001)
gui.add(moonLight.position, 'x').min(- 5).max(5).step(0.001)
gui.add(moonLight.position, 'y').min(- 5).max(5).step(0.001)
gui.add(moonLight.position, 'z').min(- 5).max(5).step(0.001)
scene.add(moonLight)
</syntaxhighlight>

== Shadows / Schatten ==
[[Three.js - Shadows]] - Ausführliche Infos zu Schatten

=== Komplettes Beispiel ===
<syntaxhighlight lang="javascript">
//...
/**
* Lights
*/
// Ambient light
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
gui.add(ambientLight, 'intensity').min(0).max(1).step(0.001)
scene.add(ambientLight)

// Directional light
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
directionalLight.position.set(2, 2, - 1)
gui.add(directionalLight, 'intensity').min(0).max(1).step(0.001)
gui.add(directionalLight.position, 'x').min(- 5).max(5).step(0.001)
gui.add(directionalLight.position, 'y').min(- 5).max(5).step(0.001)
gui.add(directionalLight.position, 'z').min(- 5).max(5).step(0.001)

// Add Shadow and mapsize
directionalLight.castShadow = true
directionalLight.shadow.mapSize.x = 1024
directionalLight.shadow.mapSize.y = 1024
// Shadow camera settings...
directionalLight.shadow.camera.near = 1
directionalLight.shadow.camera.far = 6
// ...important for quality
directionalLight.shadow.camera.left = -2
directionalLight.shadow.camera.right = 2
directionalLight.shadow.camera.top = 2
directionalLight.shadow.camera.bottom = -2
// adding a bit of a cheap blur
// directionalLight.shadow.radius = 4

scene.add(directionalLight)

// Shadow camera helper
const directionalLightCameraHelper = new THREE.CameraHelper(directionalLight.shadow.camera)
scene.add(directionalLightCameraHelper)

// ...

/**
* Objects
*/
sphere.castShadow = true
// ...
plane.receiveShadow = true
// ...
scene.add(sphere, plane)

/**
* Renderer
*/
const renderer = new THREE.WebGLRenderer({
canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

// Renderer Shadowmap settings
renderer.shadowMap.enabled = true
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
</syntaxhighlight>

==== Shadow Baking ====
Wie Texturen kann man auch Schatten baken. Nachteil. Bei Bewegung des Objekts bewegt sich der
<syntaxhighlight lang="javascript">
/**
* Textures
*/
const textureLoader = new THREE.TextureLoader()
const bakedShadow = textureLoader.load('/textures/bakedShadow.jpg')
//...
const plane = new THREE.Mesh(
new THREE.PlaneGeometry(5, 5),
new THREE.MeshBasicMaterial({
map: bakedShadow
})
)
// we don't need the rendered shadows in this case
renderer.shadowMap.enabled = false
</syntaxhighlight>

==== Dynamic Shadow Baking ====
'''Beispiel Kugel mit animiertem Fake-Schatten'''
<syntaxhighlight lang="javascript">
const textureLoader = new THREE.TextureLoader()
const simpleShadow = textureLoader.load('/textures/simpleShadow.jpg')

// Sphere Shadow
const sphereShadow = new THREE.Mesh(
new THREE.PlaneGeometry(1.5, 1.5),
new THREE.MeshBasicMaterial({
color: 0x000000,
transparent: true,
alphaMap: simpleShadow
})
)
sphereShadow.rotation.x = - Math.PI * 0.5
sphereShadow.position.y = plane.position.y + 0.01

scene.add(sphere, sphereShadow, plane)

//...

/**
* Animate
*/
const clock = new THREE.Clock()

const tick = () =>
{
const elapsedTime = clock.getElapsedTime()

// Update the sphere
sphere.position.x = Math.cos(elapsedTime) * 1.5
sphere.position.z = Math.sin(elapsedTime) * 1.5
sphere.position.y = Math.abs(Math.sin(elapsedTime * 3))

// Update the shadow accordingly
sphereShadow.position.x = sphere.position.x
sphereShadow.position.z = sphere.position.z
sphereShadow.material.opacity = (1 - sphere.position.y) * 0.3

// Update controls
controls.update()

// Render
renderer.render(scene, camera)

// Call tick again on the next frame
window.requestAnimationFrame(tick)
}

tick()
</syntaxhighlight>

== Fog ==
[[Three.js - Fog]]
<syntaxhighlight lang="javascript">
//...
// Fog
const fog = new THREE.Fog('#262837', 1, 15)
scene.fog = fog
//...
renderer.setClearColor('#262837')
</syntaxhighlight>

== Particles ==
Benötigen eine Geometry, ein Material, ein Points Objekt (statt wie sonst ein Mesh)
[[Three.js - Particles]]
Starter Example
<syntaxhighlight lang="javascript">
/**
* Particles
*/
// Geometry
const particlesGeometry = new THREE.SphereBufferGeometry(1,32,32)
// Material
const particlesMaterial = new THREE.PointsMaterial({
size: 0.02,
sizeAttenuation: true, //perspective smaller if far
})
// Points
const particles = new THREE.Points(particlesGeometry, particlesMaterial)
scene.add(particles)
</syntaxhighlight>

== Models Importieren ==
[[Three.js - Import Models]]

<syntaxhighlight lang="javascript">
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
//...
const gltfLoader = new GLTFLoader()
gltfLoader.load(
'/models/FlightHelmet/glTF/FlightHelmet.gltf',
(gltf) => {
console.log(gltf) //success - show what we got
const children = [...gltf.scene.children] // duplicate
for(const child of children){
scene.add(child)
}
//scene.add(gltf.scene)
//scene.add(gltf.scene.children[1])
},
() => {console.log('progress')},
() => {console.log('error')}
)
</syntaxhighlight>
=== DRACO Loader nutzen ===

<syntaxhighlight lang="javascript">
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
//...
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath("/draco/") // get webassembly version (faster but you have to provide the appropriate draco files)

const gltfLoader = new GLTFLoader()
gltfLoader.setDRACOLoader(dracoLoader)
gltfLoader.load(
'/models/Duck/glTF-Draco/Duck.gltf',
(gltf) => {
scene.add(gltf.scene)
}
)
</syntaxhighlight>

== Starters ==
[[Three.js - Starters]]

== Helpers ==
=== Nützliche Renderer Settings ===
<syntaxhighlight lang="javascript">
/**
* Renderer
*/
const renderer = new THREE.WebGLRenderer({
canvas: canvas,
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.setClearColor('#262837')
</syntaxhighlight>
=== Nützliche Animation Settings ===
<syntaxhighlight lang="javascript">
/**
* Animate
*/
const clock = new THREE.Clock()

const tick = () =>
{
const elapsedTime = clock.getElapsedTime()

// Update material (used for own Shader only)
material.uniforms.uTime.value = elapsedTime

// Update controls (used for orbit controls only)
controls.update()

// Render
renderer.render(scene, camera)

// Call tick again on the next frame
window.requestAnimationFrame(tick)
}

tick()
</syntaxhighlight>
=== Orbit Controls ===
Don't forget to update in tick function, when animating
<syntaxhighlight lang="javascript">
// Controls
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true
</syntaxhighlight>

=== Optimizations ===
==== Materialien und Geometrien wiederverwenden ====
Das Erstellen von komplexen Objekten kann zeit- und speicherintensiv sein.
<syntaxhighlight lang="javascript">
console.time('donuts')
for(let i = 0; i < 100; i++)
{
const donutGeometry = new THREE.TorusGeometry(0.3, 0.2, 20, 45)
const donutMaterial = new THREE.MeshMatcapMaterial({ matcap: matcapTexture })
const donut = new THREE.Mesh(donutGeometry, donutMaterial)
scene.add(donut)
}
console.timeend('donuts')
</syntaxhighlight>
Zwei Zeilen umgestellt aber weit '''über 100mal schneller !'''
<syntaxhighlight lang="javascript">
console.time('donuts')
const donutGeometry = new THREE.TorusGeometry(0.3, 0.2, 20, 45)
const donutMaterial = new THREE.MeshMatcapMaterial({ matcap: matcapTexture })
for(let i = 0; i < 100; i++)
{
const donut = new THREE.Mesh(donutGeometry, donutMaterial)
scene.add(donut)
}
console.timeend('donuts')
</syntaxhighlight>

=== Nützliche Schnipsel ===
==== Objekte auf Ringbahn positionieren ====
<syntaxhighlight lang="javascript">
// Graveyard
const graves = new THREE.Group()
scene.add(graves)
const graveGeometry = new THREE.BoxGeometry(0.6, 0.8, 0.2)
const graveMaterial = new THREE.MeshStandardMaterial({color: '#b2b6b1'})

for (let i = 0; i < 50; i++) {
const min = 4 // minimaler Radius
const max = 8.5 // maximaler Radius
const radius = min + Math.random() * (max-min)// Radius zwischen min und max
const angle = Math.random() * 2*Math.PI // 0 < angle < 2PI (voller Kreis im Bogenmaß)
// (Bogen)Winkel in x,z Koordinaten umrechnen. Ohne * radius wäre Abstand 1
const x = Math.sin(angle) * radius
const z = Math.cos(angle) * radius
const y = 0.35

const grave = new THREE.Mesh(graveGeometry, graveMaterial)
grave.position.set(x,y,z)
// Setze Grabsteine leicht schief und verdreht
grave.rotation.y = (Math.random() - 0.5) * 0.4
grave.rotation.z = (Math.random() - 0.5) * 0.3

graves.add(grave)
}
</syntaxhighlight>

=== Cool Colors ===
<pre>
#ac8e82 - brown walls
#a9c388 - green night grass
#89c854 - green bush
#b35f45 - greek roof red
#b2b6b1 - grey tombstone
#b9d5ff - blue moonlight
#ff7d49 - orange warm light
#262837 - blueish fog
</pre>

Three.js - Import Models

2022-01-05T11:47:59Z

134.3.241.3: /* Mehrere Children */

Wie importiert man Models in Three.js und welche Dateiformate sind sinnvoll?

== Quickstart ==
<syntaxhighlight lang="javascript">
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
//...
const gltfLoader = new GLTFLoader()
gltfLoader.load(
'/models/Duck/glTF/Duck.gltf',
() => {console.log('success')},
() => {console.log('progress')},
(error) => {console.log(error)}
)
</syntaxhighlight>

== Links ==
[[ThreeJS - Snippets]]
https://threejs-journey.com/lessons/23 - englischsprachige Teile in diesem Artikel und Beispiele

Others

https://en.wikipedia.org/wiki/List_of_file_formats#3D_graphics Formats (wiki)
https://threejs.org/editor/ Three.js editor

GLTF sample models

https://github.com/KhronosGroup/glTF-Sample-Models Repository
https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/Duck Duck
https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/Fox Fox

Draco

https://github.com/google/draco Repository
https://google.github.io/draco/ Website

Three.js documentation

https://threejs.org/docs/#api/en/objects/Mesh Mesh
https://threejs.org/docs/#api/en/materials/MeshStandardMaterial MeshStandardMaterial
https://threejs.org/docs/#api/en/lights/AmbientLight AmbientLight
https://threejs.org/docs/#api/en/lights/DirectionalLight DirectionalLight
https://threejs.org/docs/#examples/en/loaders/GLTFLoader GLTFLoader
https://threejs.org/docs/index.html#api/en/loaders/TextureLoader TextureLoader
https://threejs.org/docs/#api/en/loaders/managers/LoadingManager LoadingManager
https://threejs.org/docs/#api/en/objects/Group Group
https://threejs.org/docs/#api/en/core/Object3D Object3D
https://threejs.org/docs/#api/en/cameras/PerspectiveCamera PerspectiveCamera
https://threejs.org/docs/#examples/en/loaders/DRACOLoader DracoLoader
https://threejs.org/docs/#api/en/objects/Bone Bone
https://threejs.org/docs/#api/en/objects/SkinnedMesh SkinnedMesh
https://threejs.org/docs/#api/en/animation/AnimationClip AnimationClip
https://threejs.org/docs/#api/en/animation/AnimationMixer AnimationMixer
https://threejs.org/docs/#api/en/animation/AnimationAction AnimationAction

== Tipps ==
* Nach dem Import immer über Console checken was drin ist.
* Wichtig Scale und Transform Values checken. Dann weißt du gleich wo du suchen mußt wenn du nichts siehts.

== Dateiformate ==
=== GLTF ===
* Von der Khronos Group (OpenGL, WebGL...) erfüllt viele Zwecke gerade wenn man im Web unterwegs ist.
* Kann einen Scene Graph mit übernehmen
* Kann JSON, binary, embeded textures mit einbinden
* Stand 2021 quasi Standard - funktioniert auch mit Unity, Blender etc.

andere können aber auch sinnvoll sein: obj, effizient - ply klein schnelle dekompression....

Verschiedene Varianten

glTF - Standard, Alle Assets einzeln in einem Ordner
glTF-Binary - alle Assets in einer Binären Datei
glTF-Draco - Eine Datei mit Draco Kompression (sehr klein muss aber entpackt werden)
glTF-Embedded - Alle Dateien aus Standard Base64(?) Kodiert in einer Text-Datei

In den Beispielen nutzen wir gltf

== Loader ==
=== Add the loaded model to our scene ===
Wo ist was?

If you look at the object logged in the console, you'll find a lot of elements. The most important part is the scene property because we have only one scene in the exported model.

This scene contains everything we need. But it also includes more. Always start by studying what is available in it and watch the scale property of the different Groups, Object3D, and Mesh.

We get something like this:
<pre>
THREE.Group: scene
└───Array: children
└───THREE.Object3D
└───Array: children
├───THREE.PerspectiveCamera
└───THREE.Mesh

</pre>

The Mesh should be our duck. We don't really care about the PerspectiveCamera. Both the camera and the duck seem to be in the first and only Object3D in the scene's children array. Even worst, that Object3D has a scale set to a minimal value.

As you can see, it's a little complex even to get our duck, and it's where most beginners get lost.

All we want is to get our duck in the scene. We have multiples ways of doing it:

Add the whole scene in our scene. We can do that because even if its name is scene, it's in fact a Group.
Add the children of the scene to our scene and ignore the unused PerspectiveCamera.
Filter the children before adding to the scene to remove the unwanted objects like the PerspectiveCamera.
Add only the Mesh but end up with a duck that could be wrongly scaled, positioned or rotated.
Open the file in a 3D software and remove the PerspectiveCamera then export it again.

Because our model structure is simple, we will add the Object3D to our scene, and ignore the unused PerspectiveCamera inside. In future lessons, we will add the whole scene as one object
<syntaxhighlight lanG="javascript">
gltfLoader.load(
'/models/Duck/glTF/Duck.gltf',
(gltf) =>
{
scene.add(gltf.scene.children[0])
}
)
</syntaxhighlight>

=== Mehrere Children ===
'''Vorsicht''' wenn es mehrere Children gibt die man alle importieren möchte:

Die erste Lösung funktioniert nicht richtig. Bei jedem Schleifendurchlauf wird das Element aus dem (besonderen) gltf Array entnommen. Das Array verkürzt sich. Der Index der Schleife bleibt aber gleich, daher werden Objekte ausgelassen.
<syntaxhighlight lanl="javascript">
// NOT WORKING
for(const child of gltf.scene.children){ // not working properly
scene.add(child)
}
// WORKING
while(gltf.scene.children.length){
scene.add(gltf.scene.children[0])
}
// WORKING TOO
const children = [...gltf.scene.children] // duplicate
for(const child of children){
scene.add(child)
}
// WORKING TOO
for(let i = gltf.scene.children.length; i > 0; i--){
scene.add(gltf.scene.children[0])
}
</syntaxhighlight>

=== Draco Compression ===
* Benötigt den Dracoloader
* As we saw when browsing the files, the Draco version can be much lighter than the default version. Compression is applied to the buffer data (typically the geometry). It doesn't matter if you are using the default glTF, the binary glTF or the embedded glTF.
* It's not even exclusive to glTF, and you can use it with other formats. But both glTF and Draco got popular simultaneously, so the implementation went faster with glTF exporters.
* Google develops the algorithm under the open-source Apache License

2022-01-05T09:32:12Z

134.3.241.3: /* Links */

Three.js - Import Models

2022-01-05T09:23:13Z

134.3.241.3: /* Links */

Wie importiert man Models in Three.js und welche Dateiformate sind sinnvoll?
== Links ==
<div class="js-scroll-mover scroll-mover text">
<p>Others</p>
<ul>
<li><a target="_blank" href="https://en.wikipedia.org/wiki/List_of_file_formats#3D_graphics">Formats (wiki)</a></li>
<li><a target="_blank" href="https://threejs.org/editor/">Three.js editor</a></li>
</ul>
<p>GLTF sample models</p>
<ul>
<li><a target="_blank" href="https://github.com/KhronosGroup/glTF-Sample-Models">Repository</a></li>
<li><a target="_blank" href="https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/Duck">Duck</a></li>
<li><a target="_blank" href="https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/Fox">Fox</a></li>
</ul>
<p>Draco</p>
<ul>
<li><a target="_blank" href="https://github.com/google/draco">Repository</a></li>
<li><a target="_blank" href="https://google.github.io/draco/">Website</a></li>
</ul>
<p>Three.js documentation</p>
<ul>
<li><a target="_blank" href="https://threejs.org/docs/#api/en/objects/Mesh">Mesh</a></li>
<li><a target="_blank" href="https://threejs.org/docs/#api/en/materials/MeshStandardMaterial">MeshStandardMaterial</a></li>
<li><a target="_blank" href="https://threejs.org/docs/#api/en/lights/AmbientLight">AmbientLight</a></li>
<li><a target="_blank" href="https://threejs.org/docs/#api/en/lights/DirectionalLight">DirectionalLight</a></li>
<li><a target="_blank" href="https://threejs.org/docs/#examples/en/loaders/GLTFLoader">GLTFLoader</a></li>
<li><a target="_blank" href="https://threejs.org/docs/index.html#api/en/loaders/TextureLoader">TextureLoader</a></li>
<li><a target="_blank" href="https://threejs.org/docs/#api/en/loaders/managers/LoadingManager">LoadingManager</a></li>
<li><a target="_blank" href="https://threejs.org/docs/#api/en/objects/Group">Group</a></li>
<li><a target="_blank" href="https://threejs.org/docs/#api/en/core/Object3D">Object3D</a></li>
<li><a target="_blank" href="https://threejs.org/docs/#api/en/cameras/PerspectiveCamera">PerspectiveCamera</a></li>
<li><a target="_blank" href="https://threejs.org/docs/#examples/en/loaders/DRACOLoader">DracoLoader</a></li>
<li><a target="_blank" href="https://threejs.org/docs/#api/en/objects/Bone">Bone</a></li>
<li><a target="_blank" href="https://threejs.org/docs/#api/en/objects/SkinnedMesh">SkinnedMesh</a></li>
<li><a target="_blank" href="https://threejs.org/docs/#api/en/animation/AnimationClip">AnimationClip</a></li>
<li><a target="_blank" href="https://threejs.org/docs/#api/en/animation/AnimationMixer">AnimationMixer</a></li>
<li><a target="_blank" href="https://threejs.org/docs/#api/en/animation/AnimationAction">AnimationAction</a></li>
</ul>

</div>

== Dateiformate ==
=== GLTF ===
* Von der Khronos Group (OpenGL, WebGL...) erfüllt viele Zwecke gerade wenn man im Web unterwegs ist.
* Kann einen Scene Graph mit übernehmen
* Kann JSON, binary, embeded textures mit einbinden
* Stand 2021 quasi Standard - funktioniert auch mit Unity, Blender etc.

andere können aber auch sinnvoll sein: obj, effizient - ply klein schnelle dekompression....

Three.js - Import Models

2022-01-05T09:22:23Z

134.3.241.3: Die Seite wurde neu angelegt: „Wie importiert man Models in Three.js und welche Dateiformate sind sinnvoll? == Links == <ul> <li><a target="_blank" href="https://en.wikipedia.org/wiki/List_o…“

Wie importiert man Models in Three.js und welche Dateiformate sind sinnvoll?
== Links ==
<ul>
<li><a target="_blank" href="https://en.wikipedia.org/wiki/List_of_file_formats#3D_graphics">Formats (wiki)</a></li>
<li><a target="_blank" href="https://threejs.org/editor/">Three.js editor</a></li>
</ul>
== Dateiformate ==
=== GLTF ===
* Von der Khronos Group (OpenGL, WebGL...) erfüllt viele Zwecke gerade wenn man im Web unterwegs ist.
* Kann einen Scene Graph mit übernehmen
* Kann JSON, binary, embeded textures mit einbinden
* Stand 2021 quasi Standard - funktioniert auch mit Unity, Blender etc.

andere können aber auch sinnvoll sein: obj, effizient - ply klein schnelle dekompression....

ThreeJS - Snippets

2022-01-05T09:14:35Z

134.3.241.3: /* Models Importieren */

== Links ==
[[ThreeJS]]
[[Three.js - Particles]]
[[Three.js - Shaders]]

== Helfer ==
=== Axes Helper ===
Koordinatenachsen anzeigen
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

== Viewport Settings ==

=== Handle Viewport Resizing ===
<syntaxhighlight lang="javascript">
window.addEventListener('resize', () =>{
console.log('window resized')
// Update sizes
sizes.width = window.innerWidth
sizes.height = window.innerHeight
// Update camera
camera.aspect = sizes.width/sizes.height
camera.updateProjectionMatrix()
// Update renderer
renderer.setSize(sizes.width,sizes.height)
renderer.setPixelRatio( Math.min(window.devicePixelRatio, 2) ) // in case monitor changed in double monitor settings
})
</syntaxhighlight>

=== Handle Pixel Ratio Setting (Retina Displays) ===
Retina Displays haben eine Pixel Ratio von 2. D.h. das Display kann einen "Software"Bildpixel nochmal auf 4 physische Pixel verteilen und damit vor allem Vektoren nochmal '''schärfer''' darstellen. ThreeJS kann diese zusätzlichen Pixel ebenfalls nutzen wenn man dem renderer die Pixel Ratio mitgibt. Allerdings muss der Renderer auch mehr tun.

Moderne Handys haben Ratios bis zu 5, das ist allerdings sinnlos mehr als 2 oder 3 sehen wir bei normalem Betrachtungsabstand eh nicht. Deshalb setzen wir wenn möglich einen Ratio so hoch wie das Gerät kann aber '''nicht höher als 2''' um die Performance zu erhalten.

<syntaxhighlight lang="javascript">
renderer.setPixelRatio( Math.min(window.devicePixelRatio, 2) )
</syntaxhighlight>

=== Handle Fullscreen Mode ===

<syntaxhighlight lang="javascript">
// Handle Fullscreen
// including safari (needs webkit prefix)
window.addEventListener('dblclick', () =>
{
const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement

if(!fullscreenElement)
{
if(canvas.requestFullscreen)
{
canvas.requestFullscreen()
}
else if(canvas.webkitRequestFullscreen)
{
canvas.webkitRequestFullscreen()
}
}
else
{
if(document.exitFullscreen)
{
document.exitFullscreen()
}
else if(document.webkitExitFullscreen)
{
document.webkitExitFullscreen()
}
}
})
</syntaxhighlight>

== Animation Basics ==
[[Three.js - Animation]]
=== Timebased Tick / Loop Function ===
==== 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>

== Nützliche Snippets für Animationen ==

=== Kreisbewegung / Circular Movement ===
myObject.position.y = Math.sin(elapsedTime) //(-1 -> 1 -> -1 -> ...)
myObject.position.x = Math.cos(elapsedTime)

=== Cursor auswerten ===
<syntaxhighlight lang="javascript">
// Sizes
const sizes = { width: 800, height: 600}
// Cursor
const cursor = {
x: 0,
y: 0
}
window.addEventListener('mousemove', (event) =>
{
//cursor.x = event.clientX / sizes.width // 0 <= x <= 1
cursor.x = event.clientX / sizes.width - 0.5// -0.5 <= x <= +0.5
cursor.y = event.clientY / sizes.height - 0.5// -0.5 <= x <= +0.5
console.log('x: ' + cursor.x)
console.log('y: ' + cursor.y)
})
// ...
// Update camera with position
camera.position.x = cursor.x * 10
camera.position.y = cursor.y * 10
</syntaxhighlight>

=== Kamera auf einer Kreisbahn ===
Das obige Beispiel läßt sich ausbauen. Die Mausbewegung gibt uns nun cursor.x Werte von -0.5 bis 0.5. Wenn wir auf zwei Achsen sinus und cosinus kombinieren bekommen wir eine '''Kreisbahn um den Mittelpunkt''' auf der Ebene dieser beiden Achsen. Eine '''volle Umdrehung''' bekommen wir wenn wir mit 2xPi multiplizieren. Den Abstand vergrößern wir wenn wir das Ergebnis mit irgendeinem Faktor multiplizieren.

<syntaxhighlight lang="javascript">
// Update camera
camera.position.x = Math.sin(cursor.x * 2 * Math.PI) * 3
camera.position.z = Math.cos(cursor.x * 2 * Math.PI) * 3
camera.position.y = cursor.y * 5 // damit wir auch etwas von oben oder unten schauen können
camera.lookAt(mesh.position) // look at center
</syntaxhighlight>

Für eine Kreisbahn um ein Objekt das nicht im Mittelpunkt ist, müßten wir noch die Koordinaten des Objekts auslesen und zu den Kamerakoordinaten addieren. So könnten wir den kompletten Kreis verschieben.

=== Bouncing Sphere + Shadow ===
<syntaxhighlight lang="javascript">
// Update the sphere
sphere.position.x = Math.cos(elapsedTime) * 1.5
sphere.position.z = Math.sin(elapsedTime) * 1.5
sphere.position.y = Math.abs(Math.sin(elapsedTime * 3))

// Update the shadow accordingly
sphereShadow.position.x = sphere.position.x
sphereShadow.position.z = sphere.position.z
sphereShadow.material.opacity = (1 - sphere.position.y) * 0.3
</syntaxhighlight>

== Orbit Controls ==
https://threejs.org/docs/index.html?q=controls#examples/en/controls/OrbitControls
ThreeJS spart mit eigenen Control Klassen eine Menge Arbeit. OrbitControls müssen zusätzlich geladen werden. Also in HTML
<script src="/javascripts/OrbitControls.js"></script>
Oder z.B. in Webpack:
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
Dann erstellt man einfach ein OrbitControl Objekt und übergibt die Kamera und ein DOM Objekt (i.d.R. das Canvas).
const controls = new OrbitControls(camera,canvas)

== Geometry Snippets ==
=== Create Geometry / Geometry Objekt erzeugen ===
[[Three.js - eigene Geometrie erzeugen]]
Beispiel: viele zufällige Dreiecke erzeugen
<syntaxhighlight lang="javascript">
// Object
// const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2)
const geometry = new THREE.BufferGeometry()
const count = 50
const positionsArray = new Float32Array(count * 3 * 3)
for (let i = 0; i < positionsArray.length; i++) {
positionsArray[i] = Math.random() - 0.5 //-0.5 < x < 0.5
}
const positionsAttribute = new THREE.BufferAttribute(positionsArray,3) // use vals 3 by 3
geometry.setAttribute('position',positionsAttribute) // position is the attribute name in shaders

// Example Array
// const positionsArray = new Float32Array([
// 0,0,0,
// 0,1,0,
// 1,0,0
// ])
</syntaxhighlight>

== Debugging ==
=== lil-gui ===
<syntaxhighlight lang="javascript">
// https://lil-gui.georgealways.com/#
import GUI from 'lil-gui';
/**
* Debug
*/
const gui = new GUI({
width:400
})
gui.close()
//...
// Debug
//gui.add(mesh.position,'y',-2,2,0.1) // OR
gui.add(mesh.position,'y')
.min(-2)
.max(3)
.step(0.1)
.name('elevation') // chain version
gui.add(mesh,'visible')
gui.add(material,'wireframe')
// we can not use material.color as it's not an object
// thus we use a separately created object...
// ... and update material when this param changed:
gui.addColor(params,'color')
.onChange( ()=>
{
material.color.set(params.color)
})
gui.add(params, 'spin')
</syntaxhighlight>

== Textures ==
https://threejs.org/docs/index.html?q=texture#api/en/constants/Textures
[[three.js - Textures]] - ausführliche Infos zu TextureLoader Callbacks, LoadingManager...

=== Beispiel ===
<syntaxhighlight lang="javascript">
/**
* Textures
*/
const textureLoader = new THREE.TextureLoader()

const doorColorTexture = textureLoader.load('/textures/door/color.jpg')
const doorAlphaTexture = textureLoader.load('/textures/door/alpha.jpg')
const doorAmbientOcclusionTexture = textureLoader.load('/textures/door/ambientOcclusion.jpg')
const doorHeightTexture = textureLoader.load('/textures/door/height.jpg')
const doorNormalTexture = textureLoader.load('/textures/door/normal.jpg')
const doorMetalnessTexture = textureLoader.load('/textures/door/metalness.jpg')
const doorRoughnessTexture = textureLoader.load('/textures/door/roughness.jpg')

// HOW TO REPEAT TILES - uv wrapping
const repeat = 10;

const grassColorTexture = textureLoader.load('/textures/grass/color.jpg')
const grassNormalTexture = textureLoader.load('/textures/grass/normal.jpg')
const grassRoughnessTexture = textureLoader.load('/textures/grass/roughness.jpg')

grassColorTexture.repeat.set(repeat,repeat)
grassNormalTexture.repeat.set(repeat,repeat)
grassRoughnessTexture.repeat.set(repeat,repeat)

grassColorTexture.wrapS = THREE.RepeatWrapping
grassNormalTexture.wrapS = THREE.RepeatWrapping
grassRoughnessTexture.wrapS = THREE.RepeatWrapping

grassColorTexture.wrapT = THREE.RepeatWrapping
grassNormalTexture.wrapT = THREE.RepeatWrapping
grassRoughnessTexture.wrapT = THREE.RepeatWrapping

//...

/**
* Objects
*/

// Door
const door = new THREE.Mesh(
new THREE.PlaneGeometry(2,2,100,100),// HEIGHTMAP NEEDS SOME SUBDIVISIONS
new THREE.MeshStandardMaterial({
map: doorColorTexture,
transparent: true, // NEEDED FOR ALPHA TO WORK
alphaMap: doorAlphaTexture,
aoMap: doorAmbientOcclusionTexture,
displacementMap: doorHeightTexture,
displacementScale: 0.05,
normalMap: doorNormalTexture,
metalnessMap: doorMetalnessTexture,
roughnessMap: doorRoughnessTexture,
//wireframe: true
})
)
// AOMAP NEEDS HIS OWN UV ATTRIBUTE (here we copy from geometry)
door.geometry.setAttribute('uv2', new THREE.Float32BufferAttribute(door.geometry.attributes.uv.array, 2))

house.add(door)

// Floor
const floor = new THREE.Mesh(
new THREE.PlaneGeometry(20, 20),
new THREE.MeshStandardMaterial({
//color: '#a9c388',
map: grassColorTexture,
normalMap: grassNormalTexture,
roughnessMap: grassRoughnessTexture
})
)

floor.rotation.x = - Math.PI * 0.5
floor.position.y = 0

scene.add(floor)
</syntaxhighlight>

== Materials ==
[[three.js - materials]] - Mehr Info und weitere Materialien.

=== MeshBasicMaterial ===
<syntaxhighlight lang="javascript">
const material = new THREE.MeshBasicMaterial()
material.color.set(0xaabb00)
material.map = doorColorTexture
material.side = DoubleSide
material.wireframe = true
material.transparent = true
material.opacity = 0.5
material.alphaMap = doorAlphaTexture
</syntaxhighlight>

=== MeshMatcapMaterial ===
https://github.com/nidorx/matcaps - gute Quelle
<syntaxhighlight lang="javascript">
// MATCAP - simulate lights / good for modelling
const textureLoader = new THREE.TextureLoader()
const matcapTexture = textureLoader.load('textures/matcaps/1.jpg')
const material = new THREE.MeshMatcapMaterial()
material.matcap = matcapTexture
</syntaxhighlight>

=== MeshStandardMaterial ===
Standard Physical Based Rendering Material

<syntaxhighlight lang="javascript">
// TEXTURES
const textureLoader = new THREE.TextureLoader()
const doorColorTexture = textureLoader.load('textures/door/color.jpg')
const doorAlphaTexture = textureLoader.load('textures/door/alpha.jpg')
const doorAmbientOcclusionTexture = textureLoader.load('textures/door/ambientOcclusion.jpg')
const doorHeightTexture = textureLoader.load('textures/door/height.jpg')
const doorMetalnessTexture = textureLoader.load('textures/door/metalness.jpg')
const doorNormalTexture = textureLoader.load('textures/door/normal.jpg')
const doorRoughnessTexture = textureLoader.load('textures/door/roughness.jpg')

// STANDARD MATERIAL
const material = new THREE.MeshStandardMaterial()
material.side = DoubleSide
material.map = doorColorTexture

material.roughness = 1 // default
material.roughnessMap = doorRoughnessTexture

material.metalness = 0 // default
material.metalnessMap = doorMetalnessTexture

material.aoMap = doorAmbientOcclusionTexture
material.aoMapIntensity = 1.1

material.displacementMap = doorHeightTexture
material.displacementScale = 0.03

material.normalMap = doorNormalTexture
material.normalScale.set(0.5,0.5)

material.transparent = true // needed for alpha to work
material.alphaMap = doorAlphaTexture

// OBJECTS
const plane = new THREE.Mesh(
new THREE.PlaneGeometry(1,1,100,100), // subdivisions needed for height map
material
)
// copy uv coordinates to uv2 attribute needed by aomap
plane.geometry.setAttribute(
'uv2',
new THREE.BufferAttribute(plane.geometry.attributes.uv.array,2)
)
</syntaxhighlight>

=== Environment Map ===
[[Three.js - Environment Map (Panorama)]]

<syntaxhighlight lang="javascript">
// ENVIRONMENTAL MAP
const cubeTextureLoader = new THREE.CubeTextureLoader()
// load cube-images in the right order...
const environmentMapTexture = cubeTextureLoader.load([
'/textures/environmentMaps/4/px.png',
'/textures/environmentMaps/4/nx.png',
'/textures/environmentMaps/4/py.png',
'/textures/environmentMaps/4/ny.png',
'/textures/environmentMaps/4/pz.png',
'/textures/environmentMaps/4/nz.png',
])
const material = new THREE.MeshStandardMaterial()
material.envMap = environmentMapTexture
material.metalness = 0.7
material.roughness = 0.2

gui.add(material, 'metalness').min(0).max(1).step(0.0001)
gui.add(material, 'roughness').min(0).max(1).step(0.0001)

</syntaxhighlight>

=== Hinweise ===
Eigenschaften kann man als Konstruktor Objekt übergeben oder direkt setzen oder über set (manchmal praktischer, wenn als Eigenschaftswert ein Objekt erwartet wird (z.B. bei der Farbe ein Farbobjekt)

== 3D Text ==
[[Three.js - 3D Text]]
http://gero3.github.io/facetype.js/ - Konvertieren von Fonts nach Facetype
=== Fontloader ===
Hinweis: Seit three.js 133 muss der Fontloader und die Fontgeometry importiert werden.
https://threejs.org/docs/index.html?q=fontloa#examples/en/loaders/FontLoader
====Basic Example====
<syntaxhighlight lang="javascript">
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js'
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js'//i.e. with webpack
//...
/**
* Fonts
*/
const fontLoader = new FontLoader()

fontLoader.load(
//'/fonts/helvetiker_regular.typeface.json',
'/fonts/BebasNeueBook_Regular.json',
(font) =>
{
console.log('font loaded')
const textGeometry = new TextGeometry(
'KHOLJA',
{
font: font,
size: 0.5,
height: 0.2, // more like extrusion depth
curveSegments: 8,
bevelEnabled: true,
bevelThickness: 0.03,
bevelSize: 0.01,
bevelOffset: 0,
bevelSegments: 4
}
)
textGeometry.center() // easy method to center the text
const textMaterial = new THREE.MeshBasicMaterial()
textMaterial.wireframe = true
const text = new THREE.Mesh(textGeometry,textMaterial)
scene.add(text)
}
)
</syntaxhighlight>

== Lights ==
[[Three.js - Lights]]
=== Light Starters ===
==== Neutral Starter ====
<syntaxhighlight lang="javascript">
/**
* Lights
*/
// Ambient light
const ambientLight = new THREE.AmbientLight('#ffffff', 0.5)
gui.add(ambientLight, 'intensity').min(0).max(1).step(0.001)
scene.add(ambientLight)

// Directional light
const directionalLight = new THREE.DirectionalLight('#ffffff', 0.5)
directionalLight.position.set(4, 5, - 2)
gui.add(directionalLight, 'intensity').min(0).max(1).step(0.001)
gui.add(directionalLight.position, 'x').min(- 5).max(5).step(0.001)
gui.add(directionalLight.position, 'y').min(- 5).max(5).step(0.001)
gui.add(directionalLight.position, 'z').min(- 5).max(5).step(0.001)
scene.add(moonLight)
</syntaxhighlight>

==== Moonlight Starter ====
<syntaxhighlight lang="javascript">
/**
* Lights
*/
// Ambient light
const ambientLight = new THREE.AmbientLight('#b9d5ff', 0.5)
gui.add(ambientLight, 'intensity').min(0).max(1).step(0.001)
scene.add(ambientLight)

// Directional light
const moonLight = new THREE.DirectionalLight('#b9d5ff', 0.5)
moonLight.position.set(4, 5, - 2)
gui.add(moonLight, 'intensity').min(0).max(1).step(0.001)
gui.add(moonLight.position, 'x').min(- 5).max(5).step(0.001)
gui.add(moonLight.position, 'y').min(- 5).max(5).step(0.001)
gui.add(moonLight.position, 'z').min(- 5).max(5).step(0.001)
scene.add(moonLight)
</syntaxhighlight>

== Shadows / Schatten ==
[[Three.js - Shadows]] - Ausführliche Infos zu Schatten

=== Komplettes Beispiel ===
<syntaxhighlight lang="javascript">
//...
/**
* Lights
*/
// Ambient light
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
gui.add(ambientLight, 'intensity').min(0).max(1).step(0.001)
scene.add(ambientLight)

// Directional light
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
directionalLight.position.set(2, 2, - 1)
gui.add(directionalLight, 'intensity').min(0).max(1).step(0.001)
gui.add(directionalLight.position, 'x').min(- 5).max(5).step(0.001)
gui.add(directionalLight.position, 'y').min(- 5).max(5).step(0.001)
gui.add(directionalLight.position, 'z').min(- 5).max(5).step(0.001)

// Add Shadow and mapsize
directionalLight.castShadow = true
directionalLight.shadow.mapSize.x = 1024
directionalLight.shadow.mapSize.y = 1024
// Shadow camera settings...
directionalLight.shadow.camera.near = 1
directionalLight.shadow.camera.far = 6
// ...important for quality
directionalLight.shadow.camera.left = -2
directionalLight.shadow.camera.right = 2
directionalLight.shadow.camera.top = 2
directionalLight.shadow.camera.bottom = -2
// adding a bit of a cheap blur
// directionalLight.shadow.radius = 4

scene.add(directionalLight)

// Shadow camera helper
const directionalLightCameraHelper = new THREE.CameraHelper(directionalLight.shadow.camera)
scene.add(directionalLightCameraHelper)

// ...

/**
* Objects
*/
sphere.castShadow = true
// ...
plane.receiveShadow = true
// ...
scene.add(sphere, plane)

/**
* Renderer
*/
const renderer = new THREE.WebGLRenderer({
canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

// Renderer Shadowmap settings
renderer.shadowMap.enabled = true
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
</syntaxhighlight>

==== Shadow Baking ====
Wie Texturen kann man auch Schatten baken. Nachteil. Bei Bewegung des Objekts bewegt sich der
<syntaxhighlight lang="javascript">
/**
* Textures
*/
const textureLoader = new THREE.TextureLoader()
const bakedShadow = textureLoader.load('/textures/bakedShadow.jpg')
//...
const plane = new THREE.Mesh(
new THREE.PlaneGeometry(5, 5),
new THREE.MeshBasicMaterial({
map: bakedShadow
})
)
// we don't need the rendered shadows in this case
renderer.shadowMap.enabled = false
</syntaxhighlight>

==== Dynamic Shadow Baking ====
'''Beispiel Kugel mit animiertem Fake-Schatten'''
<syntaxhighlight lang="javascript">
const textureLoader = new THREE.TextureLoader()
const simpleShadow = textureLoader.load('/textures/simpleShadow.jpg')

// Sphere Shadow
const sphereShadow = new THREE.Mesh(
new THREE.PlaneGeometry(1.5, 1.5),
new THREE.MeshBasicMaterial({
color: 0x000000,
transparent: true,
alphaMap: simpleShadow
})
)
sphereShadow.rotation.x = - Math.PI * 0.5
sphereShadow.position.y = plane.position.y + 0.01

scene.add(sphere, sphereShadow, plane)

//...

/**
* Animate
*/
const clock = new THREE.Clock()

const tick = () =>
{
const elapsedTime = clock.getElapsedTime()

// Update the sphere
sphere.position.x = Math.cos(elapsedTime) * 1.5
sphere.position.z = Math.sin(elapsedTime) * 1.5
sphere.position.y = Math.abs(Math.sin(elapsedTime * 3))

// Update the shadow accordingly
sphereShadow.position.x = sphere.position.x
sphereShadow.position.z = sphere.position.z
sphereShadow.material.opacity = (1 - sphere.position.y) * 0.3

// Update controls
controls.update()

// Render
renderer.render(scene, camera)

// Call tick again on the next frame
window.requestAnimationFrame(tick)
}

tick()
</syntaxhighlight>

== Fog ==
[[Three.js - Fog]]
<syntaxhighlight lang="javascript">
//...
// Fog
const fog = new THREE.Fog('#262837', 1, 15)
scene.fog = fog
//...
renderer.setClearColor('#262837')
</syntaxhighlight>

== Particles ==
Benötigen eine Geometry, ein Material, ein Points Objekt (statt wie sonst ein Mesh)
[[Three.js - Particles]]
Starter Example
<syntaxhighlight lang="javascript">
/**
* Particles
*/
// Geometry
const particlesGeometry = new THREE.SphereBufferGeometry(1,32,32)
// Material
const particlesMaterial = new THREE.PointsMaterial({
size: 0.02,
sizeAttenuation: true, //perspective smaller if far
})
// Points
const particles = new THREE.Points(particlesGeometry, particlesMaterial)
scene.add(particles)
</syntaxhighlight>

== Models Importieren ==
[[Three.js - Import Models]]

== Starters ==
[[Three.js - Starters]]

== Helpers ==
=== Nützliche Renderer Settings ===
<syntaxhighlight lang="javascript">
/**
* Renderer
*/
const renderer = new THREE.WebGLRenderer({
canvas: canvas,
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.setClearColor('#262837')
</syntaxhighlight>
=== Nützliche Animation Settings ===
<syntaxhighlight lang="javascript">
/**
* Animate
*/
const clock = new THREE.Clock()

const tick = () =>
{
const elapsedTime = clock.getElapsedTime()

// Update material (used for own Shader only)
material.uniforms.uTime.value = elapsedTime

// Update controls (used for orbit controls only)
controls.update()

// Render
renderer.render(scene, camera)

// Call tick again on the next frame
window.requestAnimationFrame(tick)
}

tick()
</syntaxhighlight>
=== Orbit Controls ===
Don't forget to update in tick function, when animating
<syntaxhighlight lang="javascript">
// Controls
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true
</syntaxhighlight>

=== Optimizations ===
==== Materialien und Geometrien wiederverwenden ====
Das Erstellen von komplexen Objekten kann zeit- und speicherintensiv sein.
<syntaxhighlight lang="javascript">
console.time('donuts')
for(let i = 0; i < 100; i++)
{
const donutGeometry = new THREE.TorusGeometry(0.3, 0.2, 20, 45)
const donutMaterial = new THREE.MeshMatcapMaterial({ matcap: matcapTexture })
const donut = new THREE.Mesh(donutGeometry, donutMaterial)
scene.add(donut)
}
console.timeend('donuts')
</syntaxhighlight>
Zwei Zeilen umgestellt aber weit '''über 100mal schneller !'''
<syntaxhighlight lang="javascript">
console.time('donuts')
const donutGeometry = new THREE.TorusGeometry(0.3, 0.2, 20, 45)
const donutMaterial = new THREE.MeshMatcapMaterial({ matcap: matcapTexture })
for(let i = 0; i < 100; i++)
{
const donut = new THREE.Mesh(donutGeometry, donutMaterial)
scene.add(donut)
}
console.timeend('donuts')
</syntaxhighlight>

=== Nützliche Schnipsel ===
==== Objekte auf Ringbahn positionieren ====
<syntaxhighlight lang="javascript">
// Graveyard
const graves = new THREE.Group()
scene.add(graves)
const graveGeometry = new THREE.BoxGeometry(0.6, 0.8, 0.2)
const graveMaterial = new THREE.MeshStandardMaterial({color: '#b2b6b1'})

for (let i = 0; i < 50; i++) {
const min = 4 // minimaler Radius
const max = 8.5 // maximaler Radius
const radius = min + Math.random() * (max-min)// Radius zwischen min und max
const angle = Math.random() * 2*Math.PI // 0 < angle < 2PI (voller Kreis im Bogenmaß)
// (Bogen)Winkel in x,z Koordinaten umrechnen. Ohne * radius wäre Abstand 1
const x = Math.sin(angle) * radius
const z = Math.cos(angle) * radius
const y = 0.35

const grave = new THREE.Mesh(graveGeometry, graveMaterial)
grave.position.set(x,y,z)
// Setze Grabsteine leicht schief und verdreht
grave.rotation.y = (Math.random() - 0.5) * 0.4
grave.rotation.z = (Math.random() - 0.5) * 0.3

graves.add(grave)
}
</syntaxhighlight>

=== Cool Colors ===
<pre>
#ac8e82 - brown walls
#a9c388 - green night grass
#89c854 - green bush
#b35f45 - greek roof red
#b2b6b1 - grey tombstone
#b9d5ff - blue moonlight
#ff7d49 - orange warm light
#262837 - blueish fog
</pre>

ThreeJS - Snippets

2022-01-05T09:14:16Z

134.3.241.3: /* Particles */

== Links ==
[[ThreeJS]]
[[Three.js - Particles]]
[[Three.js - Shaders]]

== Helfer ==
=== Axes Helper ===
Koordinatenachsen anzeigen
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

== Viewport Settings ==

=== Handle Viewport Resizing ===
<syntaxhighlight lang="javascript">
window.addEventListener('resize', () =>{
console.log('window resized')
// Update sizes
sizes.width = window.innerWidth
sizes.height = window.innerHeight
// Update camera
camera.aspect = sizes.width/sizes.height
camera.updateProjectionMatrix()
// Update renderer
renderer.setSize(sizes.width,sizes.height)
renderer.setPixelRatio( Math.min(window.devicePixelRatio, 2) ) // in case monitor changed in double monitor settings
})
</syntaxhighlight>

=== Handle Pixel Ratio Setting (Retina Displays) ===
Retina Displays haben eine Pixel Ratio von 2. D.h. das Display kann einen "Software"Bildpixel nochmal auf 4 physische Pixel verteilen und damit vor allem Vektoren nochmal '''schärfer''' darstellen. ThreeJS kann diese zusätzlichen Pixel ebenfalls nutzen wenn man dem renderer die Pixel Ratio mitgibt. Allerdings muss der Renderer auch mehr tun.

Moderne Handys haben Ratios bis zu 5, das ist allerdings sinnlos mehr als 2 oder 3 sehen wir bei normalem Betrachtungsabstand eh nicht. Deshalb setzen wir wenn möglich einen Ratio so hoch wie das Gerät kann aber '''nicht höher als 2''' um die Performance zu erhalten.

<syntaxhighlight lang="javascript">
renderer.setPixelRatio( Math.min(window.devicePixelRatio, 2) )
</syntaxhighlight>

=== Handle Fullscreen Mode ===

<syntaxhighlight lang="javascript">
// Handle Fullscreen
// including safari (needs webkit prefix)
window.addEventListener('dblclick', () =>
{
const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement

if(!fullscreenElement)
{
if(canvas.requestFullscreen)
{
canvas.requestFullscreen()
}
else if(canvas.webkitRequestFullscreen)
{
canvas.webkitRequestFullscreen()
}
}
else
{
if(document.exitFullscreen)
{
document.exitFullscreen()
}
else if(document.webkitExitFullscreen)
{
document.webkitExitFullscreen()
}
}
})
</syntaxhighlight>

== Animation Basics ==
[[Three.js - Animation]]
=== Timebased Tick / Loop Function ===
==== 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>

== Nützliche Snippets für Animationen ==

=== Kreisbewegung / Circular Movement ===
myObject.position.y = Math.sin(elapsedTime) //(-1 -> 1 -> -1 -> ...)
myObject.position.x = Math.cos(elapsedTime)

=== Cursor auswerten ===
<syntaxhighlight lang="javascript">
// Sizes
const sizes = { width: 800, height: 600}
// Cursor
const cursor = {
x: 0,
y: 0
}
window.addEventListener('mousemove', (event) =>
{
//cursor.x = event.clientX / sizes.width // 0 <= x <= 1
cursor.x = event.clientX / sizes.width - 0.5// -0.5 <= x <= +0.5
cursor.y = event.clientY / sizes.height - 0.5// -0.5 <= x <= +0.5
console.log('x: ' + cursor.x)
console.log('y: ' + cursor.y)
})
// ...
// Update camera with position
camera.position.x = cursor.x * 10
camera.position.y = cursor.y * 10
</syntaxhighlight>

=== Kamera auf einer Kreisbahn ===
Das obige Beispiel läßt sich ausbauen. Die Mausbewegung gibt uns nun cursor.x Werte von -0.5 bis 0.5. Wenn wir auf zwei Achsen sinus und cosinus kombinieren bekommen wir eine '''Kreisbahn um den Mittelpunkt''' auf der Ebene dieser beiden Achsen. Eine '''volle Umdrehung''' bekommen wir wenn wir mit 2xPi multiplizieren. Den Abstand vergrößern wir wenn wir das Ergebnis mit irgendeinem Faktor multiplizieren.

<syntaxhighlight lang="javascript">
// Update camera
camera.position.x = Math.sin(cursor.x * 2 * Math.PI) * 3
camera.position.z = Math.cos(cursor.x * 2 * Math.PI) * 3
camera.position.y = cursor.y * 5 // damit wir auch etwas von oben oder unten schauen können
camera.lookAt(mesh.position) // look at center
</syntaxhighlight>

Für eine Kreisbahn um ein Objekt das nicht im Mittelpunkt ist, müßten wir noch die Koordinaten des Objekts auslesen und zu den Kamerakoordinaten addieren. So könnten wir den kompletten Kreis verschieben.

=== Bouncing Sphere + Shadow ===
<syntaxhighlight lang="javascript">
// Update the sphere
sphere.position.x = Math.cos(elapsedTime) * 1.5
sphere.position.z = Math.sin(elapsedTime) * 1.5
sphere.position.y = Math.abs(Math.sin(elapsedTime * 3))

// Update the shadow accordingly
sphereShadow.position.x = sphere.position.x
sphereShadow.position.z = sphere.position.z
sphereShadow.material.opacity = (1 - sphere.position.y) * 0.3
</syntaxhighlight>

== Orbit Controls ==
https://threejs.org/docs/index.html?q=controls#examples/en/controls/OrbitControls
ThreeJS spart mit eigenen Control Klassen eine Menge Arbeit. OrbitControls müssen zusätzlich geladen werden. Also in HTML
<script src="/javascripts/OrbitControls.js"></script>
Oder z.B. in Webpack:
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
Dann erstellt man einfach ein OrbitControl Objekt und übergibt die Kamera und ein DOM Objekt (i.d.R. das Canvas).
const controls = new OrbitControls(camera,canvas)

== Geometry Snippets ==
=== Create Geometry / Geometry Objekt erzeugen ===
[[Three.js - eigene Geometrie erzeugen]]
Beispiel: viele zufällige Dreiecke erzeugen
<syntaxhighlight lang="javascript">
// Object
// const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2)
const geometry = new THREE.BufferGeometry()
const count = 50
const positionsArray = new Float32Array(count * 3 * 3)
for (let i = 0; i < positionsArray.length; i++) {
positionsArray[i] = Math.random() - 0.5 //-0.5 < x < 0.5
}
const positionsAttribute = new THREE.BufferAttribute(positionsArray,3) // use vals 3 by 3
geometry.setAttribute('position',positionsAttribute) // position is the attribute name in shaders

// Example Array
// const positionsArray = new Float32Array([
// 0,0,0,
// 0,1,0,
// 1,0,0
// ])
</syntaxhighlight>

== Debugging ==
=== lil-gui ===
<syntaxhighlight lang="javascript">
// https://lil-gui.georgealways.com/#
import GUI from 'lil-gui';
/**
* Debug
*/
const gui = new GUI({
width:400
})
gui.close()
//...
// Debug
//gui.add(mesh.position,'y',-2,2,0.1) // OR
gui.add(mesh.position,'y')
.min(-2)
.max(3)
.step(0.1)
.name('elevation') // chain version
gui.add(mesh,'visible')
gui.add(material,'wireframe')
// we can not use material.color as it's not an object
// thus we use a separately created object...
// ... and update material when this param changed:
gui.addColor(params,'color')
.onChange( ()=>
{
material.color.set(params.color)
})
gui.add(params, 'spin')
</syntaxhighlight>

== Textures ==
https://threejs.org/docs/index.html?q=texture#api/en/constants/Textures
[[three.js - Textures]] - ausführliche Infos zu TextureLoader Callbacks, LoadingManager...

=== Beispiel ===
<syntaxhighlight lang="javascript">
/**
* Textures
*/
const textureLoader = new THREE.TextureLoader()

const doorColorTexture = textureLoader.load('/textures/door/color.jpg')
const doorAlphaTexture = textureLoader.load('/textures/door/alpha.jpg')
const doorAmbientOcclusionTexture = textureLoader.load('/textures/door/ambientOcclusion.jpg')
const doorHeightTexture = textureLoader.load('/textures/door/height.jpg')
const doorNormalTexture = textureLoader.load('/textures/door/normal.jpg')
const doorMetalnessTexture = textureLoader.load('/textures/door/metalness.jpg')
const doorRoughnessTexture = textureLoader.load('/textures/door/roughness.jpg')

// HOW TO REPEAT TILES - uv wrapping
const repeat = 10;

const grassColorTexture = textureLoader.load('/textures/grass/color.jpg')
const grassNormalTexture = textureLoader.load('/textures/grass/normal.jpg')
const grassRoughnessTexture = textureLoader.load('/textures/grass/roughness.jpg')

grassColorTexture.repeat.set(repeat,repeat)
grassNormalTexture.repeat.set(repeat,repeat)
grassRoughnessTexture.repeat.set(repeat,repeat)

grassColorTexture.wrapS = THREE.RepeatWrapping
grassNormalTexture.wrapS = THREE.RepeatWrapping
grassRoughnessTexture.wrapS = THREE.RepeatWrapping

grassColorTexture.wrapT = THREE.RepeatWrapping
grassNormalTexture.wrapT = THREE.RepeatWrapping
grassRoughnessTexture.wrapT = THREE.RepeatWrapping

//...

/**
* Objects
*/

// Door
const door = new THREE.Mesh(
new THREE.PlaneGeometry(2,2,100,100),// HEIGHTMAP NEEDS SOME SUBDIVISIONS
new THREE.MeshStandardMaterial({
map: doorColorTexture,
transparent: true, // NEEDED FOR ALPHA TO WORK
alphaMap: doorAlphaTexture,
aoMap: doorAmbientOcclusionTexture,
displacementMap: doorHeightTexture,
displacementScale: 0.05,
normalMap: doorNormalTexture,
metalnessMap: doorMetalnessTexture,
roughnessMap: doorRoughnessTexture,
//wireframe: true
})
)
// AOMAP NEEDS HIS OWN UV ATTRIBUTE (here we copy from geometry)
door.geometry.setAttribute('uv2', new THREE.Float32BufferAttribute(door.geometry.attributes.uv.array, 2))

house.add(door)

// Floor
const floor = new THREE.Mesh(
new THREE.PlaneGeometry(20, 20),
new THREE.MeshStandardMaterial({
//color: '#a9c388',
map: grassColorTexture,
normalMap: grassNormalTexture,
roughnessMap: grassRoughnessTexture
})
)

floor.rotation.x = - Math.PI * 0.5
floor.position.y = 0

scene.add(floor)
</syntaxhighlight>

== Materials ==
[[three.js - materials]] - Mehr Info und weitere Materialien.

=== MeshBasicMaterial ===
<syntaxhighlight lang="javascript">
const material = new THREE.MeshBasicMaterial()
material.color.set(0xaabb00)
material.map = doorColorTexture
material.side = DoubleSide
material.wireframe = true
material.transparent = true
material.opacity = 0.5
material.alphaMap = doorAlphaTexture
</syntaxhighlight>

=== MeshMatcapMaterial ===
https://github.com/nidorx/matcaps - gute Quelle
<syntaxhighlight lang="javascript">
// MATCAP - simulate lights / good for modelling
const textureLoader = new THREE.TextureLoader()
const matcapTexture = textureLoader.load('textures/matcaps/1.jpg')
const material = new THREE.MeshMatcapMaterial()
material.matcap = matcapTexture
</syntaxhighlight>

=== MeshStandardMaterial ===
Standard Physical Based Rendering Material

<syntaxhighlight lang="javascript">
// TEXTURES
const textureLoader = new THREE.TextureLoader()
const doorColorTexture = textureLoader.load('textures/door/color.jpg')
const doorAlphaTexture = textureLoader.load('textures/door/alpha.jpg')
const doorAmbientOcclusionTexture = textureLoader.load('textures/door/ambientOcclusion.jpg')
const doorHeightTexture = textureLoader.load('textures/door/height.jpg')
const doorMetalnessTexture = textureLoader.load('textures/door/metalness.jpg')
const doorNormalTexture = textureLoader.load('textures/door/normal.jpg')
const doorRoughnessTexture = textureLoader.load('textures/door/roughness.jpg')

// STANDARD MATERIAL
const material = new THREE.MeshStandardMaterial()
material.side = DoubleSide
material.map = doorColorTexture

material.roughness = 1 // default
material.roughnessMap = doorRoughnessTexture

material.metalness = 0 // default
material.metalnessMap = doorMetalnessTexture

material.aoMap = doorAmbientOcclusionTexture
material.aoMapIntensity = 1.1

material.displacementMap = doorHeightTexture
material.displacementScale = 0.03

material.normalMap = doorNormalTexture
material.normalScale.set(0.5,0.5)

material.transparent = true // needed for alpha to work
material.alphaMap = doorAlphaTexture

// OBJECTS
const plane = new THREE.Mesh(
new THREE.PlaneGeometry(1,1,100,100), // subdivisions needed for height map
material
)
// copy uv coordinates to uv2 attribute needed by aomap
plane.geometry.setAttribute(
'uv2',
new THREE.BufferAttribute(plane.geometry.attributes.uv.array,2)
)
</syntaxhighlight>

=== Environment Map ===
[[Three.js - Environment Map (Panorama)]]

<syntaxhighlight lang="javascript">
// ENVIRONMENTAL MAP
const cubeTextureLoader = new THREE.CubeTextureLoader()
// load cube-images in the right order...
const environmentMapTexture = cubeTextureLoader.load([
'/textures/environmentMaps/4/px.png',
'/textures/environmentMaps/4/nx.png',
'/textures/environmentMaps/4/py.png',
'/textures/environmentMaps/4/ny.png',
'/textures/environmentMaps/4/pz.png',
'/textures/environmentMaps/4/nz.png',
])
const material = new THREE.MeshStandardMaterial()
material.envMap = environmentMapTexture
material.metalness = 0.7
material.roughness = 0.2

gui.add(material, 'metalness').min(0).max(1).step(0.0001)
gui.add(material, 'roughness').min(0).max(1).step(0.0001)

</syntaxhighlight>

=== Hinweise ===
Eigenschaften kann man als Konstruktor Objekt übergeben oder direkt setzen oder über set (manchmal praktischer, wenn als Eigenschaftswert ein Objekt erwartet wird (z.B. bei der Farbe ein Farbobjekt)

== 3D Text ==
[[Three.js - 3D Text]]
http://gero3.github.io/facetype.js/ - Konvertieren von Fonts nach Facetype
=== Fontloader ===
Hinweis: Seit three.js 133 muss der Fontloader und die Fontgeometry importiert werden.
https://threejs.org/docs/index.html?q=fontloa#examples/en/loaders/FontLoader
====Basic Example====
<syntaxhighlight lang="javascript">
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js'
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js'//i.e. with webpack
//...
/**
* Fonts
*/
const fontLoader = new FontLoader()

fontLoader.load(
//'/fonts/helvetiker_regular.typeface.json',
'/fonts/BebasNeueBook_Regular.json',
(font) =>
{
console.log('font loaded')
const textGeometry = new TextGeometry(
'KHOLJA',
{
font: font,
size: 0.5,
height: 0.2, // more like extrusion depth
curveSegments: 8,
bevelEnabled: true,
bevelThickness: 0.03,
bevelSize: 0.01,
bevelOffset: 0,
bevelSegments: 4
}
)
textGeometry.center() // easy method to center the text
const textMaterial = new THREE.MeshBasicMaterial()
textMaterial.wireframe = true
const text = new THREE.Mesh(textGeometry,textMaterial)
scene.add(text)
}
)
</syntaxhighlight>

== Lights ==
[[Three.js - Lights]]
=== Light Starters ===
==== Neutral Starter ====
<syntaxhighlight lang="javascript">
/**
* Lights
*/
// Ambient light
const ambientLight = new THREE.AmbientLight('#ffffff', 0.5)
gui.add(ambientLight, 'intensity').min(0).max(1).step(0.001)
scene.add(ambientLight)

// Directional light
const directionalLight = new THREE.DirectionalLight('#ffffff', 0.5)
directionalLight.position.set(4, 5, - 2)
gui.add(directionalLight, 'intensity').min(0).max(1).step(0.001)
gui.add(directionalLight.position, 'x').min(- 5).max(5).step(0.001)
gui.add(directionalLight.position, 'y').min(- 5).max(5).step(0.001)
gui.add(directionalLight.position, 'z').min(- 5).max(5).step(0.001)
scene.add(moonLight)
</syntaxhighlight>

==== Moonlight Starter ====
<syntaxhighlight lang="javascript">
/**
* Lights
*/
// Ambient light
const ambientLight = new THREE.AmbientLight('#b9d5ff', 0.5)
gui.add(ambientLight, 'intensity').min(0).max(1).step(0.001)
scene.add(ambientLight)

// Directional light
const moonLight = new THREE.DirectionalLight('#b9d5ff', 0.5)
moonLight.position.set(4, 5, - 2)
gui.add(moonLight, 'intensity').min(0).max(1).step(0.001)
gui.add(moonLight.position, 'x').min(- 5).max(5).step(0.001)
gui.add(moonLight.position, 'y').min(- 5).max(5).step(0.001)
gui.add(moonLight.position, 'z').min(- 5).max(5).step(0.001)
scene.add(moonLight)
</syntaxhighlight>

== Shadows / Schatten ==
[[Three.js - Shadows]] - Ausführliche Infos zu Schatten

=== Komplettes Beispiel ===
<syntaxhighlight lang="javascript">
//...
/**
* Lights
*/
// Ambient light
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
gui.add(ambientLight, 'intensity').min(0).max(1).step(0.001)
scene.add(ambientLight)

// Directional light
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
directionalLight.position.set(2, 2, - 1)
gui.add(directionalLight, 'intensity').min(0).max(1).step(0.001)
gui.add(directionalLight.position, 'x').min(- 5).max(5).step(0.001)
gui.add(directionalLight.position, 'y').min(- 5).max(5).step(0.001)
gui.add(directionalLight.position, 'z').min(- 5).max(5).step(0.001)

// Add Shadow and mapsize
directionalLight.castShadow = true
directionalLight.shadow.mapSize.x = 1024
directionalLight.shadow.mapSize.y = 1024
// Shadow camera settings...
directionalLight.shadow.camera.near = 1
directionalLight.shadow.camera.far = 6
// ...important for quality
directionalLight.shadow.camera.left = -2
directionalLight.shadow.camera.right = 2
directionalLight.shadow.camera.top = 2
directionalLight.shadow.camera.bottom = -2
// adding a bit of a cheap blur
// directionalLight.shadow.radius = 4

scene.add(directionalLight)

// Shadow camera helper
const directionalLightCameraHelper = new THREE.CameraHelper(directionalLight.shadow.camera)
scene.add(directionalLightCameraHelper)

// ...

/**
* Objects
*/
sphere.castShadow = true
// ...
plane.receiveShadow = true
// ...
scene.add(sphere, plane)

/**
* Renderer
*/
const renderer = new THREE.WebGLRenderer({
canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

// Renderer Shadowmap settings
renderer.shadowMap.enabled = true
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
</syntaxhighlight>

==== Shadow Baking ====
Wie Texturen kann man auch Schatten baken. Nachteil. Bei Bewegung des Objekts bewegt sich der
<syntaxhighlight lang="javascript">
/**
* Textures
*/
const textureLoader = new THREE.TextureLoader()
const bakedShadow = textureLoader.load('/textures/bakedShadow.jpg')
//...
const plane = new THREE.Mesh(
new THREE.PlaneGeometry(5, 5),
new THREE.MeshBasicMaterial({
map: bakedShadow
})
)
// we don't need the rendered shadows in this case
renderer.shadowMap.enabled = false
</syntaxhighlight>

==== Dynamic Shadow Baking ====
'''Beispiel Kugel mit animiertem Fake-Schatten'''
<syntaxhighlight lang="javascript">
const textureLoader = new THREE.TextureLoader()
const simpleShadow = textureLoader.load('/textures/simpleShadow.jpg')

// Sphere Shadow
const sphereShadow = new THREE.Mesh(
new THREE.PlaneGeometry(1.5, 1.5),
new THREE.MeshBasicMaterial({
color: 0x000000,
transparent: true,
alphaMap: simpleShadow
})
)
sphereShadow.rotation.x = - Math.PI * 0.5
sphereShadow.position.y = plane.position.y + 0.01

scene.add(sphere, sphereShadow, plane)

//...

/**
* Animate
*/
const clock = new THREE.Clock()

const tick = () =>
{
const elapsedTime = clock.getElapsedTime()

// Update the sphere
sphere.position.x = Math.cos(elapsedTime) * 1.5
sphere.position.z = Math.sin(elapsedTime) * 1.5
sphere.position.y = Math.abs(Math.sin(elapsedTime * 3))

// Update the shadow accordingly
sphereShadow.position.x = sphere.position.x
sphereShadow.position.z = sphere.position.z
sphereShadow.material.opacity = (1 - sphere.position.y) * 0.3

// Update controls
controls.update()

// Render
renderer.render(scene, camera)

// Call tick again on the next frame
window.requestAnimationFrame(tick)
}

tick()
</syntaxhighlight>

== Fog ==
[[Three.js - Fog]]
<syntaxhighlight lang="javascript">
//...
// Fog
const fog = new THREE.Fog('#262837', 1, 15)
scene.fog = fog
//...
renderer.setClearColor('#262837')
</syntaxhighlight>

== Particles ==
Benötigen eine Geometry, ein Material, ein Points Objekt (statt wie sonst ein Mesh)
[[Three.js - Particles]]
Starter Example
<syntaxhighlight lang="javascript">
/**
* Particles
*/
// Geometry
const particlesGeometry = new THREE.SphereBufferGeometry(1,32,32)
// Material
const particlesMaterial = new THREE.PointsMaterial({
size: 0.02,
sizeAttenuation: true, //perspective smaller if far
})
// Points
const particles = new THREE.Points(particlesGeometry, particlesMaterial)
scene.add(particles)
</syntaxhighlight>

== Models Importieren ==
Three.js - Import Models

== Starters ==
[[Three.js - Starters]]

== Helpers ==
=== Nützliche Renderer Settings ===
<syntaxhighlight lang="javascript">
/**
* Renderer
*/
const renderer = new THREE.WebGLRenderer({
canvas: canvas,
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.setClearColor('#262837')
</syntaxhighlight>
=== Nützliche Animation Settings ===
<syntaxhighlight lang="javascript">
/**
* Animate
*/
const clock = new THREE.Clock()

const tick = () =>
{
const elapsedTime = clock.getElapsedTime()

// Update material (used for own Shader only)
material.uniforms.uTime.value = elapsedTime

// Update controls (used for orbit controls only)
controls.update()

// Render
renderer.render(scene, camera)

// Call tick again on the next frame
window.requestAnimationFrame(tick)
}

tick()
</syntaxhighlight>
=== Orbit Controls ===
Don't forget to update in tick function, when animating
<syntaxhighlight lang="javascript">
// Controls
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true
</syntaxhighlight>

=== Optimizations ===
==== Materialien und Geometrien wiederverwenden ====
Das Erstellen von komplexen Objekten kann zeit- und speicherintensiv sein.
<syntaxhighlight lang="javascript">
console.time('donuts')
for(let i = 0; i < 100; i++)
{
const donutGeometry = new THREE.TorusGeometry(0.3, 0.2, 20, 45)
const donutMaterial = new THREE.MeshMatcapMaterial({ matcap: matcapTexture })
const donut = new THREE.Mesh(donutGeometry, donutMaterial)
scene.add(donut)
}
console.timeend('donuts')
</syntaxhighlight>
Zwei Zeilen umgestellt aber weit '''über 100mal schneller !'''
<syntaxhighlight lang="javascript">
console.time('donuts')
const donutGeometry = new THREE.TorusGeometry(0.3, 0.2, 20, 45)
const donutMaterial = new THREE.MeshMatcapMaterial({ matcap: matcapTexture })
for(let i = 0; i < 100; i++)
{
const donut = new THREE.Mesh(donutGeometry, donutMaterial)
scene.add(donut)
}
console.timeend('donuts')
</syntaxhighlight>

=== Nützliche Schnipsel ===
==== Objekte auf Ringbahn positionieren ====
<syntaxhighlight lang="javascript">
// Graveyard
const graves = new THREE.Group()
scene.add(graves)
const graveGeometry = new THREE.BoxGeometry(0.6, 0.8, 0.2)
const graveMaterial = new THREE.MeshStandardMaterial({color: '#b2b6b1'})

for (let i = 0; i < 50; i++) {
const min = 4 // minimaler Radius
const max = 8.5 // maximaler Radius
const radius = min + Math.random() * (max-min)// Radius zwischen min und max
const angle = Math.random() * 2*Math.PI // 0 < angle < 2PI (voller Kreis im Bogenmaß)
// (Bogen)Winkel in x,z Koordinaten umrechnen. Ohne * radius wäre Abstand 1
const x = Math.sin(angle) * radius
const z = Math.cos(angle) * radius
const y = 0.35

const grave = new THREE.Mesh(graveGeometry, graveMaterial)
grave.position.set(x,y,z)
// Setze Grabsteine leicht schief und verdreht
grave.rotation.y = (Math.random() - 0.5) * 0.4
grave.rotation.z = (Math.random() - 0.5) * 0.3

graves.add(grave)
}
</syntaxhighlight>

=== Cool Colors ===
<pre>
#ac8e82 - brown walls
#a9c388 - green night grass
#89c854 - green bush
#b35f45 - greek roof red
#b2b6b1 - grey tombstone
#b9d5ff - blue moonlight
#ff7d49 - orange warm light
#262837 - blueish fog
</pre>

Three.js - eigene Geometrie erzeugen

2022-01-04T11:03:24Z

134.3.241.3: /* BufferGeometry - Geometrie eines Objekts */

https://threejs.org/manual/?q=geometr#en/custom-buffergeometry
== BufferGeometry - Geometrie eines Objekts ==
'''BufferGeometry''' ist das Objekt mit dem Three.js alle '''geometrischen Daten''' darstellt. Eine BufferGeometry ist wiederum eine '''Zusammenstellung von mehreren BufferAttribute''' Objekten.

Jedes BufferAttribute steht für einen Typ von Daten:
positions
normals
colors
uv
...
Jeder Vertex hat für jedes Attribut ein Set an Daten. Jeder Punkt bekommt also Infos über Position, Farbe etc. Achtung: Ein Würfel hat an einer Ecke 3 Vertices, da er 3 Flächen in unterschiedlicher Richtung hat. Die Normalen sind also Unterschiedlich. Sobald ein Wert sich ändert benötigt man einen neuen Vertex. Eine Ecke eines Würfels hat also 3 Vertices.

== Geometrien erstellen ==
=== Der Weg zur Geometrie ===
* Arrays für Attribute erzeugen (am besten Typed Array wg. Performance)
* BufferGeometry Objekt erzeugen
* BufferAttribute Objekte erzeugen die jeweils Werte für alle Vertices enthalten und an die Geometrie übergeben.
=== Wie sehen die Geometrien aus ===
Beispiel Würfel.
siehe Link oben.

//TODO

2022-01-01T12:47:03Z

134.3.241.3: /* Beispiel Attribut setzen und nutzen */

Three.js - Shaders

2022-01-01T12:44:13Z

134.3.241.3: /* Beispiel Attribut setzen und nutzen */