Core: Vector, Matrix, Quaternion and Color instanceof

editor/js/Sidebar.Scene.js

@@ -373,7 +373,7 @@ function SidebarScene( editor ) {
 
 		if ( scene.background ) {
 
-			if ( scene.background.isColor ) {
+			if ( scene.background instanceof THREE.Color ) {
 
 				backgroundType.setValue( 'Color' );
 				backgroundColor.setHexValue( scene.background.getHex() );

examples/js/controls/FirstPersonControls.js

@@ -204,7 +204,7 @@
 
 			this.lookAt = function ( x, y, z ) {
 
-				if ( x.isVector3 ) {
+				if ( x instanceof THREE.Vector3 ) {
 
 					_target.copy( x );
 

examples/js/renderers/SVGRenderer.js

@@ -159,7 +159,7 @@
 
 				const background = scene.background;
 
-				if ( background && background.isColor ) {
+				if ( background instanceof THREE.Color ) {
 
 					removeChildNodes();
 					_svg.style.backgroundColor = background.getStyle();

examples/jsm/controls/FirstPersonControls.js

@@ -187,7 +187,7 @@ class FirstPersonControls {
 
 		this.lookAt = function ( x, y, z ) {
 
-			if ( x.isVector3 ) {
+			if ( x instanceof Vector3 ) {
 
 				_target.copy( x );
 

examples/jsm/nodes/core/NodeUtils.js

@@ -30,27 +30,27 @@ export const getValueType = ( value ) => {
 
 		return 'bool';
 
-	} else if ( value?.isVector2 === true ) {
+	} else if ( value instanceof Vector2 ) {
 
 		return 'vec2';
 
-	} else if ( value?.isVector3 === true ) {
+	} else if ( value instanceof Vector3 ) {
 
 		return 'vec3';
 
-	} else if ( value?.isVector4 === true ) {
+	} else if ( value instanceof Vector4 ) {
 
 		return 'vec4';
 
-	} else if ( value?.isMatrix3 === true ) {
+	} else if ( value instanceof Matrix3 ) {
 
 		return 'mat3';
 
-	} else if ( value?.isMatrix4 === true ) {
+	} else if ( value instanceof Matrix4 ) {
 
 		return 'mat4';
 
-	} else if ( value?.isColor === true ) {
+	} else if ( value instanceof Color ) {
 
 		return 'color';
 

examples/jsm/nodes/geometry/RangeNode.js

@@ -1,6 +1,6 @@
 import Node from '../core/Node.js';
 import { attribute, float } from '../shadernode/ShaderNodeBaseElements.js';
-import { MathUtils, InstancedBufferAttribute } from 'three';
+import { Color, Vector2, Vector3, Vector4, MathUtils, InstancedBufferAttribute } from 'three';
 
 class RangeNode extends Node {
 
@@ -19,10 +19,10 @@ class RangeNode extends Node {
 
 		let length = 1;
 
-		if ( min.isVector2 ) length = 2;
-		else if ( min.isVector3 ) length = 3;
-		else if ( min.isVector4 ) length = 4;
-		else if ( min.isColor ) length = 3;
+		if ( min instanceof Vector2 ) length = 2;
+		else if ( min instanceof Vector3 ) length = 3;
+		else if ( min instanceof Vector4 ) length = 4;
+		else if ( min instanceof Color ) length = 3;
 
 		return length;
 
@@ -61,7 +61,7 @@ class RangeNode extends Node {
 
 					}
 
-				} else if ( min.isColor ) {
+				} else if ( min instanceof Color ) {
 
 					for ( let i = 0; i < length; i += 3 ) {
 

examples/jsm/nodes/materials/SpriteNodeMaterial.js

@@ -1,5 +1,5 @@
 import NodeMaterial from './NodeMaterial.js';
-import { SpriteMaterial } from 'three';
+import { Vector2, SpriteMaterial } from 'three';
 import {
 	vec2, vec3, vec4,
 	uniform, add, mul, sub,
@@ -59,7 +59,7 @@ class SpriteNodeMaterial extends NodeMaterial {
 
 		let alignedPosition = vertex.xy;
 
-		if ( builder.object.center?.isVector2 === true ) {
+		if ( builder.object.center instanceof Vector2 ) {
 
 			alignedPosition = sub( alignedPosition, sub( uniform( builder.object.center ), vec2( 0.5 ) ) );
 

examples/jsm/renderers/SVGRenderer.js

@@ -7,6 +7,7 @@ import {
 	Object3D,
 	Vector3
 } from 'three';
+
 import { Projector } from '../renderers/Projector.js';
 import { RenderableFace } from '../renderers/Projector.js';
 import { RenderableLine } from '../renderers/Projector.js';
@@ -170,7 +171,7 @@ class SVGRenderer {
 
 			const background = scene.background;
 
-			if ( background && background.isColor ) {
+			if ( background instanceof Color ) {
 
 				removeChildNodes();
 				_svg.style.backgroundColor = background.getStyle();

examples/jsm/renderers/webgpu/WebGPUBackground.js

@@ -38,7 +38,7 @@ class WebGPUBackground {
 			_clearColor.copy( renderer._clearColor );
 			_clearAlpha = renderer._clearAlpha;
 
-		} else if ( background.isColor === true ) {
+		} else if ( background instanceof Color ) {
 
 			// background is an opaque color
 

src/core/Object3D.js

@@ -1,10 +1,11 @@
-import { Quaternion } from '../math/Quaternion.js';
-import { Vector3 } from '../math/Vector3.js';
-import { Matrix4 } from '../math/Matrix4.js';
 import { EventDispatcher } from './EventDispatcher.js';
-import { Euler } from '../math/Euler.js';
 import { Layers } from './Layers.js';
+import { Color } from '../math/Color.js';
+import { Vector3 } from '../math/Vector3.js';
 import { Matrix3 } from '../math/Matrix3.js';
+import { Matrix4 } from '../math/Matrix4.js';
+import { Quaternion } from '../math/Quaternion.js';
+import { Euler } from '../math/Euler.js';
 import * as MathUtils from '../math/MathUtils.js';
 
 let _object3DId = 0;
@@ -259,7 +260,7 @@ class Object3D extends EventDispatcher {
 
 		// This method does not support objects having non-uniformly-scaled parent(s)
 
-		if ( x.isVector3 ) {
+		if ( x instanceof Vector3 ) {
 
 			_target.copy( x );
 
@@ -709,7 +710,7 @@ class Object3D extends EventDispatcher {
 
 			if ( this.background ) {
 
-				if ( this.background.isColor ) {
+				if ( this.background instanceof Color ) {
 
 					object.background = this.background.toJSON();
 

src/extras/PMREMGenerator.js

@@ -1,13 +1,14 @@
 import {
+	BackSide,
 	CubeReflectionMapping,
 	CubeRefractionMapping,
 	CubeUVReflectionMapping,
+	HalfFloatType,
 	LinearEncoding,
 	LinearFilter,
-	NoToneMapping,
 	NoBlending,
-	RGBAFormat,
-	HalfFloatType
+	NoToneMapping,
+	RGBAFormat
 } from '../constants.js';
 
 import { BufferAttribute } from '../core/BufferAttribute.js';
@@ -16,12 +17,11 @@ import { Mesh } from '../objects/Mesh.js';
 import { OrthographicCamera } from '../cameras/OrthographicCamera.js';
 import { PerspectiveCamera } from '../cameras/PerspectiveCamera.js';
 import { ShaderMaterial } from '../materials/ShaderMaterial.js';
-import { Vector3 } from '../math/Vector3.js';
-import { Color } from '../math/Color.js';
 import { WebGLRenderTarget } from '../renderers/WebGLRenderTarget.js';
 import { MeshBasicMaterial } from '../materials/MeshBasicMaterial.js';
 import { BoxGeometry } from '../geometries/BoxGeometry.js';
-import { BackSide } from '../constants.js';
+import { Color } from '../math/Color.js';
+import { Vector3 } from '../math/Vector3.js';
 
 const LOD_MIN = 4;
 
@@ -319,7 +319,7 @@ class PMREMGenerator {
 
 		if ( background ) {
 
-			if ( background.isColor ) {
+			if ( background instanceof Color ) {
 
 				backgroundMaterial.color.copy( background );
 				scene.background = null;

src/extras/core/Curve.js

@@ -1,7 +1,7 @@
-import * as MathUtils from '../../math/MathUtils.js';
 import { Vector2 } from '../../math/Vector2.js';
 import { Vector3 } from '../../math/Vector3.js';
 import { Matrix4 } from '../../math/Matrix4.js';
+import * as MathUtils from '../../math/MathUtils.js';
 
 /**
  * Extensible curve object.
@@ -242,7 +242,7 @@ class Curve {
 		const pt1 = this.getPoint( t1 );
 		const pt2 = this.getPoint( t2 );
 
-		const tangent = optionalTarget || ( ( pt1.isVector2 ) ? new Vector2() : new Vector3() );
+		const tangent = optionalTarget || ( ( pt1 instanceof Vector2 ) ? new Vector2() : new Vector3() );
 
 		tangent.copy( pt2 ).sub( pt1 ).normalize();
 

src/materials/Material.js

@@ -1,5 +1,18 @@
+import {
+	AddEquation,
+	AlwaysStencilFunc,
+	FlatShading,
+	FrontSide,
+	KeepStencilOp,
+	LessEqualDepth,
+	NormalBlending,
+	OneMinusSrcAlphaFactor,
+	SrcAlphaFactor
+} from '../constants.js';
+
 import { EventDispatcher } from '../core/EventDispatcher.js';
-import { FrontSide, FlatShading, NormalBlending, LessEqualDepth, AddEquation, OneMinusSrcAlphaFactor, SrcAlphaFactor, AlwaysStencilFunc, KeepStencilOp } from '../constants.js';
+import { Color } from '../math/Color.js';
+import { Vector3 } from '../math/Vector3.js';
 import * as MathUtils from '../math/MathUtils.js';
 
 let materialId = 0;
@@ -140,11 +153,11 @@ class Material extends EventDispatcher {
 
 			}
 
-			if ( currentValue && currentValue.isColor ) {
+			if ( currentValue instanceof Color ) {
 
 				currentValue.set( newValue );
 
-			} else if ( ( currentValue && currentValue.isVector3 ) && ( newValue && newValue.isVector3 ) ) {
+			} else if ( ( currentValue instanceof Vector3 ) && ( newValue && newValue instanceof Vector3 ) ) {
 
 				currentValue.copy( newValue );
 
@@ -185,20 +198,20 @@ class Material extends EventDispatcher {
 
 		if ( this.name !== '' ) data.name = this.name;
 
-		if ( this.color && this.color.isColor ) data.color = this.color.getHex();
+		if ( this.color instanceof Color ) data.color = this.color.getHex();
 
 		if ( this.roughness !== undefined ) data.roughness = this.roughness;
 		if ( this.metalness !== undefined ) data.metalness = this.metalness;
 
 		if ( this.sheen !== undefined ) data.sheen = this.sheen;
-		if ( this.sheenColor && this.sheenColor.isColor ) data.sheenColor = this.sheenColor.getHex();
+		if ( this.sheenColor instanceof Color ) data.sheenColor = this.sheenColor.getHex();
 		if ( this.sheenRoughness !== undefined ) data.sheenRoughness = this.sheenRoughness;
-		if ( this.emissive && this.emissive.isColor ) data.emissive = this.emissive.getHex();
+		if ( this.emissive instanceof Color ) data.emissive = this.emissive.getHex();
 		if ( this.emissiveIntensity && this.emissiveIntensity !== 1 ) data.emissiveIntensity = this.emissiveIntensity;
 
-		if ( this.specular && this.specular.isColor ) data.specular = this.specular.getHex();
+		if ( this.specular instanceof Color ) data.specular = this.specular.getHex();
 		if ( this.specularIntensity !== undefined ) data.specularIntensity = this.specularIntensity;
-		if ( this.specularColor && this.specularColor.isColor ) data.specularColor = this.specularColor.getHex();
+		if ( this.specularColor instanceof Color ) data.specularColor = this.specularColor.getHex();
 		if ( this.shininess !== undefined ) data.shininess = this.shininess;
 		if ( this.clearcoat !== undefined ) data.clearcoat = this.clearcoat;
 		if ( this.clearcoatRoughness !== undefined ) data.clearcoatRoughness = this.clearcoatRoughness;

src/materials/ShaderMaterial.js

@@ -1,4 +1,10 @@
 import { Material } from './Material.js';
+import { Color } from '../math/Color.js';
+import { Vector2 } from '../math/Vector2.js';
+import { Vector3 } from '../math/Vector3.js';
+import { Vector4 } from '../math/Vector4.js';
+import { Matrix3 } from '../math/Matrix3.js';
+import { Matrix4 } from '../math/Matrix4.js';
 import { cloneUniforms, cloneUniformsGroups } from '../renderers/shaders/UniformsUtils.js';
 
 import default_vertex from '../renderers/shaders/ShaderChunk/default_vertex.glsl.js';
@@ -110,42 +116,42 @@ class ShaderMaterial extends Material {
 					value: value.toJSON( meta ).uuid
 				};
 
-			} else if ( value && value.isColor ) {
+			} else if ( value instanceof Color ) {
 
 				data.uniforms[ name ] = {
 					type: 'c',
 					value: value.getHex()
 				};
 
-			} else if ( value && value.isVector2 ) {
+			} else if ( value instanceof Vector2 ) {
 
 				data.uniforms[ name ] = {
 					type: 'v2',
 					value: value.toArray()
 				};
 
-			} else if ( value && value.isVector3 ) {
+			} else if ( value instanceof Vector3 ) {
 
 				data.uniforms[ name ] = {
 					type: 'v3',
 					value: value.toArray()
 				};
 
-			} else if ( value && value.isVector4 ) {
+			} else if ( value instanceof Vector4 ) {
 
 				data.uniforms[ name ] = {
 					type: 'v4',
 					value: value.toArray()
 				};
 
-			} else if ( value && value.isMatrix3 ) {
+			} else if ( value instanceof Matrix3 ) {
 
 				data.uniforms[ name ] = {
 					type: 'm3',
 					value: value.toArray()
 				};
 
-			} else if ( value && value.isMatrix4 ) {
+			} else if ( value instanceof Matrix4 ) {
 
 				data.uniforms[ name ] = {
 					type: 'm4',

src/math/Color.js

@@ -56,7 +56,8 @@ class Color {
 
 	constructor( r, g, b ) {
 
-		this.isColor = true;
+		// @deprecated
+		Object.defineProperty( this, 'isColor', { value: true } );
 
 		this.r = 1;
 		this.g = 1;
@@ -75,7 +76,7 @@ class Color {
 
 	set( value ) {
 
-		if ( value && value.isColor ) {
+		if ( value instanceof Color ) {
 
 			this.copy( value );
 

src/math/Matrix3.js

@@ -2,7 +2,8 @@ class Matrix3 {
 
 	constructor() {
 
-		Matrix3.prototype.isMatrix3 = true;
+		// @deprecated
+		Object.defineProperty( this, 'isMatrix3', { value: true } );
 
 		this.elements = [