[pull] dev from mrdoob:dev

.github/workflows/codeql-code-scanning.yml

@@ -33,16 +33,16 @@ jobs:
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@54f647b7e1bb85c95cddabcd46b0c578ec92bc1a # v4
+      uses: github/codeql-action/init@99df26d4f13ea111d4ec1a7dddef6063f76b97e9 # v4
       with:
         languages: ${{ matrix.language }}
         config-file: ./.github/codeql-config.yml
         queries: security-and-quality
 
     - name: Autobuild
-      uses: github/codeql-action/autobuild@54f647b7e1bb85c95cddabcd46b0c578ec92bc1a # v4
+      uses: github/codeql-action/autobuild@99df26d4f13ea111d4ec1a7dddef6063f76b97e9 # v4
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@54f647b7e1bb85c95cddabcd46b0c578ec92bc1a # v4
+      uses: github/codeql-action/analyze@99df26d4f13ea111d4ec1a7dddef6063f76b97e9 # v4
       with:
         category: "/language:${{matrix.language}}"

manual/pages/animation-system.html

@@ -27,7 +27,7 @@ <h1>Animation System</h1>
       <div class="lesson">
         <div class="lesson-main">
 
-          <h2>Overview</h2>
+          <h2 id="overview">Overview</h2>
 
 		<p class="desc">
 			Within the three.js animation system you can animate various properties of your models:
@@ -46,7 +46,7 @@ <h2>Overview</h2>
 
 		</p>
 
-		<h3>Animation Clips</h3>
+		<h3 id="animation-clips">Animation Clips</h3>
 
 		<p class="desc">
 
@@ -63,7 +63,7 @@ <h3>Animation Clips</h3>
 
 		</p>
 
-		<h3>Keyframe Tracks</h3>
+		<h3 id="keyframe-tracks">Keyframe Tracks</h3>
 
 		<p class="desc">
 
@@ -81,7 +81,7 @@ <h3>Keyframe Tracks</h3>
 
 		</p>
 
-		<h3>Animation Mixer</h3>
+		<h3 id="animation-mixer">Animation Mixer</h3>
 
 		<p class="desc">
 
@@ -92,7 +92,7 @@ <h3>Animation Mixer</h3>
 
 		</p>
 
-		<h3>Animation Actions</h3>
+		<h3 id="animation-actions">Animation Actions</h3>
 
 		<p class="desc">
 
@@ -105,7 +105,7 @@ <h3>Animation Actions</h3>
 
 		</p>
 
-		<h3>Animation Object Groups</h3>
+		<h3 id="animation-object-groups">Animation Object Groups</h3>
 
 		<p class="desc">
 
@@ -114,7 +114,7 @@ <h3>Animation Object Groups</h3>
 
 		</p>
 
-		<h3>Supported Formats and Loaders</h3>
+		<h3 id="supported-formats-and-loaders">Supported Formats and Loaders</h3>
 
 		<p class="desc">
 			Note that not all model formats include animation (OBJ notably does not), and that only some
@@ -135,7 +135,7 @@ <h3>Supported Formats and Loaders</h3>
 			on the same timeline) directly to a single file.
 		</p>
 
-		<h2>Example</h2>
+		<h2 id="example">Example</h2>
 
 <pre class="prettyprint notranslate lang-js" translate="no">
 let mesh;

manual/pages/color-management.html

@@ -69,7 +69,7 @@ <h1>Color Management</h1>
       <div class="lesson">
         <div class="lesson-main">
 
-			<h2>What is a color space?</h2>
+			<h2 id="what-is-a-color-space">What is a color space?</h2>
 
 	<p>
 		Every color space is a collection of several design decisions, chosen together to support a
@@ -159,15 +159,15 @@ <h2>What is a color space?</h2>
 		</p>
 	</blockquote>
 
-	<h2>Roles of color spaces</h2>
+	<h2 id="roles-of-color-spaces">Roles of color spaces</h2>
 
 	<p>
 		Linear workflows — required for modern rendering methods — generally involve more than
 		one color space, each assigned to a particular role. Linear and nonlinear color spaces are
 		appropriate for different roles, explained below.
 	</p>
 
-	<h3>Input color space</h3>
+	<h3 id="input-color-space">Input color space</h3>
 
 	<p>
 		Colors supplied to three.js — from color pickers, textures, 3D models, and other sources —
@@ -218,15 +218,15 @@ <h3>Input color space</h3>
 		</p>
 	</blockquote>
 
-	<h3>Working color space</h3>
+	<h3 id="working-color-space">Working color space</h3>
 
 	<p>
 		Rendering, interpolation, and many other operations must be performed in an open domain
 		linear working color space, in which RGB components are proportional to physical
 		illumination. In three.js, the working color space is Linear-sRGB.
 	</p>
 
