Vector: Replace `MathUtils.clamp()` with `clamp()` (#29929)

* Vector: Replace `MathUtils.clamp()` with `clamp()`.

* Simplified webgl_buffergeometry_attributes_integer.

examples/webgl_buffergeometry_attributes_integer.html

@@ -11,39 +11,6 @@
 		<div id="container"></div>
 		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGL 2 - buffergeometry - integer attributes</div>
 
-		<script id="vertexShader" type="x-shader/x-vertex">
-			in int textureIndex;
-
-			flat out int vIndex; // "flat" indicates that the value will not be interpolated (required for integer attributes)
-			out vec2 vUv;
-
-			void main()	{
-
-				vIndex = textureIndex;
-				vUv = uv;
-
-				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
-
-			}
-		</script>
-
-		<script id="fragmentShader" type="x-shader/x-fragment">
-			flat in int vIndex;
-			in vec2 vUv;
-
-			uniform sampler2D uTextures[ 3 ];
-
-			out vec4 outColor;
-
-			void main()	{
-
-				if ( vIndex == 0 ) outColor = texture( uTextures[ 0 ], vUv );
-				else if ( vIndex == 1 ) outColor = texture( uTextures[ 1 ], vUv );
-				else if ( vIndex == 2 ) outColor = texture( uTextures[ 2 ], vUv );
-
-			}
-		</script>
-
 		<script type="importmap">
 			{
 				"imports": {
@@ -141,8 +108,37 @@
 							value: [ map1, map2, map3 ]
 						}
 					},
-					vertexShader: document.getElementById( 'vertexShader' ).textContent,
-					fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
+					vertexShader: `
+						in int textureIndex;
+
+						flat out int vIndex; // "flat" indicates that the value will not be interpolated (required for integer attributes)
+						out vec2 vUv;
+
+						void main()	{
+
+							vIndex = textureIndex;
+							vUv = uv;
+
+							gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+						}
+					`,
+					fragmentShader: `
+						flat in int vIndex;
+						in vec2 vUv;
+
+						uniform sampler2D uTextures[ 3 ];
+
+						out vec4 outColor;
+
+						void main()	{
+
+							if ( vIndex == 0 ) outColor = texture( uTextures[ 0 ], vUv );
+							else if ( vIndex == 1 ) outColor = texture( uTextures[ 1 ], vUv );
+							else if ( vIndex == 2 ) outColor = texture( uTextures[ 2 ], vUv );
+
+						}
+					`,
 					side: THREE.DoubleSide,
 					glslVersion: THREE.GLSL3
 				} );

src/math/Vector2.js

