-
Overview
+
Overview
Within the three.js animation system you can animate various properties of your models:
@@ -46,7 +46,7 @@
Overview
-
Animation Clips
+
Animation Clips
@@ -63,7 +63,7 @@
Animation Clips
-
Keyframe Tracks
+
Keyframe Tracks
@@ -81,7 +81,7 @@
Keyframe Tracks
-
Animation Mixer
+
Animation Mixer
@@ -92,7 +92,7 @@
Animation Mixer
-
Animation Actions
+
Animation Actions
@@ -105,7 +105,7 @@
Animation Actions
-
Animation Object Groups
+
Animation Object Groups
@@ -114,7 +114,7 @@
Animation Object Groups
-
Supported Formats and Loaders
+
Note that not all model formats include animation (OBJ notably does not), and that only some
@@ -135,7 +135,7 @@
Supported Formats and Loaders
on the same timeline) directly to a single file.
-
Example
+
Example
let mesh;
diff --git a/manual/pages/color-management.html b/manual/pages/color-management.html
index 158a7fec308c11..21d1ef88c3ff7a 100644
--- a/manual/pages/color-management.html
+++ b/manual/pages/color-management.html
@@ -69,7 +69,7 @@ Color Management
-
What is a color space?
+
What is a color space?
Every color space is a collection of several design decisions, chosen together to support a
@@ -159,7 +159,7 @@
What is a color space?
-
Roles of color spaces
+
Roles of color spaces
Linear workflows — required for modern rendering methods — generally involve more than
@@ -167,7 +167,7 @@
Roles of color spaces
appropriate for different roles, explained below.
-
Input color space
+
Colors supplied to three.js — from color pickers, textures, 3D models, and other sources —
@@ -218,7 +218,7 @@
Input color space
-
Working color space
+
Working color space
Rendering, interpolation, and many other operations must be performed in an open domain
@@ -226,7 +226,7 @@
Working color space
illumination. In three.js, the working color space is Linear-sRGB.
-
Output color space
+
Output color space
Output to a display device, image, or video may involve conversion from the open domain
@@ -263,7 +263,7 @@
Output color space
For instances of `ShaderMaterial`, adding the `colorspace_fragment` shader chunk to the fragment shader's `main()` function should be sufficient.
-
Working with THREE.Color instances
+
Working with THREE.Color instances
Methods reading or modifying `Color` instances assume data is already in the
@@ -308,7 +308,7 @@
Working with THREE.Color instances
console.log( color.getHex( SRGBColorSpace ) ); // → 0xBCBCBC
-
Common mistakes
+
Common mistakes
When an individual color or texture is misconfigured, it will appear darker or lighter than
@@ -327,7 +327,7 @@
Common mistakes
("display referred").
-
Further reading
+
Further reading
-
diff --git a/manual/pages/creating-a-scene.html b/manual/pages/creating-a-scene.html
index 443480ab48eddb..975b3743bafabc 100644
--- a/manual/pages/creating-a-scene.html
+++ b/manual/pages/creating-a-scene.html
@@ -29,13 +29,13 @@
Creating a scene
The goal of this section is to give a brief introduction to three.js. We will start by setting up a scene, with a spinning cube. A working example is provided at the bottom of the page in case you get stuck and need help.
- Before we start
+ Before we start
If you haven't yet, go through the `Installation` guide. We'll assume you've already set up the same project structure (including index.html and main.js), have installed three.js, and are either running a build tool, or using a local server with a CDN and import maps.
- Creating the scene
+ Creating the scene
To actually be able to display anything with three.js, we need three things: scene, camera and renderer, so that we can render the scene with camera.
@@ -87,7 +87,7 @@ Creating the scene
By default, when we call `scene.add()`, the thing we add will be added to the coordinates `(0,0,0)`. This would cause both the camera and the cube to be inside each other. To avoid this, we simply move the camera out a bit.
- Rendering the scene
+ Rendering the scene
If you copied the code from above into the main.js file we created earlier, you wouldn't be able to see anything. This is because we're not actually rendering anything yet. For that, we need what's called a render or animation loop.
@@ -100,7 +100,7 @@ Rendering the scene
This will create a loop that causes the renderer to draw the scene every time the screen is refreshed (on a typical screen this means 60 times per second). If you're new to writing games in the browser, you might say "why don't we just create a setInterval ?" The thing is - we could, but `requestAnimationFrame` which is internally used in `WebGLRenderer` has a number of advantages. Perhaps the most important one is that it pauses when the user navigates to another browser tab, hence not wasting their precious processing power and battery life.
- Animating the cube
+ Animating the cube
If you insert all the code above into the file you created before we began, you should see a green box. Let's make it all a little more interesting by rotating it.
@@ -113,7 +113,7 @@ Animating the cube
This will be run every frame (normally 60 times per second), and give the cube a nice rotation animation. Basically, anything you want to move or change while the app is running has to go through the animation loop. You can of course call other functions from there, so that you don't end up with an `animate` function that's hundreds of lines.
- The result
+ The result
Congratulations! You have now completed your first three.js application. It's simple, but you have to start somewhere.
The full code is available below and as an editable [link:https://jsfiddle.net/zycqb61k/ live example]. Play around with it to get a better understanding of how it works.
diff --git a/manual/pages/creating-text.html b/manual/pages/creating-text.html
index 55746dbb444601..7242825fac0f43 100644
--- a/manual/pages/creating-text.html
+++ b/manual/pages/creating-text.html
@@ -34,7 +34,7 @@ Creating Text
-
1. DOM + CSS
+
1. DOM + CSS
Using HTML is generally the easiest and fastest manner to add text. This is the method
@@ -63,7 +63,7 @@
1. DOM + CSS
-
2. Use `CSS2DRenderer` or `CSS3DRenderer`
+
2. Use `CSS2DRenderer` or `CSS3DRenderer`
Use these renderers to draw high-quality text contained in DOM elements to your three.js scene.
@@ -72,19 +72,19 @@
2. Use `CSS2DRenderer` or `CSS3DRenderer`
-
3. Draw text to canvas and use as a `Texture`
+
3. Draw text to canvas and use as a `Texture`
Use this method if you wish to draw text easily on a plane in your three.js scene.
-
4. Create a model in your favourite 3D application and export to three.js
+
4. Create a model in your favourite 3D application and export to three.js
Use this method if you prefer working with your 3d applications and importing the models to three.js.
-
5. Procedural Text Geometry
+
5. Procedural Text Geometry
If you prefer to work purely in THREE.js or to create procedural and dynamic 3D
@@ -101,7 +101,7 @@
5. Procedural Text Geometry
accepted parameter, and a list of the JSON fonts that come with the THREE.js distribution itself.
-
Examples
+
Examples
[example:webgl_geometry_text WebGL / geometry / text]
@@ -117,7 +117,7 @@
Examples
-
6. Bitmap Fonts
+
6. Bitmap Fonts
BMFonts (bitmap fonts) allow batching glyphs into a single BufferGeometry. BMFont rendering
@@ -141,7 +141,7 @@
6. Bitmap Fonts
-
7. Troika Text
+
7. Troika Text
The [link:https://www.npmjs.com/package/troika-three-text troika-three-text] package renders
diff --git a/manual/pages/faq.html b/manual/pages/faq.html
index 16adfc074d7939..768c0d7dcb60e2 100644
--- a/manual/pages/faq.html
+++ b/manual/pages/faq.html
@@ -27,7 +27,7 @@
FAQ
-
Which 3D model format is best supported?
+
The recommended format for importing and exporting assets is glTF (GL Transmission Format). Because glTF is focused on runtime asset delivery, it is compact to transmit and fast to load.
@@ -37,7 +37,7 @@
Which 3D model format is best supported?
-
Why are there meta viewport tags in examples?
+
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
@@ -48,7 +48,7 @@
Why are there meta viewport tags in examples?
[link:https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag MDN: Using the viewport meta tag]
-
How can scene scale be preserved on resize?
+
How can scene scale be preserved on resize?
We want all objects, regardless of their distance from the camera, to appear the same size, even as the window is resized.
@@ -62,19 +62,19 @@
How can scene scale be preserved on resize?
[link:http://jsfiddle.net/Q4Jpu/ Example].
-
Why is part of my object invisible?
+
Why is part of my object invisible?
This could be because of face culling. Faces have an orientation that decides which side is which. And the culling removes the backside in normal circumstances.
To see if this is your problem, change the material side to THREE.DoubleSide.
material.side = THREE.DoubleSide
-
Why does three.js sometimes return strange results for invalid inputs?
+
For performance reasons, three.js doesn't validate inputs in most cases. It's your app's responsibility to make sure that all inputs are valid.
-
Can I use three.js in Node.js?
+
Can I use three.js in Node.js?
Because three.js is built for the web, it depends on browser and DOM APIs that don't always exist in Node.js. Some of these issues can be avoided by using shims like
[link:https://github.com/stackgl/headless-gl headless-gl] and [link:https://github.com/rstacruz/jsdom-global jsdom-global], or by replacing components like `TextureLoader`
diff --git a/manual/pages/fundamentals.html b/manual/pages/fundamentals.html
index f006992ccdb36e..6c4b6642c0e33e 100644
--- a/manual/pages/fundamentals.html
+++ b/manual/pages/fundamentals.html
@@ -354,7 +354,7 @@
Fundamentals
I hope this short intro helps to get things started. Next up we'll cover
making our code responsive so it is adaptable to multiple situations.
-
es6 modules, three.js, and folder structure
+
es6 modules, three.js, and folder structure
As of version r147 the preferred way to use three.js is via es6 modules and import maps.
es6 modules can be loaded via the import keyword in a script
diff --git a/manual/pages/how-to-create-vr-content.html b/manual/pages/how-to-create-vr-content.html
index 53b120ed83ee1e..c9ac8c7855d4da 100644
--- a/manual/pages/how-to-create-vr-content.html
+++ b/manual/pages/how-to-create-vr-content.html
@@ -32,7 +32,7 @@
How to create VR content
made with three.js.
-
Workflow
+
Workflow
First, you have to include [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/webxr/VRButton.js VRButton.js]
@@ -75,7 +75,7 @@
Workflow
} );
-
Next Steps
+
Next Steps
Have a look at one of the official WebVR examples to see this workflow in action.
diff --git a/manual/pages/how-to-dispose-of-objects.html b/manual/pages/how-to-dispose-of-objects.html
index 6095c875db6544..c04bcf520c5960 100644
--- a/manual/pages/how-to-dispose-of-objects.html
+++ b/manual/pages/how-to-dispose-of-objects.html
@@ -35,7 +35,7 @@
How to dispose of Objects
This guide provides a brief overview about how this API is used and what objects are relevant in this context.
-
Geometries
+
Geometries
A geometry usually represents vertex information defined as a collection of attributes. *three.js* internally creates an object of type [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLBuffer WebGLBuffer]
@@ -43,7 +43,7 @@
Geometries
execute the method to free all related resources.
-
Materials
+
Materials
A material defines how objects are rendered. *three.js* uses the information of a material definition in order to construct a shader program for rendering.
@@ -52,7 +52,7 @@
Materials
executing `Material.dispose()`.
-
Textures
+
Textures
The disposal of a material has no effect on textures. They are handled separately since a single texture can be used by multiple materials at the same time.
@@ -65,7 +65,7 @@
Textures
An automated call of `ImageBitmap.close()` in `Texture.dispose()` is not possible, since the image bitmap becomes unusable, and the engine has no way of knowing if the image bitmap is used elsewhere.
-
Render Targets
+
Render Targets
Objects of type `WebGLRenderTarget` not only allocate an instance of [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture WebGLTexture] but also
@@ -73,23 +73,23 @@
Render Targets
for realizing custom rendering destinations. These objects are only deallocated by executing `WebGLRenderTarget.dispose()`.
-
Skinned Mesh
+
Skinned Mesh
Skinned meshes represent their bone hierarchy as skeletons. If you don't need a skinned mesh anymore, consider to call `Skeleton.dispose()` on the skeleton to free internal resources.
Keep in mind that skeletons can be shared across multiple skinned meshes, so only call `dispose()` if the skeleton is not used by other active skinned meshes.
-
Miscellaneous
+
Miscellaneous
There are other classes from the examples directory like controls or post processing passes which provide `dispose()` methods in order to remove internal event listeners
or render targets. In general, it's recommended to check the API or documentation of a class and watch for `dispose()`. If present, you should use it when cleaning things up.
-
FAQ
+
FAQ
-
Why can't *three.js* dispose objects automatically?
+
Why can't *three.js* dispose objects automatically?
This question was asked many times by the community so it's important to clarify this matter. Fact is that *three.js* does not know the lifetime or scope
@@ -98,13 +98,13 @@
Why can't *three.js* dispose objects automatically?
`dispose()` method.
-
Does removing a mesh from the scene also dispose its geometry and material?
+
Does removing a mesh from the scene also dispose its geometry and material?
No, you have to explicitly dispose the geometry and material via *dispose()*. Keep in mind that geometries and materials can be shared among 3D objects like meshes.
-
Does *three.js* provide information about the amount of cached objects?
+
Yes. It's possible to evaluate `renderer.info`, a special property of the renderer with a series of statistical information about the graphics board memory
@@ -112,14 +112,14 @@
Does *three.js* provide information about the amount of cached objects?
in your application, it's a good idea to debug this property in order to easily identify a memory leak.
-
What happens when you call `dispose()` on a texture but the image is not loaded yet?
+
What happens when you call `dispose()` on a texture but the image is not loaded yet?
Internal resources for a texture are only allocated if the image has fully loaded. If you dispose a texture before the image was loaded,
nothing happens. No resources were allocated so there is also no need for clean up.
-
What happens when I call `dispose()` and then use the respective object at a later point?
+
What happens when I call `dispose()` and then use the respective object at a later point?
That depends. For geometries, materials, textures, render targets and post processing passes the deleted internal resources can be created again by the engine.
@@ -128,7 +128,7 @@
What happens when I call `dispose()` and then use the respective object at a
Controls and renderers are an exception. Instances of these classes can not be used after `dispose()` has been called. You have to create new instances in this case.
- How should I manage *three.js* objects in my app? When do I know how to dispose things?
+ How should I manage *three.js* objects in my app? When do I know how to dispose things?
In general, there is no definite recommendation for this. It highly depends on the specific use case when calling `dispose()` is appropriate. It's important to highlight that
@@ -137,7 +137,7 @@
How should I manage *three.js* objects in my app? When do I know how to disp
produce a runtime error if you dispose an object that is actually still in use. The worst thing that can happen is performance drop for a single frame.
- Why `renderer.info.memory` is still reporting geometries and textures after traversing the scene and disposing all reachable textures and geometries?
+ Why `renderer.info.memory` is still reporting geometries and textures after traversing the scene and disposing all reachable textures and geometries?
In certain cases, there are some textures and geometries used internally by Three.js
@@ -149,7 +149,7 @@
Why `renderer.info.memory` is still reporting geometries and textures after
or other contexts that would require the engine to create textures or geometries for internal use.
- Examples that demonstrate the usage of dispose()
+ Examples that demonstrate the usage of dispose()
[example:webgl_test_memory WebGL / test / memory]
diff --git a/manual/pages/how-to-update-things.html b/manual/pages/how-to-update-things.html
index e508f6ffaaa4a4..8ea13f06b389dc 100644
--- a/manual/pages/how-to-update-things.html
+++ b/manual/pages/how-to-update-things.html
@@ -50,7 +50,7 @@
How to update Things
object.updateMatrix();
-
BufferGeometry
+
BufferGeometry
BufferGeometries store information (such as vertex positions, face indices, normals, colors,
@@ -140,7 +140,7 @@
BufferGeometry
[link:https://jsfiddle.net/t4m85pLr/1/ Here is a fiddle] showing an animated line which you can adapt to your use case.
-
Examples
+
Examples
[example:webgl_custom_attributes WebGL / custom / attributes]
@@ -149,7 +149,7 @@
Examples
-
Materials
+
Materials
All uniforms values can be changed freely (e.g. colors, textures, opacity, etc), values are sent to the shader every frame.
@@ -180,12 +180,12 @@
Materials
You can freely change the material used for geometry chunks, however you cannot change how an object is divided into chunks (according to face materials).
-
If you need to have different configurations of materials during runtime:
+
If you need to have different configurations of materials during runtime:
If the number of materials / chunks is small, you could pre-divide the object beforehand (e.g. hair / face / body / upper clothes / trousers for a human, front / sides / top / glass / tire / interior for a car).
If the number is large (e.g. each face could be potentially different), consider a different solution, such as using attributes / textures to drive different per-face look.
-
Examples
+
Examples
[example:webgl_materials_car WebGL / materials / car]
[example:webgl_postprocessing_dof WebGL / webgl_postprocessing / dof]
@@ -193,7 +193,7 @@
Examples
-
Textures
+
Textures
Image, canvas, video and data textures need to have the following flag set if they are changed:
@@ -201,7 +201,7 @@ Textures
Render targets update automatically.
-
Examples
+
Examples
[example:webgl_materials_video WebGL / materials / video]
[example:webgl_rtt WebGL / rtt]
@@ -209,7 +209,7 @@
Examples
-
Cameras
+
Cameras
A camera's position and target is updated automatically. If you need to change
@@ -235,7 +235,7 @@ Cameras
-
InstancedMesh
+
InstancedMesh
`InstancedMesh` is a class for conveniently access instanced rendering in `three.js`. Certain library features like view frustum culling or
@@ -253,7 +253,7 @@
InstancedMesh
-
SkinnedMesh
+
SkinnedMesh
`SkinnedMesh` follows the same principles like `InstancedMesh` in context of bounding volumes. Meaning the class has its own version of
diff --git a/manual/pages/how-to-use-post-processing.html b/manual/pages/how-to-use-post-processing.html
index 6c57904e6639e0..9d443d408ab322 100644
--- a/manual/pages/how-to-use-post-processing.html
+++ b/manual/pages/how-to-use-post-processing.html
@@ -38,7 +38,7 @@
How to use Post Processing
three.js provides a complete post-processing solution via `EffectComposer` to implement such a workflow.
-
Workflow
+
Workflow
The first step in the process is to import all necessary files from the examples directory. The guide assumes you are using the official
@@ -99,14 +99,14 @@
Workflow
Check out this [link:https://threejs.org/examples/webgl_postprocessing_glitch live example] to see it in action.
-
Built-in Passes
+
Built-in Passes
You can use a wide range of pre-defined post-processing passes provided by the engine. They are located in the
[link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing postprocessing] directory.
-
Custom Passes
+
Custom Passes
Sometimes you want to write a custom post-processing shader and include it into the chain of post-processing passes. For this scenario,
diff --git a/manual/pages/installation.html b/manual/pages/installation.html
index af6fc7a59e47f2..759e522ea3450b 100644
--- a/manual/pages/installation.html
+++ b/manual/pages/installation.html
@@ -27,7 +27,7 @@
Installation
-
Project structure
+
Project structure
Every three.js project needs at least one HTML file to define the webpage, and a JavaScript file to run your three.js code. The structure and naming choices below aren't required, but will be used throughout this guide for consistency.
@@ -74,9 +74,9 @@
Project structure
Now that we've set up the basic project structure, we need a way to run the project locally and access it through a web browser. Installation and local development can be accomplished with npm and a build tool, or by importing three.js from a CDN. Both options are explained in the sections below.
-
Option 1: Install with NPM and a build tool
+
-
Development
+
Development
Installing from the [link:https://www.npmjs.com/ npm package registry] and using a [link:https://eloquentjavascript.net/10_modules.html#h_zWTXAU93DC build tool] is the recommended approach for most users — the more dependencies your project needs, the more likely you are to run into problems that the static hosting cannot easily resolve. With a build tool, importing local JavaScript files and npm packages should work out of the box, without import maps.
@@ -153,15 +153,15 @@
Development
-
Production
+
Production
Later, when you're ready to deploy your web application, you'll just need to tell Vite to run a production build — npx vite build. Everything used by the application will be compiled, optimized, and copied into the dist/ folder. The contents of that folder are ready to be hosted on your website.
-
Option 2: Import from a CDN
+
Option 2: Import from a CDN
-
Development
+
Development
Installing without build tools will require some changes to the project structure given above.
@@ -209,7 +209,7 @@
Development
More local servers
- Command Line
+ Command Line
Command line local servers run from a terminal window. The associated programming language may need to be installed first.
@@ -222,7 +222,7 @@ Command Line
- GUI
+ GUI
GUI local servers run as an application window on your computer, and may have a user interface.
@@ -230,7 +230,7 @@ GUI
[link:https://greggman.github.io/servez Servez]
- Code Editor Plugins
+ Code Editor Plugins
Some code editors have plugins that spawn a simple server on demand.
@@ -243,7 +243,7 @@ Code Editor Plugins
-
Production
+
Production
When you're ready to deploy your web application, push the source files to your web hosting provider — no need to build or compile anything. The downside of that tradeoff is that you'll need to be careful to keep the import map updated with any dependencies (and dependencies of dependencies!) that your application requires. If the CDN hosting your dependencies goes down temporarily, your website will stop working too.
@@ -276,7 +276,7 @@
Addons
Some excellent third-party projects are available for three.js, too. These need to be installed separately — see
Libraries and Plugins.
-
Next Steps
+
Next Steps
You're now ready to create a scene.
diff --git a/manual/pages/libraries-and-plugins.html b/manual/pages/libraries-and-plugins.html
index 6e7eba45650cfa..25e8290ebb9801 100644
--- a/manual/pages/libraries-and-plugins.html
+++ b/manual/pages/libraries-and-plugins.html
@@ -33,7 +33,7 @@
Libraries and Plugins
to be up to date. If you'd like to update this list make a PR!
-
Physics
+
Physics
- [link:https://github.com/lo-th/Oimo.js/ Oimo.js]
@@ -45,7 +45,7 @@ Physics
-
Postprocessing
+
Postprocessing
In addition to the [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing official three.js postprocessing effects],
@@ -56,19 +56,19 @@
Postprocessing
[link:https://github.com/vanruesc/postprocessing postprocessing]
-
Intersection and Raycast Performance
+
- [link:https://github.com/gkjohnson/three-mesh-bvh three-mesh-bvh]
-
Path Tracing
+
Path Tracing
- [link:https://github.com/gkjohnson/three-gpu-pathtracer three-gpu-pathtracer]
-
File Formats
+
In addition to the [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders official three.js loaders],
@@ -82,27 +82,27 @@
File Formats
[link:https://github.com/IFCjs/web-ifc-three IFC.js]
-
Geometry
+
Geometry
- [link:https://github.com/spite/THREE.MeshLine THREE.MeshLine]
-
3D Text and Layout
+
3D Text and Layout
- [link:https://github.com/protectwise/troika/tree/master/packages/troika-three-text troika-three-text]
- [link:https://github.com/felixmariotto/three-mesh-ui three-mesh-ui]
-
Particle Systems
+
Particle Systems
- [link:https://github.com/Alchemist0823/three.quarks three.quarks]
- [link:https://github.com/creativelifeform/three-nebula three-nebula]
-
Inverse Kinematics
+
Inverse Kinematics
- [link:https://github.com/jsantell/THREE.IK THREE.IK]
@@ -110,7 +110,7 @@ Inverse Kinematics
- [link:https://github.com/gkjohnson/closed-chain-ik-js closed-chain-ik]
-
Game AI
+
Game AI
- [link:https://mugen87.github.io/yuka/ yuka]
@@ -118,7 +118,7 @@ Game AI
- [link:https://github.com/isaac-mason/recast-navigation-js recast-navigation-js]
-
Wrappers and Frameworks
+
Wrappers and Frameworks
- [link:https://aframe.io/ A-Frame]
diff --git a/manual/pages/loading-3d-models.html b/manual/pages/loading-3d-models.html
index cdcfd919644567..98fa0af0ff7f6b 100644
--- a/manual/pages/loading-3d-models.html
+++ b/manual/pages/loading-3d-models.html
@@ -42,7 +42,7 @@ Loading 3D Models
for what to try if things don't go as expected.
- Before we start
+ Before we start
If you're new to running a local server, begin with
@@ -51,7 +51,7 @@
Before we start
correctly.
- Recommended workflow
+ Recommended workflow
Where possible, we recommend using glTF (GL Transmission Format). Both
@@ -92,7 +92,7 @@
Recommended workflow
are also available and regularly maintained.
- Loading
+ Loading
Only a few loaders (e.g. `ObjectLoader`) are included by default with
@@ -123,7 +123,7 @@
Loading
} );
- Troubleshooting
+ Troubleshooting
You've spent hours modeling an artisanal masterpiece, you load it into
@@ -162,7 +162,7 @@
Troubleshooting
- Asking for help
+ Asking for help
If you've gone through the troubleshooting process above and your model
diff --git a/manual/pages/materials.html b/manual/pages/materials.html
index b3e6ace3eae542..0276d54e686b8d 100644
--- a/manual/pages/materials.html
+++ b/manual/pages/materials.html
@@ -263,7 +263,7 @@
Materials
we need to take a break and cover
setting up your development environment
-
material.needsUpdate
+
material.needsUpdate
This topic rarely affects most three.js apps but just as an FYI...
Three.js applies material settings when a material is used where "used"
diff --git a/manual/pages/matrix-transformations.html b/manual/pages/matrix-transformations.html
index 54a83d8c15c9a0..91e4f72354e198 100644
--- a/manual/pages/matrix-transformations.html
+++ b/manual/pages/matrix-transformations.html
@@ -31,7 +31,7 @@
Matrix Transformations
Three.js uses `matrices` to encode 3D transformations---translations (position), rotations, and scaling. Every instance of `Object3D` has a `matrix` which stores that object's position, rotation, and scale. This page describes how to update an object's transformation.
-
Convenience properties and `matrixAutoUpdate`
+
Convenience properties and `matrixAutoUpdate`
There are two ways to update an object's transformation:
@@ -65,7 +65,7 @@
Convenience properties and `matrixAutoUpdate`
-
Object and world matrices
+
Object and world matrices
An object's matrix stores the object's transformation relative to the object's parent; to get the object's transformation in world coordinates, you must access the object's world matrix.
@@ -76,7 +76,7 @@
Object and world matrices
An object can be transformed via `applyMatrix4()`. Note: Under-the-hood, this method relies on `Matrix4.decompose()`, and not all matrices are decomposable in this way. For example, if an object has a non-uniformly scaled parent, then the object's world matrix may not be decomposable, and this method may not be appropriate.
-
Rotation and Quaternion
+
Rotation and Quaternion
Three.js provides two ways of representing 3D rotations: Euler angles and Quaternions, as well as methods for converting between the two. Euler angles are subject to a problem called "gimbal lock," where certain configurations can lose a degree of freedom (preventing the object from being rotated about one axis). For this reason, object rotations are always stored in the object's quaternion.
diff --git a/manual/pages/physics.html b/manual/pages/physics.html
index ec85322ec00932..c783bf7db795cf 100644
--- a/manual/pages/physics.html
+++ b/manual/pages/physics.html
@@ -52,13 +52,13 @@
Physics
application requiring realistic object behavior, such as objects falling, bouncing, or sliding.
-
Integration Approaches
+
Integration Approaches
There are three main ways to integrate a physics engine into a three.js project:
-
1. Using Three.js Physics Addons
+
1. Using Three.js Physics Addons
Three.js provides wrapper classes for several popular physics engines in the
@@ -81,7 +81,7 @@
1. Using Three.js Physics Addons
cases, they offer a very quick way to get started.
-
+
Examples
- 2. Using 3rd-Party Physics JS/TS Libraries
+ 2. Using 3rd-Party Physics JS/TS Libraries
Many physics engines are written directly in JavaScript or TypeScript and are designed to work
@@ -104,7 +104,7 @@
2. Using 3rd-Party Physics JS/TS Libraries
-
+
Projects
@@ -121,7 +121,7 @@
- enable3d: 3D physics framework for three.js built on top of ammo.js. Under LGPL-3.0 license. Apparently maintained.
- 3. Importing WASM-based Engines
+ 3. Importing WASM-based Engines
For maximum performance, stability, and precision, especially with complex simulations, you can use physics engines written in
@@ -134,7 +134,7 @@
3. Importing WASM-based Engines
to handle the WASM memory management and interaction with the physics API directly.
-
+
Examples
-
+
Projects
diff --git a/manual/pages/uniform-types.html b/manual/pages/uniform-types.html
index 658d36f0e1e4fb..3fb904008c5f86 100644
--- a/manual/pages/uniform-types.html
+++ b/manual/pages/uniform-types.html
@@ -184,7 +184,7 @@ Uniform Types
containing the components of all vectors or matrices in the array.
- Structured Uniforms
+
Sometimes you want to organize uniforms as `structs` in your shader code.
@@ -210,7 +210,7 @@
Structured Uniforms
uniform Data data;
- Structured Uniforms with Arrays
+
It's also possible to manage `structs` in arrays. The syntax for this use
diff --git a/manual/pages/useful-links.html b/manual/pages/useful-links.html
index 7e176b0f2f1faf..5e509d7facc2bc 100644
--- a/manual/pages/useful-links.html
+++ b/manual/pages/useful-links.html
@@ -37,15 +37,15 @@
Useful Links
check the browser console for warnings or errors. Also check the relevant docs pages.
- Help forums
+ Help forums
Three.js officially uses the [link:https://discourse.threejs.org/ forum] and [link:http://stackoverflow.com/tags/three.js/info Stack Overflow] for help requests.
If you need assistance with something, that's the place to go. Do NOT open an issue on Github for help requests.
- Tutorials and courses
+ Tutorials and courses
- Getting started with three.js
+ Getting started with three.js
-
[link:https://threejs.org/manual/#fundamentals Three.js Fundamentals starting lesson]
@@ -58,7 +58,7 @@
Getting started with three.js
- More extensive / advanced articles and courses
+ More extensive / advanced articles and courses
-
[link:https://threejs-journey.com/ Three Journey] Course by [link:https://bruno-simon.com/ Bruno Simon] - Teaches beginners how to use Three.js step by step
@@ -85,7 +85,7 @@
More extensive / advanced articles and courses
- News and Updates
+ News and Updates
-
[link:https://twitter.com/hashtag/threejs Three.js on Twitter]
@@ -98,7 +98,7 @@
News and Updates
- Examples
+ Examples
-
[link:https://github.com/edwinwebb/three-seed/ three-seed] - three.js starter project with ES6 and Webpack
@@ -118,7 +118,7 @@
Examples
- Tools
+
-
[link:https://github.com/tbensky/physgl physgl.org] - JavaScript front-end with wrappers to three.js, to bring WebGL
@@ -143,14 +143,14 @@
Tools
- WebGL References
+ WebGL References
-
[link:https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf webgl-reference-card.pdf] - Reference of all WebGL and GLSL keywords, terminology, syntax and definitions.
- Old Links
+ Old Links
These links are kept for historical purposes - you may still find them useful, but be warned that
they may have information relating to very old versions of three.js.
diff --git a/manual/pages/webgpu-postprocessing.html b/manual/pages/webgpu-postprocessing.html
index 5fdb7fc57bfce5..39b6ea41391dab 100644
--- a/manual/pages/webgpu-postprocessing.html
+++ b/manual/pages/webgpu-postprocessing.html
@@ -32,7 +32,7 @@
Post-Processing with WebGPURenderer
works and provides some basic guidelines about the usage.
- Overview
+ Overview
The previous post-processing for `WebGLRenderer` had many conceptual issues. Making use of Multiple Render Targets
@@ -58,7 +58,7 @@
Overview
Let's find out how to integrate post-processing in three.js applications.
- Basics
+ Basics
First, please read the instructions in the guide about WebGPURenderer to correctly configure your
@@ -115,7 +115,7 @@
Basics
renderPipeline.outputNode = rgbShiftPass;
- Tone Mapping and Color Spaces
+ Tone Mapping and Color Spaces
When using post-processing, tone mapping and color space conversion are automatically applied at the end
@@ -147,7 +147,7 @@
Tone Mapping and Color Spaces
based on your requirements.
- MRT
+ MRT
The new post-processing stack has built-in Multiple Render Targets (MRT) support which is crucial for more advanced
diff --git a/manual/pages/webgpurenderer.html b/manual/pages/webgpurenderer.html
index cb54a6311a8783..063ae11f4840a3 100644
--- a/manual/pages/webgpurenderer.html
+++ b/manual/pages/webgpurenderer.html
@@ -32,7 +32,7 @@
WebGPURenderer
renderer and basic guidelines about the usage.
- Overview
+ Overview
`WebGPURenderer` is designed to be the modern alternative to the long-standing `WebGLRenderer`.
@@ -65,7 +65,7 @@
Overview
Let's find out how to integrate `WebGPURenderer` in three.js applications.
- Usage
+ Usage
`WebGPURenderer` has different build files so the way you import three.js changes:
@@ -133,7 +133,7 @@
Usage
+ const renderer = new THREE.WebGPURenderer( { antialias: true, forceWebGL: true } );
- Migration
+ Migration
If you want to give `WebGPURenderer` a try, you have to be aware of the following.
@@ -160,7 +160,7 @@
Migration
- State of WebGLRenderer
+ State of WebGLRenderer
Although in the meanwhile a lot of work happens in context of `WebGPURenderer`, the node material and TSL, `WebGLRenderer` is still maintained
and the recommended choice for pure WebGL 2 applications. However, keep in mind that there are no plans to add larger new features to
diff --git a/package-lock.json b/package-lock.json
index ca1d9e261f9a1b..4594ce729096e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -188,9 +188,9 @@
}
},
"node_modules/@eslint/eslintrc": {
- "version": "3.3.5",
- "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.5.tgz",
- "integrity": "sha512-4IlJx0X0qftVsN5E+/vGujTRIFtwuLbNsVUe7TO6zYPDR1O6nFwvwhIKEKSrl6dZchmYBITazxKoUYOjdtjlRg==",
+ "version": "3.3.6",
+ "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.6.tgz",
+ "integrity": "sha512-l2Ul9PrHsPCKcEY/ac7VgFj9D80C7S68sOKc618SyHDPK36s1XcFebXY0iTzUVn4Yq+YbwvSnDmCz9yxjX+QrA==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -200,7 +200,7 @@
"globals": "^14.0.0",
"ignore": "^5.2.0",
"import-fresh": "^3.2.1",
- "js-yaml": "^4.1.1",
+ "js-yaml": "^4.3.0",
"minimatch": "^3.1.5",
"strip-json-comments": "^3.1.1"
},
@@ -225,9 +225,9 @@
}
},
"node_modules/@eslint/js": {
- "version": "9.39.4",
- "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.4.tgz",
- "integrity": "sha512-nE7DEIchvtiFTwBw4Lfbu59PG+kCofhjsKaCWzxTpt4lfRjRMqG6uMBzKXuEcyXhOHoUp9riAm7/aWYGhXZ9cw==",
+ "version": "9.39.5",
+ "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.5.tgz",
+ "integrity": "sha512-QywQuszQh77pIXCsq998c8hbhSTI/azTty1Z6N53dmAudKHhy573j3yvRLsX2BSp8YpLtoCEG8E9DJe+8zUh4A==",
"dev": true,
"license": "MIT",
"engines": {
@@ -1454,9 +1454,9 @@
}
},
"node_modules/eslint": {
- "version": "9.39.4",
- "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.4.tgz",
- "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
+ "version": "9.39.5",
+ "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.5.tgz",
+ "integrity": "sha512-DgZS62aPLXKlnxILS/AYCoRvHaZeXceIzlXPkkGGzJWSow1aEk0lbTlxUSlyjC8jcaKxAdOnTDz+o1JFSBsyjw==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -1465,8 +1465,8 @@
"@eslint/config-array": "^0.21.2",
"@eslint/config-helpers": "^0.4.2",
"@eslint/core": "^0.17.0",
- "@eslint/eslintrc": "^3.3.5",
- "@eslint/js": "9.39.4",
+ "@eslint/eslintrc": "^3.3.6",
+ "@eslint/js": "9.39.5",
"@eslint/plugin-kit": "^0.4.1",
"@humanfs/node": "^0.16.6",
"@humanwhocodes/module-importer": "^1.0.1",
@@ -1569,9 +1569,9 @@
}
},
"node_modules/eslint-plugin-jsdoc": {
- "version": "63.0.11",
- "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-63.0.11.tgz",
- "integrity": "sha512-QhLmqREgRJSIKg0r23ckTVaNK1lmMsTmpyY5Hv7NTCHNWTFZx/8PqycWhR0p0Lk/U5aJ6H3zAKMQ0xB2NkN0sA==",
+ "version": "63.0.13",
+ "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-63.0.13.tgz",
+ "integrity": "sha512-ahG1kWA8jYNwaQJtzJlnF+v4Gb9w5r+WL98gp+L8qjLN9ErpL5sevGuemN+fCYsU3Np27F36KmDc8UPi1ml/dg==",
"dev": true,
"license": "BSD-3-Clause",
"dependencies": {
@@ -2040,9 +2040,9 @@
"license": "BSD-3-Clause"
},
"node_modules/js-yaml": {
- "version": "4.2.0",
- "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.2.0.tgz",
- "integrity": "sha512-ePWsvanv0DWuDRsW8dnt+R4jQ31SCRCQ7hhNcPXZPsoBZiemuZNYGf7adZdqX2D86j6rvKp3RpCxVTSb8WQlOw==",
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.3.0.tgz",
+ "integrity": "sha512-1td788aAnnZ5qs7V2QIRl1owjtYpbKt749Y3xauqQgwIIGF/xXWz1wMTEBx5O3LK3lXLVuqXPdPxj2BoFHaW9Q==",
"dev": true,
"funding": [
{
diff --git a/src/nodes/accessors/Instance.js b/src/nodes/accessors/Instance.js
index b89834b9166c75..f5755340b66ce1 100644
--- a/src/nodes/accessors/Instance.js
+++ b/src/nodes/accessors/Instance.js
@@ -177,29 +177,23 @@ export const instance = /*@__PURE__*/ Fn( ( [ matrices, colors = null ], builder
OnFrameUpdate( () => {
- if ( interleavedMatrix !== null ) {
+ if ( interleavedMatrix !== null && interleavedMatrix.version !== matrices.version ) {
interleavedMatrix.clearUpdateRanges();
interleavedMatrix.updateRanges.push( ...matrices.updateRanges );
+ matrices.clearUpdateRanges(); // "matrices" as the source is never uploaded directly. clear to avoid update range accumulation
- if ( matrices.version !== interleavedMatrix.version ) {
-
- interleavedMatrix.version = matrices.version;
-
- }
+ interleavedMatrix.version = matrices.version;
}
- if ( colors && interleavedColor !== null ) {
+ if ( colors && interleavedColor !== null && interleavedColor.version !== colors.version ) {
interleavedColor.clearUpdateRanges();
interleavedColor.updateRanges.push( ...colors.updateRanges );
+ colors.clearUpdateRanges();
- if ( colors.version !== interleavedColor.version ) {
-
- interleavedColor.version = colors.version;
-
- }
+ interleavedColor.version = colors.version;
}