-	<h3>Output color space</h3>
+	<h3 id="output-color-space">Output color space</h3>
 
 	<p>
 		Output to a display device, image, or video may involve conversion from the open domain
@@ -263,7 +263,7 @@ <h3>Output color space</h3>
 		For instances of `ShaderMaterial`, adding the `colorspace_fragment` shader chunk to the fragment shader's `main()` function should be sufficient.
 	</p>
 
-	<h2>Working with THREE.Color instances</h2>
+	<h2 id="working-with-three-color-instances">Working with THREE.Color instances</h2>
 
 	<p>
 		Methods reading or modifying `Color` instances assume data is already in the
@@ -308,7 +308,7 @@ <h2>Working with THREE.Color instances</h2>
 console.log( color.getHex( SRGBColorSpace ) ); // → 0xBCBCBC
 </pre>
 
-	<h2>Common mistakes</h2>
+	<h2 id="common-mistakes">Common mistakes</h2>
 
 	<p>
 		When an individual color or texture is misconfigured, it will appear darker or lighter than
@@ -327,7 +327,7 @@ <h2>Common mistakes</h2>
 		("display referred").
 	</p>
 
-	<h2>Further reading</h2>
+	<h2 id="further-reading">Further reading</h2>
 
 	<ul>
 		<li>

manual/pages/creating-a-scene.html

@@ -29,13 +29,13 @@ <h1>Creating a scene</h1>
 
           <p>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.</p>
 
-		<h2>Before we start</h2>
+		<h2 id="before-we-start">Before we start</h2>
 
 		<p>
 			If you haven't yet, go through the `Installation` guide. We'll assume you've already set up the same project structure (including <i>index.html</i> and <i>main.js</i>), have installed three.js, and are either running a build tool, or using a local server with a CDN and import maps.
 		</p>
 
-		<h2>Creating the scene</h2>
+		<h2 id="creating-the-scene">Creating the scene</h2>
 
 		<p>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.</p>
 
@@ -87,7 +87,7 @@ <h2>Creating the scene</h2>
 
 		<p>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.</p>
 
-		<h2>Rendering the scene</h2>
+		<h2 id="rendering-the-scene">Rendering the scene</h2>
 
 		<p>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.</p>
 
@@ -100,7 +100,7 @@ <h2>Rendering the scene</h2>
 
 		<p>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 <em>"why don't we just create a setInterval ?"</em> 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.</p>
 
-		<h2>Animating the cube</h2>
+		<h2 id="animating-the-cube">Animating the cube</h2>
 
 		<p>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.</p>
 
@@ -113,7 +113,7 @@ <h2>Animating the cube</h2>
 
 		<p>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.</p>
 
-		<h2>The result</h2>
+		<h2 id="the-result">The result</h2>
 		<p>Congratulations! You have now completed your first three.js application. It's simple, but you have to start somewhere.</p>
 
 		<p>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.</p>

manual/pages/creating-text.html

@@ -34,7 +34,7 @@ <h1>Creating Text</h1>
             </p>
           </div>
 
-          <h2>1. DOM + CSS</h2>
+          <h2 id="dom-css">1. DOM + CSS</h2>
           <div>
             <p>
               Using HTML is generally the easiest and fastest manner to add text. This is the method
@@ -63,7 +63,7 @@ <h2>1. DOM + CSS</h2>
           </div>
 
 
-          <h2>2. Use `CSS2DRenderer` or `CSS3DRenderer`</h2>
+          <h2 id="use-css2drenderer-or-css3drenderer">2. Use `CSS2DRenderer` or `CSS3DRenderer`</h2>
           <div>
             <p>
               Use these renderers to draw high-quality text contained in DOM elements to your three.js scene.
@@ -72,19 +72,19 @@ <h2>2. Use `CSS2DRenderer` or `CSS3DRenderer`</h2>
           </div>
 
 
-          <h2>3. Draw text to canvas and use as a `Texture`</h2>
+          <h2 id="draw-text-to-canvas-and-use-as-a-texture">3. Draw text to canvas and use as a `Texture`</h2>
           <div>
             <p>Use this method if you wish to draw text easily on a plane in your three.js scene.</p>
           </div>
 
 
-          <h2>4. Create a model in your favourite 3D application and export to three.js</h2>
+          <h2 id="create-a-model-in-your-favourite-3d-application-and-export-to-threejs">4. Create a model in your favourite 3D application and export to three.js</h2>
           <div>
             <p>Use this method if you prefer working with your 3d applications and importing the models to three.js.</p>
           </div>
 
 