@@ -1,4 +1,4 @@
-import * as MathUtils from './MathUtils.js';
+import { clamp } from './MathUtils.js';
 
 class Vector2 {
 
@@ -240,8 +240,8 @@ class Vector2 {
 
 		// assumes min < max, componentwise
 
-		this.x = MathUtils.clamp( this.x, min.x, max.x );
-		this.y = MathUtils.clamp( this.y, min.y, max.y );
+		this.x = clamp( this.x, min.x, max.x );
+		this.y = clamp( this.y, min.y, max.y );
 
 		return this;
 
@@ -249,8 +249,8 @@ class Vector2 {
 
 	clampScalar( minVal, maxVal ) {
 
-		this.x = MathUtils.clamp( this.x, minVal, maxVal );
-		this.y = MathUtils.clamp( this.y, minVal, maxVal );
+		this.x = clamp( this.x, minVal, maxVal );
+		this.y = clamp( this.y, minVal, maxVal );
 
 		return this;
 
@@ -260,7 +260,7 @@ class Vector2 {
 
 		const length = this.length();
 
-		return this.divideScalar( length || 1 ).multiplyScalar( MathUtils.clamp( length, min, max ) );
+		return this.divideScalar( length || 1 ).multiplyScalar( clamp( length, min, max ) );
 
 	}
 
@@ -365,7 +365,7 @@ class Vector2 {
 
 		// clamp, to handle numerical problems
 
-		return Math.acos( MathUtils.clamp( theta, - 1, 1 ) );
+		return Math.acos( clamp( theta, - 1, 1 ) );
 
 	}
 

src/math/Vector3.js

@@ -1,4 +1,4 @@
-import * as MathUtils from './MathUtils.js';
+import { clamp } from './MathUtils.js';
 import { Quaternion } from './Quaternion.js';
 
 class Vector3 {
@@ -338,9 +338,9 @@ class Vector3 {
 
 		// assumes min < max, componentwise
 
-		this.x = MathUtils.clamp( this.x, min.x, max.x );
-		this.y = MathUtils.clamp( this.y, min.y, max.y );
-		this.z = MathUtils.clamp( this.z, min.z, max.z );
+		this.x = clamp( this.x, min.x, max.x );
+		this.y = clamp( this.y, min.y, max.y );
+		this.z = clamp( this.z, min.z, max.z );
 
 		return this;
 
@@ -348,9 +348,9 @@ class Vector3 {
 
 	clampScalar( minVal, maxVal ) {
 
-		this.x = MathUtils.clamp( this.x, minVal, maxVal );
-		this.y = MathUtils.clamp( this.y, minVal, maxVal );
-		this.z = MathUtils.clamp( this.z, minVal, maxVal );
+		this.x = clamp( this.x, minVal, maxVal );
+		this.y = clamp( this.y, minVal, maxVal );
+		this.z = clamp( this.z, minVal, maxVal );
 
 		return this;
 
@@ -360,7 +360,7 @@ class Vector3 {
 
 		const length = this.length();
 
-		return this.divideScalar( length || 1 ).multiplyScalar( MathUtils.clamp( length, min, max ) );
+		return this.divideScalar( length || 1 ).multiplyScalar( clamp( length, min, max ) );
 
 	}
 
@@ -530,7 +530,7 @@ class Vector3 {
 
 		// clamp, to handle numerical problems
 
-		return Math.acos( MathUtils.clamp( theta, - 1, 1 ) );
+		return Math.acos( clamp( theta, - 1, 1 ) );
 
 	}
 

src/math/Vector4.js

@@ -1,4 +1,4 @@
-import * as MathUtils from './MathUtils.js';
+import { clamp } from './MathUtils.js';
 
 class Vector4 {
 
@@ -465,10 +465,10 @@ class Vector4 {
 
 		// assumes min < max, componentwise
 
-		this.x = MathUtils.clamp( this.x, min.x, max.x );
-		this.y = MathUtils.clamp( this.y, min.y, max.y );
-		this.z = MathUtils.clamp( this.z, min.z, max.z );
-		this.w = MathUtils.clamp( this.w, min.w, max.w );
+		this.x = clamp( this.x, min.x, max.x );
+		this.y = clamp( this.y, min.y, max.y );
+		this.z = clamp( this.z, min.z, max.z );
+		this.w = clamp( this.w, min.w, max.w );
 
 		return this;
 
@@ -476,10 +476,10 @@ class Vector4 {
 
 	clampScalar( minVal, maxVal ) {
 
-		this.x = MathUtils.clamp( this.x, minVal, maxVal );
-		this.y = MathUtils.clamp( this.y, minVal, maxVal );
-		this.z = MathUtils.clamp( this.z, minVal, maxVal );
-		this.w = MathUtils.clamp( this.w, minVal, maxVal );
+		this.x = clamp( this.x, minVal, maxVal );
+		this.y = clamp( this.y, minVal, maxVal );
+		this.z = clamp( this.z, minVal, maxVal );
+		this.w = clamp( this.w, minVal, maxVal );
 
 		return this;
 
@@ -489,7 +489,7 @@ class Vector4 {
 
 		const length = this.length();
 
-		return this.divideScalar( length || 1 ).multiplyScalar( MathUtils.clamp( length, min, max ) );
+		return this.divideScalar( length || 1 ).multiplyScalar( clamp( length, min, max ) );
 
 	}