Remove long-deprecated code (#24431)

* Update SceneUtils.js

* Update WebGLProgram.js

* Update FontLoader.js

* Update DRACOLoader.js

* Update ObjectLoader.js

* Delete custom-geometry.html

* Delete custom-geometry.html

* Delete custom-geometry.html

* Delete custom-geometry.html

* Delete custom-geometry.html

* Delete custom-geometry.html

* Update TransformControls.js

* Update GLTFLoader.js

* Update OutlineEffect.js

* Update VRButton.js

* Update HDRCubeTextureLoader.js

* Update ShaderMaterial.js

* Update TrackballControls.js

* Update OrbitControls.js

* Update ColorConverter.js

* Update InstancedBufferAttribute.js

* Update ParametricGeometry.js

* Update CubeCamera.js

* Update PointerLockControls.js

* Update Projector.js

* Update DRACOExporter.js

* Update FirstPersonControls.js

* Update FlyControls.js

* Update PLYExporter.js

* Update Quaternion.js

* Update GLTFExporter.js

* Update Uniform.js

* Un-deprecate `decodeDracoFile`

* Update ColladaExporter.js

* Update GLTFExporter.js

* Update OBJExporter.js

* Update STLExporter.js

* Revert loop change

* Update GLTFLoader.js

examples/jsm/controls/FirstPersonControls.js

@@ -12,13 +12,6 @@ class FirstPersonControls {
 
 	constructor( object, domElement ) {
 
-		if ( domElement === undefined ) {
-
-			console.warn( 'THREE.FirstPersonControls: The second parameter "domElement" is now mandatory.' );
-			domElement = document;
-
-		}
-
 		this.object = object;
 		this.domElement = domElement;
 

examples/jsm/controls/FlyControls.js

@@ -12,13 +12,6 @@ class FlyControls extends EventDispatcher {
 
 		super();
 
-		if ( domElement === undefined ) {
-
-			console.warn( 'THREE.FlyControls: The second parameter "domElement" is now mandatory.' );
-			domElement = document;
-
-		}
-
 		this.object = object;
 		this.domElement = domElement;
 

examples/jsm/controls/OrbitControls.js

@@ -25,9 +25,6 @@ class OrbitControls extends EventDispatcher {
 
 		super();
 
-		if ( domElement === undefined ) console.warn( 'THREE.OrbitControls: The second parameter "domElement" is now mandatory.' );
-		if ( domElement === document ) console.error( 'THREE.OrbitControls: "document" should not be used as the target "domElement". Please use "renderer.domElement" instead.' );
-
 		this.object = object;
 		this.domElement = domElement;
 		this.domElement.style.touchAction = 'none'; // disable touch scroll

examples/jsm/controls/PointerLockControls.js

@@ -19,13 +19,6 @@ class PointerLockControls extends EventDispatcher {
 
 		super();
 
-		if ( domElement === undefined ) {
-
-			console.warn( 'THREE.PointerLockControls: The second parameter "domElement" is now mandatory.' );
-			domElement = document.body;
-
-		}
-
 		this.domElement = domElement;
 		this.isLocked = false;
 

examples/jsm/controls/TrackballControls.js

@@ -16,9 +16,6 @@ class TrackballControls extends EventDispatcher {
 
 		super();
 
-		if ( domElement === undefined ) console.warn( 'THREE.TrackballControls: The second parameter "domElement" is now mandatory.' );
-		if ( domElement === document ) console.error( 'THREE.TrackballControls: "document" should not be used as the target "domElement". Please use "renderer.domElement" instead.' );
-
 		const scope = this;
 		const STATE = { NONE: - 1, ROTATE: 0, ZOOM: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_ZOOM_PAN: 4 };
 

examples/jsm/controls/TransformControls.js

@@ -643,12 +643,6 @@ class TransformControls extends Object3D {
 
 	}
 
-	update() {
-
-		console.warn( 'THREE.TransformControls: update function has no more functionality and therefore has been deprecated.' );
-
-	}
-
 }
 
 // mouse / touch event handlers

examples/jsm/effects/OutlineEffect.js

@@ -429,27 +429,6 @@ class OutlineEffect {
 
 		this.render = function ( scene, camera ) {
 
-			let renderTarget;
-			let forceClear = false;
-
-			if ( arguments[ 2 ] !== undefined ) {
-
-				console.warn( 'THREE.OutlineEffect.render(): the renderTarget argument has been removed. Use .setRenderTarget() instead.' );
-				renderTarget = arguments[ 2 ];
-
-			}
-
-			if ( arguments[ 3 ] !== undefined ) {
-
-				console.warn( 'THREE.OutlineEffect.render(): the forceClear argument has been removed. Use .clear() instead.' );
-				forceClear = arguments[ 3 ];
-
-			}
-
-			if ( renderTarget !== undefined ) renderer.setRenderTarget( renderTarget );
-
-			if ( forceClear ) renderer.clear();
-
 			if ( this.enabled === false ) {
 
 				renderer.render( scene, camera );

examples/jsm/exporters/ColladaExporter.js

@@ -243,21 +243,12 @@ class ColladaExporter {
 
 		// Process the given piece of geometry into the geometry library
 		// Returns the mesh id
-		function processGeometry( g ) {
+		function processGeometry( bufferGeometry ) {
 
-			let info = geometryInfo.get( g );
+			let info = geometryInfo.get( bufferGeometry );
 
 			if ( ! info ) {
 
-				// convert the geometry to bufferGeometry if it isn't already
-				const bufferGeometry = g;
-
-				if ( bufferGeometry.isBufferGeometry !== true ) {
-
-					throw new Error( 'THREE.ColladaExporter: Geometry is not of type THREE.BufferGeometry.' );
-
-				}
-
 				const meshid = `Mesh${ libraryGeometries.length + 1 }`;
 
 				const indexCount =
@@ -271,7 +262,7 @@ class ColladaExporter {
 						[ { start: 0, count: indexCount, materialIndex: 0 } ];
 
 
-				const gname = g.name ? ` name="${ g.name }"` : '';
+				const gname = bufferGeometry.name ? ` name="${ bufferGeometry.name }"` : '';
 				let gnode = `<geometry id="${ meshid }"${ gname }><mesh>`;
 
 				// define the geometry node and the vertices for the geometry
@@ -353,7 +344,7 @@ class ColladaExporter {
 				libraryGeometries.push( gnode );
 
 				info = { meshid: meshid, bufferGeometry: bufferGeometry };
-				geometryInfo.set( g, info );
+				geometryInfo.set( bufferGeometry, info );
 
 			}
 

examples/jsm/exporters/DRACOExporter.js

@@ -26,12 +26,6 @@ class DRACOExporter {
 		exportColor: false,
 	} ) {
 
-		if ( object.isBufferGeometry === true ) {
-
-			throw new Error( 'DRACOExporter: The first parameter of parse() is now an instance of Mesh or Points.' );
-
-		}
-
 		if ( DracoEncoderModule === undefined ) {
 
 			throw new Error( 'THREE.DRACOExporter: required the draco_encoder to work.' );
@@ -45,13 +39,6 @@ class DRACOExporter {
 		let builder;
 		let dracoObject;
 
-
-		if ( geometry.isBufferGeometry !== true ) {
-
-			throw new Error( 'THREE.DRACOExporter.parse(geometry, options): geometry is not a THREE.BufferGeometry instance.' );
-
-		}
-
 		if ( object.isMesh === true ) {
 
 			builder = new dracoEncoder.MeshBuilder();

examples/jsm/exporters/GLTFExporter.js

@@ -23,7 +23,6 @@ import {
 	Vector3
 } from 'three';
 
-
 class GLTFExporter {
 
 	constructor() {
@@ -107,14 +106,6 @@ class GLTFExporter {
 	 */
 	parse( input, onDone, onError, options ) {
 
-		if ( typeof onError === 'object' ) {
-
-			console.warn( 'THREE.GLTFExporter: parse() expects options as the fourth argument now.' );
-
-			options = onError;
-
-		}
-
 		const writer = new GLTFWriter();
 		const plugins = [];
 
@@ -1495,12 +1486,6 @@ class GLTFWriter {
 
 		}
 
-		if ( geometry.isBufferGeometry !== true ) {
-
-			throw new Error( 'THREE.GLTFExporter: Geometry is not of type THREE.BufferGeometry.' );
-
-		}
-
 		const meshDef = {};
 		const attributes = {};
 		const primitives = [];

examples/jsm/exporters/OBJExporter.js

@@ -32,12 +32,6 @@ class OBJExporter {
 
 			const normalMatrixWorld = new Matrix3();
 
-			if ( geometry.isBufferGeometry !== true ) {
-
-				throw new Error( 'THREE.OBJExporter: Geometry is not of type THREE.BufferGeometry.' );
-
-			}
-
 			// shortcuts
 			const vertices = geometry.getAttribute( 'position' );
 			const normals = geometry.getAttribute( 'normal' );
@@ -159,12 +153,6 @@ class OBJExporter {
 			const geometry = line.geometry;
 			const type = line.type;
 
-			if ( geometry.isBufferGeometry !== true ) {
-
-				throw new Error( 'THREE.OBJExporter: Geometry is not of type THREE.BufferGeometry.' );
-
-			}
-
 			// shortcuts
 			const vertices = geometry.getAttribute( 'position' );
 
@@ -222,12 +210,6 @@ class OBJExporter {
 
 			const geometry = points.geometry;
 
-			if ( geometry.isBufferGeometry !== true ) {
-
-				throw new Error( 'THREE.OBJExporter: Geometry is not of type THREE.BufferGeometry.' );
-
-			}
-
 			const vertices = geometry.getAttribute( 'position' );
 			const colors = geometry.getAttribute( 'color' );
 

examples/jsm/exporters/PLYExporter.js

@@ -21,14 +21,6 @@ class PLYExporter {
 
 	parse( object, onDone, options ) {
 
-		if ( onDone && typeof onDone === 'object' ) {
-
-			console.warn( 'THREE.PLYExporter: The options parameter is now the third argument to the "parse" function. See the documentation for the new API.' );
-			options = onDone;
-			onDone = undefined;
-
-		}
-
 		// Iterate over the valid meshes in the object
 		function traverseMeshes( cb ) {
 
@@ -39,12 +31,6 @@ class PLYExporter {
 					const mesh = child;
 					const geometry = mesh.geometry;
 
-					if ( geometry.isBufferGeometry !== true ) {
-
-						throw new Error( 'THREE.PLYExporter: Geometry is not of type THREE.BufferGeometry.' );
-
-					}
-
 					if ( geometry.hasAttribute( 'position' ) === true ) {
 
 						cb( mesh, geometry );
@@ -82,12 +68,6 @@ class PLYExporter {
 				const mesh = child;
 				const geometry = mesh.geometry;
 
-				if ( geometry.isBufferGeometry !== true ) {
-
-					throw new Error( 'THREE.PLYExporter: Geometry is not of type THREE.BufferGeometry.' );
-
-				}
-
 				const vertices = geometry.getAttribute( 'position' );
 				const normals = geometry.getAttribute( 'normal' );
 				const uvs = geometry.getAttribute( 'uv' );

examples/jsm/exporters/STLExporter.js

@@ -1,6 +1,4 @@
-import {
-	Vector3
-} from 'three';
+import { Vector3 } from 'three';
 
 /**
  * Usage:
@@ -28,12 +26,6 @@ class STLExporter {
 
 				const geometry = object.geometry;
 
-				if ( geometry.isBufferGeometry !== true ) {
-
-					throw new Error( 'THREE.STLExporter: Geometry is not of type THREE.BufferGeometry.' );
-
-				}
-
 				const index = geometry.index;
 				const positionAttribute = geometry.getAttribute( 'position' );
 

examples/jsm/geometries/ParametricGeometry.js

@@ -37,12 +37,6 @@ class ParametricGeometry extends BufferGeometry {
 		const p0 = new Vector3(), p1 = new Vector3();
 		const pu = new Vector3(), pv = new Vector3();
 
-		if ( func.length < 3 ) {
-
-			console.error( 'THREE.ParametricGeometry: Function must now modify a Vector3 as third parameter.' );
-
-		}
-
 		// generate vertices, normals and uvs
 
 		const sliceCount = slices + 1;

examples/jsm/loaders/DRACOLoader.js

@@ -73,21 +73,12 @@ class DRACOLoader extends Loader {
 
 		loader.load( url, ( buffer ) => {
 
-			const taskConfig = {
-				attributeIDs: this.defaultAttributeIDs,
-				attributeTypes: this.defaultAttributeTypes,
-				useUniqueIDs: false
-			};
-
-			this.decodeGeometry( buffer, taskConfig )
-				.then( onLoad )
-				.catch( onError );
+			this.decodeDracoFile( buffer, onLoad ).catch( onError );
 
 		}, onProgress, onError );
 
 	}
 
-	/** @deprecated Kept for backward-compatibility with previous DRACOLoader versions. */
 	decodeDracoFile( buffer, callback, attributeIDs, attributeTypes ) {
 
 		const taskConfig = {
@@ -96,29 +87,12 @@ class DRACOLoader extends Loader {
 			useUniqueIDs: !! attributeIDs
 		};
 
-		this.decodeGeometry( buffer, taskConfig ).then( callback );
+		return this.decodeGeometry( buffer, taskConfig ).then( callback );
 
 	}
 
 	decodeGeometry( buffer, taskConfig ) {
 
-		// TODO: For backward-compatibility, support 'attributeTypes' objects containing
-		// references (rather than names) to typed array constructors. These must be
-		// serialized before sending them to the worker.
-		for ( const attribute in taskConfig.attributeTypes ) {
-
-			const type = taskConfig.attributeTypes[ attribute ];
-
-			if ( type.BYTES_PER_ELEMENT !== undefined ) {
-
-				taskConfig.attributeTypes[ attribute ] = type.name;
-
-			}
-
-		}
-
-		//
-
 		const taskKey = JSON.stringify( taskConfig );
 
 		// Check for an existing task using this buffer. A transferred buffer cannot be transferred

examples/jsm/loaders/FontLoader.js

@@ -19,23 +19,10 @@ class FontLoader extends Loader {
 		const loader = new FileLoader( this.manager );
 		loader.setPath( this.path );
 		loader.setRequestHeader( this.requestHeader );
-		loader.setWithCredentials( scope.withCredentials );
+		loader.setWithCredentials( this.withCredentials );
 		loader.load( url, function ( text ) {
 
-			let json;
-
-			try {
-
-				json = JSON.parse( text );
-
-			} catch ( e ) {
-
-				console.warn( 'THREE.FontLoader: typeface.js support is being deprecated. Use typeface.json instead.' );
-				json = JSON.parse( text.substring( 65, text.length - 2 ) );
-
-			}
-
-			const font = scope.parse( json );
+			const font = scope.parse( JSON.parse( text ) );
 
 			if ( onLoad ) onLoad( font );
 

examples/jsm/loaders/GLTFLoader.js

@@ -1487,7 +1487,7 @@ class GLTFDracoMeshCompressionExtension {
 				const accessorDef = json.accessors[ primitive.attributes[ attributeName ] ];
 				const componentType = WEBGL_COMPONENT_TYPES[ accessorDef.componentType ];
 
-				attributeTypeMap[ threeAttributeName ] = componentType;
+				attributeTypeMap[ threeAttributeName ] = componentType.name;
 				attributeNormalizedMap[ threeAttributeName ] = accessorDef.normalized === true;
 
 			}
@@ -3776,7 +3776,7 @@ class GLTFParser {
 			const channel = animationDef.channels[ i ];
 			const sampler = animationDef.samplers[ channel.sampler ];
 			const target = channel.target;
-			const name = target.node !== undefined ? target.node : target.id; // NOTE: target.id is deprecated.
+			const name = target.node;
 			const input = animationDef.parameters !== undefined ? animationDef.parameters[ sampler.input ] : sampler.input;
 			const output = animationDef.parameters !== undefined ? animationDef.parameters[ sampler.output ] : sampler.output;
 

examples/jsm/loaders/HDRCubeTextureLoader.js

@@ -23,19 +23,6 @@ class HDRCubeTextureLoader extends Loader {
 
 	load( urls, onLoad, onProgress, onError ) {
 
-		if ( ! Array.isArray( urls ) ) {
-
-			console.warn( 'THREE.HDRCubeTextureLoader signature has changed. Use .setDataType() instead.' );
-
-			this.setDataType( urls );
-
-			urls = onLoad;
-			onLoad = onProgress;
-			onProgress = onError;
-			onError = arguments[ 4 ];
-
-		}
-
 		const texture = new CubeTexture();
 
 		texture.type = this.type;

examples/jsm/math/ColorConverter.js

@@ -1,6 +1,4 @@
-import {
-	MathUtils
-} from 'three';
+import { MathUtils } from 'three';
 
 const _hsl = {};
 
@@ -20,13 +18,6 @@ class ColorConverter {
 
 	static getHSV( color, target ) {
 
-		if ( target === undefined ) {
-
-			console.warn( 'THREE.ColorConverter: .getHSV() target is now required' );
-			target = { h: 0, s: 0, l: 0 };
-
-		}
-
 		color.getHSL( _hsl );
 
 		// based on https://gist.github.com/xpansive/1337890#file-index-js
@@ -54,13 +45,6 @@ class ColorConverter {
 
 	static getCMYK( color, target ) {
 
-		if ( target === undefined ) {
-
-			console.warn( 'THREE.ColorConverter: .getCMYK() target is now required' );
-			target = { c: 0, m: 0, y: 0, k: 0 };
-
-		}
-
 		const r = color.r;
 		const g = color.g;
 		const b = color.b;

examples/jsm/renderers/Projector.js

@@ -155,28 +155,6 @@ class Projector {
 
 		//
 
-		this.projectVector = function ( vector, camera ) {
-
-			console.warn( 'THREE.Projector: .projectVector() is now vector.project().' );
-			vector.project( camera );
-
-		};
-
-		this.unprojectVector = function ( vector, camera ) {
-
-			console.warn( 'THREE.Projector: .unprojectVector() is now vector.unproject().' );
-			vector.unproject( camera );
-
-		};
-
-		this.pickingRay = function () {
-
-			console.error( 'THREE.Projector: .pickingRay() is now raycaster.setFromCamera().' );
-
-		};
-
-		//
-
 		function RenderList() {
 
 			const normals = [];

examples/jsm/utils/SceneUtils.js

@@ -118,28 +118,8 @@ function createMultiMaterialObject( geometry, materials ) {
 
 }
 
-function detach( child, parent, scene ) {
-
-	console.warn( 'THREE.SceneUtils: detach() has been deprecated. Use scene.attach( child ) instead.' );
-
-	scene.attach( child );
-
-}
-
-function attach( child, scene, parent ) {
-
-	console.warn( 'THREE.SceneUtils: attach() has been deprecated. Use parent.attach( child ) instead.' );
-
-	parent.attach( child );
-
-}
-
-
-
 export {
 	createMeshesFromInstancedMesh,
 	createMeshesFromMultiMaterialMesh,
-	createMultiMaterialObject,
-	detach,
-	attach,
+	createMultiMaterialObject
 };

examples/jsm/webxr/VRButton.js

@@ -1,12 +1,6 @@
 class VRButton {
 
-	static createButton( renderer, options ) {
-
-		if ( options ) {
-
-			console.error( 'THREE.VRButton: The "options" parameter has been removed. Please set the reference space type via renderer.xr.setReferenceSpaceType() instead.' );
-
-		}
+	static createButton( renderer ) {
 
 		const button = document.createElement( 'button' );
 

manual/en/custom-geometry.html

@@ -1,470 +0,0 @@
-<!DOCTYPE html><html lang="en"><head>
-    <meta charset="utf-8">
-    <title>Custom Geometry</title>
-    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:site" content="@threejs">
-    <meta name="twitter:title" content="Three.js – Custom Geometry">
-    <meta property="og:image" content="https://threejs.org/files/share.png">
-    <link rel="shortcut icon" href="/files/favicon_white.ico" media="(prefers-color-scheme: dark)">
-    <link rel="shortcut icon" href="/files/favicon.ico" media="(prefers-color-scheme: light)">
-
-    <link rel="stylesheet" href="/manual/resources/lesson.css">
-    <link rel="stylesheet" href="/manual/resources/lang.css">
-<!-- Import maps polyfill -->
-<!-- Remove this when import maps will be widely supported -->
-<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
-
-<script type="importmap">
-{
-  "imports": {
-    "three": "../../build/three.module.js"
-  }
-}
-</script>
-  </head>
-  <body>
-    <div class="container">
-      <div class="lesson-title">
-        <h1>Custom Geometry</h1>
-      </div>
-      <div class="lesson">
-        <div class="lesson-main">
-          <div class="warning">
-<strong>NOTE!</strong> This article is deprecated. Three.js r125
-removed support for <code class="notranslate" translate="no">Geometry</code>. Please refer to
-the article on <a href="custom-buffergeometry.html">custom BufferGeometry</a>.
-</div>
-
-<p>A <a href="primitives.html">previous article</a> gave a tour of
-the various built in primitives included in THREE.js. In this
-article we'll cover making our own geometry.</p>
-<p>Just to be clear, if you are serious about making 3D content,
-the most common way is to use a 3D modeling package like
-<a href="https://blender.org">Blender</a>,
-<a href="https://www.autodesk.com/products/maya/overview">Maya</a>,
-<a href="https://www.autodesk.com/products/3ds-max/overview">3D Studio Max</a>,
-<a href="https://www.maxon.net/en-us/">Cinema4D</a>, etc...
-You'd build a model and then export to <a href="load-gltf.html">gLTF</a>
-or <a href="load-obj.html">.obj</a> and load them up.
-Whichever one you choose, expect to spend 2 or 3 weeks going through
-their respective tutorials as all of them have a learning curve
-to be useful.</p>
-<p>Still, there are times when we might want to generate our own
-3D geometry in code instead of using a modeling package.</p>
-<p>First let's just make a cube. Even though three.js already
-provides us with <a href="/docs/#api/en/geometries/BoxGeometry"><code class="notranslate" translate="no">BoxGeometry</code></a> and <a href="/docs/#api/en/geometries/BoxGeometry"><code class="notranslate" translate="no">BoxGeometry</code></a> a
-cube is easy to understand so let's start there.</p>
-<p>There are 2 ways to make custom geometry in THREE.js. One
-is with the <code class="notranslate" translate="no">Geometry</code> class, the other is <a href="/docs/#api/en/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>.
-Each has their advantages. <code class="notranslate" translate="no">Geometry</code> is arguably easier to
-use but slower and uses more memory. For few 1000s triangles
-it's a great choice but for 10s of thousands of triangles
-it might be better to use <a href="/docs/#api/en/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>.</p>
-<p><a href="/docs/#api/en/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a> is arguably harder to use but uses less
-memory and is faster. If quick rule of thumb might be
-if you're going to generate more than 10000 triangles
-consider using <a href="/docs/#api/en/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>.</p>
-<p>Note when I say <code class="notranslate" translate="no">Geometry</code> is slower I mean it is slower to
-start and slower to modify but it is not slower to draw so
-if you're not planning on modifying your geometry then
-as long as it's not too large there will only be slightly more
-delay for your program to start using <code class="notranslate" translate="no">Geometry</code> vs using
-<a href="/docs/#api/en/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>. We'll go over both eventually. For now
-though let's use geometry as it's easier to understand IMO.</p>
-<p>First let's make a cube with <code class="notranslate" translate="no">Geometry</code>. We'll start
-with an example from <a href="responsive.html">the article on responsiveness</a>.</p>
-<p>Let's remove the part that uses <a href="/docs/#api/en/geometries/BoxGeometry"><code class="notranslate" translate="no">BoxGeometry</code></a> and replace it with
-a <code class="notranslate" translate="no">Geometry</code>.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-const boxWidth = 1;
--const boxHeight = 1;
--const boxDepth = 1;
--const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
-+const geometry = new THREE.Geometry();
-</pre>
-<p>Now let's add the 8 corners of a cube. Here are the 8 corners.</p>
-<div class="threejs_center"><img src="../resources/cube-vertex-positions.svg" style="width: 500px"></div>
-
-<p>Centered around the origin we can add the vertex positions like this</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const geometry = new THREE.Geometry();
-+geometry.vertices.push(
-+  new THREE.Vector3(-1, -1,  1),  // 0
-+  new THREE.Vector3( 1, -1,  1),  // 1
-+  new THREE.Vector3(-1,  1,  1),  // 2
-+  new THREE.Vector3( 1,  1,  1),  // 3
-+  new THREE.Vector3(-1, -1, -1),  // 4
-+  new THREE.Vector3( 1, -1, -1),  // 5
-+  new THREE.Vector3(-1,  1, -1),  // 6
-+  new THREE.Vector3( 1,  1, -1),  // 7
-+);
-</pre>
-<p>We then need to make triangles, 2 for each face of the cube</p>
-<div class="threejs_center"><img src="../resources/cube-triangles.svg" style="width: 500px"></div>
-
-<p>We do that by creating <a href="/docs/#api/en/core/Face3"><code class="notranslate" translate="no">Face3</code></a> objects and specifying the indices
-of the 3 vertices that make up that face.</p>
-<p>The order we specify the vertices is important. To be pointing toward the
-outside of the cube they must be specified in a counter clockwise direction
-when that triangle is facing the camera.</p>
-<div class="threejs_center"><img src="../resources/cube-vertex-winding-order.svg" style="width: 500px"></div>
-
-<p>Following that pattern we can specify the 12 triangles that make
-the cube like this</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">geometry.faces.push(
-  // front
-  new THREE.Face3(0, 3, 2),
-  new THREE.Face3(0, 1, 3),
-  // right
-  new THREE.Face3(1, 7, 3),
-  new THREE.Face3(1, 5, 7),
-  // back
-  new THREE.Face3(5, 6, 7),
-  new THREE.Face3(5, 4, 6),
-  // left
-  new THREE.Face3(4, 2, 6),
-  new THREE.Face3(4, 0, 2),
-  // top
-  new THREE.Face3(2, 7, 6),
-  new THREE.Face3(2, 3, 7),
-  // bottom
-  new THREE.Face3(4, 1, 0),
-  new THREE.Face3(4, 5, 1),
-);
-</pre>
-<p>A few other minor changes to the original code and it should
-work.</p>
-<p>These cubes are twice as large as the <a href="/docs/#api/en/geometries/BoxGeometry"><code class="notranslate" translate="no">BoxGeometry</code></a> we were
-using before so let's move the camera back a little</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const fov = 75;
-const aspect = 2;  // the canvas default
-const near = 0.1;
--const far = 5;
-+const far = 100;
-const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
--camera.position.z = 2;
-+camera.position.z = 5;
-</pre>
-<p>and let's separate them a little more and I changed their colors just because</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const cubes = [
--  makeInstance(geometry, 0x44aa88,  0),
--  makeInstance(geometry, 0x8844aa, -2),
--  makeInstance(geometry, 0xaa8844,  2),
-+  makeInstance(geometry, 0x44FF44,  0),
-+  makeInstance(geometry, 0x4444FF, -4),
-+  makeInstance(geometry, 0xFF4444,  4),
-];
-</pre>
-<p>One last thing is we haven't added normals yet so we
-can't do any lighting. Let's change the material
-to something that doesn't need lights.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function makeInstance(geometry, color, x) {
--  const material = new THREE.MeshPhongMaterial({color});
-+  const material = new THREE.MeshBasicMaterial({color});
-
-  const cube = new THREE.Mesh(geometry, material);
-  scene.add(cube);
-
-  ...
-</pre>
-<p>and we get cubes we made ourselves.</p>
-<p></p><div translate="no" class="threejs_example_container notranslate">
-  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-geometry-cube.html"></iframe></div>
-  <a class="threejs_center" href="/manual/examples/custom-geometry-cube.html" target="_blank">click here to open in a separate window</a>
-</div>
-
-<p></p>
-<p>We can specify a color per face by setting the <code class="notranslate" translate="no">color</code> property of
-each face.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">geometry.faces[ 0].color = geometry.faces[ 1].color = new THREE.Color('red');
-geometry.faces[ 2].color = geometry.faces[ 3].color = new THREE.Color('yellow');
-geometry.faces[ 4].color = geometry.faces[ 5].color = new THREE.Color('green');
-geometry.faces[ 6].color = geometry.faces[ 7].color = new THREE.Color('cyan');
-geometry.faces[ 8].color = geometry.faces[ 9].color = new THREE.Color('blue');
-geometry.faces[10].color = geometry.faces[11].color = new THREE.Color('magenta');
-</pre>
-<p>note we need to tell the material we want to use vertex colors</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-const material = new THREE.MeshBasicMaterial({color});
-+const material = new THREE.MeshBasicMaterial({vertexColors: true});
-</pre>
-<p></p><div translate="no" class="threejs_example_container notranslate">
-  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-geometry-cube-face-colors.html"></iframe></div>
-  <a class="threejs_center" href="/manual/examples/custom-geometry-cube-face-colors.html" target="_blank">click here to open in a separate window</a>
-</div>
-
-<p></p>
-<p>We can instead set the color of each individual vertex by setting the <code class="notranslate" translate="no">vertexColors</code>
-property of a <code class="notranslate" translate="no">Face</code> to an array of the 3 colors for the 3 vertices.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">geometry.faces.forEach((face, ndx) =&gt; {
-  face.vertexColors = [
-    (new THREE.Color()).setHSL(ndx / 12      , 1, 0.5),
-    (new THREE.Color()).setHSL(ndx / 12 + 0.1, 1, 0.5),
-    (new THREE.Color()).setHSL(ndx / 12 + 0.2, 1, 0.5),
-  ];
-});
-</pre>
-<p></p><div translate="no" class="threejs_example_container notranslate">
-  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-geometry-cube-vertex-colors.html"></iframe></div>
-  <a class="threejs_center" href="/manual/examples/custom-geometry-cube-vertex-colors.html" target="_blank">click here to open in a separate window</a>
-</div>
-
-<p></p>
-<p>To use lighting we need normals. Normals are vectors that specify direction.
-Just like the colors we can specify a normal for the face by setting the <code class="notranslate" translate="no">normal</code>
-property on each face with</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">face.normal = new THREE.Vector3(...)
-</pre>
-<p>or we can specify a normal for each vertex by setting the <code class="notranslate" translate="no">vertexNormals</code>
-property with something like</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">face.vertexNormals = [
-  new THREE.Vector3(...),
-  new THREE.Vector3(...),
-  new THREE.Vector3(...),
-]
-</pre>
-<p>but often it's much easier to just ask THREE.js to compute normals
-for us based on the positions we specified.</p>
-<p>For face normals we'd call <code class="notranslate" translate="no">Geometry.computeFaceNormals</code> as in</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">geometry.computeFaceNormals();
-</pre>
-<p>Removing the vertex color stuff and changing the material back to <a href="/docs/#api/en/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a></p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-const material = new THREE.MeshBasicMaterial({vertexColors: true});
-+const material = new THREE.MeshPhongMaterial({color});
-</pre>
-<p>and now our cubes can be lit.</p>
-<p></p><div translate="no" class="threejs_example_container notranslate">
-  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-geometry-cube-face-normals.html"></iframe></div>
-  <a class="threejs_center" href="/manual/examples/custom-geometry-cube-face-normals.html" target="_blank">click here to open in a separate window</a>
-</div>
-
-<p></p>
-<p>Using face normals will always give us a faceted look. We can use
-vertex normals for a smoother look by calling <code class="notranslate" translate="no">Geometry.computeVertexNormals</code></p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-geometry.computeFaceNormals();
-+geometry.computeVertexNormals();
-</pre>
-<p>Unfortunately a cube is not a good candidate for vertex normals since it
-means each vertex gets its normal from the
-normals of all the faces it shares.</p>
-<p></p><div translate="no" class="threejs_example_container notranslate">
-  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-geometry-cube-vertex-normals.html"></iframe></div>
-  <a class="threejs_center" href="/manual/examples/custom-geometry-cube-vertex-normals.html" target="_blank">click here to open in a separate window</a>
-</div>
-
-<p></p>
-<p>Adding texture coordinates, sometimes called UVs, is done via an array of
-layers of parallel arrays to the <code class="notranslate" translate="no">faces</code> array which is set via <code class="notranslate" translate="no">Geometry.faceVertexUvs</code>.
-For our cube we could do something like</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">geometry.faceVertexUvs[0].push(
-  // front
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1) ],
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1) ],
-  // right
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1) ],
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1) ],
-  // back
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1) ],
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1) ],
-  // left
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1) ],
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1) ],
-  // top
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1) ],
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1) ],
-  // bottom
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1) ],
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1) ],
-);
-</pre>
-<p>It's important to notice <code class="notranslate" translate="no">faceVertexUvs</code> is an array of layers. Each layer
-is another set of UV coordinates. By default there is one layer of UV coordinates,
-layer 0, so we just add our UVs to that layer.</p>
-<p>Let's <a href="textures.html">add a texture</a> to our material and switch back to compute face normals</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-geometry.computeVertexNormals();
-+geometry.computeFaceNormals();
-
-+const loader = new THREE.TextureLoader();
-+const texture = loader.load('resources/images/star.png');
-
-function makeInstance(geometry, color, x) {
--  const material = new THREE.MeshPhongMaterial({color});
-+  const material = new THREE.MeshPhongMaterial({color, map: texture});
-
-  const cube = new THREE.Mesh(geometry, material);
-  scene.add(cube);
-
-  ...
-</pre>
-<p></p><div translate="no" class="threejs_example_container notranslate">
-  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-geometry-cube-texcoords.html"></iframe></div>
-  <a class="threejs_center" href="/manual/examples/custom-geometry-cube-texcoords.html" target="_blank">click here to open in a separate window</a>
-</div>
-
-<p></p>
-<p>Putting that all together, let's make a simple heightmap based
-terrain mesh.</p>
-<p>A heightmap based terrain is where you have a 2D array of heights
-that you apply them to a grid. An easy way to get a 2D array of heights
-is to draw them in an image editing program. Here's an image I drew.
-It's 96x64 pixels</p>
-<div class="threejs_center"><img src="../examples/resources/images/heightmap-96x64.png" style="width: 512px; image-rendering: pixelated;"></div>
-
-<p>We'll load that and then generate a heightmap mesh from it.
-We can use the <a href="/docs/#api/en/loaders/ImageLoader"><code class="notranslate" translate="no">ImageLoader</code></a> to load the image.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const imgLoader = new THREE.ImageLoader();
-imgLoader.load('resources/images/heightmap-96x64.png', createHeightmap);
-
-function createHeightmap(image) {
-  // extract the data from the image by drawing it to a canvas
-  // and calling getImageData
-  const ctx = document.createElement('canvas').getContext('2d');
-  const {width, height} = image;
-  ctx.canvas.width = width;
-  ctx.canvas.height = height;
-  ctx.drawImage(image, 0, 0);
-  const {data} = ctx.getImageData(0, 0, width, height);
-
-  const geometry = new THREE.Geometry();
-</pre>
-<p>We extracted the data from the image, now we'll make a grid of cells.
-The cells are the squares formed by the center points of each pixel
-from the image</p>
-<div class="threejs_center"><img src="../resources/heightmap-points.svg" style="width: 500px"></div>
-
-<p>For each cell we'll generate 5 vertices. One for each corner of the cell
-and one at the center point of the cell with the average height of the 4
-corner heights.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const cellsAcross = width - 1;
-const cellsDeep = height - 1;
-for (let z = 0; z &lt; cellsDeep; ++z) {
-  for (let x = 0; x &lt; cellsAcross; ++x) {
-    // compute row offsets into the height data
-    // we multiply by 4 because the data is R,G,B,A but we
-    // only care about R
-    const base0 = (z * width + x) * 4;
-    const base1 = base0 + (width * 4);
-
-    // look up the height for the for points
-    // around this cell
-    const h00 = data[base0] / 32;
-    const h01 = data[base0 + 4] / 32;
-    const h10 = data[base1] / 32;
-    const h11 = data[base1 + 4] / 32;
-    // compute the average height
-    const hm = (h00 + h01 + h10 + h11) / 4;
-
-    // the corner positions
-    const x0 = x;
-    const x1 = x + 1;
-    const z0 = z;
-    const z1 = z + 1;
-
-    // remember the first index of these 5 vertices
-    const ndx = geometry.vertices.length;
-
-    // add the 4 corners for this cell and the midpoint
-    geometry.vertices.push(
-      new THREE.Vector3(x0, h00, z0),
-      new THREE.Vector3(x1, h01, z0),
-      new THREE.Vector3(x0, h10, z1),
-      new THREE.Vector3(x1, h11, z1),
-      new THREE.Vector3((x0 + x1) / 2, hm, (z0 + z1) / 2),
-    );
-</pre>
-<p>We'll then make 4 triangles from those 5 vertices</p>
-<div class="threejs_center"><img src="../resources/heightmap-triangles.svg" style="width: 500px"></div>
-
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">    // create 4 triangles
-    geometry.faces.push(
-      new THREE.Face3(ndx + 0, ndx + 4, ndx + 1),
-      new THREE.Face3(ndx + 1, ndx + 4, ndx + 3),
-      new THREE.Face3(ndx + 3, ndx + 4, ndx + 2),
-      new THREE.Face3(ndx + 2, ndx + 4, ndx + 0),
-    );
-
-    // add the texture coordinates for each vertex of each face
-    const u0 = x / cellsAcross;
-    const v0 = z / cellsDeep;
-    const u1 = (x + 1) / cellsAcross;
-    const v1 = (z + 1) / cellsDeep;
-    const um = (u0 + u1) / 2;
-    const vm = (v0 + v1) / 2;
-    geometry.faceVertexUvs[0].push(
-      [ new THREE.Vector2(u0, v0), new THREE.Vector2(um, vm), new THREE.Vector2(u1, v0) ],
-      [ new THREE.Vector2(u1, v0), new THREE.Vector2(um, vm), new THREE.Vector2(u1, v1) ],
-      [ new THREE.Vector2(u1, v1), new THREE.Vector2(um, vm), new THREE.Vector2(u0, v1) ],
-      [ new THREE.Vector2(u0, v1), new THREE.Vector2(um, vm), new THREE.Vector2(u0, v0) ],
-    );
-  }
-}
-</pre>
-<p>and finish it up</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">  geometry.computeFaceNormals();
-
-  // center the geometry
-  geometry.translate(width / -2, 0, height / -2);
-
-  const loader = new THREE.TextureLoader();
-  const texture = loader.load('resources/images/star.png');
-
-  const material = new THREE.MeshPhongMaterial({color: 'green', map: texture});
-
-  const cube = new THREE.Mesh(geometry, material);
-  scene.add(cube);
-}
-</pre>
-<p>A few minor changes to make it easier to view.</p>
-<ul>
-<li>include the <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a></li>
-</ul>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-+import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
-</pre>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const fov = 75;
-const aspect = 2;  // the canvas default
-const near = 0.1;
--const far = 100;
-+const far = 200;
-const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
--camera.position.z = 5;
-+camera.position.set(20, 20, 20);
-
-+const controls = new OrbitControls(camera, canvas);
-+controls.target.set(0, 0, 0);
-+controls.update();
-</pre>
-<p>add 2 lights</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-{
-+function addLight(...pos) {
-  const color = 0xFFFFFF;
-  const intensity = 1;
-  const light = new THREE.DirectionalLight(color, intensity);
--  light.position.set(-1, 2, 4\);
-+  light.position.set(...pos);
-  scene.add(light);
-}
-
-+addLight(-1, 2, 4);
-+addLight(1, 2, -2);
-</pre>
-<p>and we deleted the code related to spinning the cubes.</p>
-<p></p><div translate="no" class="threejs_example_container notranslate">
-  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-geometry-heightmap.html"></iframe></div>
-  <a class="threejs_center" href="/manual/examples/custom-geometry-heightmap.html" target="_blank">click here to open in a separate window</a>
-</div>
-
-<p></p>
-<p>I hope that was a useful instruction to making your own
-geometry using <code class="notranslate" translate="no">Geometry</code>.</p>
-<p>In <a href="custom-buffergeometry.html">another article</a> we'll go over <a href="/docs/#api/en/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>.</p>
-
-        </div>
-      </div>
-    </div>
-  
-  <script src="/manual/resources/prettify.js"></script>
-  <script src="/manual/resources/lesson.js"></script>
-
-
-
-
-</body></html>

manual/fr/custom-geometry.html

@@ -1,46 +0,0 @@
-<!DOCTYPE html><html lang="fr"><head>
-    <meta charset="utf-8">
-    <title>Custom Geometry</title>
-    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:site" content="@threejs">
-    <meta name="twitter:title" content="Three.js – Custom Geometry">
-    <meta property="og:image" content="https://threejs.org/files/share.png">
-    <link rel="shortcut icon" href="/files/favicon_white.ico" media="(prefers-color-scheme: dark)">
-    <link rel="shortcut icon" href="/files/favicon.ico" media="(prefers-color-scheme: light)">
-
-    <link rel="stylesheet" href="/manual/resources/lesson.css">
-    <link rel="stylesheet" href="/manual/resources/lang.css">
-<!-- Import maps polyfill -->
-<!-- Remove this when import maps will be widely supported -->
-<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
-
-<script type="importmap">
-{
-  "imports": {
-    "three": "../../build/three.module.js"
-  }
-}
-</script>
-  </head>
-  <body>
-    <div class="container">
-      <div class="lesson-title">
-        <h1>Custom Geometry</h1>
-      </div>
-      <div class="lesson">
-        <div class="lesson-main">
-          <p>Désolé, cet article n'a pas encore été traduit. <a href="https://github.com/mrdoob/three.js">Les traductions sont le bienvenue</a>! 😄</p>
-<p><a href="/manual/en/custom-geometry.html">Voici l'article anglais originel pour le moment</a>.</p>
-
-        </div>
-      </div>
-    </div>
-  
-  <script src="/manual/resources/prettify.js"></script>
-  <script src="/manual/resources/lesson.js"></script>
-
-
-
-
-</body></html>

manual/ja/custom-geometry.html

@@ -1,433 +0,0 @@
-<!DOCTYPE html><html lang="ja"><head>
-    <meta charset="utf-8">
-    <title>のカスタムジオメトリ</title>
-    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:site" content="@threejs">
-    <meta name="twitter:title" content="Three.js – のカスタムジオメトリ">
-    <meta property="og:image" content="https://threejs.org/files/share.png">
-    <link rel="shortcut icon" href="/files/favicon_white.ico" media="(prefers-color-scheme: dark)">
-    <link rel="shortcut icon" href="/files/favicon.ico" media="(prefers-color-scheme: light)">
-
-    <link rel="stylesheet" href="/manual/resources/lesson.css">
-    <link rel="stylesheet" href="/manual/resources/lang.css">
-<!-- Import maps polyfill -->
-<!-- Remove this when import maps will be widely supported -->
-<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
-
-<script type="importmap">
-{
-  "imports": {
-    "three": "../../build/three.module.js"
-  }
-}
-</script>
-  </head>
-  <body>
-    <div class="container">
-      <div class="lesson-title">
-        <h1>のカスタムジオメトリ</h1>
-      </div>
-      <div class="lesson">
-        <div class="lesson-main">
-          <div class="warning">
-<strong>NOTE!</strong> This article is deprecated. Three.js r125
-removed support for <code class="notranslate" translate="no">Geometry</code>. Please refer to
-the article on <a href="custom-buffergeometry.html">custom BufferGeometry</a>.
-</div>
-
-
-<p>前回の<a href="primitives.html">記事</a>ではTHREE.jsにある基本ジオメトリであるプリミティブジオメトリを紹介しました。この記事ではカスタムジオメトリを紹介します。</p>
-<p>まず最初に断っておきますが、本格的な３Dコンテンツを作りたい場合は
-３Dモデリングツールを使うべきです。３Dモデリングツールには
-<a href="https://blender.org">Blender</a>,
-<a href="https://www.autodesk.com/products/maya/overview">Maya</a>,
-<a href="https://www.autodesk.com/products/3ds-max/overview">3D Studio Max</a>,
-<a href="https://www.maxon.net/en-us/">Cinema4D</a>などがあります。</p>
-<p>これらのモデリングツールでモデルを作ってから<a href="load-gltf.html">gLTF</a>や<a href="load-obj.html">.obj</a> 
-にエクスポートしたものをTHREE.jsにインポートすることもできます。
-どのモデリングツールも習得にそれなりの時間がかかります。</p>
-<p>ここまで簡単なカスタムジオメトリであれば大袈裟なモデリングツールを使わずにTHREE.jsのコードで作れます。</p>
-<p>まずは立方体を作ってみましょう。THREE.jsの<a href="/docs/#api/ja/geometries/BoxGeometry"><code class="notranslate" translate="no">BoxGeometry</code></a>や<a href="/docs/#api/ja/geometries/BoxGeometry"><code class="notranslate" translate="no">BoxGeometry</code></a>を使えば一発で
-立方体を作れますが、簡単な例としてカスタムジオメトリで作ってみましょう。</p>
-<p>THREE.jsにはカスタムジオメトリを作る方法が２つあります。１つ目は<code class="notranslate" translate="no">Geometry</code>クラスで２つ目が<a href="/docs/#api/ja/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>です。
-それぞれに利点があります。<code class="notranslate" translate="no">Geometry</code>は簡単に使えますが遅く、メモリをより消費します。1000個以下の三角形を作る際は
-よいですが、10,000個の三角形を作る時には<a href="/docs/#api/ja/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>が良いでしょう。</p>
-<p><a href="/docs/#api/ja/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>は使うのが難しいですがメモリの消費が小さく速いです。１万個の三角形を作る時にはこれを使いましょう。</p>
-<p>ただし変形などがない場合はそれほど変わりません。<code class="notranslate" translate="no">Geometry</code>が遅いというのはジオメトリが編集された
-場合に遅いと言う意味で、もし編集が必要なくそれほど大きくなければこの両者はあまり変わりません。
-この記事では両方紹介します。最初は簡単な<code class="notranslate" translate="no">Geometry</code>を紹介します。</p>
-<p>まずは<code class="notranslate" translate="no">Geometry</code>で立方体を作ってみましょう。<a href="responsive.html">レスポンシブの記事</a>の例を使います。</p>
-<p><a href="/docs/#api/ja/geometries/BoxGeometry"><code class="notranslate" translate="no">BoxGeometry</code></a>を使っている部分を消して<code class="notranslate" translate="no">Geometry</code>で置き換えてみます。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-const boxWidth = 1;
--const boxHeight = 1;
--const boxDepth = 1;
--const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
-+const geometry = new THREE.Geometry();
-</pre>
-<p>まずは８つの角を追加してみます。</p>
-<div class="threejs_center"><img src="../resources/cube-vertex-positions.svg" style="width: 500px"></div>
-
-<p>中心の周囲にこのようにvertexを追加します。（訳註：vertexとはジオメトリを構成する頂点です。３つの頂点を結ぶことでface＝面ができます）。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const geometry = new THREE.Geometry();
-+geometry.vertices.push(
-+  new THREE.Vector3(-1, -1,  1),  // 0
-+  new THREE.Vector3( 1, -1,  1),  // 1
-+  new THREE.Vector3(-1,  1,  1),  // 2
-+  new THREE.Vector3( 1,  1,  1),  // 3
-+  new THREE.Vector3(-1, -1, -1),  // 4
-+  new THREE.Vector3( 1, -1, -1),  // 5
-+  new THREE.Vector3(-1,  1, -1),  // 6
-+  new THREE.Vector3( 1,  1, -1),  // 7
-+);
-</pre>
-<p>vertexを結んで三角形を作ります。１面につき２つの三角形を使います。
-（訳註：立方体は６つの正方形で構成されます。１つの正方形は２つの三角形で構成されます。）</p>
-<div class="threejs_center"><img src="../resources/cube-triangles.svg" style="width: 500px"></div>
-
-<p>vertexを結んで三角形を作るには<a href="/docs/#api/ja/core/Face3"><code class="notranslate" translate="no">Face3</code></a>を使います。<a href="/docs/#api/ja/core/Face3"><code class="notranslate" translate="no">Face3</code></a>の３は３つのvertexでfaceを作ると言う意味です。</p>
-<p>vertexを指定する順序は重要です。faceには表面と裏面があります。立方体を構成するfaceの
-面が外に向くためには反時計回りの順序でvertexを指定します。</p>
-<div class="threejs_center"><img src="../resources/cube-vertex-winding-order.svg" style="width: 500px"></div>
-
-<p>同じように１２個の三角形を作って立方体を作ります。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">geometry.faces.push(
-  // front
-  new THREE.Face3(0, 3, 2),
-  new THREE.Face3(0, 1, 3),
-  // right
-  new THREE.Face3(1, 7, 3),
-  new THREE.Face3(1, 5, 7),
-  // back
-  new THREE.Face3(5, 6, 7),
-  new THREE.Face3(5, 4, 6),
-  // left
-  new THREE.Face3(4, 2, 6),
-  new THREE.Face3(4, 0, 2),
-  // top
-  new THREE.Face3(2, 7, 6),
-  new THREE.Face3(2, 3, 7),
-  // bottom
-  new THREE.Face3(4, 1, 0),
-  new THREE.Face3(4, 5, 1),
-);
-</pre>
-<p>ちょっとコードを変えるだけで動きます。</p>
-<p>これらの立方体は前に使った<a href="/docs/#api/ja/geometries/BoxGeometry"><code class="notranslate" translate="no">BoxGeometry</code></a>の立方体より２倍のサイズがあります。
-全体が映るようにカメラを引きます。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const fov = 75;
-const aspect = 2;  // the canvas default
-const near = 0.1;
--const far = 5;
-+const far = 100;
-const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
--camera.position.z = 2;
-+camera.position.z = 5;
-</pre>
-<p>わかりやすいようにそれぞれを離して色を変えます。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const cubes = [
--  makeInstance(geometry, 0x44aa88,  0),
--  makeInstance(geometry, 0x8844aa, -2),
--  makeInstance(geometry, 0xaa8844,  2),
-+  makeInstance(geometry, 0x44FF44,  0),
-+  makeInstance(geometry, 0x4444FF, -4),
-+  makeInstance(geometry, 0xFF4444,  4),
-];
-</pre>
-<p>この状態ではnormal（法線）がないのでライトが当たりません。
-そこでライトが必要ないマテリアルに変えます。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function makeInstance(geometry, color, x) {
--  const material = new THREE.MeshPhongMaterial({color});
-+  const material = new THREE.MeshBasicMaterial({color});
-
-  const cube = new THREE.Mesh(geometry, material);
-  scene.add(cube);
-
-  ...
-</pre>
-<p>これで自分で作った立方体ができました。</p>
-<p></p><div translate="no" class="threejs_example_container notranslate">
-  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-geometry-cube.html"></iframe></div>
-  <a class="threejs_center" href="/manual/examples/custom-geometry-cube.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
-</div>
-
-<p></p>
-<p>それぞれのfaceに対して<code class="notranslate" translate="no">color</code>を設定することで色を変えられます。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">geometry.faces[ 0].color = geometry.faces[ 1].color = new THREE.Color('red');
-geometry.faces[ 2].color = geometry.faces[ 3].color = new THREE.Color('yellow');
-geometry.faces[ 4].color = geometry.faces[ 5].color = new THREE.Color('green');
-geometry.faces[ 6].color = geometry.faces[ 7].color = new THREE.Color('cyan');
-geometry.faces[ 8].color = geometry.faces[ 9].color = new THREE.Color('blue');
-geometry.faces[10].color = geometry.faces[11].color = new THREE.Color('magenta');
-</pre>
-<p>マテリアルには<code class="notranslate" translate="no">vertexColors</code>を使うように設定します。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-const material = new THREE.MeshBasicMaterial({color});
-+const material = new THREE.MeshBasicMaterial({vertexColors: true});
-</pre>
-<p></p><div translate="no" class="threejs_example_container notranslate">
-  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-geometry-cube-face-colors.html"></iframe></div>
-  <a class="threejs_center" href="/manual/examples/custom-geometry-cube-face-colors.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
-</div>
-
-<p></p>
-<p><code class="notranslate" translate="no">vertexcolors</code>を設定すればvertexそれぞれに色を設定できます。
-３つのvertexに対して３つの色を設定してみます。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">geometry.faces.forEach((face, ndx) =&gt; {
-  face.vertexColors = [
-    (new THREE.Color()).setHSL(ndx / 12      , 1, 0.5),
-    (new THREE.Color()).setHSL(ndx / 12 + 0.1, 1, 0.5),
-    (new THREE.Color()).setHSL(ndx / 12 + 0.2, 1, 0.5),
-  ];
-});
-</pre>
-<p></p><div translate="no" class="threejs_example_container notranslate">
-  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-geometry-cube-vertex-colors.html"></iframe></div>
-  <a class="threejs_center" href="/manual/examples/custom-geometry-cube-vertex-colors.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
-</div>
-
-<p></p>
-<p>ライトを適用する時はnormalが必要です。normalはfaceの向きを示すベクトルです。
-色を設定したのと同じようにそれぞれのfaceにのnormalを設定します。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">face.normal = new THREE.Vector3(...)
-</pre>
-<p><code class="notranslate" translate="no">vertexNormals</code>でvertexに対してnormalを設定することもできます。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">face.vertexNormals = [
-  new THREE.Vector3(...),
-  new THREE.Vector3(...),
-  new THREE.Vector3(...),
-]
-</pre>
-<p>しかしTHREE.jsに自動的にnormalを設定してもらうこともできます。
-faceのnormalに対しては<code class="notranslate" translate="no">Geometry.computeFaceNormals</code>を使います。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">geometry.computeFaceNormals();
-</pre>
-<p>vertex colorを消してマテリアルを<a href="/docs/#api/ja/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a>に戻します。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-const material = new THREE.MeshBasicMaterial({vertexColors: true});
-+const material = new THREE.MeshPhongMaterial({color});
-</pre>
-<p>ライトが適用できました。</p>
-<p></p><div translate="no" class="threejs_example_container notranslate">
-  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-geometry-cube-face-normals.html"></iframe></div>
-  <a class="threejs_center" href="/manual/examples/custom-geometry-cube-face-normals.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
-</div>
-
-<p></p>
-<p>vertex normalsを使うことで滑らかな表面を表現できます。
-<code class="notranslate" translate="no">Geometry.computeVertexNormals</code>を設定してください。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-geometry.computeFaceNormals();
-+geometry.computeVertexNormals();
-</pre>
-<p>ここまで説明しておいてなんですが立方体はvertex normalの例としてはあまり適切ではありません。
-なぜなら１つのvertex normalがそのvertexが接する全ての面に依存しているからです。</p>
-<p></p><div translate="no" class="threejs_example_container notranslate">
-  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-geometry-cube-vertex-normals.html"></iframe></div>
-  <a class="threejs_center" href="/manual/examples/custom-geometry-cube-vertex-normals.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
-</div>
-
-<p></p>
-<p>テクスチャの座標（UVと呼ばれる）を設定するには<code class="notranslate" translate="no">faces</code>に対応した配列を用意します。
-<code class="notranslate" translate="no">Geometry.faceVertexUvs</code>で設定します。
-これらのテクニックを使うと以下のような立方体ができます。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">geometry.faceVertexUvs[0].push(
-  // front
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1) ],
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1) ],
-  // right
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1) ],
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1) ],
-  // back
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1) ],
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1) ],
-  // left
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1) ],
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1) ],
-  // top
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1) ],
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1) ],
-  // bottom
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1) ],
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1) ],
-);
-</pre>
-<p><code class="notranslate" translate="no">faceVertexUvs</code>は配列の配列によってUV座標がレイヤー状に格納されています。それぞれの配列にはUV座標が入っています。デフォルトではレイヤー数は１です。もう１つレイヤーを追加してみます。</p>
-<p>マテリアルに<a href="textures.html">テクスチャを追加</a> してください。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-geometry.computeVertexNormals();
-+geometry.computeFaceNormals();
-
-+const loader = new THREE.TextureLoader();
-+const texture = loader.load('resources/images/star.png');
-
-function makeInstance(geometry, color, x) {
--  const material = new THREE.MeshPhongMaterial({color});
-+  const material = new THREE.MeshPhongMaterial({color, map: texture});
-
-  const cube = new THREE.Mesh(geometry, material);
-  scene.add(cube);
-
-  ...
-</pre>
-<p></p><div translate="no" class="threejs_example_container notranslate">
-  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-geometry-cube-texcoords.html"></iframe></div>
-  <a class="threejs_center" href="/manual/examples/custom-geometry-cube-texcoords.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
-</div>
-
-<p></p>
-<p>OKです。単純なハイトマップをterrain meshから作りましょう。</p>
-<p>terrain meshからつくるハイトマップとは詰まるところ二次元配列です。配列の数値は高さの表現に使います。二次元配列を取得するには画像編集ソフトで適当な画像を作ってしまうのが楽です。96x96の画像を作ってみました。</p>
-<div class="threejs_center"><img src="../examples/resources/images/heightmap-96x64.png" style="width: 512px; image-rendering: pixelated;"></div>
-
-<p>このPNG画像をロードして二次元配列にしてハイトマップとして使います。
-画像をロードするには<a href="/docs/#api/ja/loaders/ImageLoader"><code class="notranslate" translate="no">ImageLoader</code></a>を使います。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const imgLoader = new THREE.ImageLoader();
-imgLoader.load('resources/images/heightmap-96x64.png', createHeightmap);
-
-function createHeightmap(image) {
-  // extract the data from the image by drawing it to a canvas
-  // and calling getImageData
-  const ctx = document.createElement('canvas').getContext('2d');
-  const {width, height} = image;
-  ctx.canvas.width = width;
-  ctx.canvas.height = height;
-  ctx.drawImage(image, 0, 0);
-  const {data} = ctx.getImageData(0, 0, width, height);
-
-  const geometry = new THREE.Geometry();
-</pre>
-<p>画像から二次元配列を取り出しました。次に粗い正方形で区切られたグリッドを作ります。このグリッドはそれぞれのピクセルの中心点を四隅とした正方形で構成されています。</p>
-<div class="threejs_center"><img src="../resources/heightmap-points.svg" style="width: 500px"></div>
-
-<p>それぞれの正方形に対して５つのvertexを作ります。４つは正方形の四隅のピクセル値で、のこり１つはその四隅の平均です。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const cellsAcross = width - 1;
-const cellsDeep = height - 1;
-for (let z = 0; z &lt; cellsDeep; ++z) {
-  for (let x = 0; x &lt; cellsAcross; ++x) {
-    // compute row offsets into the height data
-    // we multiply by 4 because the data is R,G,B,A but we
-    // only care about R
-    const base0 = (z * width + x) * 4;
-    const base1 = base0 + (width * 4);
-
-    // look up the height for the for points
-    // around this cell
-    const h00 = data[base0] / 32;
-    const h01 = data[base0 + 4] / 32;
-    const h10 = data[base1] / 32;
-    const h11 = data[base1 + 4] / 32;
-    // compute the average height
-    const hm = (h00 + h01 + h10 + h11) / 4;
-
-    // the corner positions
-    const x0 = x;
-    const x1 = x + 1;
-    const z0 = z;
-    const z1 = z + 1;
-
-    // remember the first index of these 5 vertices
-    const ndx = geometry.vertices.length;
-
-    // add the 4 corners for this cell and the midpoint
-    geometry.vertices.push(
-      new THREE.Vector3(x0, h00, z0),
-      new THREE.Vector3(x1, h01, z0),
-      new THREE.Vector3(x0, h10, z1),
-      new THREE.Vector3(x1, h11, z1),
-      new THREE.Vector3((x0 + x1) / 2, hm, (z0 + z1) / 2),
-    );
-</pre>
-<p>この５つのvertexを元に４つの三角形を作ります。</p>
-<div class="threejs_center"><img src="../resources/heightmap-triangles.svg" style="width: 500px"></div>
-
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">    // create 4 triangles
-    geometry.faces.push(
-      new THREE.Face3(ndx + 0, ndx + 4, ndx + 1),
-      new THREE.Face3(ndx + 1, ndx + 4, ndx + 3),
-      new THREE.Face3(ndx + 3, ndx + 4, ndx + 2),
-      new THREE.Face3(ndx + 2, ndx + 4, ndx + 0),
-    );
-
-    // add the texture coordinates for each vertex of each face
-    const u0 = x / cellsAcross;
-    const v0 = z / cellsDeep;
-    const u1 = (x + 1) / cellsAcross;
-    const v1 = (z + 1) / cellsDeep;
-    const um = (u0 + u1) / 2;
-    const vm = (v0 + v1) / 2;
-    geometry.faceVertexUvs[0].push(
-      [ new THREE.Vector2(u0, v0), new THREE.Vector2(um, vm), new THREE.Vector2(u1, v0) ],
-      [ new THREE.Vector2(u1, v0), new THREE.Vector2(um, vm), new THREE.Vector2(u1, v1) ],
-      [ new THREE.Vector2(u1, v1), new THREE.Vector2(um, vm), new THREE.Vector2(u0, v1) ],
-      [ new THREE.Vector2(u0, v1), new THREE.Vector2(um, vm), new THREE.Vector2(u0, v0) ],
-    );
-  }
-}
-</pre>
-<p>仕上げです。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">  geometry.computeFaceNormals();
-
-  // center the geometry
-  geometry.translate(width / -2, 0, height / -2);
-
-  const loader = new THREE.TextureLoader();
-  const texture = loader.load('resources/images/star.png');
-
-  const material = new THREE.MeshPhongMaterial({color: 'green', map: texture});
-
-  const cube = new THREE.Mesh(geometry, material);
-  scene.add(cube);
-}
-</pre>
-<p>すこし視点を変えるとみやすくなります。</p>
-<ul>
-<li><a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a>を追加してください。</li>
-</ul>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-+import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
-</pre>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const fov = 75;
-const aspect = 2;  // the canvas default
-const near = 0.1;
--const far = 100;
-+const far = 200;
-const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
--camera.position.z = 5;
-+camera.position.set(20, 20, 20);
-
-+const controls = new OrbitControls(camera, canvas);
-+controls.target.set(0, 0, 0);
-+controls.update();
-</pre>
-<p>ライトも２つ入れましょう。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-{
-+function addLight(...pos) {
-  const color = 0xFFFFFF;
-  const intensity = 1;
-  const light = new THREE.DirectionalLight(color, intensity);
--  light.position.set(-1, 2, 4\);
-+  light.position.set(...pos);
-  scene.add(light);
-}
-
-+addLight(-1, 2, 4);
-+addLight(1, 2, -2);
-</pre>
-<p>立方体を回転を止めました。</p>
-<p></p><div translate="no" class="threejs_example_container notranslate">
-  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-geometry-heightmap.html"></iframe></div>
-  <a class="threejs_center" href="/manual/examples/custom-geometry-heightmap.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
-</div>
-
-<p></p>
-<p><code class="notranslate" translate="no">Geometry</code>の使用方法をおわかりいただけたでしょうか？</p>
-<p><a href="custom-buffergeometry.html">この記事</a>では<a href="/docs/#api/ja/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>について説明します。</p>
-
-        </div>
-      </div>
-    </div>
-  
-  <script src="/manual/resources/prettify.js"></script>
-  <script src="/manual/resources/lesson.js"></script>
-
-
-
-
-</body></html>

manual/ko/custom-geometry.html

@@ -1,451 +0,0 @@
-<!DOCTYPE html><html lang="ko"><head>
-    <meta charset="utf-8">
-    <title>사용자 지정 Geometry(Custom BufferGeometry)</title>
-    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:site" content="@threejs">
-    <meta name="twitter:title" content="Three.js – 사용자 지정 Geometry(Custom BufferGeometry)">
-    <meta property="og:image" content="https://threejs.org/files/share.png">
-    <link rel="shortcut icon" href="/files/favicon_white.ico" media="(prefers-color-scheme: dark)">
-    <link rel="shortcut icon" href="/files/favicon.ico" media="(prefers-color-scheme: light)">
-
-    <link rel="stylesheet" href="/manual/resources/lesson.css">
-    <link rel="stylesheet" href="/manual/resources/lang.css">
-<!-- Import maps polyfill -->
-<!-- Remove this when import maps will be widely supported -->
-<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
-
-<script type="importmap">
-{
-  "imports": {
-    "three": "../../build/three.module.js"
-  }
-}
-</script>
-    <link rel="stylesheet" href="/manual/ko/lang.css">
-  </head>
-  <body>
-    <div class="container">
-      <div class="lesson-title">
-        <h1>사용자 지정 Geometry(Custom BufferGeometry)</h1>
-      </div>
-      <div class="lesson">
-        <div class="lesson-main">
-          <div class="warning">
-<strong>NOTE!</strong> This article is deprecated. Three.js r125
-removed support for <code class="notranslate" translate="no">Geometry</code>. Please refer to
-the article on <a href="custom-buffergeometry.html">custom BufferGeometry</a>.
-</div>
-
-
-<p><a href="primitives.html">이전 글</a>에서는 Three.js의 내장 원시 모델에
-대해 살펴보았죠. 이 글에서는 이런 모델, geometry를 직접 만들어 볼 것입니다.</p>
-<p>거듭 이야기하지만, 정말 진지하게 3D 컨텐츠를 만들 생각이라면
-<a href="https://blender.org">블렌더(Blender)</a>,
-<a href="https://www.autodesk.com/products/maya/overview">마야(Maya)</a>,
-<a href="https://www.autodesk.com/products/3ds-max/overview">3D Studio Max</a>,
-<a href="https://www.maxon.net/en-us/">시네마4D(Cinema4D)</a> 등의 3D 모델링
-프로그램을 사용하는 것이 좋습니다. 모델을 만들고 <a href="load-gltf.html">gLTF</a>나
-<a href="load-obj.html">.obj</a> 포멧으로 저장하여 프로젝트에서 불러오는
-것이죠. 어떤 프로그램을 선택하든 튜토리얼에는 유용한 내용이 많으니, 2주에서
-3주 정도는 해당 프로그램의 튜토리얼을 익히는 데 투자하기 바랍니다.</p>
-<p>하지만 때로는 모델링 프로그램을 쓰는 것보다 직접 3D geometry를
-만드는 게 유리할 수 있을 겁니다.</p>
-<p>먼저 정육면체를 하나 만들어보겠습니다. 이미 원시 모델에 <a href="/docs/#api/ko/geometries/BoxGeometry"><code class="notranslate" translate="no">BoxGeometry</code></a>와
-<a href="/docs/#api/ko/geometries/BoxGeometry"><code class="notranslate" translate="no">BoxGeometry</code></a>가 있긴 하지만, 기본 개념을 이해하는 데는 간단한 게
-훨씬 효과적일 테니까요.</p>
-<p>Three.js에서 사용자 지정 geometry는 <code class="notranslate" translate="no">Geometry</code> 또는 <a href="/docs/#api/ko/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>,
-2가지 클래스를 이용해 만들 수 있습니다. <code class="notranslate" translate="no">Geometry</code>는 분명 사용하기에는
-편하지만 느리고 메모리도 많이 차지합니다. 삼각형 천 개 정도까지야 그냥
-써도 나쁠 것이 없지만, 만 개가 넘어간다면 <a href="/docs/#api/ko/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>를 고려하는
-것이 좋죠.</p>
-<p>당연하게도 <a href="/docs/#api/ko/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>는 훨씬 쓰기 어렵지만, 비교적 메모리도 덜 차지하고
-훨씬 빠릅니다. 대략 구상하기에 삼각형을 10000개 이상 쓰겠다 싶으면 <a href="/docs/#api/ko/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>를
-고려하기 바랍니다.</p>
-<p>아까 <code class="notranslate" translate="no">Geometry</code>가 느리다고 했는데, 이는 처음 로드할 때와 수정할 때 느리다는
-것이지, 렌더링 속도가 느리다는 말이 아닙니다. geometry를 수정하지 않고 geometry가
-무지막지하게 크지 않은 한, <code class="notranslate" translate="no">Geometry</code>는 <a href="/docs/#api/ko/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>에 비해 프로그램 초기화
-단계에서만 약간 더 느릴 뿐입니다. 결국에는 둘 다 살펴보겠지만, 일단-제 생각에-훨씬
-간단하고 이해하기 쉬운 <code class="notranslate" translate="no">Geometry</code>를 먼저 써봅시다.</p>
-<p>먼저 정육면체를 만들겠습니다. <a href="responsive.html">반응형 디자인에 관한 글</a>에서
-썼던 예제를 일부 가져오도록 하죠.</p>
-<p>먼저 <a href="/docs/#api/ko/geometries/BoxGeometry"><code class="notranslate" translate="no">BoxGeometry</code></a>를 <code class="notranslate" translate="no">Geometry</code>로 교체합니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-const boxWidth = 1;
--const boxHeight = 1;
--const boxDepth = 1;
--const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
-+const geometry = new THREE.Geometry();
-</pre>
-<p>이제 정육면체의 꼭지점를 추가합니다. 정육면체의 모서리는 총 8개이죠.</p>
-<div class="threejs_center"><img src="../resources/cube-vertex-positions.svg" style="width: 500px"></div>
-
-<p>중점을 중심으로 각 꼭지점을 추가합니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const geometry = new THREE.Geometry();
-+geometry.vertices.push(
-+  new THREE.Vector3(-1, -1,  1),  // 0
-+  new THREE.Vector3( 1, -1,  1),  // 1
-+  new THREE.Vector3(-1,  1,  1),  // 2
-+  new THREE.Vector3( 1,  1,  1),  // 3
-+  new THREE.Vector3(-1, -1, -1),  // 4
-+  new THREE.Vector3( 1, -1, -1),  // 5
-+  new THREE.Vector3(-1,  1, -1),  // 6
-+  new THREE.Vector3( 1,  1, -1),  // 7
-+);
-</pre>
-<p>다음으로 정육면체 한 면에 2개씩, 총 삼각형 12개를 추가해야 합니다.</p>
-<div class="threejs_center"><img src="../resources/cube-triangles.svg" style="width: 500px"></div>
-
-<p><a href="/docs/#api/ko/core/Face3"><code class="notranslate" translate="no">Face3</code></a> 인스턴스를 만들어 3 꼭지점의 인덱스(index)를 넘겨주면 삼각형
-면(face)을 만들 수 있습니다.</p>
-<p>꼭지점의 인덱스를 넘겨줄 때는 순서에 유의해야 합니다. 삼각형이 카메라를
-바라볼 때, 면이 정육면체의 바깥쪽을 향하려면 시계 반대 방향 순으로 인덱스를
-넘겨줘야 합니다.</p>
-<div class="threejs_center"><img src="../resources/cube-vertex-winding-order.svg" style="width: 500px"></div>
-
-<p>이 패턴대로 정육면체를 구성할 삼각형 12개를 만들어봅시다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">geometry.faces.push(
-  // 앞쪽
-  new THREE.Face3(0, 3, 2),
-  new THREE.Face3(0, 1, 3),
-  // 오른쪽
-  new THREE.Face3(1, 7, 3),
-  new THREE.Face3(1, 5, 7),
-  // 뒷쪽
-  new THREE.Face3(5, 6, 7),
-  new THREE.Face3(5, 4, 6),
-  // 왼쪽
-  new THREE.Face3(4, 2, 6),
-  new THREE.Face3(4, 0, 2),
-  // 상단
-  new THREE.Face3(2, 7, 6),
-  new THREE.Face3(2, 3, 7),
-  // 하단
-  new THREE.Face3(4, 1, 0),
-  new THREE.Face3(4, 5, 1),
-);
-</pre>
-<p>이제 몇 가지만 더 고치면 됩니다.</p>
-<p>이 정육면체들은 <a href="/docs/#api/ko/geometries/BoxGeometry"><code class="notranslate" translate="no">BoxGeometry</code></a>보다 두 배 더 크므로, 카메라를 약간
-더 뒤로 옮겨줍니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const fov = 75;
-const aspect = 2;  // canvas 기본값
-const near = 0.1;
--const far = 5;
-+const far = 100;
-const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
--camera.position.z = 2;
-+camera.position.z = 5;
-</pre>
-<p>커진 만큼 간격을 띄우고, 바꾸는 김에 색상도 바꿔주겠습니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const cubes = [
--  makeInstance(geometry, 0x44aa88,  0),
--  makeInstance(geometry, 0x8844aa, -2),
--  makeInstance(geometry, 0xaa8844,  2),
-+  makeInstance(geometry, 0x44FF44,  0),
-+  makeInstance(geometry, 0x4444FF, -4),
-+  makeInstance(geometry, 0xFF4444,  4),
-];
-</pre>
-<p>아직 법선(normal)을 넣지 않았는데, 법선이 없으면 빛은 소용이 없으니 마지막으로
-재질(material)을 <a href="/docs/#api/ko/materials/MeshBasicMaterial"><code class="notranslate" translate="no">MeshBasicMaterial</code></a>로 바꿔줍니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function makeInstance(geometry, color, x) {
--  const material = new THREE.MeshPhongMaterial({ color });
-+  const material = new THREE.MeshBasicMaterial({ color });
-
-  const cube = new THREE.Mesh(geometry, material);
-  scene.add(cube);
-
-  ...
-</pre>
-<p>자, 이제 실행해보죠.</p>
-<p></p><div translate="no" class="threejs_example_container notranslate">
-  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-geometry-cube.html"></iframe></div>
-  <a class="threejs_center" href="/manual/examples/custom-geometry-cube.html" target="_blank">새 탭에서 보기</a>
-</div>
-
-<p></p>
-<p>각 삼각형 면의 <code class="notranslate" translate="no">color</code> 속성을 바꿔 색을 따로 지정할 수 있습니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">geometry.faces[ 0].color = geometry.faces[ 1].color = new THREE.Color('red');
-geometry.faces[ 2].color = geometry.faces[ 3].color = new THREE.Color('yellow');
-geometry.faces[ 4].color = geometry.faces[ 5].color = new THREE.Color('green');
-geometry.faces[ 6].color = geometry.faces[ 7].color = new THREE.Color('cyan');
-geometry.faces[ 8].color = geometry.faces[ 9].color = new THREE.Color('blue');
-geometry.faces[10].color = geometry.faces[11].color = new THREE.Color('magenta');
-</pre>
-<p>추가로 재질을 생성할 때 <code class="notranslate" translate="no">vertexColors</code>를 사용한다고 명시해야 하죠.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-const material = new THREE.MeshBasicMaterial({ color });
-+const material = new THREE.MeshBasicMaterial({ vertexColors: true });
-</pre>
-<p></p><div translate="no" class="threejs_example_container notranslate">
-  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-geometry-cube-face-colors.html"></iframe></div>
-  <a class="threejs_center" href="/manual/examples/custom-geometry-cube-face-colors.html" target="_blank">새 탭에서 보기</a>
-</div>
-
-<p></p>
-<p>또는 삼각형 면의 <code class="notranslate" translate="no">vertexColors</code> 속성에 각 꼭지점의 색상을 지정할 수도 있습니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">geometry.faces.forEach((face, ndx) =&gt; {
-  face.vertexColors = [
-    (new THREE.Color()).setHSL(ndx / 12      , 1, 0.5),
-    (new THREE.Color()).setHSL(ndx / 12 + 0.1, 1, 0.5),
-    (new THREE.Color()).setHSL(ndx / 12 + 0.2, 1, 0.5),
-  ];
-});
-</pre>
-<p></p><div translate="no" class="threejs_example_container notranslate">
-  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-geometry-cube-vertex-colors.html"></iframe></div>
-  <a class="threejs_center" href="/manual/examples/custom-geometry-cube-vertex-colors.html" target="_blank">새 탭에서 보기</a>
-</div>
-
-<p></p>
-<p>빛을 사용하려면 법선을 추가해야 합니다. 법선이란 특정 방향을 나타내는 벡터값으로,
-색과 마찬가지로 법선도 각 삼각형 면의 <code class="notranslate" translate="no">normal</code> 속성을 지정해 추가할 수 있습니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">face.normal = new THREE.Vector3(...)
-</pre>
-<p>또는 <code class="notranslate" translate="no">vertexNormals</code> 속성에 각 꼭지점의 법선을 배열로 지정할 수도 있죠.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">face.vertexNormals = [
-  new THREE.Vector3(...),
-  new THREE.Vector3(...),
-  new THREE.Vector3(...),
-]
-</pre>
-<p>하지만 대게 우리가 지정한 좌표에 따라 알아서 법선을 계산해달라고 하는 게
-훨씬 편합니다.</p>
-<p>삼각형 면 법선의 경우 <code class="notranslate" translate="no">Geometry.computeFaceNormals</code>를 호출하면 되죠.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">geometry.computeFaceNormals();
-</pre>
-<p>꼭지점 색을 제거하고 다시 재질을 <a href="/docs/#api/ko/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a>로 바꾸겠습니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-const material = new THREE.MeshBasicMaterial({ vertexColors: true });
-+const material = new THREE.MeshPhongMaterial({ color });
-</pre>
-<p>이제 정육면체들이 빛의 영향을 받습니다.</p>
-<p></p><div translate="no" class="threejs_example_container notranslate">
-  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-geometry-cube-face-normals.html"></iframe></div>
-  <a class="threejs_center" href="/manual/examples/custom-geometry-cube-face-normals.html" target="_blank">새 탭에서 보기</a>
-</div>
-
-<p></p>
-<p>삼각형 면 법선을 사용하면 물체가 각진 느낌을 줍니다. 꼭지점 법선을 사용하면
-훨씬 부드러워 보일 수 있죠. 꼭지점 법선은 <code class="notranslate" translate="no">Geometry.computeVertexNormals</code>를
-호출해 사용합니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-geometry.computeFaceNormals();
-+geometry.computeVertexNormals();
-</pre>
-<p>아쉽게도 정육면체는 꼭지점 법선의 예제로 적당하지 않습니다. 각 꼭지점이 같은
-꼭지점을 쓰는 모든 삼각형 면에서 법선을 가져오기 때문이죠.</p>
-<p></p><div translate="no" class="threejs_example_container notranslate">
-  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-geometry-cube-vertex-normals.html"></iframe></div>
-  <a class="threejs_center" href="/manual/examples/custom-geometry-cube-vertex-normals.html" target="_blank">새 탭에서 보기</a>
-</div>
-
-<p></p>
-<p>UV라고도 불리는, 텍스처 좌표는 <code class="notranslate" translate="no">Geometry.faceVertexUvs</code> 속성에 삼각형 면들의
-층(layer)을 배열로 지정해 추가할 수 있습니다. 정육면체의 경우 다음처럼 지정할
-수 있죠.</p>
-<p>(※ 참고: <a href="https://ko.wikipedia.org/wiki/UV_%EB%A7%A4%ED%95%91">UV 매핑</a>. 역주)</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">geometry.faceVertexUvs[0].push(
-  // 앞쪽
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1) ],
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1) ],
-  // 오른쪽
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1) ],
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1) ],
-  // 뒤쪽
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1) ],
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1) ],
-  // 왼쪽
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1) ],
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1) ],
-  // 상단
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1) ],
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1) ],
-  // 하단
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1) ],
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1) ],
-);
-</pre>
-<p>중요한 건 <code class="notranslate" translate="no">faceVertexUvs</code>는 층의 배열이라는 점입니다. 하나의 층은 별도의 UV 좌표이죠.
-기본적으로 하나의 UV 층, 층 0이 있어, 예제에서는 그냥 그 층에 UV를 추가했습니다.</p>
-<p>다시 삼각형 면 법선을 계산하도록 코드를 바꾸고, 이번에는 재질에 <a href="textures.html">텍스처를 추가</a>하겠습니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-geometry.computeVertexNormals();
-+geometry.computeFaceNormals();
-
-+const loader = new THREE.TextureLoader();
-+const texture = loader.load('resources/images/star.png');
-
-function makeInstance(geometry, color, x) {
--  const material = new THREE.MeshPhongMaterial({color});
-+  const material = new THREE.MeshPhongMaterial({color, map: texture});
-
-  const cube = new THREE.Mesh(geometry, material);
-  scene.add(cube);
-
-  ...
-</pre>
-<p></p><div translate="no" class="threejs_example_container notranslate">
-  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-geometry-cube-texcoords.html"></iframe></div>
-  <a class="threejs_center" href="/manual/examples/custom-geometry-cube-texcoords.html" target="_blank">새 탭에서 보기</a>
-</div>
-
-<p></p>
-<p>다음으로는 이 글에서 배운 것을 총 동원해 지형 mesh를 기반으로 높이 맵(heightmap)을
-만들어보겠습니다.</p>
-<p>높이 맵을 기반으로 한 지형이란, 이차원 높이 배열을 격자 형태로 만든 것을
-말합니다. 이차원 높이 배열을 만드는 가장 쉬운 방법은 이미지 편집 프로그램을
-사용하는 것이죠. 아래는 제가 만든 96x64 픽셀의 이미지입니다.</p>
-<div class="threejs_center"><img src="../examples/resources/images/heightmap-96x64.png" style="width: 512px; image-rendering: pixelated;"></div>
-
-<p>이 이미지의 데이터를 불러와 높이 맵 mesh를 만들겠습니다. 이미지 데이터를
-불러올 때는 <a href="/docs/#api/ko/loaders/ImageLoader"><code class="notranslate" translate="no">ImageLoader</code></a>를 활용합니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const imgLoader = new THREE.ImageLoader();
-imgLoader.load('resources/images/heightmap-96x64.png', createHeightmap);
-
-function createHeightmap(image) {
-  // canvas에 이미지를 렌더링한 후, getImageData 메서드를 호출해 픽셀 데이터를 추출합니다
-  const ctx = document.createElement('canvas').getContext('2d');
-  const { width, height } = image;
-  ctx.canvas.width = width;
-  ctx.canvas.height = height;
-  ctx.drawImage(image, 0, 0);
-  const { data } = ctx.getImageData(0, 0, width, height);
-
-  const geometry = new THREE.Geometry();
-</pre>
-<p>이미지에서 데이터를 추출했으니, 이제 격자를 만들어야 합니다. 이미지의 픽셀
-하나당 정사각형 격자 한 칸을 만듭니다.</p>
-<div class="threejs_center"><img src="../resources/heightmap-points.svg" style="width: 500px"></div>
-
-<p>격자 한 칸당 꼭지점 5개를 만듭니다. 정사각형의 각 꼭지점 당 하나씩 총 4개를 두고,
-네 꼭지점의 높이를 평균내 중앙에 하나를 둡니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const cellsAcross = width - 1;
-const cellsDeep = height - 1;
-for (let z = 0; z &lt; cellsDeep; ++z) {
-  for (let x = 0; x &lt; cellsAcross; ++x) {
-    /**
-     * 열의 위치를 높이 데이터로 계산합니다
-     * 데이터가 RGBA이므로 4를 곱하지만, R 값만 사용합니다
-     **/
-    const base0 = (z * width + x) * 4;
-    const base1 = base0 + (width * 4);
-
-    // 격자 칸 각 꼭지점의 높이를 참조합니다
-    const h00 = data[base0] / 32;
-    const h01 = data[base0 + 4] / 32;
-    const h10 = data[base1] / 32;
-    const h11 = data[base1 + 4] / 32;
-    // 높이의 평균값을 구합니다
-    const hm = (h00 + h01 + h10 + h11) / 4;
-
-    // 꼭지점의 위치
-    const x0 = x;
-    const x1 = x + 1;
-    const z0 = z;
-    const z1 = z + 1;
-
-    // 각 꼭지점의 첫 번째 인덱스를 기록합니다
-    const ndx = geometry.vertices.length;
-
-    // 격자에 모퉁이 꼭지점 4개와 중앙 꼭지점 하나를 배치합니다
-    geometry.vertices.push(
-      new THREE.Vector3(x0, h00, z0),
-      new THREE.Vector3(x1, h01, z0),
-      new THREE.Vector3(x0, h10, z1),
-      new THREE.Vector3(x1, h11, z1),
-      new THREE.Vector3((x0 + x1) / 2, hm, (z0 + z1) / 2),
-    );
-</pre>
-<p>다음으로 방금 만든 5개의 정점을 모아 4개의 삼각형을 만들어야 합니다.</p>
-<div class="threejs_center"><img src="../resources/heightmap-triangles.svg" style="width: 500px"></div>
-
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">    // 삼각형 4개를 만듭니다
-    geometry.faces.push(
-      new THREE.Face3(ndx + 0, ndx + 4, ndx + 1),
-      new THREE.Face3(ndx + 1, ndx + 4, ndx + 3),
-      new THREE.Face3(ndx + 3, ndx + 4, ndx + 2),
-      new THREE.Face3(ndx + 2, ndx + 4, ndx + 0),
-    );
-
-    // 각 삼각형 면의 각 꼭지점에 텍스처 좌표를 추가합니다
-    const u0 = x / cellsAcross;
-    const v0 = z / cellsDeep;
-    const u1 = (x + 1) / cellsAcross;
-    const v1 = (z + 1) / cellsDeep;
-    const um = (u0 + u1) / 2;
-    const vm = (v0 + v1) / 2;
-    geometry.faceVertexUvs[0].push(
-      [ new THREE.Vector2(u0, v0), new THREE.Vector2(um, vm), new THREE.Vector2(u1, v0) ],
-      [ new THREE.Vector2(u1, v0), new THREE.Vector2(um, vm), new THREE.Vector2(u1, v1) ],
-      [ new THREE.Vector2(u1, v1), new THREE.Vector2(um, vm), new THREE.Vector2(u0, v1) ],
-      [ new THREE.Vector2(u0, v1), new THREE.Vector2(um, vm), new THREE.Vector2(u0, v0) ],
-    );
-  }
-}
-</pre>
-<p>이제 마무리 지어보죠.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">  geometry.computeFaceNormals();
-
-  // geometry를 중점에 배치
-  geometry.translate(width / -2, 0, height / -2);
-
-  const loader = new THREE.TextureLoader();
-  const texture = loader.load('resources/images/star.png');
-
-  const material = new THREE.MeshPhongMaterial({ color: 'green', map: texture });
-
-  const cube = new THREE.Mesh(geometry, material);
-  scene.add(cube);
-}
-</pre>
-<p>장면을 보기 쉽도록 몇 가지 요소를 추가하겠습니다.</p>
-<p><a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a>를 추가하고,</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-+import { OrbitControls } from '/examples/jsm/controls/OrbitControls.js';
-</pre>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const fov = 75;
-const aspect = 2;  // canvas 기본 비율
-const near = 0.1;
--const far = 100;
-+const far = 200;
-const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
--camera.position.z = 5;
-+camera.position.set(20, 20, 20);
-
-+const controls = new OrbitControls(camera, canvas);
-+controls.target.set(0, 0, 0);
-+controls.update();
-</pre>
-<p>조명도 두 개 추가합니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-{
-+function addLight(...pos) {
-  const color = 0xFFFFFF;
-  const intensity = 1;
-  const light = new THREE.DirectionalLight(color, intensity);
--  light.position.set(-1, 2, 4\);
-+  light.position.set(...pos);
-  scene.add(light);
-}
-
-+addLight(-1, 2, 4);
-+addLight(1, 2, -2);
-</pre>
-<p>정육면체를 회전시키는 코드는 필요없으니 삭제하도록 하죠.</p>
-<p></p><div translate="no" class="threejs_example_container notranslate">
-  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-geometry-heightmap.html"></iframe></div>
-  <a class="threejs_center" href="/manual/examples/custom-geometry-heightmap.html" target="_blank">새 탭에서 보기</a>
-</div>
-
-<p></p>
-<p>이 글이 <code class="notranslate" translate="no">Geometry</code>를 활용하는 데 도움이 되었으면 합니다.</p>
-<p>글이 길어졌으니 <a href="/docs/#api/ko/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>는 <a href="custom-buffergeometry.html">다음 글</a>에서
-살펴보도록 하겠습니다.</p>
-
-        </div>
-      </div>
-    </div>
-  
-  <script src="/manual/resources/prettify.js"></script>
-  <script src="/manual/resources/lesson.js"></script>
-
-
-
-
-</body></html>

manual/ru/custom-geometry.html

@@ -1,415 +0,0 @@
-<!DOCTYPE html><html lang="ru"><head>
-    <meta charset="utf-8">
-    <title>Пользовательская Geometry</title>
-    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:site" content="@threejs">
-    <meta name="twitter:title" content="Three.js – Пользовательская Geometry">
-    <meta property="og:image" content="https://threejs.org/files/share.png">
-    <link rel="shortcut icon" href="/files/favicon_white.ico" media="(prefers-color-scheme: dark)">
-    <link rel="shortcut icon" href="/files/favicon.ico" media="(prefers-color-scheme: light)">
-
-    <link rel="stylesheet" href="/manual/resources/lesson.css">
-    <link rel="stylesheet" href="/manual/resources/lang.css">
-<!-- Import maps polyfill -->
-<!-- Remove this when import maps will be widely supported -->
-<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
-
-<script type="importmap">
-{
-  "imports": {
-    "three": "../../build/three.module.js"
-  }
-}
-</script>
-  </head>
-  <body>
-    <div class="container">
-      <div class="lesson-title">
-        <h1>Пользовательская Geometry</h1>
-      </div>
-      <div class="lesson">
-        <div class="lesson-main">
-          <div class="warning">
-<strong>NOTE!</strong> This article is deprecated. Three.js r125
-removed support for <code class="notranslate" translate="no">Geometry</code>. Please refer to
-the article on <a href="custom-buffergeometry.html">custom BufferGeometry</a>.
-</div>
-
-<p>В <a href="primitives.html">предыдущей статье</a> рассказывалось о различных встроенных примитивах, включенных в THREE.js. В этой статье мы рассмотрим создание нашей собственной геометрии. </p>
-<p>Просто для ясности, если вы серьезно относитесь к созданию 3D-контента, наиболее распространенный способ - использовать пакет 3D-моделирования, такой как <a href="https://blender.org">Blender</a>,
-<a href="https://www.autodesk.com/products/maya/overview">Maya</a>,
-<a href="https://www.autodesk.com/products/3ds-max/overview">3D Studio Max</a>,
-<a href="https://www.maxon.net/en-us/">Cinema4D</a> и т. д. 
-Вы создадите модель, а затем экспортируете в <a href="load-gltf.html">gLTF</a> или <a href="load-obj.html">.obj</a> и загрузите их. 
-Какой бы вариант вы ни выбрали, рассчитывайте потратить 2 или 3 недели на изучение соответствующих учебных пособий, поскольку все они имеют полезную кривую обучения. </p>
-<p>Тем не менее, бывают случаи, когда мы можем захотеть сгенерировать нашу собственную трехмерную геометрию в коде вместо использования пакета моделирования. </p>
-<p>Сначала давайте просто сделаем куб. Хотя Three.js уже предоставляет нам <a href="/docs/#api/en/geometries/BoxGeometry"><code class="notranslate" translate="no">BoxGeometry</code></a> и <a href="/docs/#api/en/geometries/BoxGeometry"><code class="notranslate" translate="no">BoxGeometry</code></a>, куб легко понять, поэтому давайте начнем с него. </p>
-<p>Есть два способа сделать пользовательскую геометрию в THREE.js. Один с классом <code class="notranslate" translate="no">Geometry</code>, другой - <a href="/docs/#api/en/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>. У каждого есть свои преимущества. <code class="notranslate" translate="no">Geometry</code>, возможно, проще в использовании, но медленнее и использует больше памяти. Для нескольких тысяч треугольников это отличный выбор, но для десятков тысяч треугольников может быть лучше использовать <a href="/docs/#api/en/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>. </p>
-<p><a href="/docs/#api/en/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>, возможно, сложнее в использовании, но использует меньше памяти и работает быстрее. Если вы хотите сгенерировать более 10000 треугольников, подумайте об использовании <a href="/docs/#api/en/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>. </p>
-<p>Заметьте, когда я говорю, что <code class="notranslate" translate="no">Geometry</code> медленнее, я имею в виду, что она медленнее запускается и медленнее изменяется, но отрисовывается она не медленнее, поэтому, если вы не планируете изменять свою геометрию, тогда, пока она не слишком велика, будет только немного больше. задержка для вашей программы, чтобы начать использовать <code class="notranslate" translate="no">Geometry</code> против <a href="/docs/#api/en/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>. Мы изучим оба способа. Пока что давайте использовать геометрию, так как легче понять IMO. </p>
-<p>Сначала давайте сделаем куб с <code class="notranslate" translate="no">Geometry</code>. Начнем с примера из <a href="responsive.html">статьи об отзывчивости</a>. </p>
-<p>Давайте удалим код, который использует <a href="/docs/#api/en/geometries/BoxGeometry"><code class="notranslate" translate="no">BoxGeometry</code></a>, и заменим ее на <code class="notranslate" translate="no">Geometry</code>. </p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-const boxWidth = 1;
--const boxHeight = 1;
--const boxDepth = 1;
--const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
-+const geometry = new THREE.Geometry();
-</pre>
-<p>Теперь давайте добавим 8 углов куба. Вот 8 углов. </p>
-<div class="threejs_center"><img src="../resources/cube-vertex-positions.svg" style="width: 500px"></div>
-
-<p>Сосредоточив вокруг начала координат, мы можем добавить позиции вершин, как это</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const geometry = new THREE.Geometry();
-+geometry.vertices.push(
-+  new THREE.Vector3(-1, -1,  1),  // 0
-+  new THREE.Vector3( 1, -1,  1),  // 1
-+  new THREE.Vector3(-1,  1,  1),  // 2
-+  new THREE.Vector3( 1,  1,  1),  // 3
-+  new THREE.Vector3(-1, -1, -1),  // 4
-+  new THREE.Vector3( 1, -1, -1),  // 5
-+  new THREE.Vector3(-1,  1, -1),  // 6
-+  new THREE.Vector3( 1,  1, -1),  // 7
-+);
-</pre>
-<p>Затем нам нужно сделать треугольники, по 2 на каждую грань куба</p>
-<div class="threejs_center"><img src="../resources/cube-triangles.svg" style="width: 500px"></div>
-
-<p>Мы делаем это, создавая объекты <a href="/docs/#api/en/core/Face3"><code class="notranslate" translate="no">Face3</code></a> и определяя индексы 3 вершин, которые составляют эту грань.</p>
-<p>Порядок, в котором мы указываем вершины, важен. Чтобы указывать на внешнюю сторону куба, они должны быть указаны в направлении против часовой стрелки, когда этот треугольник направлен на камеру. </p>
-<div class="threejs_center"><img src="../resources/cube-vertex-winding-order.svg" style="width: 500px"></div>
-
-<p>Следуя этой схеме, мы можем указать 12 треугольников, которые делают куб таким</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">geometry.faces.push(
-  // front
-  new THREE.Face3(0, 3, 2),
-  new THREE.Face3(0, 1, 3),
-  // right
-  new THREE.Face3(1, 7, 3),
-  new THREE.Face3(1, 5, 7),
-  // back
-  new THREE.Face3(5, 6, 7),
-  new THREE.Face3(5, 4, 6),
-  // left
-  new THREE.Face3(4, 2, 6),
-  new THREE.Face3(4, 0, 2),
-  // top
-  new THREE.Face3(2, 7, 6),
-  new THREE.Face3(2, 3, 7),
-  // bottom
-  new THREE.Face3(4, 1, 0),
-  new THREE.Face3(4, 5, 1),
-);
-</pre>
-<p>Несколько других мелких изменений в оригинальном коде, и он должен работать. </p>
-<p>Эти кубики в два раза больше, чем <a href="/docs/#api/en/geometries/BoxGeometry"><code class="notranslate" translate="no">BoxGeometry</code></a>, которую мы использовали раньше, поэтому давайте немного переместим камеру назад </p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const fov = 75;
-const aspect = 2;  // the canvas default
-const near = 0.1;
--const far = 5;
-+const far = 100;
-const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
--camera.position.z = 2;
-+camera.position.z = 5;
-</pre>
-<p>и давайте отделим их немного больше, и я изменил их цвета только потому, что</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const cubes = [
--  makeInstance(geometry, 0x44aa88,  0),
--  makeInstance(geometry, 0x8844aa, -2),
--  makeInstance(geometry, 0xaa8844,  2),
-+  makeInstance(geometry, 0x44FF44,  0),
-+  makeInstance(geometry, 0x4444FF, -4),
-+  makeInstance(geometry, 0xFF4444,  4),
-];
-</pre>
-<p>И последнее, что мы еще не добавили это нормалей, поэтому мы не можем включить освещение. Давайте изменим материал на то, что не нуждается в освещении. </p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function makeInstance(geometry, color, x) {
--  const material = new THREE.MeshPhongMaterial({color});
-+  const material = new THREE.MeshBasicMaterial({color});
-
-  const cube = new THREE.Mesh(geometry, material);
-  scene.add(cube);
-
-  ...
-</pre>
-<p>и мы получаем кубики, которые мы сделали сами.
-</p><div translate="no" class="threejs_example_container notranslate">
-  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-geometry-cube.html"></iframe></div>
-  <a class="threejs_center" href="/manual/examples/custom-geometry-cube.html" target="_blank">нажмите здесь, чтобы открыть в отдельном окне</a>
-</div>
-
-<p></p>
-<p>Мы можем указать цвет для каждой грани, установив свойство <code class="notranslate" translate="no">color</code> каждой стороны.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">geometry.faces[ 0].color = geometry.faces[ 1].color = new THREE.Color('red');
-geometry.faces[ 2].color = geometry.faces[ 3].color = new THREE.Color('yellow');
-geometry.faces[ 4].color = geometry.faces[ 5].color = new THREE.Color('green');
-geometry.faces[ 6].color = geometry.faces[ 7].color = new THREE.Color('cyan');
-geometry.faces[ 8].color = geometry.faces[ 9].color = new THREE.Color('blue');
-geometry.faces[10].color = geometry.faces[11].color = new THREE.Color('magenta');
-</pre>
-<p>обратите внимание, что мы должны указать материал, который мы хотим использовать <code class="notranslate" translate="no">vertexColors</code></p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-const material = new THREE.MeshBasicMaterial({color});
-+const material = new THREE.MeshBasicMaterial({vertexColors: true});
-</pre>
-<p></p><div translate="no" class="threejs_example_container notranslate">
-  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-geometry-cube-face-colors.html"></iframe></div>
-  <a class="threejs_center" href="/manual/examples/custom-geometry-cube-face-colors.html" target="_blank">нажмите здесь, чтобы открыть в отдельном окне</a>
-</div>
-
-<p></p>
-<p>Вместо этого мы можем установить цвет каждой отдельной вершины, установив для свойства <code class="notranslate" translate="no">vertexColors</code> массив из 3 цветов для 3 вершин. </p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">geometry.faces.forEach((face, ndx) =&gt; {
-  face.vertexColors = [
-    (new THREE.Color()).setHSL(ndx / 12      , 1, 0.5),
-    (new THREE.Color()).setHSL(ndx / 12 + 0.1, 1, 0.5),
-    (new THREE.Color()).setHSL(ndx / 12 + 0.2, 1, 0.5),
-  ];
-});
-</pre>
-<p></p><div translate="no" class="threejs_example_container notranslate">
-  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-geometry-cube-vertex-colors.html"></iframe></div>
-  <a class="threejs_center" href="/manual/examples/custom-geometry-cube-vertex-colors.html" target="_blank">нажмите здесь, чтобы открыть в отдельном окне</a>
-</div>
-
-<p></p>
-<p>Чтобы использовать освещение, нам нужны нормали. Нормали - это векторы, которые определяют направление. Так же, как цвета, мы можем указать нормаль для грани, установив свойство <code class="notranslate" translate="no">normal</code> для каждой стороны с помощью</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">face.normal = new THREE.Vector3(...)
-</pre>
-<p>или мы можем указать нормаль для каждой вершины, установив для свойства <code class="notranslate" translate="no">vertexNormals</code> что-то вроде </p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">face.vertexNormals = [
-  new THREE.Vector3(...),
-  new THREE.Vector3(...),
-  new THREE.Vector3(...),
-]
-</pre>
-<p>но часто гораздо проще просто попросить THREE.js вычислить для нас нормали на основе указанных позиций. </p>
-<p>Для нормалей грани мы бы назвали <code class="notranslate" translate="no">Geometry.computeFaceNormals</code> как в</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">geometry.computeFaceNormals();
-</pre>
-<p>Удаление цвета вершин и изменение материала обратно на <a href="/docs/#api/en/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a></p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-const material = new THREE.MeshBasicMaterial({vertexColors: true});
-+const material = new THREE.MeshPhongMaterial({color});
-</pre>
-<p>и теперь наши кубики будут освещены.
-</p><div translate="no" class="threejs_example_container notranslate">
-  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-geometry-cube-face-normals.html"></iframe></div>
-  <a class="threejs_center" href="/manual/examples/custom-geometry-cube-face-normals.html" target="_blank">нажмите здесь, чтобы открыть в отдельном окне</a>
-</div>
-
-<p></p>
-<p>Использование нормалей сторон всегда даст нам граненый взгляд. Мы можем использовать нормали вершин для более гладкого вида, вызывая <code class="notranslate" translate="no">Geometry.computeVertexNormals</code> </p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-geometry.computeFaceNormals();
-+geometry.computeVertexNormals();
-</pre>
-<p>К сожалению, куб не является хорошим выбором для нормалей вершин, поскольку это означает, что каждая вершина получает свою нормаль от нормалей всех граней, которые она разделяет.</p>
-<p></p><div translate="no" class="threejs_example_container notranslate">
-  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-geometry-cube-vertex-normals.html"></iframe></div>
-  <a class="threejs_center" href="/manual/examples/custom-geometry-cube-vertex-normals.html" target="_blank">нажмите здесь, чтобы открыть в отдельном окне</a>
-</div>
-
-<p></p>
-<p>Добавление текстурных координат, иногда называемых UV, выполняется через массив слоев параллельных массивов в массив <code class="notranslate" translate="no">faces</code> , который устанавливается через <code class="notranslate" translate="no">Geometry.faceVertexUvs</code>. Для нашего куба мы могли бы сделать что-то вроде</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">geometry.faceVertexUvs[0].push(
-  // front
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1) ],
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1) ],
-  // right
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1) ],
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1) ],
-  // back
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1) ],
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1) ],
-  // left
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1) ],
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1) ],
-  // top
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1) ],
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1) ],
-  // bottom
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1) ],
-  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1) ],
-);
-</pre>
-<p>Важно отметить, что <code class="notranslate" translate="no">faceVertexUvs</code> - это массив слоев. Каждый слой представляет собой другой набор координат UV. По умолчанию есть один слой координат UV, слой 0, поэтому мы просто добавляем наши UV в этот слой. </p>
-<p>Давайте добавим текстуру к нашему материалу и переключимся обратно, чтобы вычислить нормали стороны </p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-geometry.computeVertexNormals();
-+geometry.computeFaceNormals();
-
-+const loader = new THREE.TextureLoader();
-+const texture = loader.load('resources/images/star.png');
-
-function makeInstance(geometry, color, x) {
--  const material = new THREE.MeshPhongMaterial({color});
-+  const material = new THREE.MeshPhongMaterial({color, map: texture});
-
-  const cube = new THREE.Mesh(geometry, material);
-  scene.add(cube);
-
-  ...
-</pre>
-<p></p><div translate="no" class="threejs_example_container notranslate">
-  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-geometry-cube-texcoords.html"></iframe></div>
-  <a class="threejs_center" href="/manual/examples/custom-geometry-cube-texcoords.html" target="_blank">нажмите здесь, чтобы открыть в отдельном окне</a>
-</div>
-
-<p></p>
-<p>Собрав все это вместе, давайте создадим простую сетку ландшафта на основе карты высот. </p>
-<p>Ландшафт на основе карты высот - это то место, где у вас есть двумерный массив высот, который вы применяете к сетке. Простой способ получить двумерный массив высот - нарисовать их в программе для редактирования изображений. Вот изображение, которое я нарисовал. Это 96x64 пикселей </p>
-<div class="threejs_center"><img src="../examples/resources/images/heightmap-96x64.png" style="width: 512px; image-rendering: pixelated;"></div>
-
-<p>Мы загрузим это и затем сгенерируем из него сетку карты высот. Мы можем использовать <a href="/docs/#api/en/loaders/ImageLoader"><code class="notranslate" translate="no">ImageLoader</code></a> для загрузки изображения. </p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const imgLoader = new THREE.ImageLoader();
-imgLoader.load('resources/images/heightmap-96x64.png', createHeightmap);
-
-function createHeightmap(image) {
-  // extract the data from the image by drawing it to a canvas
-  // and calling getImageData
-  const ctx = document.createElement('canvas').getContext('2d');
-  const {width, height} = image;
-  ctx.canvas.width = width;
-  ctx.canvas.height = height;
-  ctx.drawImage(image, 0, 0);
-  const {data} = ctx.getImageData(0, 0, width, height);
-
-  const geometry = new THREE.Geometry();
-</pre>
-<p>Мы извлекли данные из изображения, теперь мы сделаем сетку ячеек. Ячейки - это квадраты, образованные центральными точками каждого пикселя изображения </p>
-<div class="threejs_center"><img src="../resources/heightmap-points.svg" style="width: 500px"></div>
-
-<p>Для каждой ячейки мы сгенерируем 5 вершин. Один для каждого угла ячейки и один в центральной точке ячейки со средней высотой 4 угловых высот. </p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const cellsAcross = width - 1;
-const cellsDeep = height - 1;
-for (let z = 0; z &lt; cellsDeep; ++z) {
-  for (let x = 0; x &lt; cellsAcross; ++x) {
-    // compute row offsets into the height data
-    // we multiply by 4 because the data is R,G,B,A but we
-    // only care about R
-    const base0 = (z * width + x) * 4;
-    const base1 = base0 + (width * 4);
-
-    // look up the height for the for points
-    // around this cell
-    const h00 = data[base0] / 32;
-    const h01 = data[base0 + 4] / 32;
-    const h10 = data[base1] / 32;
-    const h11 = data[base1 + 4] / 32;
-    // compute the average height
-    const hm = (h00 + h01 + h10 + h11) / 4;
-
-    // the corner positions
-    const x0 = x;
-    const x1 = x + 1;
-    const z0 = z;
-    const z1 = z + 1;
-
-    // remember the first index of these 5 vertices
-    const ndx = geometry.vertices.length;
-
-    // add the 4 corners for this cell and the midpoint
-    geometry.vertices.push(
-      new THREE.Vector3(x0, h00, z0),
-      new THREE.Vector3(x1, h01, z0),
-      new THREE.Vector3(x0, h10, z1),
-      new THREE.Vector3(x1, h11, z1),
-      new THREE.Vector3((x0 + x1) / 2, hm, (z0 + z1) / 2),
-    );
-</pre>
-<p>Затем мы сделаем 4 треугольника из этих 5 вершин</p>
-<div class="threejs_center"><img src="../resources/heightmap-triangles.svg" style="width: 500px"></div>
-
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">    // create 4 triangles
-    geometry.faces.push(
-      new THREE.Face3(ndx + 0, ndx + 4, ndx + 1),
-      new THREE.Face3(ndx + 1, ndx + 4, ndx + 3),
-      new THREE.Face3(ndx + 3, ndx + 4, ndx + 2),
-      new THREE.Face3(ndx + 2, ndx + 4, ndx + 0),
-    );
-
-    // add the texture coordinates for each vertex of each face
-    const u0 = x / cellsAcross;
-    const v0 = z / cellsDeep;
-    const u1 = (x + 1) / cellsAcross;
-    const v1 = (z + 1) / cellsDeep;
-    const um = (u0 + u1) / 2;
-    const vm = (v0 + v1) / 2;
-    geometry.faceVertexUvs[0].push(
-      [ new THREE.Vector2(u0, v0), new THREE.Vector2(um, vm), new THREE.Vector2(u1, v0) ],
-      [ new THREE.Vector2(u1, v0), new THREE.Vector2(um, vm), new THREE.Vector2(u1, v1) ],
-      [ new THREE.Vector2(u1, v1), new THREE.Vector2(um, vm), new THREE.Vector2(u0, v1) ],
-      [ new THREE.Vector2(u0, v1), new THREE.Vector2(um, vm), new THREE.Vector2(u0, v0) ],
-    );
-  }
-}
-</pre>
-<p>и закончим это</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">  geometry.computeFaceNormals();
-
-  // center the geometry
-  geometry.translate(width / -2, 0, height / -2);
-
-  const loader = new THREE.TextureLoader();
-  const texture = loader.load('resources/images/star.png');
-
-  const material = new THREE.MeshPhongMaterial({color: 'green', map: texture});
-
-  const cube = new THREE.Mesh(geometry, material);
-  scene.add(cube);
-}
-</pre>
-<p>Несколько небольших изменений, чтобы было удобнее просматривать. 
-включим <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> </p>
-<ul>
-<li>добавим <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a></li>
-</ul>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-+import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
-</pre>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const fov = 75;
-const aspect = 2;  // the canvas default
-const near = 0.1;
--const far = 100;
-+const far = 200;
-const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
--camera.position.z = 5;
-+camera.position.set(20, 20, 20);
-
-+const controls = new OrbitControls(camera, canvas);
-+controls.target.set(0, 0, 0);
-+controls.update();
-</pre>
-<p>добавим 2 света</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-{
-+function addLight(...pos) {
-  const color = 0xFFFFFF;
-  const intensity = 1;
-  const light = new THREE.DirectionalLight(color, intensity);
--  light.position.set(-1, 2, 4\);
-+  light.position.set(...pos);
-  scene.add(light);
-}
-
-+addLight(-1, 2, 4);
-+addLight(1, 2, -2);
-</pre>
-<p>и мы удалим код, связанный с вращением кубов.
-</p><div translate="no" class="threejs_example_container notranslate">
-  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-geometry-heightmap.html"></iframe></div>
-  <a class="threejs_center" href="/manual/examples/custom-geometry-heightmap.html" target="_blank">нажмите здесь, чтобы открыть в отдельном окне</a>
-</div>
-
-<p></p>
-<p>Я надеюсь, что это была полезная инструкция для создания вашей собственной геометрии с использованием <code class="notranslate" translate="no">Geometry</code>. 
-В другой статье мы рассмотрим <a href="/docs/#api/en/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>. </p>
-<p>В <a href="custom-buffergeometry.html">другой статье</a> мы рассмотрим <a href="/docs/#api/en/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>. </p>
-
-        </div>
-      </div>
-    </div>
-  
-  <script src="/manual/resources/prettify.js"></script>
-  <script src="/manual/resources/lesson.js"></script>
-
-
-
-
-</body></html>

manual/zh/custom-geometry.html

@@ -1,47 +0,0 @@
-<!DOCTYPE html><html lang="zh"><head>
-    <meta charset="utf-8">
-    <title>Custom Geometry</title>
-    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:site" content="@threejs">
-    <meta name="twitter:title" content="Three.js – Custom Geometry">
-    <meta property="og:image" content="https://threejs.org/files/share.png">
-    <link rel="shortcut icon" href="/files/favicon_white.ico" media="(prefers-color-scheme: dark)">
-    <link rel="shortcut icon" href="/files/favicon.ico" media="(prefers-color-scheme: light)">
-
-    <link rel="stylesheet" href="/manual/resources/lesson.css">
-    <link rel="stylesheet" href="/manual/resources/lang.css">
-<!-- Import maps polyfill -->
-<!-- Remove this when import maps will be widely supported -->
-<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
-
-<script type="importmap">
-{
-  "imports": {
-    "three": "../../build/three.module.js"
-  }
-}
-</script>
-    <link rel="stylesheet" href="/manual/zh/lang.css">
-  </head>
-  <body>
-    <div class="container">
-      <div class="lesson-title">
-        <h1>Custom Geometry</h1>
-      </div>
-      <div class="lesson">
-        <div class="lesson-main">
-          <p>抱歉，还没有中文翻译哦。 <a href="https://github.com/mrdoob/three.js">欢迎加入翻译</a>! 😄</p>
-<p><a href="/manual/en/custom-geometry.html">英文原文链接</a>.</p>
-
-        </div>
-      </div>
-    </div>
-  
-  <script src="/manual/resources/prettify.js"></script>
-  <script src="/manual/resources/lesson.js"></script>
-
-
-
-
-</body></html>

src/cameras/CubeCamera.js

@@ -13,13 +13,6 @@ class CubeCamera extends Object3D {
 
 		this.type = 'CubeCamera';
 
-		if ( renderTarget.isWebGLCubeRenderTarget !== true ) {
-
-			console.error( 'THREE.CubeCamera: The constructor now expects an instance of WebGLCubeRenderTarget as third parameter.' );
-			return;
-
-		}
-
 		this.renderTarget = renderTarget;
 
 		const cameraPX = new PerspectiveCamera( fov, aspect, near, far );

src/core/InstancedBufferAttribute.js

@@ -4,16 +4,6 @@ class InstancedBufferAttribute extends BufferAttribute {
 
 	constructor( array, itemSize, normalized, meshPerAttribute = 1 ) {
 
-		if ( typeof normalized === 'number' ) {
-
-			meshPerAttribute = normalized;
-
-			normalized = false;
-
-			console.error( 'THREE.InstancedBufferAttribute: The constructor now expects normalized as the third argument.' );
-
-		}
-
 		super( array, itemSize, normalized );
 
 		this.isInstancedBufferAttribute = true;

src/core/Uniform.js

@@ -2,13 +2,6 @@ class Uniform {
 
 	constructor( value ) {
 
-		if ( typeof value === 'string' ) {
-
-			console.warn( 'THREE.Uniform: Type parameter is no longer needed.' );
-			value = arguments[ 1 ];
-
-		}
-
 		this.value = value;
 
 	}

src/loaders/ObjectLoader.js

@@ -275,13 +275,6 @@ class ObjectLoader extends Loader {
 					case 'InstancedBufferGeometry':
 
 						geometry = bufferGeometryLoader.parse( data );
-
-						break;
-
-					case 'Geometry':
-
-						console.error( 'THREE.ObjectLoader: The legacy Geometry type is no longer supported.' );
-
 						break;
 
 					default:
@@ -327,40 +320,14 @@ class ObjectLoader extends Loader {
 
 				const data = json[ i ];
 
-				if ( data.type === 'MultiMaterial' ) {
-
-					// Deprecated
-
-					const array = [];
-
-					for ( let j = 0; j < data.materials.length; j ++ ) {
-
-						const material = data.materials[ j ];
-
-						if ( cache[ material.uuid ] === undefined ) {
-
-							cache[ material.uuid ] = loader.parse( material );
-
-						}
-
-						array.push( cache[ material.uuid ] );
-
-					}
-
-					materials[ data.uuid ] = array;
-
-				} else {
-
-					if ( cache[ data.uuid ] === undefined ) {
-
-						cache[ data.uuid ] = loader.parse( data );
+				if ( cache[ data.uuid ] === undefined ) {
 
-					}
-
-					materials[ data.uuid ] = cache[ data.uuid ];
+					cache[ data.uuid ] = loader.parse( data );
 
 				}
 
+				materials[ data.uuid ] = cache[ data.uuid ];
+
 			}
 
 		}

src/materials/ShaderMaterial.js

@@ -52,12 +52,6 @@ class ShaderMaterial extends Material {
 
 		if ( parameters !== undefined ) {
 
-			if ( parameters.attributes !== undefined ) {
-
-				console.error( 'THREE.ShaderMaterial: attributes should now be defined in THREE.BufferGeometry instead.' );
-
-			}
-
 			this.setValues( parameters );
 
 		}

src/math/Quaternion.js

@@ -200,12 +200,6 @@ class Quaternion {
 
 	setFromEuler( euler, update ) {
 
-		if ( ! ( euler && euler.isEuler ) ) {
-
-			throw new Error( 'THREE.Quaternion: .setFromEuler() now expects an Euler rotation rather than a Vector3 and order.' );
-
-		}
-
 		const x = euler._x, y = euler._y, z = euler._z, order = euler._order;
 
 		// http://www.mathworks.com/matlabcentral/fileexchange/

src/renderers/webgl/WebGLProgram.js

@@ -222,21 +222,11 @@ function includeReplacer( match, include ) {
 
 // Unroll Loops
 
-const deprecatedUnrollLoopPattern = /#pragma unroll_loop[\s]+?for \( int i \= (\d+)\; i < (\d+)\; i \+\+ \) \{([\s\S]+?)(?=\})\}/g;
 const unrollLoopPattern = /#pragma unroll_loop_start\s+for\s*\(\s*int\s+i\s*=\s*(\d+)\s*;\s*i\s*<\s*(\d+)\s*;\s*i\s*\+\+\s*\)\s*{([\s\S]+?)}\s+#pragma unroll_loop_end/g;
 
 function unrollLoops( string ) {
 
-	return string
-		.replace( unrollLoopPattern, loopReplacer )
-		.replace( deprecatedUnrollLoopPattern, deprecatedLoopReplacer );
-
-}
-
-function deprecatedLoopReplacer( match, start, end, snippet ) {
-
-	console.warn( 'WebGLProgram: #pragma unroll_loop shader syntax is deprecated. Please use #pragma unroll_loop_start syntax instead.' );
-	return loopReplacer( match, start, end, snippet );
+	return string.replace( unrollLoopPattern, loopReplacer );
 
 }