-          <h2>5. Procedural Text Geometry</h2>
+          <h2 id="procedural-text-geometry">5. Procedural Text Geometry</h2>
           <div>
             <p>
               If you prefer to work purely in THREE.js or to create procedural and dynamic 3D
@@ -101,7 +101,7 @@ <h2>5. Procedural Text Geometry</h2>
               accepted parameter, and a list of the JSON fonts that come with the THREE.js distribution itself.
             </p>
 
-            <h3>Examples</h3>
+            <h3 id="procedural-text-geometry-examples">Examples</h3>
 
             <p>
               [example:webgl_geometry_text WebGL / geometry / text]<br />
@@ -117,7 +117,7 @@ <h3>Examples</h3>
           </div>
 
 
-          <h2>6. Bitmap Fonts</h2>
+          <h2 id="bitmap-fonts">6. Bitmap Fonts</h2>
           <div>
             <p>
               BMFonts (bitmap fonts) allow batching glyphs into a single BufferGeometry. BMFont rendering
@@ -141,7 +141,7 @@ <h2>6. Bitmap Fonts</h2>
           </div>
 
 
-          <h2>7. Troika Text</h2>
+          <h2 id="troika-text">7. Troika Text</h2>
           <div>
             <p>
               The [link:https://www.npmjs.com/package/troika-three-text troika-three-text] package renders 

manual/pages/faq.html

@@ -27,7 +27,7 @@ <h1>FAQ</h1>
       <div class="lesson">
         <div class="lesson-main">
 
-          <h2>Which 3D model format is best supported?</h2>
+          <h2 id="which-3d-model-format-is-best-supported">Which 3D model format is best supported?</h2>
           <div>
             <p>
               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 @@ <h2>Which 3D model format is best supported?</h2>
             </p>
           </div>
 
-          <h2>Why are there meta viewport tags in examples?</h2>
+          <h2 id="why-are-there-meta-viewport-tags-in-examples">Why are there meta viewport tags in examples?</h2>
           <div>
             <pre class="prettyprint notranslate lang-js" translate="no">&lt;meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"&gt;</pre>
 
@@ -48,7 +48,7 @@ <h2>Why are there meta viewport tags in examples?</h2>
               <p>[link:https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag MDN: Using the viewport meta tag]</p>
           </div>
 
-          <h2>How can scene scale be preserved on resize?</h2>
+          <h2 id="how-can-scene-scale-be-preserved-on-resize">How can scene scale be preserved on resize?</h2>
           <p>
             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 @@ <h2>How can scene scale be preserved on resize?</h2>
             [link:http://jsfiddle.net/Q4Jpu/ Example].
           </p>
 
-          <h2>Why is part of my object invisible?</h2>
+          <h2 id="why-is-part-of-my-object-invisible">Why is part of my object invisible?</h2>
           <p>
             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.
             <pre class="prettyprint notranslate lang-js" translate="no">material.side = THREE.DoubleSide</pre>
           </p>
 
-          <h2>Why does three.js sometimes return strange results for invalid inputs?</h2>
+          <h2 id="why-does-threejs-sometimes-return-strange-results-for-invalid-inputs">Why does three.js sometimes return strange results for invalid inputs?</h2>
           <p>
             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.
           </p>
 
-          <h2>Can I use three.js in Node.js?</h2>
+          <h2 id="can-i-use-threejs-in-nodejs">Can I use three.js in Node.js?</h2>
           <p>
             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` 

manual/pages/fundamentals.html

@@ -354,7 +354,7 @@ <h1>Fundamentals</h1>
 <p>I hope this short intro helps to get things started. <a href="responsive.html">Next up we'll cover
 making our code responsive so it is adaptable to multiple situations</a>.</p>
 <div id="es6" class="threejs_bottombar">
-<h3>es6 modules, three.js, and folder structure</h3>
+<h3 id="es6-modules-threejs-and-folder-structure">es6 modules, three.js, and folder structure</h3>
 <p>As of version r147 the preferred way to use three.js is via <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import">es6 modules</a> and import maps.</p>
 <p>
 es6 modules can be loaded via the <code class="notranslate" translate="no">import</code> keyword in a script

manual/pages/how-to-create-vr-content.html

@@ -32,7 +32,7 @@ <h1>How to create VR content</h1>
             made with three.js.
           </p>
 
-          <h2>Workflow</h2>
+          <h2 id="workflow">Workflow</h2>
 
           <p>
             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 @@ <h2>Workflow</h2>
 } );
 </pre>
 
-          <h2>Next Steps</h2>
+          <h2 id="next-steps">Next Steps</h2>
 
           <p>
             Have a look at one of the official WebVR examples to see this workflow in action.<br /><br />