Docs: Move guides to manual. (#30736)

docs/index.html

@@ -38,11 +38,9 @@
 						<option value="ar">ar</option>
 						<option value="ko">한국어</option>
 						<option value="zh">中文</option>
-						<option value="ja">日本語</option>
 						<option value="it">it</option>
 						<option value="pt-br">pt-br</option>
 						<option value="fr">fr</option>
-						<option value="ru">ru</option>
 					</select>
 				</div>
 				<div id="content"></div>
@@ -93,7 +91,7 @@
 
 			if ( /^(api|manual|examples)/.test( hash ) ) {
 
-				const hashLanguage = /^(api|manual|examples)\/(en|ar|ko|zh|ja|it|pt-br|fr|ru)\//.exec( hash );
+				const hashLanguage = /^(api|manual|examples)\/(en|ar|ko|zh|it|pt-br|fr)\//.exec( hash );
 
 				if ( hashLanguage === null ) {
 

docs/list.json

@@ -2,32 +2,6 @@
 
 	"en": {
 
-		"Manual": {
-
-			"Getting Started": {
-				"Installation": "manual/en/introduction/Installation",
-				"Creating a scene": "manual/en/introduction/Creating-a-scene",
-				"WebGL compatibility check": "manual/en/introduction/WebGL-compatibility-check",
-				"Drawing lines": "manual/en/introduction/Drawing-lines",
-				"Creating text": "manual/en/introduction/Creating-text",
-				"Loading 3D models": "manual/en/introduction/Loading-3D-models",
-				"Libraries and Plugins": "manual/en/introduction/Libraries-and-Plugins",
-				"FAQ": "manual/en/introduction/FAQ",
-				"Useful links": "manual/en/introduction/Useful-links"
-			},
-
-			"Next Steps": {
-				"Updating resources": "manual/en/introduction/How-to-update-things",
-				"Disposing resources": "manual/en/introduction/How-to-dispose-of-objects",
-				"Creating VR content": "manual/en/introduction/How-to-create-VR-content",
-				"Post-processing": "manual/en/introduction/How-to-use-post-processing",
-				"Matrix transformations": "manual/en/introduction/Matrix-transformations",
-				"Animation system": "manual/en/introduction/Animation-system",
-				"Color management": "manual/en/introduction/Color-management"
-			}
-
-		},
-
 		"Reference": {
 
 			"Animation": {
@@ -459,31 +433,6 @@
 
 	"ar": {
 
-		"الكتيب": {
-
-			"البدء": {
-				"التثبيت": "manual/ar/introduction/Installation",
-				"إنشاء مشهد": "manual/ar/introduction/Creating-a-scene",
-				"فحص توافق WebGL": "manual/ar/introduction/WebGL-compatibility-check",
-				"رسم خطوط": "manual/ar/introduction/Drawing-lines",
-				"إنشاء نص": "manual/ar/introduction/Creating-text",
-				"تحميل نماذج ثلاثية الأبعاد": "manual/ar/introduction/Loading-3D-models",
-				"المكتبات والإضافات": "manual/ar/introduction/Libraries-and-Plugins",
-				"الأسئلة الشائعة": "manual/ar/introduction/FAQ",
-				"روابط مفيدة": "manual/ar/introduction/Useful-links"
-			},
-
-			"الخطوات التالية": {
-				"كيفية تحديث الأشياء": "manual/ar/introduction/How-to-update-things",
-				"كيفية التخلص من الأشياء": "manual/ar/introduction/How-to-dispose-of-objects",
-				"كيفية إنشاء محتوى VR": "manual/ar/introduction/How-to-create-VR-content",
-				"كيفية استخدام المعالجة اللاحقة (post-processing)": "manual/ar/introduction/How-to-use-post-processing",
-				"تحولات المصفوفة (Matrix transformations)": "manual/ar/introduction/Matrix-transformations",
-				"نظام الحركات": "manual/ar/introduction/Animation-system"
-			}
-
-		},
-
 		"المرجع": {
 
 			"الحركات": {
@@ -763,32 +712,6 @@
 
 	"zh": {
 
-		"手册": {
-
-			"起步": {
-				"安装": "manual/zh/introduction/Installation",
-				"创建一个场景": "manual/zh/introduction/Creating-a-scene",
-				"WebGL兼容性检查": "manual/zh/introduction/WebGL-compatibility-check",
-				"画线": "manual/zh/introduction/Drawing-lines",
-				"创建文字": "manual/zh/introduction/Creating-text",
-				"载入3D模型": "manual/zh/introduction/Loading-3D-models",
-				"库和插件": "manual/zh/introduction/Libraries-and-Plugins",
-				"常见问题": "manual/zh/introduction/FAQ",
-				"一些有用的链接": "manual/zh/introduction/Useful-links"
-			},
-
-			"进阶": {
-				"如何更新场景": "manual/zh/introduction/How-to-update-things",
-				"如何废置对象": "manual/zh/introduction/How-to-dispose-of-objects",
-				"如何创建VR内容": "manual/zh/introduction/How-to-create-VR-content",
-				"如何使用后期处理": "manual/zh/introduction/How-to-use-post-processing",
-				"矩阵变换": "manual/zh/introduction/Matrix-transformations",
-				"动画系统": "manual/zh/introduction/Animation-system",
-				"色彩管理": "manual/zh/introduction/Color-management"
-			}
-
-		},
-
 		"参考": {
 
 			"动画": {
@@ -1208,32 +1131,6 @@
 
 	"ko": {
 
-		"매뉴얼": {
-
-			"시작하기": {
-				"설치": "manual/ko/introduction/Installation",
-				"장면 만들기": "manual/ko/introduction/Creating-a-scene",
-				"WebGL 호환성 검사": "manual/ko/introduction/WebGL-compatibility-check",
-				"선 그리기": "manual/ko/introduction/Drawing-lines",
-				"텍스트 만들기": "manual/ko/introduction/Creating-text",
-				"3D 모델 불러오기": "manual/ko/introduction/Loading-3D-models",
-				"라이브러리 및 플러그인": "manual/en/introduction/Libraries-and-Plugins",
-				"FAQ": "manual/ko/introduction/FAQ",
-				"참고 링크": "manual/ko/introduction/Useful-links"
-			},
-
-			"심화 과정": {
-				"오브젝트를 업데이트하는 방법": "manual/ko/introduction/How-to-update-things",
-				"오브젝트를 폐기하는 방법": "manual/ko/introduction/How-to-dispose-of-objects",
-				"VR 컨텐츠를 만드는 방법": "manual/ko/introduction/How-to-create-VR-content",
-				"후처리 사용 방법": "manual/ko/introduction/How-to-use-post-processing",
-				"행렬 변환": "manual/ko/introduction/Matrix-transformations",
-				"애니메이션 시스템": "manual/ko/introduction/Animation-system",
-				"색상 관리": "manual/ko/introduction/Color-management"
-			}
-
-		},
-
 		"레퍼런스": {
 
 			"애니메이션": {
@@ -1381,63 +1278,8 @@
 
 	},
 
-	"ja": {
-
-		"マニュアル": {
-
-			"はじめてみましょう": {
-				"インストールの方法": "manual/ja/introduction/Installation",
-				"シーンの作成": "manual/ja/introduction/Creating-a-scene",
-				"WebGLの互換性の確認": "manual/ja/introduction/WebGL-compatibility-check",
-				"線を引く": "manual/ja/introduction/Drawing-lines",
-				"テキストを作成する": "manual/ja/introduction/Creating-text",
-				"3Dモデルをロードする": "manual/ja/introduction/Loading-3D-models",
-				"ライブラリとプラグイン": "manual/ja/introduction/Libraries-and-Plugins",
-				"FAQ": "manual/ja/introduction/FAQ",
-				"役にたつリンク集": "manual/ja/introduction/Useful-links"
-			},
-
-			"次の段階": {
-				"更新の仕方": "manual/ja/introduction/How-to-update-things",
-				"オブジェクトを廃棄する方法": "manual/ja/introduction/How-to-dispose-of-objects",
-				"VRコンテンツの作り方": "manual/ja/introduction/How-to-create-VR-content",
-				"post-processingの使い方": "manual/ja/introduction/How-to-use-post-processing",
-				"行列の変換": "manual/ja/introduction/Matrix-transformations",
-				"アニメーションシステム": "manual/ja/introduction/Animation-system"
-			}
-
-		}
-
-	},
-
 	"it": {
 
-		"Manuale": {
-
-			"Per iniziare": {
-				"Installazione": "manual/it/introduction/Installation",
-				"Creare una scena": "manual/it/introduction/Creating-a-scene",
-				"Controllo compatibilità WebGL": "manual/it/introduction/WebGL-compatibility-check",
-				"Disegnare linee": "manual/it/introduction/Drawing-lines",
-				"Creare testo": "manual/it/introduction/Creating-text",
-				"Caricare modelli 3D": "manual/it/introduction/Loading-3D-models",
-				"Librerie e Plugins": "manual/it/introduction/Libraries-and-Plugins",
-				"FAQ": "manual/it/introduction/FAQ",
-				"Link utili": "manual/it/introduction/Useful-links"
-			},
-
-			"Prossimi passi": {
-				"Come aggiornare le cose": "manual/it/introduction/How-to-update-things",
-				"Come liberare le risorse": "manual/it/introduction/How-to-dispose-of-objects",
-				"Come creare contenuti VR": "manual/it/introduction/How-to-create-VR-content",
-				"Come utilizzare il post-processing": "manual/it/introduction/How-to-use-post-processing",
-				"Trasformazioni di matrici": "manual/it/introduction/Matrix-transformations",
-				"Sistema di animazione": "manual/it/introduction/Animation-system",
-				"Gestione del colore": "manual/it/introduction/Color-management"
-			}
-
-		},
-
 		"Riferimenti": {
 
 			"Animazione": {
@@ -1729,32 +1571,6 @@
 	},
 	"pt-br": {
 
-		"Manual": {
-
-			"Comece a usar": {
-				"Instalação": "manual/pt-br/introduction/Installation",
-				"Criando uma cena": "manual/pt-br/introduction/Creating-a-scene",
-				"Compatibilidade WebGL": "manual/pt-br/introduction/WebGL-compatibility-check",
-				"Desenhando linhas": "manual/pt-br/introduction/Drawing-lines",
-				"Criando texto": "manual/pt-br/introduction/Creating-text",
-				"Carregando modelos 3D": "manual/pt-br/introduction/Loading-3D-models",
-				"Bibliotecas e Plugins": "manual/pt-br/introduction/Libraries-and-Plugins",
-				"FAQ": "manual/pt-br/introduction/FAQ",
-				"Links úteis": "manual/pt-br/introduction/Useful-links"
-			},
-
-			"Próximos Passos": {
-				"Como atualizar as coisas": "manual/pt-br/introduction/How-to-update-things",
-				"Como descartar objetos": "manual/pt-br/introduction/How-to-dispose-of-objects",
-				"Como criar conteúdo de VR": "manual/pt-br/introduction/How-to-create-VR-content",
-				"Como usar o pós-processamento": "manual/pt-br/introduction/How-to-use-post-processing",
-				"Transformações de matriz": "manual/pt-br/introduction/Matrix-transformations",
-				"Sistema de animação": "manual/pt-br/introduction/Animation-system",
-				"Gerenciamento de cor": "manual/pt-br/introduction/Color-management"
-			}
-
-		},
-
 		"Referência": {
 
 			"Animation": {
@@ -1810,32 +1626,6 @@
 
 	"fr": {
 
-		"Manuel": {
-
-			"Débuter": {
-				"Installation": "manual/fr/introduction/Installation",
-				"Créer une scène": "manual/fr/introduction/Creating-a-scene",
-				"Compatibilité WebGL": "manual/fr/introduction/WebGL-compatibility-check",
-				"Dessiner des lignes": "manual/fr/introduction/Drawing-lines",
-				"Créer un texte": "manual/fr/introduction/Creating-text",
-				"Importer des modèles 3D": "manual/fr/introduction/Loading-3D-models",
-				"Librairies et Plugins": "manual/fr/introduction/Libraries-and-Plugins",
-				"FAQ": "manual/fr/introduction/FAQ",
-				"Liens Utiles": "manual/fr/introduction/Useful-links"
-			},
-
-			"Étapes Suivantes": {
-				"Mettre les éléments à jour": "manual/fr/introduction/How-to-update-things",
-				"Supprimer un objet": "manual/fr/introduction/How-to-dispose-of-objects",
-				"Créer du contenu VR": "manual/fr/introduction/How-to-create-VR-content",
-				"Utiliser le post-processing": "manual/fr/introduction/How-to-use-post-processing",
-				"Matrices de transformation": "manual/fr/introduction/Matrix-transformations",
-				"Système d'animation": "manual/fr/introduction/Animation-system",
-				"Gestion des couleurs": "manual/fr/introduction/Color-management"
-			}
-
-		},
-
 		"Référence": {
 
 			"Animation": {
@@ -1934,429 +1724,6 @@
 
 		}
 
-	},
-
-	"ru": {
-
-		"Руководство": {
-
-			"Приступая к работе": {
-				"Установка": "manual/ru/introduction/Installation",
-				"Создание сцены": "manual/ru/introduction/Creating-a-scene",
-				"Проверка совместимости с WebGL": "manual/ru/introduction/WebGL-compatibility-check",
-				"Рисование линий": "manual/ru/introduction/Drawing-lines",
-				"Создание текста": "manual/ru/introduction/Creating-text",
-				"Загрузка 3D-моделей": "manual/ru/introduction/Loading-3D-models",
-				"Библиотеки и плагины": "manual/ru/introduction/Libraries-and-Plugins",
-				"Часто задаваемые вопросы": "manual/ru/introduction/FAQ",
-				"Полезные ссылки": "manual/ru/introduction/Useful-links"
-			},
-
-			"Next Steps": {
-				"How to update things": "manual/en/introduction/How-to-update-things",
-				"How to dispose of objects": "manual/en/introduction/How-to-dispose-of-objects",
-				"How to create VR content": "manual/en/introduction/How-to-create-VR-content",
-				"How to use post-processing": "manual/en/introduction/How-to-use-post-processing",
-				"Matrix transformations": "manual/en/introduction/Matrix-transformations",
-				"Animation system": "manual/en/introduction/Animation-system",
-				"Color management": "manual/en/introduction/Color-management"
-			}
-
-		},
-
-		"Reference": {
-
-			"Animation": {
-				"AnimationAction": "api/en/animation/AnimationAction",
-				"AnimationClip": "api/en/animation/AnimationClip",
-				"AnimationMixer": "api/en/animation/AnimationMixer",
-				"AnimationObjectGroup": "api/en/animation/AnimationObjectGroup",
-				"AnimationUtils": "api/en/animation/AnimationUtils",
-				"KeyframeTrack": "api/en/animation/KeyframeTrack",
-				"PropertyBinding": "api/en/animation/PropertyBinding",
-				"PropertyMixer": "api/en/animation/PropertyMixer"
-			},
-
-			"Animation / Tracks": {
-				"BooleanKeyframeTrack": "api/en/animation/tracks/BooleanKeyframeTrack",
-				"ColorKeyframeTrack": "api/en/animation/tracks/ColorKeyframeTrack",
-				"NumberKeyframeTrack": "api/en/animation/tracks/NumberKeyframeTrack",
-				"QuaternionKeyframeTrack": "api/en/animation/tracks/QuaternionKeyframeTrack",
-				"StringKeyframeTrack": "api/en/animation/tracks/StringKeyframeTrack",
-				"VectorKeyframeTrack": "api/en/animation/tracks/VectorKeyframeTrack"
-			},
-
-			"Audio": {
-				"Audio": "api/en/audio/Audio",
-				"AudioAnalyser": "api/en/audio/AudioAnalyser",
-				"AudioContext": "api/en/audio/AudioContext",
-				"AudioListener": "api/en/audio/AudioListener",
-				"PositionalAudio": "api/en/audio/PositionalAudio"
-			},
-
-			"Cameras": {
-				"ArrayCamera": "api/en/cameras/ArrayCamera",
-				"Camera": "api/en/cameras/Camera",
-				"CubeCamera": "api/en/cameras/CubeCamera",
-				"OrthographicCamera": "api/en/cameras/OrthographicCamera",
-				"PerspectiveCamera": "api/en/cameras/PerspectiveCamera",
-				"StereoCamera": "api/en/cameras/StereoCamera"
-			},
-
-			"Constants": {
-				"Animation": "api/en/constants/Animation",
-				"Core": "api/en/constants/Core",
-				"CustomBlendingEquation": "api/en/constants/CustomBlendingEquations",
-				"BufferAttributeUsage": "api/en/constants/BufferAttributeUsage",
-				"Materials": "api/en/constants/Materials",
-				"Renderer": "api/en/constants/Renderer",
-				"Textures": "api/en/constants/Textures"
-			},
-
-			"Core": {
-				"BufferAttribute": "api/en/core/BufferAttribute",
-				"BufferGeometry": "api/en/core/BufferGeometry",
-				"Clock": "api/en/core/Clock",
-				"EventDispatcher": "api/en/core/EventDispatcher",
-				"GLBufferAttribute": "api/en/core/GLBufferAttribute",
-				"InstancedBufferAttribute": "api/en/core/InstancedBufferAttribute",
-				"InstancedBufferGeometry": "api/en/core/InstancedBufferGeometry",
-				"InstancedInterleavedBuffer": "api/en/core/InstancedInterleavedBuffer",
-				"InterleavedBuffer": "api/en/core/InterleavedBuffer",
-				"InterleavedBufferAttribute": "api/en/core/InterleavedBufferAttribute",
-				"Layers": "api/en/core/Layers",
-				"Object3D": "api/en/core/Object3D",
-				"Raycaster": "api/en/core/Raycaster",
-				"Uniform": "api/en/core/Uniform"
-			},
-
-			"Core / BufferAttributes": {
-				"BufferAttribute Types": "api/en/core/bufferAttributeTypes/BufferAttributeTypes"
-			},
-
-			"Extras": {
-				"DataUtils": "api/en/extras/DataUtils",
-				"Earcut": "api/en/extras/Earcut",
-				"ImageUtils": "api/en/extras/ImageUtils",
-				"PMREMGenerator": "api/en/extras/PMREMGenerator",
-				"ShapeUtils": "api/en/extras/ShapeUtils"
-			},
-
-			"Extras / Core": {
-				"Curve": "api/en/extras/core/Curve",
-				"CurvePath": "api/en/extras/core/CurvePath",
-				"Interpolations": "api/en/extras/core/Interpolations",
-				"Path": "api/en/extras/core/Path",
-				"Shape": "api/en/extras/core/Shape",
-				"ShapePath": "api/en/extras/core/ShapePath"
-			},
-
-			"Extras / Curves": {
-				"ArcCurve": "api/en/extras/curves/ArcCurve",
-				"CatmullRomCurve3": "api/en/extras/curves/CatmullRomCurve3",
-				"CubicBezierCurve": "api/en/extras/curves/CubicBezierCurve",
-				"CubicBezierCurve3": "api/en/extras/curves/CubicBezierCurve3",
-				"EllipseCurve": "api/en/extras/curves/EllipseCurve",
-				"LineCurve": "api/en/extras/curves/LineCurve",
-				"LineCurve3": "api/en/extras/curves/LineCurve3",
-				"QuadraticBezierCurve": "api/en/extras/curves/QuadraticBezierCurve",
-				"QuadraticBezierCurve3": "api/en/extras/curves/QuadraticBezierCurve3",
-				"SplineCurve": "api/en/extras/curves/SplineCurve"
-			},
-
-			"Geometries": {
-				"BoxGeometry": "api/en/geometries/BoxGeometry",
-				"CapsuleGeometry": "api/en/geometries/CapsuleGeometry",
-				"CircleGeometry": "api/en/geometries/CircleGeometry",
-				"ConeGeometry": "api/en/geometries/ConeGeometry",
-				"CylinderGeometry": "api/en/geometries/CylinderGeometry",
-				"DodecahedronGeometry": "api/en/geometries/DodecahedronGeometry",
-				"EdgesGeometry": "api/en/geometries/EdgesGeometry",
-				"ExtrudeGeometry": "api/en/geometries/ExtrudeGeometry",
-				"IcosahedronGeometry": "api/en/geometries/IcosahedronGeometry",
-				"LatheGeometry": "api/en/geometries/LatheGeometry",
-				"OctahedronGeometry": "api/en/geometries/OctahedronGeometry",
-				"PlaneGeometry": "api/en/geometries/PlaneGeometry",
-				"PolyhedronGeometry": "api/en/geometries/PolyhedronGeometry",
-				"RingGeometry": "api/en/geometries/RingGeometry",
-				"ShapeGeometry": "api/en/geometries/ShapeGeometry",
-				"SphereGeometry": "api/en/geometries/SphereGeometry",
-				"TetrahedronGeometry": "api/en/geometries/TetrahedronGeometry",
-				"TorusGeometry": "api/en/geometries/TorusGeometry",
-				"TorusKnotGeometry": "api/en/geometries/TorusKnotGeometry",
-				"TubeGeometry": "api/en/geometries/TubeGeometry",
-				"WireframeGeometry": "api/en/geometries/WireframeGeometry"
-			},
-
-			"Helpers": {
-				"ArrowHelper": "api/en/helpers/ArrowHelper",
-				"AxesHelper": "api/en/helpers/AxesHelper",
-				"BoxHelper": "api/en/helpers/BoxHelper",
-				"Box3Helper": "api/en/helpers/Box3Helper",
-				"CameraHelper": "api/en/helpers/CameraHelper",
-				"DirectionalLightHelper": "api/en/helpers/DirectionalLightHelper",
-				"GridHelper": "api/en/helpers/GridHelper",
-				"PolarGridHelper": "api/en/helpers/PolarGridHelper",
-				"HemisphereLightHelper": "api/en/helpers/HemisphereLightHelper",
-				"PlaneHelper": "api/en/helpers/PlaneHelper",
-				"PointLightHelper": "api/en/helpers/PointLightHelper",
-				"SkeletonHelper": "api/en/helpers/SkeletonHelper",
-				"SpotLightHelper": "api/en/helpers/SpotLightHelper"
-			},
-
-			"Lights": {
-				"AmbientLight": "api/en/lights/AmbientLight",
-				"DirectionalLight": "api/en/lights/DirectionalLight",
-				"HemisphereLight": "api/en/lights/HemisphereLight",
-				"Light": "api/en/lights/Light",
-				"LightProbe": "api/en/lights/LightProbe",
-				"PointLight": "api/en/lights/PointLight",
-				"RectAreaLight": "api/en/lights/RectAreaLight",
-				"SpotLight": "api/en/lights/SpotLight"
-			},
-
-			"Lights / Shadows": {
-				"LightShadow": "api/en/lights/shadows/LightShadow",
-				"PointLightShadow": "api/en/lights/shadows/PointLightShadow",
-				"DirectionalLightShadow": "api/en/lights/shadows/DirectionalLightShadow",
-				"SpotLightShadow": "api/en/lights/shadows/SpotLightShadow"
-			},
-
-			"Loaders": {
-				"AnimationLoader": "api/en/loaders/AnimationLoader",
-				"AudioLoader": "api/en/loaders/AudioLoader",
-				"BufferGeometryLoader": "api/en/loaders/BufferGeometryLoader",
-				"Cache": "api/en/loaders/Cache",
-				"CompressedTextureLoader": "api/en/loaders/CompressedTextureLoader",
-				"CubeTextureLoader": "api/en/loaders/CubeTextureLoader",
-				"DataTextureLoader": "api/en/loaders/DataTextureLoader",
-				"FileLoader": "api/en/loaders/FileLoader",
-				"ImageBitmapLoader": "api/en/loaders/ImageBitmapLoader",
-				"ImageLoader": "api/en/loaders/ImageLoader",
-				"Loader": "api/en/loaders/Loader",
-				"LoaderUtils": "api/en/loaders/LoaderUtils",
-				"MaterialLoader": "api/en/loaders/MaterialLoader",
-				"ObjectLoader": "api/en/loaders/ObjectLoader",
-				"TextureLoader": "api/en/loaders/TextureLoader"
-			},
-
-			"Loaders / Managers": {
-				"DefaultLoadingManager": "api/en/loaders/managers/DefaultLoadingManager",
-				"LoadingManager": "api/en/loaders/managers/LoadingManager"
-			},
-
-			"Materials": {
-				"LineBasicMaterial": "api/en/materials/LineBasicMaterial",
-				"LineDashedMaterial": "api/en/materials/LineDashedMaterial",
-				"Material": "api/en/materials/Material",
-				"MeshBasicMaterial": "api/en/materials/MeshBasicMaterial",
-				"MeshDepthMaterial": "api/en/materials/MeshDepthMaterial",
-				"MeshDistanceMaterial": "api/en/materials/MeshDistanceMaterial",
-				"MeshLambertMaterial": "api/en/materials/MeshLambertMaterial",
-				"MeshMatcapMaterial": "api/en/materials/MeshMatcapMaterial",
-				"MeshNormalMaterial": "api/en/materials/MeshNormalMaterial",
-				"MeshPhongMaterial": "api/en/materials/MeshPhongMaterial",
-				"MeshPhysicalMaterial": "api/en/materials/MeshPhysicalMaterial",
-				"MeshStandardMaterial": "api/en/materials/MeshStandardMaterial",
-				"MeshToonMaterial": "api/en/materials/MeshToonMaterial",
-				"PointsMaterial": "api/en/materials/PointsMaterial",
-				"RawShaderMaterial": "api/en/materials/RawShaderMaterial",
-				"ShaderMaterial": "api/en/materials/ShaderMaterial",
-				"ShadowMaterial": "api/en/materials/ShadowMaterial",
-				"SpriteMaterial": "api/en/materials/SpriteMaterial"
-			},
-
-			"Math": {
-				"Box2": "api/en/math/Box2",
-				"Box3": "api/en/math/Box3",
-				"Color": "api/en/math/Color",
-				"Cylindrical": "api/en/math/Cylindrical",
-				"Euler": "api/en/math/Euler",
-				"Frustum": "api/en/math/Frustum",
-				"Interpolant": "api/en/math/Interpolant",
-				"Line3": "api/en/math/Line3",
-				"MathUtils": "api/en/math/MathUtils",
-				"Matrix3": "api/en/math/Matrix3",
-				"Matrix4": "api/en/math/Matrix4",
-				"Plane": "api/en/math/Plane",
-				"Quaternion": "api/en/math/Quaternion",
-				"Ray": "api/en/math/Ray",
-				"Sphere": "api/en/math/Sphere",
-				"Spherical": "api/en/math/Spherical",
-				"SphericalHarmonics3": "api/en/math/SphericalHarmonics3",
-				"Triangle": "api/en/math/Triangle",
-				"Vector2": "api/en/math/Vector2",
-				"Vector3": "api/en/math/Vector3",
-				"Vector4": "api/en/math/Vector4"
-			},
-
-			"Math / Interpolants": {
-				"CubicInterpolant": "api/en/math/interpolants/CubicInterpolant",
-				"DiscreteInterpolant": "api/en/math/interpolants/DiscreteInterpolant",
-				"LinearInterpolant": "api/en/math/interpolants/LinearInterpolant",
-				"QuaternionLinearInterpolant": "api/en/math/interpolants/QuaternionLinearInterpolant"
-			},
-
-			"Objects": {
-				"Bone": "api/en/objects/Bone",
-				"Group": "api/en/objects/Group",
-				"InstancedMesh": "api/en/objects/InstancedMesh",
-				"Line": "api/en/objects/Line",
-				"LineLoop": "api/en/objects/LineLoop",
-				"LineSegments": "api/en/objects/LineSegments",
-				"LOD": "api/en/objects/LOD",
-				"Mesh": "api/en/objects/Mesh",
-				"Points": "api/en/objects/Points",
-				"Skeleton": "api/en/objects/Skeleton",
-				"SkinnedMesh": "api/en/objects/SkinnedMesh",
-				"Sprite": "api/en/objects/Sprite"
-			},
-
-			"Renderers": {
-				"WebGLRenderer": "api/en/renderers/WebGLRenderer",
-				"WebGLRenderTarget": "api/en/renderers/WebGLRenderTarget",
-				"WebGL3DRenderTarget": "api/en/renderers/WebGL3DRenderTarget",
-				"WebGLArrayRenderTarget": "api/en/renderers/WebGLArrayRenderTarget",
-				"WebGLCubeRenderTarget": "api/en/renderers/WebGLCubeRenderTarget"
-			},
-
-			"Renderers / Shaders": {
-				"ShaderChunk": "api/en/renderers/shaders/ShaderChunk",
-				"ShaderLib": "api/en/renderers/shaders/ShaderLib",
-				"UniformsLib": "api/en/renderers/shaders/UniformsLib",
-				"UniformsUtils": "api/en/renderers/shaders/UniformsUtils"
-			},
-
-			"Renderers / WebXR": {
-				"WebXRManager": "api/en/renderers/webxr/WebXRManager"
-			},
-
-			"Scenes": {
-				"Fog": "api/en/scenes/Fog",
-				"FogExp2": "api/en/scenes/FogExp2",
-				"Scene": "api/en/scenes/Scene"
-			},
-
-			"Textures": {
-				"CanvasTexture": "api/en/textures/CanvasTexture",
-				"CompressedTexture": "api/en/textures/CompressedTexture",
-				"CompressedArrayTexture": "api/en/textures/CompressedArrayTexture",
-				"CubeTexture": "api/en/textures/CubeTexture",
-				"Data3DTexture": "api/en/textures/Data3DTexture",
-				"DataArrayTexture": "api/en/textures/DataArrayTexture",
-				"DataTexture": "api/en/textures/DataTexture",
-				"DepthTexture": "api/en/textures/DepthTexture",
-				"FramebufferTexture": "api/en/textures/FramebufferTexture",
-				"Source": "api/en/textures/Source",
-				"Texture": "api/en/textures/Texture",
-				"VideoTexture": "api/en/textures/VideoTexture"
-			}
-
-		},
-
-		"Examples": {
-
-			"Animations": {
-				"CCDIKSolver": "examples/en/animations/CCDIKSolver"
-			},
-
-			"Controls": {
-				"ArcballControls": "examples/en/controls/ArcballControls",
-				"DragControls": "examples/en/controls/DragControls",
-				"FirstPersonControls": "examples/en/controls/FirstPersonControls",
-				"FlyControls": "examples/en/controls/FlyControls",
-				"OrbitControls": "examples/en/controls/OrbitControls",
-				"PointerLockControls": "examples/en/controls/PointerLockControls",
-				"TrackballControls": "examples/en/controls/TrackballControls",
-				"TransformControls": "examples/en/controls/TransformControls"
-			},
-
-			"Geometries": {
-				"ConvexGeometry": "examples/en/geometries/ConvexGeometry",
-				"DecalGeometry": "examples/en/geometries/DecalGeometry",
-				"ParametricGeometry": "examples/en/geometries/ParametricGeometry",
-				"TextGeometry": "examples/en/geometries/TextGeometry"
-			},
-
-			"Helpers": {
-				"LightProbeHelper": "examples/en/helpers/LightProbeHelper",
-				"PositionalAudioHelper": "examples/en/helpers/PositionalAudioHelper",
-				"RectAreaLightHelper": "examples/en/helpers/RectAreaLightHelper",
-				"VertexNormalsHelper": "examples/en/helpers/VertexNormalsHelper",
-				"VertexTangentsHelper": "examples/en/helpers/VertexTangentsHelper"
-			},
-
-			"Lights": {
-				"LightProbeGenerator": "examples/en/lights/LightProbeGenerator"
-			},
-
-			"Loaders": {
-				"3DMLoader": "examples/en/loaders/3DMLoader",
-				"DRACOLoader": "examples/en/loaders/DRACOLoader",
-				"FontLoader": "examples/en/loaders/FontLoader",
-				"GLTFLoader": "examples/en/loaders/GLTFLoader",
-				"KTX2Loader": "examples/en/loaders/KTX2Loader",
-				"LDrawLoader": "examples/en/loaders/LDrawLoader",
-				"MTLLoader": "examples/en/loaders/MTLLoader",
-				"OBJLoader": "examples/en/loaders/OBJLoader",
-				"PCDLoader": "examples/en/loaders/PCDLoader",
-				"PDBLoader": "examples/en/loaders/PDBLoader",
-				"SVGLoader": "examples/en/loaders/SVGLoader",
-				"TGALoader": "examples/en/loaders/TGALoader"
-			},
-
-			"Objects": {
-				"Lensflare": "examples/en/objects/Lensflare"
-			},
-
-			"Post-Processing": {
-				"EffectComposer": "examples/en/postprocessing/EffectComposer"
-			},
-
-			"Exporters": {
-				"EXRExporter": "examples/en/exporters/EXRExporter",
-				"GLTFExporter": "examples/en/exporters/GLTFExporter",
-				"OBJExporter": "examples/en/exporters/OBJExporter",
-				"PLYExporter": "examples/en/exporters/PLYExporter"
-			},
-
-			"Math": {
-				"LookupTable": "examples/en/math/Lut",
-				"MeshSurfaceSampler": "examples/en/math/MeshSurfaceSampler",
-				"OBB": "examples/en/math/OBB"
-			},
-
-			"ConvexHull": {
-				"Face": "examples/en/math/convexhull/Face",
-				"HalfEdge": "examples/en/math/convexhull/HalfEdge",
-				"ConvexHull": "examples/en/math/convexhull/ConvexHull",
-				"VertexNode": "examples/en/math/convexhull/VertexNode",
-				"VertexList": "examples/en/math/convexhull/VertexList"
-			},
-
-			"Renderers": {
-				"CSS2DRenderer": "examples/en/renderers/CSS2DRenderer",
-				"CSS3DRenderer": "examples/en/renderers/CSS3DRenderer",
-				"SVGRenderer": "examples/en/renderers/SVGRenderer"
-
-			},
-
-			"Utils": {
-				"BufferGeometryUtils": "examples/en/utils/BufferGeometryUtils",
-				"CameraUtils": "examples/en/utils/CameraUtils",
-				"SceneUtils": "examples/en/utils/SceneUtils",
-				"SkeletonUtils": "examples/en/utils/SkeletonUtils"
-			}
-
-		},
-
-		"Developer Reference": {
-
-			"WebGLRenderer": {
-				"WebGLProgram": "api/en/renderers/webgl/WebGLProgram"
-			}
-
-		}
-
 	}
+
 }

docs/manual/ar/introduction/Animation-system.html

@@ -1,112 +0,0 @@
-<!DOCTYPE html>
-<html lang="ar">
-	<head>
-		<meta charset="utf-8" />
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body class="rtl">
-		<h1>نظام الحركات</h1>
-
-		<h2>نظرة عامة</h2>
-
-		<p class="desc">
-			يضمن نظام الرسوم المتحركة three.js ، إمكانية تحريك الخصائص المختلفة لنماذجك: عظام [page:SkinnedMesh skinned and rigged model] ، morph targets ، خصائص مادة مختلفة (ألوان ، عتامة ، منطقية) ، الرؤية والتحولات. يمكن أن تتلاشى الخصائص المتحركة، أو تتلاشى وتتشوه. يمكن تغيير مقاييس الوزن والوقت للرسوم المتحركة المتزامنة المختلفة على نفس الكائن وكذلك على كائنات مختلفة بشكل مستقل. يمكن مزامنة الرسوم المتحركة المختلفة على نفس الشيء وعلى كائنات مختلفة.
-			<br /><br />
-
-			لتحقيق كل هذا في نظام واحد متجانس ، نظام الرسوم المتحركة three.js شعد تغييرا هامًا في عام [link:https://github.com/mrdoob/three.js/issues/6881 2015] (احذر من المعلومات القديمة!) ، ولديه الآن بنية مشابهة لـ Unity / Unreal Engine 4. تقدم هذه الصفحة لمحة موجزة عن المكونات الرئيسية للنظام وكيف تعمل معًا.
-
-		</p>
-
-		<h3>مقاطع الحركات</h3>
-
-		<p class="desc">
-
-			إذا قمت باستيراد كائن ثلاثي الأبعاد متحرك بنجاح (لا يهم ما إذا كان يحتوي على عظام أو أهداف تشكيل أو كليهما) - على سبيل المثال تصديره من Blender مع [link:https://github.com/KhronosGroup/glTF-Blender-IO glTF Blender exporter] وتحميله في مشهد three.js باستخدام 333 - يضمن أن توجد مصفوفة تسمى "الرسوم المتحركة" ، تحتوي على 444 لهذا النموذج (انظر قائمة برامج التحميل المتوفرة أدناه).
-			<br /><br />
-
-			يحتفظ كل مقطع *AnimationClip* عادةً ببيانات نشاط معين للكائن. إذا كانت الشبكة عبارة عن شخصية ، على سبيل المثال ، فقد يكون هناك مقطع Animation واحد للمشي ، وثاني للقفز ، وثالث للتنقل وما إلى ذلك.
-
-		</p>
-
-		<h3>مسارات الإطار الأساسي (Keyframe tracks)</h3>
-
-		<p class="desc">
-
-			داخل ملف *AnimationClip* ، يتم تخزين البيانات الخاصة بكل خاصية متحركة في [page:KeyframeTrack]. بافتراض أن كائن حرف له هيكل عظمي [page:Skeleton skeleton] ، يمكن لمسار إطار رئيسي واحد تخزين البيانات لتغييرات موضع عظم الذراع السفلي بمرور الوقت ، وهو أمر مختلف تتبع البيانات الخاصة بتغييرات دوران نفس العظم ، وثلث موضع المسار ، دوران أو تحجيم عظم آخر ، وما إلى ذلك. يجب أن يكون واضحًا ، أن AnimationClip يمكن أن يتكون من الكثير من هذه المسارات.
-			<br /><br />
-
-			بافتراض أن النموذج يحتوي على morph targets (على سبيل المثال ، أحد أهداف التشكيل يظهر وجهًا ودودًا والآخر يظهر وجهًا غاضبًا) ، فإن كل مسار يحمل المعلومات المتعلقة بكيفية تغيير الرقم [page:Mesh.morphTargetInfluences influence] لهدف تشكيل معين أثناء أداء المقطع.
-
-		</p>
-
-		<h3>خالط الحركات (Animation Mixer)</h3>
-
-		<p class="desc">
-
-			تشكل البيانات المخزنة أساس الرسوم المتحركة فقط - يتم التحكم في التشغيل الفعلي بواسطة [page:AnimationMixer]. يمكنك تخيل هذا ليس فقط كمشغل للرسوم المتحركة ، ولكن ك كجهاز أو مثل وحدة التحكم في المزج الحقيقي ، والتي يمكنها التحكم في العديد من الرسوم المتحركة في وقت واحد ومزجها ودمجها.
-
-		</p>
-
-		<h3>أحداث الحركات (Animation Actions)</h3>
-
-		<p class="desc">
-
-			يحتوي *AnimationMixer* نفسه على عدد قليل جدًا من الخصائص والطرق (العامة) ، لأنه يمكن التحكم فيه بواسطة [page:AnimationAction AnimationActions]. من خلال تكوين *AnimationAction* يمكنك تحديد وقت تشغيل *AnimationClip* معين أو إيقافه مؤقتًا أو إيقاف تشغيله أحد الخلاطات ، إذا كان يجب تكرار المقطع وعدد مرات تكرارها ، سواء كان يجب إجراؤه بتلاشي أو مقياس زمني ، وبعض الأشياء الإضافية ، مثل التلاشي أو التزامن.
-
-		</p>
-
-		<h3>تحريك مجموعة من النماذج</h3>
-
-		<p class="desc">
-
-			إذا كنت تريد أن تطبق على مجموعة من الكائنات حالة حركة مشتركة ، يمكنك استخدام [page:AnimationObjectGroup]..
-
-		</p>
-
-		<h3>التنسيقات و عناصر التحميل المدعومة</h3>
-
-		<p class="desc">
-			لاحظ أنه لا تتضمن جميع تنسيقات النماذج الرسوم المتحركة (لا سيما OBJ) ، وأن بعض أدوات تحميل three.js فقط تدعم [page:AnimationClip AnimationClip] تسلسلًا. العديد منها يدعم هذا النوع من الرسوم المتحركة:
-		</p>
-
-			<ul>
-				<li>[page:ObjectLoader THREE.ObjectLoader]</li>
-				<li>THREE.BVHLoader</li>
-				<li>THREE.ColladaLoader</li>
-				<li>THREE.FBXLoader</li>
-				<li>[page:GLTFLoader THREE.GLTFLoader]</li>
-			</ul>
-
-		<p class="desc">
-			لاحظ أن 3ds max و Maya لا يمكنهم حاليًا تصدير العديد من الرسوم المتحركة (بمعنى الرسوم المتحركة غير الموجودة في نفس المخطط الزمني) مباشرةً إلى ملف واحد.
-		</p>
-
-		<h2>مثال</h2>
-
-		<code>
-		let mesh;
-
-		// Create an AnimationMixer, and get the list of AnimationClip instances
-		const mixer = new THREE.AnimationMixer( mesh );
-		const clips = mesh.animations;
-
-		// Update the mixer on each frame
-		function update () {
-			mixer.update( deltaSeconds );
-		}
-
-		// Play a specific animation
-		const clip = THREE.AnimationClip.findByName( clips, 'dance' );
-		const action = mixer.clipAction( clip );
-		action.play();
-
-		// Play all animations
-		clips.forEach( function ( clip ) {
-			mixer.clipAction( clip ).play();
-		} );
-		</code>
-
-	</body>
-</html>

docs/manual/ar/introduction/Creating-a-scene.html

@@ -1,154 +0,0 @@
-<!DOCTYPE html>
-<html lang="ar">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-
-	<body class="rtl">
-		<h1>إنشاء مشهد（[name])</h1>
-
-		<p>الهدف من هذا القسم هو تقديم مقدمة مختصرة عن three.js. سنبدأ بإعداد مشهد باستخدام مكعب دوار. متوفر مثال عملي جاهز في أسفل الصفحة في حالة واجهتك مشكلة و علقت واحتجت إلى المساعدة.</p>
-
-		<h2>قبل أن تبدأ</h2>
-
-		<p>إذا لم تقم بذلك بعد، فانتقل إلى دليل [link:#manual/ar/introduction/Installation تثبيت]. سنفترض أنك قمت بالفعل بإعداد نفس هيكل المشروع (يشمل ذلك Index.html وmain.js)، وقمت بتثبيت three.js، وأنك تقوم بستخدم أداة بناء ، أو تستخدم خادم محلي مع CDN و import maps.</p>
-
-		<h2>إنشاء المشهد</h2>
-
-		<p>لكي نتمكن فعلًا من عرض أي شيء باستخدام three.js، نحتاج إلى ثلاثة عناصر: المشهد (scene) والكاميرا (camera) والعارض (renderer)، بحيث يمكننا عرض المشهد بواسطة الكاميرا.</p>
-
-		<p class="RtlTitle"><i >main.js —</i></p>
-
-		<code>
-		import * as THREE from 'three';
-
-		const scene = new THREE.Scene();
-		const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
-
-		const renderer = new THREE.WebGLRenderer();
-		renderer.setSize( window.innerWidth, window.innerHeight );
-		document.body.appendChild( renderer.domElement );
-		</code>
-
-		<p>لنتمهل لحظة من أجل توضيح ما يحصل هنا. لقد قمنا بتحضير كل من المسرح، الكاميرا، و العارض.</p>
-
-		<p>هناك العديد من الخيارات بخصوص نوع الكاميرا. للوقت الراهن، سنستعمل `PerspectiveCamera`.</p>
-
-		<p>أول قيمه هي `مجال الرؤية - field of view `.FOV تمثل مجال المشاهدة المتاح في أي وقت من العرض. وحده قيسها هي الدرجة (degrees)</p>
-		
-		<p>ثاني قيمة هي `نسبة العرض إلى الارتفاع - aspect ratio`. من المستحسن إستعمال نتيجة قسمة عرض وطول العنصر الحاوي، و إلا ستحصل على تجربة مماثلة لمشاهدة فيلم قديم على تلفاز عريض حيث ستكون الصورة مضغوطة.</p>
-
-		<p>القيمتين المتبقيتين هما `أقرب - near` و `أبعد - far` سطح فاصل. القصد هو اي شيء بعيد عن الكاميرا من قيمه `far` او اقرب من قيمه `near` لن يتم عرضهم.أنت لست مطالب بالقلق حيال هذا، و لكن من الممكن أن تريد إستعمال قيم أخرى من أجل الحصول على أداء أفضل.</p>
-	
-		<p>الخطوة التالية الأن هوالعارض. بالإضافة إلى إنشاء مثيل العارض,يتعين علينا أيضًا تعيين الحجم الذي نرغب في عرض تطبيقنا به.هنا من الفكرة الجيدة استخدام عرض وارتفاع المنطقة التي نرغب في ملئها بتطبيقنا - في هذه الحالة، عرض وارتفاع نافذة المتصفح. بالنسبة لتطبيقات تتطلب أداءً مكثفًا، يمكنك أيضًا تقديم قيم أصغر لـ `setSize`، مثل `window.innerWidth/2` و `window.innerHeight/2`، مما سيجعل التطبيق يعرض بحجم ربع الشاشة.</p>
-				
-		<p>إذا كنت ترغب في الاحتفاظ بحجم تطبيقك ولكن تقديمه بدقة أقل، يمكنك القيام بذلك عن طريق استخدام `setSize` و استخدام قيمه false ل`updateStyle` المعامل الثالث . على سبيل المثال، setSize(window.innerWidth/2, window.innerHeight/2, false) سيقوم بتقديم تطبيقك بدقة نصف الحجم، شريطةً أن لديك &lt;canvas&gt; بعرض وارتفاع 100% </p>
-
-		<p>أخيرا و ليس أخرا، سنقوم بإضافة `العارض - renderer` إلى ملف الHTML. <br> &lt; canvas &gt; هو وسم يستعمله العارض لإظهار المشهد من خلاله.</p>
-
-		<p><em>"كل شيء جيد، و لكن أي المكعب الذي وعدتنا به؟"</em> لنقم بإضافته الأن.</p>
-
-
-		<code>
-		const geometry = new THREE.BoxGeometry( 1, 1, 1 );
-		const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
-		const cube = new THREE.Mesh( geometry, material );
-		scene.add( cube );
-
-		camera.position.z = 5;
-		</code>
-		
-		<p>لكي نقوم بإنشاء مكعب، نحتاج مكون `BoxGeometry`. هذا الأخير مسؤول عن حفض أماكن كل النقاط (`vertices`) و تعبئة كل الأوجه (`faces`) المكونة للمكعب. سنقوم بالتعمق في هذا الموضوع مستقبلا.</p>
-
-		<p>بالإضافة إلى الهندسة الخاصة بالمكعب، نحتاج الي مادة له لتعطيه لون. Three.js تأتي مع العديد من المواد،ولكن سنكتفي بإستعمال `MeshBasicMaterial` الان. كل المواد تأخذ مجموعة من القيم ستطبق عليها من أجل الوصول إلى النتيجة المرادة. لإبقاء الأشياء بسيطة، قمنا بإرفاق قيمة اللون التي `0x00ff00`، و الذي يمثل اللون الأخضر. كيفية إحتساب القيمة هي نفسها كإستعمال CSS أو Photoshop(`hex colors`).</p>
-		
-		<p>الخطوة التالية هي إنشاء `جسم - Mesh`. نقصد به الشيء الذي سيتكفل بالتعامل مع هندسة الشكل و تطبيقهاعلى المادة المرفوقة، و من ثم يمكننا إدخال الشكل الجسم النهائي إلى المشهد، و التحرك بحرية حوله.</p>
-
-		<p>بشكل افتراضي عند إستعمال أمر `scene.add()`، الشيء المراد إضافته للمشهد سيضاف في الإحداثيات التالية (`0,0,0`) . هذا يمكن له أن يشكل بعض المشاكل كون الكاميرا في هذه الحالة داخل المكعب. لتجنب هذا نقوم ببساطة بإبعاد الكاميرا قليلا.</p>
-
-		<h2>عرض المشهد</h2>
-
-		<p>إن قمت بنسخ الأوامر البرمجية الموجودة أعله وسط ملف HTML الذي قمنا بإنشائه مسبقا، لم تتمكن من رؤية أي شيء حتى الأن. هذا بسبب أننا لم نقم بعرض أي شيء حتى اللحظة. لذلك، ما نحتاجه يدعى  (`العرض - render`) أو (`حلقةالحركات - animation loop`).</p>
-
-		<code>
-		function animate() {
-			requestAnimationFrame( animate );
-			renderer.render( scene, camera );
-		}
-		animate();
-		</code>
-		
-		<p>هذه الشفره ستقوم بإنشاء حلقة تكراريه تجعل العارض يعيد تحديث المشهد كل مرة يحدث فيها تغيير في الصفحة (أو نظرياهذا يعني 60 مرةخلال كل ثانية). إن كنت لا تملك تجربة مسبقة في صناعة ألعاب المتصفح، ستتسائل <em>"لماذا لا نستعمل setInterval؟"</em> الحقيقة أننا بإمكاننا ذلك و لكن `requestAnimationFrame` تقدم لنا العديد من المزايا. من أهما أنها تقوم بإيقاف العمل عندما يقوم المستعمل بتغيير الصفحة، بالإضافة لعدم إستهلاك قدرة الحاسب الخاص بالجهاز و عمر البطارية.</p>
-
-		<h2>تحريك المكعب</h2>
-
-		<p>إن قمت بإضافة الشفرات السابقه للملف الخاص بك، من الأرجح أنك ترى الأن مكعبا أخضر اللون. لنقم بجعله أكثر جذابية من خلال تدويره.</p>
-
-		<p>قم بإضافة الشفرة التالية فوق السطر الذي يحتوي أمر `renderer.render` في الوظيفة `animate`:</p>
-
-		<code>
-		cube.rotation.x += 0.01;
-		cube.rotation.y += 0.01;
-		</code>
-
-		<p>هذه الأوامر سيتم تشغيلها في كل  (اطار - frame,ما يعني 60 مرة في الثانية تقريبا).و بذلك ستمكن المكعب من الدوران. في الأساس، أي شيء تريد تحريكه أو تغيره خلال فترة عمل التطبيق يستوجب أن تكون الأوامر الخاصة بذلك قد تم تشغيلها داخل حلقة الحركات. يمكنك بالتأكيد مناداة وظائف أخرى، لكي لا ينتهي بك المطاف بوظيفة واحدة تحتوي على مئات السطور.</p>
-
-		<h2>النتيجة</h2>
-		
-		<p>تهانينا! لقد قمت بإكمال أول تطبيق three.js لك. الأمر ليس معقدا، يجب عليك فقد البدأ من مكان ما.</p>
-
-		<p>الشفرة البرمجية الكاملة في الأسفل إلى جانب محرر مباشر [link:https://jsfiddle.net/0c1oqf38/ live example]. العب بالأوامر البرمجية لتكون صورة افضل عن كيفية عملها.</p>
-
-		<p class="RtlTitle"><i>index.html —</i></p>
-
-		<code>
-		&lt;!DOCTYPE html&gt;
-		&lt;html lang="en"&gt;
-			&lt;head&gt;
-				&lt;meta charset="utf-8"&gt;
-				&lt;title&gt;My first three.js app&lt;/title&gt;
-				&lt;style&gt;
-					body { margin: 0; }
-				&lt;/style&gt;
-			&lt;/head&gt;
-			&lt;body&gt;
-				&lt;script type="module" src="/main.js"&gt;&lt;/script&gt;
-			&lt;/body&gt;
-		&lt;/html&gt;
-		</code>
-
-		<p class="RtlTitle"><i>main.js —</i></p>
-
-		<code>
-		import * as THREE from 'three';
-
-		const scene = new THREE.Scene();
-		const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
-
-		const renderer = new THREE.WebGLRenderer();
-		renderer.setSize( window.innerWidth, window.innerHeight );
-		document.body.appendChild( renderer.domElement );
-
-		const geometry = new THREE.BoxGeometry( 1, 1, 1 );
-		const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
-		const cube = new THREE.Mesh( geometry, material );
-		scene.add( cube );
-
-		camera.position.z = 5;
-
-		function animate() {
-			requestAnimationFrame( animate );
-
-			cube.rotation.x += 0.01;
-			cube.rotation.y += 0.01;
-
-			renderer.render( scene, camera );
-		}
-
-		animate();
-		</code>
-	</body>
-</html>

docs/manual/ar/introduction/Creating-text.html

@@ -1,110 +0,0 @@
-<!DOCTYPE html>
-<html lang="ar">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body class="rtl">
-		<h1>إنشاء نص ([name])</h1>
-		<div>
-			<p>
-				غالبًا ما تحتاج إلى استخدام نص في تطبيق three.js الخاص بك - إليك طريقتان يمكنك القيام بذلك.
-			</p>
-		</div>
-
-		<h2>1. DOM + CSS</h2>
-		<div>
-			<p>
-				يعد استخدام HTML بشكل عام أسهل وأسرع طريقة لإضافة نص. هذه هي الطريقة المستخدمة للتراكبات الوصفية في معظم الأمثلة الثلاثة.
-			</p>
-			<p>يمكنك إضافة محتوى إلى ملف</p>
-			<code>&lt;div id="info"&gt;Description&lt;/div&gt;</code>
-
-			<p>
-				وإستخدم ترميز CSS لوضع موضع مطلق (position absolutely) في موضع فوق كل المواقع الأخرى باستخدام z-index بالأخاص إذا كنت تقوم بتشغيل على كامل الشاشة three.js.
-			</p>
-
-			<code>
-#info {
-	position: absolute;
-	top: 10px;
-	width: 100%;
-	text-align: center;
-	z-index: 100;
-	display:block;
-}
-			</code>
-
-		</div>
-
-
-
-		<h2>2. ارسم نصًا على (canvas) واستخدمه كـ [page:Texture]</h2>
-		<div>
-			<p>استخدم هذه الطريقة إذا كنت ترغب في رسم نص بسهولة على سطح في مشهد three.js.</p>
-		</div>
-
-
-		<h2>3. قم بإنشاء نموذج في التطبيق ثلاثي الأبعاد المفضل لديك وقم بتصديره إلى three.js</h2>
-		<div>
-			<p>إستخدم هذه الطريقة إذا كنت تفضل العمل مع تطبيقاتك ثلاثية الأبعاد وإستيراد النماذج إلى three.js</p>
-		</div>
-
-
-
-		<h2>4. هندسة النص الإجرائي (Procedural Text Geometry)</h2>
-		<div>
-			<p>
-				إذا كنت تفضل العمل فقط في THREE.js أو إنشاء أشكال هندسية إجرائية وديناميكية للنص ثلاثي الأبعاد ، فيمكنك إنشاء شبكة تعتبر هندستها مثيلًا لـ THREE.TextGeometry:
-			</p>
-			<p>
-				<code>new THREE.TextGeometry( text, parameters );</code>
-			</p>
-			<p>
-				لكي يعمل هذا، ستحتاج Text Geometry إلى نموذج من THREE.Font لتعيينه لجعله إعداد "الخط" الخاصة به.
-
-				راجع صفحة [page:TextGeometry] للحصول على مزيد من المعلومات حول كيفية القيام بذلك ، و وصف كل الخيارات المتاحة ، وقائمة بخطوط JSON التي تأتي مع توزيع THREE.js نفسه.
-			</p>
-
-			<h3>أمثلة</h3>
-
-			<p>
-				[example:webgl_geometry_text WebGL / geometry / text]<br />
-				[example:webgl_shadowmap WebGL / shadowmap]
-			</p>
-
-			<p>
-				إذا كان Typeface معطلاً ، أو كنت تريد استخدام خط غير موجود ، فهناك برنامج تعليمي مع برنامج نصي بايثون لـ bender يسمح لك بتصدير النص إلى Three.js بتنسيق JSON:
-				<br/>
-				[link:http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html]
-			</p>
-
-		</div>
-
-
-
-		<h2>5. خطوط نقطية (Bitmap Fonts)</h2>
-		<div>
-			<p>
-				تسمح BMFonts (الخطوط النقطية) بدمج الصور الرمزية في BufferGeometry واحد. يدعم عرض BMFont التفاف الكلمات ، وتباعد الأحرف ، وتقنين الأحرف ، وحقول المسافة الموقعة مع المشتقات القياسية ، وحقول المسافة الموقعة متعددة القنوات ، والخطوط متعددة الأنسجة ، والمزيد.
-				انظر [link:https://github.com/felixmariotto/three-mesh-ui three-mesh-ui] أو [link:https://github.com/Jam3/three-bmfont-text three-bmfont-text].
-			</p>
-			<p>
-				تتوفر الخطوط في مشاريع مثل [link:https://github.com/etiennepinchon/aframe-fonts A-Frame Fonts] ، أو يمكنك إنشاء خطوطك الخاصة من أي خط .TTF ، مع التحسين لتضمين الأحرف المطلوبة للمشروع.
-			</p>
-			<p>
-				بعض الأدوات المفيدة
-			</p>
-			<ul>
-				<li>[link:http://msdf-bmfont.donmccurdy.com/ msdf-bmfont-web] <i>(على شبكة الإنترنت)</i></li>
-				<li>[link:https://github.com/soimy/msdf-bmfont-xml msdf-bmfont-xml] <i>(سطر الأوامر)</i></li>
-				<li>[link:https://github.com/libgdx/libgdx/wiki/Hiero hiero] <i>(تطبيق سطح مكتب)</i></li>
-			</ul>
-		</div>
-
-
-
-	</body>
-</html>

docs/manual/ar/introduction/Drawing-lines.html

@@ -1,63 +0,0 @@
-<!DOCTYPE html>
-<html lang="ar">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body class="rtl">
-		<h1>رسم خطوط ([name])</h1>
-		<div>
-			<p>
-				لنفترض أنك تريد رسم خط أو دائرة ، وليس إطارًا سلكيًا [page:Mesh]. نحتاج أولاً إلى إعداد العارض [page:WebGLRenderer renderer] ، المسرح [page:Scene scene] والكاميرا (انظر صفحة إنشاء مشهد).
-			</p>
-
-			<p>هذا هو الكود الذي سنستخدمه:</p>
-			<code>
-const renderer = new THREE.WebGLRenderer();
-renderer.setSize( window.innerWidth, window.innerHeight );
-document.body.appendChild( renderer.domElement );
-
-const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
-camera.position.set( 0, 0, 100 );
-camera.lookAt( 0, 0, 0 );
-
-const scene = new THREE.Scene();
-			</code>
-			<p>الشيء التالي الذي سنفعله هو تحديد المادة. بالنسبة للخطوط ، يتعين علينا استخدام [page:LineBasicMaterial] أو [page:LineDashedMaterial].</p>
-			<code>
-//create a blue LineBasicMaterial
-const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
-			</code>
-
-			<p>
-				بعد إختيار المادة سنحتاج إلى الهندسة الخاصة بها التي تحتوي بعض القمم(vertices):
-			</p>
-
-			<code>
-const points = [];
-points.push( new THREE.Vector3( - 10, 0, 0 ) );
-points.push( new THREE.Vector3( 0, 10, 0 ) );
-points.push( new THREE.Vector3( 10, 0, 0 ) );
-
-const geometry = new THREE.BufferGeometry().setFromPoints( points );
-			</code>
-
-			<p>لاحظ أنه تم رسم الخطوط بين كل زوج متتالي من الرؤوس ، ولكن ليس بين الأول والأخير (الخط غير مغلق).</p>
-
-			<p>الآن بعد أن أصبح لدينا نقاط لخطين ومادة ، يمكننا تجميعها معًا لتشكيل خط.</p>
-			<code>
-const line = new THREE.Line( geometry, material );
-			</code>
-			<p>كل ما تبقى هو إضافته إلى المشهد و إستعمال أمر العرض [page:WebGLRenderer.render render].</p>
-
-			<code>
-scene.add( line );
-renderer.render( scene, camera );
-			</code>
-
-			<p>يجب أن ترى الآن سهمًا يشير إلى الأعلى ، مكون من خطين أزرقين.</p>
-		</div>
-	</body>
-</html>

docs/manual/ar/introduction/FAQ.html

@@ -1,61 +0,0 @@
-<!DOCTYPE html>
-<html lang="ar">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body class="rtl">
-		<h1>الأسئلة الشائعة ([name])</h1>
-
-		<h2>ما هو أفضل تنسيق النموذج ثلاثي الأبعاد الذي تدعمه المكتبة؟</h2>
-		<div>
-			<p>
-				التنسيق الموصى به لاستيراد المجسمات وتصديرها هو glTF (GL Transmission Format). نظرًا لأن glTF يركز على تسليم أصول وقت التشغيل ، فهو مضغوط للإرسال وسريع التحميل.
-			</p>
-			<p>
-				توفر three.js أدوات تحميل للعديد من التنسيقات الشائعة الأخرى مثل FBX أو Collada أو OBJ أيضًا. ومع ذلك ، يجب أن تحاول دائمًا إنشاء سير عمل قائم على glTF في مشاريعك. لمزيد من المعلومات ، انظر [link:#manual/introduction/Loading-3D-models loading 3D models].
-			</p>
-		</div>
-
-		<h2>لماذا توجد علامات meta viewport في الأمثلة؟</h2>
-		<div>
-				<code>&lt;meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"&gt;</code>
-
-				<p>تتحكم هذه العلامات في حجم منفذ العرض ومقياسه لمتصفحات الجوال (حيث يمكن عرض محتوى الصفحة بحجم مختلف عن إطار العرض المرئي).</p>
-
-				<p>[link:https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html Safari: Using the Viewport]</p>
-
-				<p>[link:https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag MDN: Using the viewport meta tag]</p>
-		</div>
-
-		<h2>كيف يمكن الحفاظ على مقياس المشهد عند تغيير الحجم؟</h2>
-		<p>
-			نريد أن تظهر جميع النماذج ، بغض النظر عن بعدها عن الكاميرا ، بالحجم نفسه ، حتى عندما يتم تغيير حجم النافذة.
-
-			المعادلة الأساسية لحل هذه المعادلة هي معادلة الارتفاع المرئي على مسافة معينة:
-
-			<code>
-visible_height = 2 * Math.tan( ( Math.PI / 180 ) * camera.fov / 2 ) * distance_from_camera;
-			</code>
-			إذا قمنا بزيادة ارتفاع النافذة بنسبة معينة ، فإن ما نريده هو زيادة الارتفاع المرئي في جميع المسافات بنفس النسبة المئوية.
-
-			لا يمكن القيام بذلك عن طريق تغيير موضع الكاميرا. بل ما يجب أن تفعله هو تغيير مجال رؤية الكاميرا.
-			[link:http://jsfiddle.net/Q4Jpu/ Example].
-		</p>
-
-		<h2>لماذا جزء من نموذجي غير مرئي؟</h2>
-		<p>
-			يمكن أن يكون هدا بسبب إعدام الوجه, فالأوجه التي تبني النموذج لها إتجاه معين من خلاله يتم تقرير ما يتم إضهار. و هده الظاهرة تقوم بإلغاء الوجه الخلفي في الحالات العادية.
-			لمعرفة ما إذا كانت هذه هي مشكلتك ، قم بتغيير جانب المادة إلى THREE.DoubleSide.
-
-			<code>material.side = THREE.DoubleSide</code>
-		</p>
-
-		<h2>لماذا يعيد three.js أحيانًا نتائج غريبة للإدخالات غير الصالحة؟</h2>
-		<p>
-			لأسباب الأداء، لا يقوم three.js بالتحقق من صحة الإدخالات في معظم الحالات. من مسؤولية تطبيقك التأكد من صحة جميع الإدخالات.
-		</p>
-	</body>
-</html>

docs/manual/ar/introduction/How-to-create-VR-content.html

@@ -1,76 +0,0 @@
-<!DOCTYPE html>
-<html lang="ar">
-
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-
-	<body class="rtl">
-		<h1>كيفية إنشاء محتوى VR</h1>
-
-		<p>
-			يقدم هذا الدليل لمحة موجزة عن المكونات الأساسية لتطبيق VR مخصص للويب بإستعمال three.js.
-		</p>
-
-		<h2>سير العمل</h2>
-
-		<p>
-			أولاً ، عليك ضم [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/webxr/VRButton.js VRButton.js] في مشروعك.
-		</p>
-
-		<code>
-import { VRButton } from 'three/addons/webxr/VRButton.js';
-		</code>
-
-		<p>
-			*VRButton.createButton()* يقوم بأمرين مهمين: أولا يقوم بإنشاء زر يشير إلى توافق الواقع الافتراضي. إلى جانب ذلك ، يبدأ جلسة VR إذا قام المستخدم بتنشيط الزر. كل ما عليك فعله هو إضافة السطر التالي من التعليمات البرمجية إلى تطبيقك.
-		</p>
-
-		<code>
-document.body.appendChild( VRButton.createButton( renderer ) );
-		</code>
-
-		<p>
-			بعد ذلك ، عليك توجيه نموذج *WebGLRenderer* لتمكين عرض XR.
-		</p>
-
-		<code>
-renderer.xr.enabled = true;
-		</code>
-
-		<p>
-			أخيرًا ، يجب عليك ضبط حلقة الرسوم المتحركة لأننا لا نستطيع استخدام وظيفة *window.requestAnimationFrame()* المعروفة لدينا. بالنسبة لمشاريع الواقع الافتراضي ، نستخدم [page:WebGLRenderer.setAnimationLoop setAnimationLoop].
-			يبدو الحد الأدنى من الكود كما يلي:
-		</p>
-
-		<code>
-renderer.setAnimationLoop( function () {
-
-	renderer.render( scene, camera );
-
-} );
-		</code>
-
-		<h2>الخطوات التالية</h2>
-
-		<p>
-			ألق نظرة على أحد أمثلة WebVR الرسمية لرؤية سير العمل.<br /><br />
-
-			[example:webxr_xr_ballshooter WebXR / XR / ballshooter]<br />
-			[example:webxr_xr_cubes WebXR / XR / cubes]<br />
-			[example:webxr_xr_dragging WebXR / XR / dragging]<br />
-			[example:webxr_xr_paint WebXR / XR / paint]<br />
-			[example:webxr_xr_sculpt WebXR / XR / sculpt]<br />
-			[example:webxr_vr_panorama_depth WebXR / VR / panorama_depth]<br />
-			[example:webxr_vr_panorama WebXR / VR / panorama]<br />
-			[example:webxr_vr_rollercoaster WebXR / VR / rollercoaster]<br />
-			[example:webxr_vr_sandbox WebXR / VR / sandbox]<br />
-			[example:webxr_vr_video WebXR / VR / video]
-		</p>
-
-	</body>
-
-</html>

docs/manual/ar/introduction/How-to-dispose-of-objects.html

@@ -1,104 +0,0 @@
-<!DOCTYPE html>
-<html lang="ar">
-
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-
-	<body class="rtl">
-		<h1>كيفية التخلص من الأشياء</h1>
-
-		<p>
-			أحد الجوانب المهمة لتحسين الأداء وتجنب تسرب الذاكرة في تطبيقك هو التخلص من كيانات المكتبة غير المستخدمة. عندما تقوم بإنشاء مثيل من النوع * three.js * ، فإنك تخصص قدرًا معينًا من الذاكرة.
-			ومع ذلك ، يُنشئ * three.js * كائنات محددة مثل الأشكال الهندسية أو المواد ، كيانات ذات صلة بـ WebGL مثل المخازن المؤقتة أو برامج التظليل الضرورية للعرض. من المهم إبراز أن هذه الكائنات لا يتم تحريرها تلقائيًا ، وبدلاً من ذلك ، يجب أن يستخدم التطبيق واجهة برمجة تطبيقات خاصة لتحرير هذه الموارد. يقدم هذا الدليل نظرة عامة موجزة حول كيفية استخدام واجهة برمجة التطبيقات هذه وما هي الكائنات ذات الصلة في هذا السياق.
-		</p>
-
-		<h2>الهندسة (Geometries)</h2>
-
-		<p>
-			تمثل الهندسة عادةً معلومات قمة الرأس تُعرَّف على أنها مجموعة من السمات. تنشئ * three.js * داخليًا كائنًا من النوع [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLBuffer WebGLBuffer] لكل سمة. يتم حذف هذه الكيانات فقط إذا اتصلت بـ [page:BufferGeometry.dispose](). إذا أصبحت الهندسة قديمة في التطبيق الخاص بك ، فقم بتنفيذ الطريقة لتحرير جميع الموارد ذات الصلة.
-		</p>
-
-		<h2>المواد (Materials)</h2>
-
-		<p>
-			تحدد المادة كيفية تجسيد الكائنات. يستخدم * three.js * معلومات تعريف المادة لإنشاء برنامج تظليل للعرض.
-	لا يمكن حذف برامج Shader إلا إذا تم التخلص من المواد المعنية. لأسباب تتعلق بالأداء ، يحاول * three.js * إعادة استخدام القائمة برامج تظليل إن أمكن. لذلك يتم حذف برنامج shader فقط إذا تم التخلص من جميع المواد ذات الصلة. يمكنك الإشارة إلى التخلص من مادة عن طريق تنفيذ [page:Material.dispose] ().
-		</p>
-
-		<h2>الأنسجة (Textures)</h2>
-
-		<p>
-			التخلص من المواد ليس له أي تأثير على القوام. يتم التعامل معها بشكل منفصل حيث يمكن استخدام نسيج واحد بواسطة مواد متعددة في نفس الوقت.
-			عندما تقوم بإنشاء مثيل [page:Texture] ، فإن three.js داخليًا تنشئ مثيلًا من [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture WebGLTexture].
-			على غرار المخازن المؤقتة ، لا يمكن حذف هذا الكائن إلا عن طريق استدعاء [page:Texture.dispose]().
-		</p>
-
-		<p>
-			If you use an *ImageBitmap* as the texture's data source, you have to call [link:https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap/close ImageBitmap.close]() at the application level to dispose of all CPU-side resources.
-			An automated call of *ImageBitmap.close()* in [page:Texture.dispose]() is not possible, since the image bitmap becomes unusable, and the engine has no way of knowing if the image bitmap is used elsewhere.
-		</p>
-
-		<h2>أهداف العرض</h2>
-
-		<p>
-			لا تقوم الكائنات من النوع [page:WebGLRenderTarget] فقط بتخصيص مثيل لـ [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture WebGLTexture] ولكن أيضًا [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLFramebuffer WebGLFramebuffer]s و [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderbuffer WebGLRenderbuffer]s لتحقيق وجهات العرض المخصصة. لا يتم تخصيص هذه الكائنات إلا بتنفيذ [page:WebGLRenderTarget.dispose]().
-		</p>
-
-		<h2>متفرقات (Miscellaneous)</h2>
-
-		<p>
-			هناك فئات أخرى من دليل الأمثلة مثل الضوابط أو ممرات المعالجة اللاحقة التي توفر طرق * dispose () * من أجل إزالة مستمعي الأحداث الداخلية أو تقديم الأهداف. بشكل عام ، يوصى بالتحقق من واجهة برمجة التطبيقات أو وثائق الفصل الدراسي ومراقبة * dispose () *. إذا كان موجودًا ، يجب استخدامه عند تنظيف الأشياء.
-		</p>
-
-		<h2>الأسئلة الشائعة (FAQ)</h2>
-
-		<h3>لماذا لا يمكن لـ * three.js * التخلص من الكائنات تلقائيًا؟</h3>
-
-		<p>
-			تم طرح هذا السؤال عدة مرات من قبل المجتمع ، لذا من المهم توضيح هذا الأمر. الحقيقة هي أن * three.js * لا تعرف عمر أو نطاق الكيانات التي أنشأها المستخدم مثل الأشكال الهندسية أو المواد. هذه هي مسؤولية التطبيق. على سبيل المثال ، حتى إذا لم يتم استخدام مادة حاليًا للعرض ، فقد تكون ضرورية للإطار التالي. لذلك إذا قرر التطبيق أنه يمكن حذف كائن معين ، فيجب عليه إخبار المحرك عن طريق استدعاء طريقة *dispose()* المعنية.
-		</p>
-
-		<h3>هل تؤدي إزالة الشبكة من المشهد إلى التخلص من هندستها ومادتها أيضًا؟</h3>
-
-		<p>
-			لا ، يجب عليك التخلص صراحة من الهندسة والمواد عبر *dispose()*. ضع في اعتبارك أنه يمكن مشاركة الأشكال الهندسية والمواد بين الكائنات ثلاثية الأبعاد مثل الشبكات.
-		</p>
-
-		<h3>هل توفر * three.js * معلومات حول كمية العناصر المخزنة مؤقتًا؟</h3>
-
-		<p>
-			نعم. من الممكن تقييم [page:WebGLRenderer.info] ، وهي خاصية خاصة للعارض مع سلسلة من المعلومات الإحصائية حول ذاكرة لوحة الرسومات وعملية العرض. من بين أشياء أخرى ، تخبرك أن لديك العديد من القوام والهندسة وبرامج التظليل مخزنة داخليًا. إذا لاحظت وجود مشاكل في الأداء في التطبيق الخاص بك ، فمن الأفضل تصحيح هذه الخاصية من أجل التعرف بسهولة على تسرب الذاكرة.
-		</p>
-
-		<h3>ماذا يحدث عندما تستدعي * dispose () * على نسيج لكن الصورة لم يتم تحميلها بعد؟</h3>
-
-		<p>
-			يتم تخصيص الموارد الداخلية للنسيج فقط إذا تم تحميل الصورة بالكامل. إذا تخلصت من نسيج قبل تحميل الصورة ، فلن يحدث شيء. لم يتم تخصيص أي موارد لذلك ليست هناك حاجة للتنظيف.
-		</p>
-
-		<h3>ماذا يحدث عندما تستدعي * dispose () * ثم أستخدم النموذج المعني في وقت لاحق؟</h3>
-
-		<p>
-			سيتم إنشاء الموارد الداخلية المحذوفة مرة أخرى بواسطة المحرك. لذلك لن يحدث أي خطأ في وقت التشغيل ولكن قد تلاحظ تأثيرًا سلبيًا على الأداء للإطار الحالي ، خاصةً عندما يتعين تجميع برامج shader.
-		</p>
-
-		<h3>كيف يمكنني إدارة كائنات * three.js * في تطبيقي؟ متى أعرف كيف أتخلص من الأشياء؟</h3>
-
-		<p>
-			بشكل عام ، لا توجد توصية محددة لهذا الغرض. يعتمد الأمر بشكل كبير على حالة الاستخدام المحددة عندما يكون الاتصال بالرقم *dispose()* مناسبًا. من المهم إبراز أنه ليس من الضروري دائمًا التخلص من الأشياء طوال الوقت. وخير مثال على ذلك هو اللعبة التي تتكون من مستويات متعددة. مكان جيد للتخلص من الأشياء عند تبديل المستوى. يمكن للتطبيق اجتياز المشهد القديم والتخلص من جميع المواد والأشكال الهندسية والقوام المتقادمة. كما هو مذكور في القسم السابق ، لا ينتج عنه خطأ في وقت التشغيل إذا تخلصت من كائن لا يزال قيد الاستخدام بالفعل. أسوأ شيء يمكن أن يحدث هو انخفاض الأداء لإطار واحد.
-		</p>
-
-		<h2>أمثلة توضح استخدام dispose()</h2>
-
-		<p>
-			[example:webgl_test_memory WebGL / test / memory]<br />
-			[example:webgl_test_memory2 WebGL / test / memory2]<br />
-		</p>
-
-	</body>
-
-</html>

docs/manual/ar/introduction/How-to-update-things.html

@@ -1,223 +0,0 @@
-<!DOCTYPE html>
-<html lang="ar">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body class="rtl">
-		<h1>كيفية تحديث الأشياء</h1>
-		<div>
-			<p>تقوم كل الكائنات بشكل ألي بتحديث حالتها تلقائيًا إذا تمت إضافتها إلى المشهد باستخدام</p>
-			<code>
-			const object = new THREE.Object3D();
-			scene.add( object );
-			</code>
-			<p>أو إذا كانوا أبناء كائن آخر تمت إضافته إلى المشهد:</p>
-			<code>
-			const object1 = new THREE.Object3D();
-			const object2 = new THREE.Object3D();
-
-			object1.add( object2 );
-			scene.add( object1 ); //object1 and object2 will automatically update their matrices
-			</code>
-		</div>
-
-		<p>ومع ذلك ، إذا كنت تعلم أن الكائن سيكون ثابتًا ، فيمكنك تعطيل هذا وتحديث وضيفة التحديث يدويًا عند الحاجة فقط.</p>
-
-		<code>
-		object.matrixAutoUpdate = false;
-		object.updateMatrix();
-		</code>
-
-		<h2>BufferGeometry</h2>
-		<div>
-			<p>
-				يخزن BufferGeometries المعلومات (مثل مواضع الرأس ومؤشرات الوجه والعلامات والألوان وUVs وأي سمات مخصصة) في [page:BufferAttribute buffers] - أي ،
-				[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays typed arrays].
-				هذا يجعلها بشكل عام أسرع من الهندسة الأساسية (standard geometry) ، بحساب تكلفة العمل بها إلى حد ما.
-			</p>
-			<p>
-				فيما يتعلق بتحديث BufferGeometries ، فإن أهم شيء يجب فهمه هو أنه لا يمكنك تغيير حجم المخازن المؤقتة (هذا مكلف للغاية ، ويعادل بشكل أساسي إنشاء هندسة جديدة). ومع ذلك يمكنك تحديث محتوى المخازن المؤقتة.
-			</p>
-			<p>
-				هذا يعني أنك إذا كنت تعرف أن إحدى سمات BufferGeometry ستنمو ، لنقل عدد الرؤوس ، فيجب عليك تخصيص مخزن مؤقت كبير بما يكفي لاحتواء أي رؤوس جديدة قد يتم إنشاؤها. بالطبع ، هذا يعني أيضًا أنه سيكون هناك حد أقصى لحجم BufferGeometry - لا توجد طريقة لإنشاء BufferGeometry يمكن تمديده حجم غير محدود.
-			</p>
-			<p>
-				سنستخدم مثال السطر الذي سيتم تمديده في وقت العرض. سنخصص مساحة في المخزن المؤقت لـ 500 رأس لكننا نرسم اثنين فقط في البداية ، باستخدام [page:BufferGeometry.drawRange].
-			</p>
-			<code>
-			const MAX_POINTS = 500;
-
-			// geometry
-			const geometry = new THREE.BufferGeometry();
-
-			// attributes
-			const positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
-			geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
-
-			// draw range
-			const drawCount = 2; // draw the first 2 points, only
-			geometry.setDrawRange( 0, drawCount );
-
-			// material
-			const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
-
-			// line
-			const line = new THREE.Line( geometry, material );
-			scene.add( line );
-			</code>
-		 	<p>
-				بعد ذلك سنضيف نقاطًا بشكل عشوائي إلى الخط باستخدام نمط مثل:
-			</p>
-			<code>
-			const positionAttribute = line.geometry.getAttribute( 'position' );
-
-			let x = 0, y = 0, z = 0;
-
-			for ( let i = 0; i < positionAttribute.count; i ++ ) {
-
-				positionAttribute.setXYZ( i, x, y, z );
-
-				x += ( Math.random() - 0.5 ) * 30;
-				y += ( Math.random() - 0.5 ) * 30;
-				z += ( Math.random() - 0.5 ) * 30;
-
-			}
-			</code>
-			
-			<p>
-				إذا كنت تريد تغيير <em>عدد النقاط</em> التي تم إظهارها بعد العرض الأول ، فقم بما يلي:
-			</p>
-
-			<code>
-			line.geometry.setDrawRange( 0, newValue );
-			</code>
-			
-			<p>
-				إذا كنت تريد تغيير قيم بيانات الموضع بعد العرض الأول ، فأنت بحاجة إلى تعيين علامة needsUpdate على النحو التالي:
-			</p>
-			
-			<code>
-			positionAttribute.needsUpdate = true; // required after the first render
-			</code>
-
-			<p>
-				إذا قمت بتغيير قيم بيانات الموقع بعد التصيير الأولي ، فقد تحتاج إلى استدعاء `` .computeBoundingSphere () 'لإعادة حساب المجال المحيط للهندسة.
-			</p>
-			
-			<code>
-			line.geometry.computeBoundingSphere();
-			</code>
-
-			<p>
-				هنا مثال يعرض خطًا متحركًا يمكن تكييفه مع حالة الاستخدام الخاصة بك.
-				[link:https://jsfiddle.net/t4m85pLr/1/ Here is a fiddle]
-			</p>
-
-			<h3>أمثلة</h3>
-
-			<p>
-				[example:webgl_custom_attributes WebGL / custom / attributes]<br />
-				[example:webgl_buffergeometry_custom_attributes_particles WebGL / buffergeometry / custom / attributes / particles]
-			</p>
-
-		</div>
-
-		<h2>المواد (Materials)</h2>
-		<div>
-			<p>يمكن تغيير جميع قيم الزي الرسمي بحرية (على سبيل المثال ، الألوان ، والأنسجة ، والعتامة ، وما إلى ذلك) ، ويتم إرسال القيم إلى الشادر (shader) في كل إطار.</p>
-
-			<p>يمكن أيضًا تغيير المعلمات ذات الصلة بـ GLstate في أي وقت (depthTest, blending, polygonOffset, etc).</p>
-
-			<p>لا يمكن تغيير الخصائص التالية بسهولة في وقت التشغيل (بمجرد تقديم المادة مرة واحدة على الأقل):</p>
-			<ul>
-				<li>numbers and types of uniforms</li>
-				<li>presence or not of
-					<ul>
-						<li>texture</li>
-						<li>fog</li>
-						<li>vertex colors</li>
-						<li>morphing</li>
-						<li>shadow map</li>
-						<li>alpha test</li>
-						<li>transparent</li>
-					</ul>
-				</li>
-			</ul>
-
-			<p>تتطلب التغييرات في هذه بناء برنامج شادر (shader) جديد. سوف تحتاج إلى ضبط</p>
-			
-			<code>material.needsUpdate = true</code>
-
-			<p>ضع في اعتبارك أن هذا قد يكون بطيئًا للغاية ويؤدي إلى اهتزاز في معدل الإطارات (خاصة على Windows ، حيث أن التحويل البرمجي للشادر (shader) يكون أبطأ في DirectX منه في OpenGL).</p>
-
-			<p>للحصول على تجربة أكثر سلاسة ، يمكنك محاكاة التغييرات في هذه الميزات إلى حد ما من خلال الحصول على قيم "وهمية" مثل الأضواء صفر الكثافة أو الزخارف البيضاء أو الضباب الصفري.</p>
-
-			<p>يمكنك تغيير المواد المستخدمة في القطع الهندسية بحرية ، ولكن لا يمكنك تغيير كيفية تقسيم الكائن إلى أجزاء (وفقًا لمواد الوجه). </p>
-
-			<h3>إذا كنت بحاجة إلى تكوينات مختلفة من المواد أثناء وقت التشغيل:</h3>
-			
-			<p>إذا كان عدد المواد / القطع الصغيرًة ، فيمكنك تقسيم الجسم مسبقًا (مثل الشعر / الوجه / الجسم / الملابس العلوية / السراويل للإنسان ، أمامي / جوانب / الجزء العلوي / الزجاج / الإطار / الجزء الداخلي للسيارة). </p>
-
-			<p>إذا كان الرقم كبيرًا (على سبيل المثال ، من المحتمل أن يكون كل وجه مختلفًا) ، ففكر في حل مختلف ، مثل استخدام السمات / القوام للحصول على مظهر مختلف لكل وجه.</p>
-
-			<h3>أمثلة</h3>
-			
-			<p>
-				[example:webgl_materials_car WebGL / materials / car]<br />
-				[example:webgl_postprocessing_dof WebGL / webgl_postprocessing / dof]
-			</p>
-		</div>
-
-
-		<h2>النسيج (Textures)</h2>
-		<div>
-			<p>يجب أن يتم تعيين العلامات التالية في الصورة ، canvas والفيديو والبيانات إذا تم تغييرها:</p>
-			
-			<code>
-			texture.needsUpdate = true;
-			</code>
-			
-			<p>العرض يستهدف التحديث تلقائيا.</p>
-
-			<h3>أمثلة</h3>
-			<p>
-				[example:webgl_materials_video WebGL / materials / video]<br />
-				[example:webgl_rtt WebGL / rtt]
-			</p>
-
-		</div>
-
-
-		<h2>الكاميرات (Cameras)</h2>
-		<div>
-			<p>يتم تحديث موضع الكاميرا وهدفها تلقائيًا. إذا كنت بحاجة إلى التغيير</p>
-			
-			<ul>
-				<li>
-					fov
-				</li>
-				<li>
-					aspect
-				</li>
-				<li>
-					near
-				</li>
-				<li>
-					far
-				</li>
-			</ul>
-			
-			<p>
-				ثم ستحتاج إلى إعادة حساب مصفوفة الإسقاط(the projection matrix):
-			</p>
-			
-			<code>
-			camera.aspect = window.innerWidth / window.innerHeight;
-			camera.updateProjectionMatrix();
-			</code>
-		</div>
-	</body>
-</html>

docs/manual/ar/introduction/How-to-use-post-processing.html

@@ -1,97 +0,0 @@
-<!DOCTYPE html>
-<html lang="ar">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body class="rtl">
-		<h1>كيفية استخدام المعالجة اللاحقة<br/> (post-processing)</h1>
-
-		<p>
-			تعرض العديد من تطبيقات three.js كائناتها ثلاثية الأبعاد مباشرة على الشاشة. ومع ذلك ، في بعض الأحيان ، تريد تطبيق واحد أو أكثر من التأثيرات الرسومية مثل Depth-Of-Field أو Bloom أو Film Grain أو أنواع مختلفة من Anti-aliasing. المعالجة اللاحقة هي طريقة مستخدمة على نطاق واسع لتنفيذ مثل هذه التأثيرات. أولاً ، يتم تحويل المشهد إلى هدف عرض يمثل مخزنًا مؤقتًا في ذاكرة بطاقة الفيديو.
-			في الخطوة التالية ، تقوم واحدة أو أكثر من ممرات ما بعد المعالجة بتطبيق المرشحات والتأثيرات على المخزن المؤقت للصور قبل أن يتم عرضه في النهاية على الشاشة.
-		</p>
-		<p>
-			توفر three.js حلاً كاملاً لعملية المعالجة بتوفير [page:EffectComposer] الذي يتولى تنفيذ مثل هذه الأعمال.
-		</p>
-
-		<h2>سير العمل</h2>
-
-		<p>
-			الخطوة الأولى في العملية هي استيراد جميع الملفات الضرورية من دليل الأمثلة. يفترض الدليل أنك تستخدم الرقم الرسمي [link:https://www.npmjs.com/package/three npm package] من three.js. في العرض التوضيحي الأساسي في هذا الدليل ، نحتاج إلى الملفات التالية.
-		</p>
-
-		<code>
-		import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
-		import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
-		import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
-		</code>
-
-		<p>
-			بعد أن يتم استرداد جميع الملفات بنجاح ، يمكنك إنشاء الملحن الخاص بنا بتمرير نموذج من [page:WebGLRenderer].
-		</p>
-
-		<code>
-		const composer = new EffectComposer( renderer );
-		</code>
-
-		<p>
-			عند استخدام الملحن ، من الضروري تغيير حلقة الرسوم المتحركة للتطبيق. بدلاً من استدعاء طريقة العرض [page:WebGLRenderer] ، نستخدم الآن النظير الخاص بها [page:EffectComposer].
-		</p>
-
-		<code>
-		function animate() {
-
-			requestAnimationFrame( animate );
-
-			composer.render();
-
-		}
-		</code>
-
-		<p>
-			أصبح الملحن جاهزًا الآن ، لذا من الممكن تكوين سلسلة ممرات ما بعد المعالجة. هذه التمريرات مسؤولة عن إنشاء الإخراج المرئي النهائي للتطبيق. تتم معالجتها بترتيب الإضافة / الإدراج. في مثالنا ، تم تنفيذ *RenderPass* أولاً ثم *GlitchPass*. يتم عرض آخر تمرير تم تمكينه في السلسلة تلقائيًا على الشاشة. يبدو إعداد التصاريح كما يلي:
-		</p>
-
-		<code>
-		const renderPass = new RenderPass( scene, camera );
-		composer.addPass( renderPass );
-
-		const glitchPass = new GlitchPass();
-		composer.addPass( glitchPass );
-		</code>
-
-		<p>
-			يتم وضع *RenderPass* بشكل طبيعي في بداية السلسلة من أجل توفير المشهد الذي تم عرضه كمدخل لخطوة ما بعد المعالجة التالية. في حالتنا ، ستستخدم *GlitchPass* بيانات الصورة هذه لتطبيق تأثير خلل جامح. تحقق من هذا [link:https://threejs.org/examples/webgl_postprocessing_glitch live example] لتراها في العمل.
-		</p>
-
-		<h2>تصاريح مدمجة</h2>
-
-		<p>
-			يمكنك استخدام مجموعة واسعة من تصاريح ما بعد المعالجة التي يوفرها المحرك. يتم الاحتفاظ بها في الدليل [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing postprocessing].
-		</p>
-
-		<h2>تصاريح مخصصة</h2>
-
-		<p>
-			في بعض الأحيان تريد كتابة تظليل مخصص للمعالجة اللاحقة وإدراجه في سلسلة ممرات ما بعد المعالجة. في هذا السيناريو ، يمكنك استخدام *ShaderPass*. بعد استيراد الملف والتظليل المخصص الخاص بك ، يمكنك استخدام الكود التالي لإعداد المرور.
-		</p>
-
-		<code>
-		import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
-		import { LuminosityShader } from 'three/addons/shaders/LuminosityShader.js';
-
-		// later in your init routine
-
-		const luminosityPass = new ShaderPass( LuminosityShader );
-		composer.addPass( luminosityPass );
-		</code>
-
-		<p>
-			يوفر المستودع ملفًا يسمى [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/shaders/CopyShader.js CopyShader] وهو رمز بداية جيد للتظليل المخصص الخاص بك. *CopyShader* فقط ينسخ محتويات الصورة من مخزن قراءة [page:EffectComposer] إلى مخزن الكتابة المؤقت الخاص به دون تطبيق أي تأثيرات.
-		</p>
-
-	</body>
-</html>

docs/manual/ar/introduction/Installation.html

@@ -1,183 +0,0 @@
-<!DOCTYPE html>
-<html lang="ar">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body class="rtl">
-		<h1>التثبيت ([name])</h1>
-
-		<p>
-			يمكنك تنصيب three.js بإستعمال [link:https://www.npmjs.com/ npm] و وسائل البناء الحديثة، أو قم بالبدأ فقط
-        	بإستعمال إصدار ثابت متوفر عبر خدمة CDN.
-        	بالنسبة لأغلب المستخدمين تنصيب المكتبة بإستعمال npm هو الخيار الأفضل.
-		</p>
-
-		<p>
-			بغض النظر عن إختيارك، كن حريصا على أن تقوم بإستدعاء جميع الملفات التي تنتمي لنفس الإصدار. خلط ملفات من إصدارات
-			مختلفة قد ينتج منه بعض السلوكات الغير متوقعة.
-		</p>
-
-		<p>
-			جميع طرق تنصيب three.js بناءا على ES modules (شاهد
-			[link:https://eloquentjavascript.net/10_modules.html#h_hF2FmOVxw7 Eloquent JavaScript: ECMAScript Modules])،
-			التي تمكنك من إستدعاء أجزاء معينة من المكتبة دون الحاجة لإستدعاء المصدر كله.
-		</p>
-
-		<h2>التثبيت بإستعمال npm</h2>
-
-		<p>
-			لتنصيب وحدة (npm module) [link:https://www.npmjs.com/package/three three]، قم بفتح نافذة الأوامر في المجلد الخاص
-			بمشروعك و شغل الأمر التالي:
-		</p>
-
-		<code>
-		npm install three
-		</code>
-
-		<p>
-			سيتم تحميل الرزمة و تثبيتها. و من ثم تصبح مستعد لإستدعائها كالأتي:
-		</p>
-
-		<code>
-		// Option 1: Import the entire three.js core library.
-		import * as THREE from 'three';
-
-		const scene = new THREE.Scene();
-
-
-		// Option 2: Import just the parts you need.
-		import { Scene } from 'three';
-
-		const scene = new Scene();
-		</code>
-
-		<p>
-			خلال التنصيب بإستعمال npm، لقد قمت بشكل غير مباشر بإستعمال
-			[link:https://eloquentjavascript.net/10_modules.html#h_zWTXAU93DC bundling tool] لجمع كل الرزم التي يحتاجها
-			مشروعك في ملف JavaScript واحد.
-			بينما يمكن لأي جامع رزم حديث العمل مع three.js، يبقى الخيار الأكثر شيوعا هو
-			[link:https://webpack.js.org/ webpack].
-		</p>
-
-		<p>
-			لا يمكن الوصول لكل المزايا مباشرة من خلال رزمة <em>three</em> (بإستعمال bare import). بقية الأجزاء المستعملة
-			كثيرا من المكتبة مثل
-			الضوابط (controls)،
-			المحمل (loaders)، و آثار ما بعد المعالجة (post-processing effects)، يجب إستدعائهم من مجلد
-			[link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm]. لمعرفة المزيد، قم
-			بزيارة قسم
-			<em>الأمثلة</em>
-			بالأسفل.
-		</p>
-
-		<p>
-			لمعرفة المزيد عن وحدات npm.
-			قم بزيارة [link:https://eloquentjavascript.net/20_node.html#h_J6hW/SmL/a Eloquent JavaScript: Installing with npm].
-		</p>
-
-		<h2>التثبيت من CDN أو استضافة ثابتة</h2>
-
-		<p>
-			يمكن إستعمال مكتبة three.js دون الحاجة إلى نظام بناء، سواءا عبر تحميل الملفات إلى خادم الويب الخاص بك أو باستخدام CDN موجود. بسبب أن المكتبة تعتمد على وحدات ES (modules) يجب على أي شفرة برمجية تشير إليها أن تستخدام <em>type="module"</em> كما هو موضح أسفله:
-		</p>
-
-		<code>
-		&lt;script type="importmap">
-			{
-			"imports": {
-				"three": "https://cdn.jsdelivr.net/npm/three@&lt;version&gt;/build/three.module.js"
-			}
-			}
-		&lt;/script>
-
-		&lt;script type="module">
-
-			import * as THREE from 'three';
-
-			const scene = new THREE.Scene();
-
-		&lt;/script>
-		</code>
-
-		<h2>أمثلة</h2>
-
-		<p>
-			يركز جوهر three.js على أهم المكونات المكونة لمحرك ثلاثي الأبعاد.  العديد من المكونات المفيدة الأخرى - مثل الضوابط ، عناصر التحميل ، وتأثيرات ما بعد المعالجة - هي جزء من المجلد [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm]. .يشار إليها باسم "أمثلة" ، لأنه بينما يمكنك استخدامها ببساطة، من المفترض أيضًا إعادة دمجها وتخصيصها. هذه المكونات تضل متزامنة مع المكتبة الأساسية
-			بينما يتم الاحتفاظ بحزم الجهات الخارجية المماثلة على npm بواسطة أشخاص مختلفين وقد لا تكون محدثة.
-		</p>
-
-		<p>
-			لا يلزم تثبيت الأمثلة بشكل منفصل ، ولكن يجب استيرادها بشكل منفصل. إذا تم تثبيت three.js بواسطة npm ، يمكنك إستدعاء مكون OrbitControls كالأتي:
-		</p>
-
-		<code>
-		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-
-		const controls = new OrbitControls( camera, renderer.domElement );
-		</code>
-
-		<p>
-			إذا تم تثبيت three.js من CDN ، فمن المستحسن إستخدم نفس CDN لتثبيت المكونات الأخرى:
-		</p>
-
-		<code>
-		&lt;script type="importmap">
-			{
-			"imports": {
-				"three": "https://cdn.jsdelivr.net/npm/three@&lt;version&gt;/build/three.module.js",
-				"three/addons/": "https://cdn.jsdelivr.net/npm/three@&lt;version&gt;/examples/jsm/"
-			}
-			}
-		&lt;/script>
-
-		&lt;script type="module">
-
-			import * as THREE from 'three';
-			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-
-			const controls = new OrbitControls( camera, renderer.domElement );
-
-		&lt;/script>
-		</code>
-
-		<p>
-			من المهم أن تستخدم جميع الملفات نفس الإصدار. لا تستورد أمثلة مختلفة من إصدارات مختلفة، أو تستخدم أمثلة من إصدارات مختلفة عن مكتبة three.js نفسها.
-		</p>
-
-		<h2>التوافق</h2>
-
-		<h3>واردات CommonJS</h3>
-
-		<p>
-			في حين أن معظم حِزم JavaScript الحديثة تدعم الآن وحدات ES افتراضيًا ، فقد لا تدعم بعض أدوات البناء القديمة.
-			في مثل هذه الحالات بإستطاعتك تعديل المجمع لفهم وحدات ES: <br/>
-			[link:http://browserify.org/ Browserify] يحتاج فقط إلى إضافة [link:https://github.com/babel/babelify babelify] على سبيل المثال.
-		</p>
-
-		<h3>خرائط الإستيراد</h3>
-
-		<p>
-			تختلف المسارات المستوردة عند التثبيت من npm ، مقارنة بالتثبيت من استضافة ثابتة أو CDN. نحن ندرك أن هذه مشكلة مريحة لكلا مجموعتي المستخدمين.
-			يفضل المطورون الذين لديهم أدوات إنشاء وحزم محددات الحزم المجردة (على سبيل المثال "three") بدلاً من المسارات النسبية ، وتستخدم الملفات في المجلد <em>examples/</em> مراجع نسبية إلى <em> three.module.js </em > التي لا تتبع هذا التوقع.
-				أولئك الذين لا يستخدمون أدوات الإنشاء - للنماذج الأولية السريعة أو التعلم أو التفضيل الشخصي - قد يكرهون بالمثل تلك الواردات النسبية ، والتي تتطلب هياكل مجلدات معينة وتكون أقل تسامحًا من مساحة الاسم <em> THREE. * </em> العام.
-		</p>
-
-		<p>
-			نأمل في إزالة هذه المسارات النسبية عندما يصبح [link:https://github.com/WICG/import-maps import maps] متاحًا على نطاق واسع ، واستبدالها بمحددات الحزمة المجردة إلى اسم الحزمة npm ، 'three'. يتطابق هذا مع توقعات أداة الإنشاء لحزم npm بشكل وثيق ، ويسمح لمجموعتي المستخدمين بكتابة نفس الرمز تمامًا عند استيراد ملف. بالنسبة للمستخدمين الذين يفضلون تجنب أدوات الإنشاء ، يمكن أن يوجه تعيين JSON البسيط جميع الواردات إلى CDN أو مجلد ملف ثابت. من الناحية التجريبية ، يمكنك محاولة استخدام عمليات استيراد أبسط اليوم مع تعبئة خريطة الاستيراد ، كما هو موضح في [link:https://glitch.com/edit/#!/three-import-map?path=index.html import map example].
-		</p>
-
-		<h3>Node.js</h3>
-
-		<p>
-			لأن three.js مبني للويب ، فهو يعتمد على واجهات برمجة تطبيقات المتصفح و DOM التي لا توجد دائمًا في Node.js. يمكن حل بعض هذه المشاكل باستخدام shims مثل [link:https://github.com/stackgl/headless-gl headless-gl] ، أو باستبدال المكونات مثل [page:TextureLoader] ببدائل مخصصة. قد تكون واجهات برمجة تطبيقات DOM الأخرى متشابكة بشكل عميق مع الكود الذي يستخدمها ، وسيكون من الصعب التغلب عليها. نرحب بطلبات السحب البسيطة والقابلة للصيانة لتحسين دعم Node.js ، ولكن نوصي بفتح مشكلة لمناقشة تحسيناتك أولاً.
-		</p>
-
-		<p>
-			تأكد من إضافة `{ "type": "module" }` إلى `package.json` الخاص بك لتمكين وحدات ES6 في مشروع node الخاص بك.
-		</p>
-
-	</body>
-</html>

docs/manual/ar/introduction/Libraries-and-Plugins.html

@@ -1,115 +0,0 @@
-<!DOCTYPE html>
-<html lang="ar">
-	<head>
-		<meta charset="utf-8" />
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body class="rtl">
-		<h1>المكتبات والإضافات ([name])</h1>
-
-		<p class="desc">
-			هنا تُدرج المكتبات والإضافات المتوافقة التي تم تطويرها خارجيًا لمكتبة three.js. هذه القائمة والحزم المرتبطة بها تُدار بواسطة المجتمع ولا يمكن ضمان تحديثها دائمًا. إذا كنت ترغب في تحديث هذه القائمة، يُمكنك عمل PR!"
-		</p>
-
-		<h3 >الفيزياء(Physics)</h3>
-
-		<ul>
-			<li>[link:https://github.com/lo-th/Oimo.js/ Oimo.js]</li>
-			<li>[link:https://enable3d.io/ enable3d]</li>
-			<li>[link:https://github.com/kripken/ammo.js/ ammo.js]</li>
-			<li>[link:https://github.com/pmndrs/cannon-es cannon-es]</li>
-			<li>[link:https://rapier.rs/ rapier]</li>
-			<li>[link:https://github.com/jrouwe/JoltPhysics.js Jolt]</li>
-			
-		</ul>
-
-		<h3>المعالجة البعدية(Postprocessing)</h3>
-
-		<p>
-		"بالإضافة إلى [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing تأثيرات المعالجة البعدية الرسمية لمكتبة three.js],يتوفر دعم لبعض التأثيرات والأطُر الإضافية من خلال مكتبات خارجية."
-		</p>
-
-		<ul>
-			<li>[link:https://github.com/vanruesc/postprocessing postprocessing]</li>
-		</ul>
-
-		<h3>أداء التقاطع والاختبار بالأشعة (Intersection and Raycast Performance)</h3>
-
-		<ul>
-			<li>[link:https://github.com/gkjohnson/three-mesh-bvh three-mesh-bvh]</li>
-		</ul>
-
-		<h3>تتبع المسار (Path Tracing)</h3>
-		
-		<ul>
-			<li>[link:https://github.com/gkjohnson/three-gpu-pathtracer three-gpu-pathtracer]</li>
-		</ul>
-		
-		<h3>صيغ الملفات (File Formats)</h3>
-
-		<p>
-		بالإضافة إلى [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders محمّلات three.js الرسمية],يتوفر دعم لبعض الصيغ الإضافية من خلال مكتبات خارجية.
-		</p>
-
-		<ul>
-			<li>[link:https://github.com/gkjohnson/urdf-loaders/tree/master/javascript urdf-loader]</li>
-			<li>[link:https://github.com/NASA-AMMOS/3DTilesRendererJS 3d-tiles-renderer-js]</li>
-			<li>[link:https://github.com/kaisalmen/WWOBJLoader WebWorker OBJLoader]</li>
-			<li>[link:https://github.com/IFCjs/web-ifc-three IFC.js]</li>
-		</ul>
-
-		<h3>الشكليات (Geometry)</h3>
-
-		<ul>
-			<li>[link:https://github.com/spite/THREE.MeshLine THREE.MeshLine]</li>
-		</ul>
-
-		<h3>النص ثلاثي الأبعاد والتخطيط (3D Text and Layout)</h3>
-
-		<ul>
-			<li>[link:https://github.com/protectwise/troika/tree/master/packages/troika-three-text troika-three-text]</li>
-			<li>[link:https://github.com/felixmariotto/three-mesh-ui three-mesh-ui]</li>
-		</ul>
-
-		<h3>نظام الجسيمات (Particle Systems)</h3>
-
-		<ul>
-			<li>[link:https://github.com/Alchemist0823/three.quarks three.quarks]</li>
-			<li>[link:https://github.com/creativelifeform/three-nebula three-nebula]</li>
-		</ul>
-
-		<h3>الحركة العكسية الحركية (Inverse Kinematics)</h3>
-
-		<ul>
-			<li>[link:https://github.com/jsantell/THREE.IK THREE.IK]</li>
-			<li>[link:https://github.com/lo-th/fullik fullik]</li>
-			<li>[link:https://github.com/gkjohnson/closed-chain-ik-js closed-chain-ik]</li>
-		</ul>
-
-		<h3>ذكاء اللعبة الاصطناعي (Game AI)</h3>
-
-		<ul>
-			<li>[link:https://mugen87.github.io/yuka/ yuka]</li>
-			<li>[link:https://github.com/donmccurdy/three-pathfinding three-pathfinding]</li>
-			<li>[link:https://github.com/isaac-mason/recast-navigation-js recast-navigation-js]</li>
-		</ul>
-
-		<h3>الأغلفة والأطُر (Wrappers and Frameworks)</h3>
-
-		<ul>
-			<li>[link:https://aframe.io/ A-Frame]</li>
-			<li>[link:https://lume.io/ Lume] - HTML elements for 3D graphics built on Three.</li>
-			<li>[link:https://github.com/pmndrs/react-three-fiber react-three-fiber] - React components for 3D graphics built on Three.</li>
-			<li>[link:https://threepipe.org/ threepipe] - A versatile 3D viewer framework using three.js for rendering.</li>
-			<li>[link:https://github.com/ecsyjs/ecsy-three ECSY]</li>
-			<li>[link:https://threlte.xyz/ Threlte] - Svelte components for 3D graphics built on Three.</li>
-			<li>[link:https://needle.tools/ Needle Engine]</li>
-			<li>[link:https://tresjs.org/ tresjs] - Vue components for 3D graphics built on Three.</li>
-			<li>[link:https://giro3d.org Giro3D] - Versatile framework built on Three for visualizing and interacting with Geospatial 2D, 2.5D and 3D data.</li>			
-			<li>[link:https://zap.works/mattercraft/ Mattercraft] - Browser-based visual editor for AR, WebXR and 3D web content, built on three.js with real-time preview and physics engine.</li>
-		</ul>
-
-	</body>
-</html>

docs/manual/ar/introduction/Loading-3D-models.html

@@ -1,134 +0,0 @@
-<!DOCTYPE html>
-<html lang="ar">
-
-<head>
-	<meta charset="utf-8">
-	<base href="../../../" />
-	<script src="page.js"></script>
-	<link type="text/css" rel="stylesheet" href="page.css" />
-</head>
-
-<body class="rtl">
-	<h1>تحميل نماذج ثلاثية الأبعاد</h1>
-
-	<p>
-		تتوفر النماذج ثلاثية الأبعاد في مئات من تنسيقات الملفات ، ولكل منها أغراض مختلفة وميزات متنوعة وتعقيد متفاوت. برغم من أن
-		<a href="https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders" target="_blank" rel="noopener">
-		مكتبة three.js توفر العديد من عناصر التحميل</a>، فإن اختيار التنسيق المناسب وسير العمل سيوفر الوقت والإحباط لاحقًا. يصعب العمل مع بعض التنسيقات ، أو أنها غير فعالة في تجارب الوقت الفعلي ، أو ببساطة غير مدعومة بالكامل في هذا الوقت.
-	</p>
-
-	<p>
-		يوفر هذا الدليل سير عمل موصى به لمعظم المستخدمين ، واقتراحات لما يجب تجربته إذا لم تسير الأمور كما هو متوقع.
-	</p>
-
-	<h2>قبل أن نبدأ</h2>
-
-	<p>
-		إذا كنت جديدًا في تشغيل خادم محلي ، فابدأ بكيفية إدارة الأشياء محليًا [link:#manual/introduction/Installation installation] أولاً. يمكن تجنب العديد من الأخطاء الشائعة أثناء عرض النماذج ثلاثية الأبعاد عن طريق استضافة الملفات بشكل صحيح.
-	</p>
-
-	<h2>سير العمل الموصى به</h2>
-
-	<p>
-		حيثما أمكن ، نوصي باستخدام glTF (تنسيق نقل GL). كلا النسختين <small> .GLB </small> و <small> .GLTF </small> من التنسيق مدعومة بشكل جيد. نظرًا لأن glTF يركز على تسليم أصول وقت التشغيل ، فهو مضغوط للإرسال وسريع التحميل. تتضمن الميزات الشبكات والمواد والأنسجة والجلود والهياكل العظمية والأهداف المتحولة والرسوم المتحركة والأضواء والكاميرات.
-	</p>
-
-	<p>
-		تتوفر ملفات glTF عامة على مواقع مثل
-		<a href="https://sketchfab.com/models?features=downloadable&sort_by=-likeCount&type=models" target="_blank" rel="noopener">
-		Sketchfab</a>، أو أدوات متنوعة تتضمن تصدير glTF:
-	</p>
-
-	<ul>
-		<li><a href="https://github.com/KhronosGroup/glTF-Blender-IO" target="_blank" rel="noopener">glTF-Blender-IO</a> بواسطة مجموعة Khronos</li>
-		<li><a href="https://github.com/KhronosGroup/COLLADA2GLTF" target="_blank" rel="noopener">COLLADA2GLTF</a> بواسطة مجموعة Khronos</li>
-		<li><a href="https://github.com/facebookincubator/FBX2glTF" target="_blank" rel="noopener">FBX2GLTF</a> بواسطة Facebook</li>
-		<li><a href="https://github.com/AnalyticalGraphicsInc/obj2gltf" target="_blank" rel="noopener">OBJ2GLTF</a> بواسطة Analytical Graphics Inc</li>
-		<li><a href="https://www.allegorithmic.com/products/substance-painter" target="_blank" rel="noopener">Substance Painter</a> بواسطة Allegorithmic</li>
-		<li><a href="https://www.foundry.com/products/modo" target="_blank" rel="noopener">Modo</a> بواسطة Foundry</li>
-		<li><a href="https://www.marmoset.co/toolbag/" target="_blank" rel="noopener">Toolbag</a> بواسطة Marmoset</li>
-		<li><a href="https://www.sidefx.com/products/houdini/" target="_blank" rel="noopener">Houdini</a> بواسطة SideFX</li>
-		<li><a href="https://labs.maxon.net/?p=3360" target="_blank" rel="noopener">Cinema 4D</a> بواسطة MAXON</li>
-		<li>و <a href="https://github.com/khronosgroup/gltf#gltf-tools" target="_blank" rel="noopener">المزيد&hellip;</a></li>
-	</ul>
-
-	<p>
-		إذا كانت أدواتك المفضلة لا تدعم glTF ، ففكر في طلب تصدير glTF من المؤلفين ، أو النشر على
-		<a href="https://github.com/KhronosGroup/glTF/issues/1051" target="_blank" rel="noopener">the glTF roadmap thread</a>.
-	</p>
-
-	<p>
-		عندما لا يكون glTF خيارًا ، تتوفر أيضًا التنسيقات الشائعة مثل FBX أو OBJ أو COLLADA ويتم صيانتها بانتظام.
-	</p>
-
-	<h2>التحميل</h2>
-
-	<p>
-		يتم تضمين عدد قليل فقط من عناصر التحميل (على سبيل المثال [page:ObjectLoader]) بشكل ألي مع
-		three.js - يجب عليك إضافة الآخرين إلى تطبيقك بشكل فردي.
-	</p>
-
-	<code>
-		import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-	</code>
-
-	<p>
-		بمجرد قيامك باستيراد عنصر التحميل ، فأنت جاهز لإضافة نموذج إلى المشهد الخاص بك. يختلف بناء الجملة باختلاف عناصر التحميل - عند استخدام تنسيق آخر ، تحقق من الأمثلة والوثائق الخاصة بهذا المُحمل. بالنسبة إلى glTF ، سيكون الاستخدام مع البرامج النصية العامة:
-	</p>
-
-	<code>
-		const loader = new GLTFLoader();
-
-		loader.load( 'path/to/model.glb', function ( gltf ) {
-
-			scene.add( gltf.scene );
-
-		}, undefined, function ( error ) {
-
-			console.error( error );
-
-		} );
-	</code>
-
-	<p>
-		انظر [page:GLTFLoader GLTFLoader documentation] لمزيد من التفاصيل.
-	</p>
-
-	<h2>إستكشاف الأخطاء وإصلاحها</h2>
-
-	<p>
-		إن كنت قد أمضيت ساعات في تصميم تحفة فنية ، وقمت بتحميلها في صفحة الويب ، و- لا! 😭 إنه مشوه أو مفقود تمامًا. ابدأ بالخطوات التالية لاستكشاف الأخطاء وإصلاحها:
-	</p>
-
-	<ol>
-		<li>
-			تحقق من وحدة تحكم جافا سكريبت بحثًا عن أخطاء ، وتأكد من استخدام رد اتصال <em> onError </em> عند استدعاء <em> .load () </em> لتسجيل النتيجة.
-		</li>
-		<li>
-			اعرض النموذج في تطبيق آخر. بالنسبة إلى glTF ، تتوفر عارضات السحب والإفلات لـ
-			<a href="https://gltf-viewer.donmccurdy.com/" target="_blank" rel="noopener">three.js</a> و
-			<a href="https://sandbox.babylonjs.com/" target="_blank" rel="noopener">babylon.js</a>. إذا ظهر النموذج بشكل صحيح في تطبيق واحد أو أكثر ،
-			<a href="https://github.com/mrdoob/three.js/issues/new" target="_blank" rel="noopener">إرفع إعلان وجود خطأ ضد المكتبة</a>.
-			إذا تعذر عرض النموذج في أي تطبيق ، فإننا نشجع بشدة على تسجيل خطأ في التطبيق المستخدم لإنشاء النموذج.
-		</li>
-		<li>
-			حاول تكبير النموذج لأعلى أو لأسفل بعامل 1000. يتم قياس العديد من الأمثلة بشكل مختلف ، وقد لا تظهر الأمثلة الكبيرة إذا كانت الكاميرا داخل النموذج.
-		</li>
-		<li>
-			حاول إضافة مصدر ضوء وتحديد موضعه. قد يكون النموذج مخفيًا في الظلام.
-		</li>
-		<li>
-			ابحث عن طلبات النسيج الفاشلة في علامة تبويب الشبكة ، مثل <em>C:\\Path\To\Model\texture.jpg</em>. استخدم المسارات المتعلقة بنموذجك بدلاً من ذلك ، مثل <em> images/texture.jpg</em> - قد يتطلب ذلك تعديل ملف النموذج في محرر نصي.
-		</li>
-	</ol>
-
-	<h2>طلب المساعدة</h2>
-
-	<p>
-		إذا مررت بعملية استكشاف الأخطاء وإصلاحها أعلاه ولا يزال نموذجك لا يعمل ، فإن الطريقة الصحيحة لطلب المساعدة ستوصلك إلى حل بشكل أسرع. انشر سؤالاً على منتدى المكتبة
-		<a href="https://discourse.threejs.org/" target="_blank" rel="noopener">three.js forum</a> وحيثما أمكن ، قم بتضمين النموذج الخاص بك (أو نموذج أبسط بنفس المشكلة) بأي تنسيقات متوفرة لديك. قم بتضمين معلومات كافية لشخص آخر لإعادة إنتاج المشكلة بسرعة - من الناحية المثالية ، عرض توضيحي مباشر.
-	</p>
-
-</body>
-
-</html>

docs/manual/ar/introduction/Matrix-transformations.html

@@ -1,65 +0,0 @@
-<!DOCTYPE html>
-<html lang="ar">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body class="rtl">
-		<h1>تحولات المصفوفة ([name])</h1>
-
-		<p>
-			يستخدم *Three.js* المصفوفات لتشفير عمليات التحويل ثلاثية الأبعاد --- الترجمات (الموضع) والتدوير والقياس. يحتوي كل مثيل [page:Object3D] على [page:Object3D.matrix matrix] يخزن موضع هذا الكائن وتدويره ومقياسه. تصف هذه الصفحة كيفية تحديث تحول الكائن.
-		</p>
-
-		<h2>خصائص الراحة و *matrixAutoUpdate*</h2>
-
-		<p>
-			هناك طريقتان لتحديث تحول الكائن(object):
-		</p>
-		<ol>
-			<li>
-				عدّل خصائص *position* و *quaternion* و *scale* الخاصة بالكائن ، واسمح لـ three.js بإعادة حساب مصفوفة الكائن من هذه الخصائص:
-				<code>
-object.position.copy( start_position );
-object.quaternion.copy( quaternion );
-				</code>
-				بشكل افتراضي ، يتم تعيين الخاصية *matrixAutoUpdate* على "true" ، وستتم إعادة حساب المصفوفة تلقائيًا. إذا كان الكائن ثابتًا ، أو كنت ترغب في التحكم يدويًا عند حدوث إعادة الحساب ، فيمكن الحصول على أداء أفضل من خلال تعيين الخاصية false:
-				<code>
-object.matrixAutoUpdate = false;
-				</code>
-				وبعد تغيير أي خصائص ، قم بتحديث المصفوفة يدويًا:
-				<code>
-object.updateMatrix();
-				</code>
-			</li>
-			<li>
-				قم بتعديل مصفوفة الكائن مباشرة. تحتوي فئة [page:Matrix4] على طرق مختلفة لتعديل المصفوفة:
-				<code>
-object.matrix.setRotationFromQuaternion( quaternion );
-object.matrix.setPosition( start_position );
-object.matrixAutoUpdate = false;
-				</code>
-				لاحظ أنه <em>يجب</em> ضبط *matrixAutoUpdate* على *false* في هذه الحالة ، ويجب عليك التأكد من <em>عدم</em> استدعاء *updateMatrix*. سيؤدي استدعاء *updateMatrix* إلى إعاقة التغييرات اليدوية التي تم إجراؤها على المصفوفة ، وإعادة حساب المصفوفة من *position* ، *scale* ، وما إلى ذلك.
-			</li>
-		</ol>
-
-		<h2>مصفوفات وعالم الكائن</h2>
-		<p>
-		يخزن [page:Object3D.matrix matrix] كائن تحويل الكائن <em>بالنسبة</em> إلى [page:Object3D.parent parent] الكائن ؛ للحصول على تحول الكائن في إحداثيات <em>العالم</em> ، يجب عليك الوصول إلى [page:Object3D.matrixWorld] الكائن.
-		</p>
-		<p>
-		عندما تتغير حالة الكائن الأصل أو الكائن الفرعي ، يمكنك طلب تحديث [page:Object3D.matrixWorld matrixWorld] الكائن الفرعي عن طريق استدعاء [page:Object3D.updateMatrixWorld updateMatrixWorld]().
-		</p>
-
-		<h2>الدوران و Quaternion</h2>
-		<p>
-			يوفر Three.js طريقتين لتمثيل التدوير ثلاثي الأبعاد: [page:Euler Euler angles] و [page:Quaternion Quaternions] ، بالإضافة إلى طرق التحويل بين الاثنين. تخضع زوايا أويلر لمشكلة تسمى "gimballock" ، حيث يمكن أن تفقد بعض التكوينات درجة من الحرية (تمنع تدوير الكائن حول محور واحد). لهذا السبب ، يتم تخزين استدارة الكائن <em>دائمًا</em> في [page:Object3D.quaternion quaternion].
-		</p>
-		<p>
-			تضمنت الإصدارات السابقة من المكتبة خاصية *useQuaternion* والتي ، عند ضبطها على false ، ستؤدي إلى حساب [page:Object3D.matrix matrix] للكائن من زاوية أويلر. تم إيقاف هذه الممارسة - بدلاً من ذلك ، يجب عليك استخدام طريقة [page:Object3D.setRotationFromEuler setRotationFromEuler] ، والتي ستعمل على تحديث الرباعية.
-		</p>
-
-	</body>
-</html>

docs/manual/ar/introduction/Useful-links.html

@@ -1,164 +0,0 @@
-<!DOCTYPE html>
-<html lang="ar">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body class="rtl">
-		<h1>روابط مفيدة</h1>
-
-		<p class="desc">
-			فيما يلي مجموعة من الروابط التي قد تجدها مفيدة عند تعلم three.js.<br />
-			إذا وجدت شيئًا ما ترغب في إضافته هنا ، أو تعتقد أن أحد الروابط أدناه لم يعد مناسبًا أو يعمل ، فلا تتردد في النقر فوق الزر "تحرير" في الجزء السفلي الأيسر وإجراء بعض التغييرات!<br /><br />
-
-			لاحظ أيضًا أنه نظرًا لأن موقع three.js قيد التطوير السريع ، فإن الكثير من هذه الروابط سيحتوي على معلومات قديمة - إذا كان هناك شيء لا يعمل كما تتوقع أو كما يقول أحد هذه الروابط ، تحقق من وحدة تحكم المتصفح للتحذيرات أو الأخطاء. تحقق أيضًا من صفحات المستندات ذات الصلة.
-		</p>
-
-		<h2>منتديات المساعدة</h2>
-		<p>
-			يستخدم Three.js رسميًا [link:https://discourse.threejs.org/ forum] و [link:http://stackoverflow.com/tags/three.js/info Stack Overflow] لطلبات المساعدة. إذا كنت بحاجة إلى مساعدة في شيء ما ، فهذا هو المكان المناسب لك. لا تفتح مشكلة على Github لطلبات المساعدة.
-		</p>
-
-		<h2>الدروس والدورات</h2>
-
-		<h3>الشروع في العمل مع three.js</h3>
-		<ul>
-			<li>
-				[link:https://threejs.org/manual/#en/fundamentals Three.js Fundamentals starting lesson]
-			</li>
-			<li>
-				[link:https://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-1-the-scene Beginning with 3D WebGL] بواسطة [link:https://codepen.io/rachsmith/ Rachel Smith].
-			</li>
-			<li>
-				[link:https://www.august.com.au/blog/animating-scenes-with-webgl-three-js/ Animating scenes with WebGL and three.js]
-			</li>
-		</ul>
-
-		<h3>مقالات ودورات أكثر شمولاً / متقدمة</h3>
-		<ul>
-			<li>
-				[link:https://discoverthreejs.com/ Discover three.js]
-			</li>
-			<li>
-				[link:http://blog.cjgammon.com/ Collection of tutorials] by [link:http://www.cjgammon.com/ CJ Gammon].
-			</li>
-			<li>
-				[link:https://medium.com/soffritti.pierfrancesco/glossy-spheres-in-three-js-bfd2785d4857 Glossy spheres in three.js].
-			</li>
-		 <li>
-			 [link:https://www.udacity.com/course/interactive-3d-graphics--cs291 Interactive 3D Graphics] - دورة مجانية على Udacity تُعلِّم أساسيات الرسومات ثلاثية الأبعاد ، وتستخدم three.js كأداة تشفير لها.
-		 </li>
-		 <li>
-			[Link:https://aerotwist.com/tutorials/ Aerotwist] tutorials by [link:https://github.com/paullewis/ Paul Lewis].
-		 </li>
-		 <li>
-			 [link:https://discourse.threejs.org/t/three-js-bookshelf/2468 Three.js Bookshelf] - هل تبحث عن مزيد من الموارد حول three.js أو رسومات الكمبيوتر بشكل عام؟ تحقق من اختيار الأدبيات التي أوصى بها مجتمع المكتبة.
-		 </li>
-		</ul>
-
-		<h2>الأخبار والتحديثات</h2>
-		<ul>
-			<li>
-				[link:https://twitter.com/hashtag/threejs Three.js on Twitter]
-			</li>
-			<li>
-				[link:http://www.reddit.com/r/threejs/ Three.js on reddit]
-			</li>
-			<li>
-				[link:http://www.reddit.com/r/webgl/ WebGL on reddit]
-			</li>
-		</ul>
-
-		<h2>أمثلة</h2>
-		<ul>
-			<li>
-				[link:https://github.com/edwinwebb/three-seed/ three-seed] - three.js starter مع ES6 و Webpack
-			</li>
-			<li>
-				[link:http://stemkoski.github.io/Three.js/index.html Professor Stemkoskis Examples] - مجموعة من الأمثلة الصديقة للمبتدئين التي تم إنشاؤها باستخدام three.js r60.
-			</li>
-			<li>
-				[link:https://threejs.org/examples/ Official three.js examples] - يتم الاحتفاظ بهذه الأمثلة كجزء من مستودع three.js ، ودائمًا ما تستخدم أحدث إصدار من three.js.
-			</li>
-			<li>
-				[link:https://raw.githack.com/mrdoob/three.js/dev/examples/ Official three.js dev branch examples]  -
-				كما هو مذكور أعلاه ، باستثناء هذه تستخدم فرع dev من three.js ، وتُستخدم للتحقق من أن كل شيء يعمل كما تم تطوير three.js.
-			</li>
-		</ul>
-
-	 <h2>أدوات</h2>
-	 <ul>
-		 <li>
-			[link:https://github.com/tbensky/physgl physgl.org] - واجهة JavaScript الأمامية مع أغلفة لـ three.js ، لجلب رسومات WebGL للطلاب الذين يتعلمون الفيزياء والرياضيات.
-		 </li>
-		 <li>
-			 [link:https://whsjs.readme.io/ Whitestorm.js] – إطار عمل modular three.js مع البرنامج المساعد AmmoNext للفيزياء.
-		 </li>
-
-		<li>
-			[link:http://zz85.github.io/zz85-bookmarklets/threelabs.html Three.js Inspector]
-		</li>
-		<li>
-			[link:http://idflood.github.io/ThreeNodes.js/ ThreeNodes.js].
-		</li>
-		<li>
-			[link:https://marketplace.visualstudio.com/items?itemName=slevesque.shader vscode shader] - Syntax highlighter for shader language.
-			<br />
-			[link:https://marketplace.visualstudio.com/items?itemName=bierner.comment-tagged-templates vscode comment-tagged-templates] - Syntax highlighting for tagged template strings using comments to shader language, like: glsl.js.
-		</li>
-		<li>
-			[link:https://github.com/MozillaReality/WebXR-emulator-extension WebXR-emulator-extension]
-		</li>
-	 </ul>
-
-	<h2>مراجع WebGL</h2>
-	 <ul>
-		 <li>
-			[link:https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf webgl-reference-card.pdf] - مراجع لجميع الكلمات الرئيسية والمصطلحات والنحو والتعريفات في WebGL و GLSL.
-		 </li>
-	 </ul>
-
-	 <h2>الروابط القديمة</h2>
-	 <p>
-		يتم الاحتفاظ بهذه الروابط لأغراض تاريخية - قد لا تزال تجدها مفيدة ، ولكن حذر من أنها قد تحتوي على معلومات تتعلق بالإصدارات القديمة جدًا من three.js.
-	 </p>
-
-	 <ul>
-		<li>
-			[link:https://www.youtube.com/watch?v=Dir4KO9RdhM AlterQualia at WebGL Camp 3]
-		</li>
-		<li>
-			[link:http://yomotsu.github.io/threejs-examples/ Yomotsus Examples] - مجموعة من الأمثلة باستخدام three.js r45.
-		</li>
-		<li>
-			[link:http://fhtr.org/BasicsOfThreeJS/#1 Introduction to Three.js] 	بواسطة [link:http://github.com/kig/ Ilmari Heikkinen] (slideshow).
-		</li>
-		<li>
-			[link:http://www.slideshare.net/yomotsu/webgl-and-threejs WebGL and Three.js] 	بواسطة [link:http://github.com/yomotsu Akihiro Oyamada] (slideshow).
-		</li>
-		<li>
-			[link:https://www.youtube.com/watch?v=VdQnOaolrPA Trigger Rally]  	بواسطة [link:https://github.com/jareiko jareiko] (video).
-		</li>
-		<li>
-			[link:http://blackjk3.github.io/threefab/ ThreeFab] - محرر مشاهد ،  تم دعم إصداراته حتى حوالي three.js r50.
-		</li>
-		<li>
-			[link:http://bkcore.com/blog/3d/webgl-three-js-workflow-tips.html Max to Three.js workflow tips and tricks] بواسطة [link:https://github.com/BKcore BKcore]
-		</li>
-		<li>
-			[link:http://12devsofxmas.co.uk/2012/01/webgl-and-three-js/ A whirlwind look at Three.js]
-			بواسطة [link:http://github.com/nrocy Paul King]
-		</li>
-		<li>
-			[link:http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html Animated selective glow in Three.js]
-			بواسطة [link:https://github.com/BKcore BKcore]
-		</li>
-		<li>
-			[link:http://www.natural-science.or.jp/article/20120220155529.php Building A Physics Simulation Environment] -  أمثلة تعليمية باللغة اليابانية
-		</li>
-	 </ul>
-
-	</body>
-</html>

docs/manual/ar/introduction/WebGL-compatibility-check.html

@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html lang="ar">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body class="rtl">
-		<h1>فحص توافق WebGL</h1>
-		<p>
-			على الرغم من أن هذه المشكلة أصبحت أقل وأقل ، إلا أن بعض الأجهزة أو المتصفحات قد لا تدعم WebGL 2.
-			تتيح لك الطريقة التالية التحقق مما إذا كانت مدعومة وعرض رسالة للمستخدم إذا لم تكن مدعومة.
-			قم باستيراد وحدة الكشف عن دعم WebGL ، وقم بتشغيل ما يلي قبل محاولة عرض أي شيء.
-		</p>
-
-		<code>
-		import WebGL from 'three/addons/capabilities/WebGL.js';
-
-		if ( WebGL.isWebGL2Available() ) {
-
-			// Initiate function or other initializations here
-			animate();
-
-		} else {
-
-			const warning = WebGL.getWebGL2ErrorMessage();
-			document.getElementById( 'container' ).appendChild( warning );
-
-		}
-		</code>
-	</body>
-</html>

docs/manual/en/introduction/Creating-text.html

@@ -1,142 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>[name]</h1>
-		<div>
-			<p>
-				There are often times when you might need to use text in your three.js application - here are
-				a couple of ways that you can do so.
-			</p>
-		</div>
-
-		<h2>1. DOM + CSS</h2>
-		<div>
-			<p>
-				Using HTML is generally the easiest and fastest manner to add text. This is the method
-				used for descriptive overlays in most three.js examples.
-			</p>
-			<p>You can add content to a</p>
-			<code>&lt;div id="info"&gt;Description&lt;/div&gt;</code>
-
-			<p>
-				and use CSS markup to position absolutely at a position above all others with a
-				z-index especially if you are running three.js full screen.
-			</p>
-
-			<code>
-#info {
-	position: absolute;
-	top: 10px;
-	width: 100%;
-	text-align: center;
-	z-index: 100;
-	display:block;
-}
-			</code>
-
-		</div>
-
-		
-		<h2>2. Use [page:CSS2DRenderer] or [page:CSS3DRenderer]</h2>
-		<div>
-			<p>
-				Use these renderers to draw high-quality text contained in DOM elements to your three.js scene.
-				This is similar to 1. except that with these renderers elements can be integrated more tightly and dynamically into the scene.
-			</p>
-		</div>
-		
-
-		<h2>3. Draw text to canvas and use as a [page:Texture]</h2>
-		<div>
-			<p>Use this method if you wish to draw text easily on a plane in your three.js scene.</p>
-		</div>
-
-
-		<h2>4. Create a model in your favourite 3D application and export to three.js</h2>
-		<div>
-			<p>Use this method if you prefer working with your 3d applications and importing the models to three.js.</p>
-		</div>
-
-
-		<h2>5. Procedural Text Geometry</h2>
-		<div>
-			<p>
-				If you prefer to work purely in THREE.js or to create procedural and dynamic 3D
-				text geometries, you can create a mesh whose geometry is an instance of THREE.TextGeometry:
-			</p>
-			<p>
-				<code>new THREE.TextGeometry( text, parameters );</code>
-			</p>
-			<p>
-				In order for this to work, however, your TextGeometry will need an instance of THREE.Font
-				to be set on its "font" parameter.
-
-				See the [page:TextGeometry] page for more info on how this can be done, descriptions of each
-				accepted parameter, and a list of the JSON fonts that come with the THREE.js distribution itself.
-			</p>
-
-			<h3>Examples</h3>
-
-			<p>
-				[example:webgl_geometry_text WebGL / geometry / text]<br />
-				[example:webgl_shadowmap WebGL / shadowmap]
-			</p>
-
-			<p>
-				If Typeface is down, or you want to use a font that is not there, there's a tutorial
-				with a python script for blender that allows you to export text to Three.js's JSON format:
-				[link:http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html]
-			</p>
-
-		</div>
-
-
-		<h2>6. Bitmap Fonts</h2>
-		<div>
-			<p>
-				BMFonts (bitmap fonts) allow batching glyphs into a single BufferGeometry. BMFont rendering
-				supports word-wrapping, letter spacing, kerning, signed distance fields with standard
-				derivatives, multi-channel signed distance fields, multi-texture fonts, and more.
-				See [link:https://github.com/felixmariotto/three-mesh-ui three-mesh-ui] or [link:https://github.com/Jam3/three-bmfont-text three-bmfont-text].
-			</p>
-			<p>
-				Stock fonts are available in projects like
-				[link:https://github.com/etiennepinchon/aframe-fonts A-Frame Fonts], or you can create your own
-				from any .TTF font, optimizing to include only characters required for a project.
-			</p>
-			<p>
-				Some helpful tools:
-			</p>
-			<ul>
-				<li>[link:http://msdf-bmfont.donmccurdy.com/ msdf-bmfont-web] <i>(web-based)</i></li>
-				<li>[link:https://github.com/soimy/msdf-bmfont-xml msdf-bmfont-xml] <i>(commandline)</i></li>
-				<li>[link:https://github.com/libgdx/libgdx/wiki/Hiero hiero] <i>(desktop app)</i></li>
-			</ul>
-		</div>
-
-
-		<h2>7. Troika Text</h2>
-		<div>
-			<p>
-				The [link:https://www.npmjs.com/package/troika-three-text troika-three-text] package renders 
-				quality antialiased text using a similar technique as BMFonts, but works directly with any .TTF 
-				or .WOFF font file so you don't have to pregenerate a glyph texture offline. It also adds 
-				capabilities including:
-			</p>
-			<ul>
-				<li>Effects like strokes, drop shadows, and curvature</li>
-				<li>The ability to apply any three.js Material, even a custom ShaderMaterial</li>
-				<li>Support for font ligatures, scripts with joined letters, and right-to-left/bidirectional layout</li>
-				<li>Optimization for large amounts of dynamic text, performing most work off the main thread in a web worker</li>
-			</ul>
-		</div>
-
-
-	</body>
-</html>

docs/manual/en/introduction/Drawing-lines.html

@@ -1,64 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>[name]</h1>
-		<div>
-			<p>
-				Let's say you want to draw a line or a circle, not a wireframe [page:Mesh].
-				First we need to set up the [page:WebGLRenderer renderer], [page:Scene scene] and camera (see the Creating a scene page).
-			</p>
-
-			<p>Here is the code that we will use:</p>
-			<code>
-const renderer = new THREE.WebGLRenderer();
-renderer.setSize( window.innerWidth, window.innerHeight );
-document.body.appendChild( renderer.domElement );
-
-const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
-camera.position.set( 0, 0, 100 );
-camera.lookAt( 0, 0, 0 );
-
-const scene = new THREE.Scene();
-			</code>
-			<p>Next thing we will do is define a material. For lines we have to use [page:LineBasicMaterial] or [page:LineDashedMaterial].</p>
-			<code>
-//create a blue LineBasicMaterial
-const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
-			</code>
-
-			<p>
-				After material we will need a geometry with some vertices:
-			</p>
-
-			<code>
-const points = [];
-points.push( new THREE.Vector3( - 10, 0, 0 ) );
-points.push( new THREE.Vector3( 0, 10, 0 ) );
-points.push( new THREE.Vector3( 10, 0, 0 ) );
-
-const geometry = new THREE.BufferGeometry().setFromPoints( points );
-			</code>
-
-			<p>Note that lines are drawn between each consecutive pair of vertices, but not between the first and last (the line is not closed.)</p>
-
-			<p>Now that we have points for two lines and a material, we can put them together to form a line.</p>
-			<code>
-const line = new THREE.Line( geometry, material );
-			</code>
-			<p>All that's left is to add it to the scene and call [page:WebGLRenderer.render render].</p>
-
-			<code>
-scene.add( line );
-renderer.render( scene, camera );
-			</code>
-
-			<p>You should now be seeing an arrow pointing upwards, made from two blue lines.</p>
-		</div>
-	</body>
-</html>

docs/manual/en/introduction/FAQ.html

@@ -1,65 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>[name]</h1>
-
-		<h2>Which 3D model format is best supported?</h2>
-		<div>
-			<p>
-				The recommended format for importing and exporting assets is glTF (GL Transmission Format). Because glTF is focused on runtime asset delivery, it is compact to transmit and fast to load.
-			</p>
-			<p>
-				three.js provides loaders for many other popular formats like FBX, Collada or OBJ as well. Nevertheless, you should always try to establish a glTF based workflow in your projects first. For more information, see [link:#manual/introduction/Loading-3D-models loading 3D models].
-			</p>
-		</div>
-
-		<h2>Why are there meta viewport tags in examples?</h2>
-		<div>
-				<code>&lt;meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"&gt;</code>
-
-				<p>These tags control viewport size and scale for mobile browsers (where page content may be rendered at different size than visible viewport).</p>
-
-				<p>[link:https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html Safari: Using the Viewport]</p>
-
-				<p>[link:https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag MDN: Using the viewport meta tag]</p>
-		</div>
-
-		<h2>How can scene scale be preserved on resize?</h2>
-		<p>
-			We want all objects, regardless of their distance from the camera, to appear the same size, even as the window is resized.
-
-			The key equation to solving this is this formula for the visible height at a given distance:
-
-			<code>
-visible_height = 2 * Math.tan( ( Math.PI / 180 ) * camera.fov / 2 ) * distance_from_camera;
-			</code>
-			If we increase the window height by a certain percentage, then what we want is the visible height at all distances
-			to increase by the same percentage.
-
-			This can not be done by changing the camera position. Instead you have to change the camera field-of-view.
-			[link:http://jsfiddle.net/Q4Jpu/ Example].
-		</p>
-
-		<h2>Why is part of my object invisible?</h2>
-		<p>
-			This could be because of face culling. Faces have an orientation that decides which side is which. And the culling removes the backside in normal circumstances. To see if this is your problem, change the material side to THREE.DoubleSide.
-			<code>material.side = THREE.DoubleSide</code>
-		</p>
-
-		<h2>Why does three.js sometimes return strange results for invalid inputs?</h2>
-		<p>
-			For performance reasons, three.js doesn't validate inputs in most cases. It's your app's responsibility to make sure that all inputs are valid.
-		</p>
-
-		<h2>Can I use three.js in Node.js?</h2>
-		<p>
-			Because three.js is built for the web, it depends on browser and DOM APIs that don't always exist in Node.js. Some of these issues can be avoided by using shims like [link:https://github.com/stackgl/headless-gl headless-gl] and [link:https://github.com/rstacruz/jsdom-global jsdom-global], or by replacing components like [page:TextureLoader] with custom alternatives. Other DOM APIs may be deeply intertwined with the code that uses them, and will be harder to work around. We welcome simple and maintainable pull requests to improve Node.js support, but recommend opening an issue to discuss your improvements first.
-		</p>
-	</body>
-</html>

docs/manual/en/introduction/How-to-create-VR-content.html

@@ -1,81 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-	<meta charset="utf-8">
-	<base href="../../../" />
-	<script src="page.js"></script>
-	<link type="text/css" rel="stylesheet" href="page.css" />
-</head>
-
-<body>
-	<h1>[name]</h1>
-
-	<p>
-		This guide provides a brief overview of the basic components of a web-based VR application
-		made with three.js.
-	</p>
-
-	<h2>Workflow</h2>
-
-	<p>
-		First, you have to include [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/webxr/VRButton.js VRButton.js]
-		into your project.
-	</p>
-
-	<code>
-import { VRButton } from 'three/addons/webxr/VRButton.js';
-	</code>
-
-	<p>
-		*VRButton.createButton()* does two important things: It creates a button which indicates
-		VR compatibility. Besides, it initiates a VR session if the user activates the button. The only thing you have
-		to do is to add the following line of code to your app.
-	</p>
-
-	<code>
-document.body.appendChild( VRButton.createButton( renderer ) );
-	</code>
-
-	<p>
-		Next, you have to tell your instance of `WebGLRenderer` to enable XR rendering.
-	</p>
-
-	<code>
-renderer.xr.enabled = true;
-	</code>
-
-	<p>
-		Finally, you have to adjust your animation loop since we can't use our well known
-		*window.requestAnimationFrame()* function. For VR projects we use [page:WebGLRenderer.setAnimationLoop setAnimationLoop].
-		The minimal code looks like this:
-	</p>
-
-	<code>
-renderer.setAnimationLoop( function () {
-
-	renderer.render( scene, camera );
-
-} );
-	</code>
-
-	<h2>Next Steps</h2>
-
-	<p>
-		Have a look at one of the official WebVR examples to see this workflow in action.<br /><br />
-
-		[example:webxr_xr_ballshooter WebXR / XR / ballshooter]<br />
-		[example:webxr_xr_cubes WebXR / XR / cubes]<br />
-		[example:webxr_xr_dragging WebXR / XR / dragging]<br />
-		[example:webxr_xr_paint WebXR / XR / paint]<br />
-		[example:webxr_xr_sculpt WebXR / XR / sculpt]<br />
-		[example:webxr_vr_panorama_depth WebXR / VR / panorama_depth]<br />
-		[example:webxr_vr_panorama WebXR / VR / panorama]<br />
-		[example:webxr_vr_rollercoaster WebXR / VR / rollercoaster]<br />
-		[example:webxr_vr_sandbox WebXR / VR / sandbox]<br />
-		[example:webxr_vr_video WebXR / VR / video]
-	</p>
-
-</body>
-
-</html>

docs/manual/en/introduction/How-to-dispose-of-objects.html

@@ -1,145 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-	<meta charset="utf-8">
-	<base href="../../../" />
-	<script src="page.js"></script>
-	<link type="text/css" rel="stylesheet" href="page.css" />
-</head>
-
-<body>
-	<h1>[name]</h1>
-
-	<p>
-		One important aspect in order to improve performance and avoid memory leaks in your application is the disposal of unused library entities.
-		Whenever you create an instance of a *three.js* type, you allocate a certain amount of memory. However, *three.js* creates for specific objects
-		like geometries or materials WebGL related entities like buffers or shader programs which are necessary for rendering. It's important to
-		highlight that these objects are not released automatically. Instead, the application has to use a special API in order to free such resources.
-		This guide provides a brief overview about how this API is used and what objects are relevant in this context.
-	</p>
-
-	<h2>Geometries</h2>
-
-	<p>
-		A geometry usually represents vertex information defined as a collection of attributes. *three.js* internally creates an object of type [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLBuffer WebGLBuffer]
-		for each attribute. These entities are only deleted if you call [page:BufferGeometry.dispose](). If a geometry becomes obsolete in your application,
-		execute the method to free all related resources.
-	</p>
-
-	<h2>Materials</h2>
-
-	<p>
-		A material defines how objects are rendered. *three.js* uses the information of a material definition in order to construct a shader program for rendering.
-		Shader programs can only be deleted if the respective material is disposed. For performance reasons, *three.js* tries to reuse existing
-		shader programs if possible. So a shader program is only deleted if all related materials are disposed. You can indicate the disposal of a material by
-		executing [page:Material.dispose]().
-	</p>
-
-	<h2>Textures</h2>
-
-	<p>
-		The disposal of a material has no effect on textures. They are handled separately since a single texture can be used by multiple materials at the same time.
-		Whenever you create an instance of [page:Texture], three.js internally creates an instance of [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture WebGLTexture].
-		Similar to buffers, this object can only be deleted by calling [page:Texture.dispose]().
-	</p>
-
-	<p>
-		If you use an `ImageBitmap` as the texture's data source, you have to call [link:https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap/close ImageBitmap.close]() at the application level to dispose of all CPU-side resources.
-		An automated call of `ImageBitmap.close()` in [page:Texture.dispose]() is not possible, since the image bitmap becomes unusable, and the engine has no way of knowing if the image bitmap is used elsewhere.
-	</p>
-
-	<h2>Render Targets</h2>
-
-	<p>
-		Objects of type [page:WebGLRenderTarget] not only allocate an instance of [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture WebGLTexture] but also
-		[link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLFramebuffer WebGLFramebuffer]s and [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderbuffer WebGLRenderbuffer]s
-		for realizing custom rendering destinations. These objects are only deallocated by executing [page:WebGLRenderTarget.dispose]().
-	</p>
-
-	<h2>Skinned Mesh</h2>
-
-	<p>
-		Skinned meshes represent their bone hierarchy as skeletons. If you don't need a skinned mesh anymore, consider to call [page:Skeleton.dispose]() on the skeleton to free internal resources.
-		Keep in mind that skeletons can be shared across multiple skinned meshes, so only call `dispose()` if the skeleton is not used by other active skinned meshes.
-	</p>
-
-	<h2>Miscellaneous</h2>
-
-	<p>
-		There are other classes from the examples directory like controls or post processing passes which provide `dispose()` methods in order to remove internal event listeners
-		or render targets. In general, it's recommended to check the API or documentation of a class and watch for `dispose()`. If present, you should use it when cleaning things up.
-	</p>
-
-	<h2>FAQ</h2>
-
-	<h3>Why can't *three.js* dispose objects automatically?</h3>
-
-	<p>
-		This question was asked many times by the community so it's important to clarify this matter. Fact is that *three.js* does not know the lifetime or scope
-		of user-created entities like geometries or materials. This is the responsibility of the application. For example even if a material is currently not used for rendering,
-		it might be necessary for the next frame. So if the application decides that a certain object can be deleted, it has to	notify the engine via calling the respective
-		`dispose()` method.
-	</p>
-
-	<h3>Does removing a mesh from the scene also dispose its geometry and material?</h3>
-
-	<p>
-		No, you have to explicitly dispose the geometry and material via *dispose()*. Keep in mind that geometries and materials can be shared among 3D objects like meshes.
-	</p>
-
-	<h3>Does *three.js* provide information about the amount of cached objects?</h3>
-
-	<p>
-		Yes. It's possible to evaluate [page:WebGLRenderer.info], a special property of the renderer with a series of statistical information about the graphics board memory
-		and the rendering process. Among other things, it tells you how many textures, geometries and shader programs are internally stored. If you notice performance problems
-		in your application, it's a good idea to debug this property in order to easily identify a memory leak.
-	</p>
-
-	<h3>What happens when you call `dispose()` on a texture but the image is not loaded yet?</h3>
-
-	<p>
-		Internal resources for a texture are only allocated if the image has fully loaded. If you dispose a texture before the image was loaded,
-		nothing happens. No resources were allocated so there is also no need for clean up.
-	</p>
-
-	<h3>What happens when I call `dispose()` and then use the respective object at a later point?</h3>
-
-	<p>
-		That depends. For geometries, materials, textures, render targets and post processing passes the deleted internal resources can be created again by the engine.
-		So no runtime error will occur but you might notice a negative performance impact for the current frame, especially when shader programs have to be compiled.
-
-		Controls and renderers are an exception. Instances of these classes can not be used after `dispose()` has been called. You have to create new instances in this case.
-	</p>
-
-	<h3>How should I manage *three.js* objects in my app? When do I know how to dispose things?</h3>
-
-	<p>
-		In general, there is no definite recommendation for this. It highly depends on the specific use case when calling `dispose()` is appropriate. It's important to highlight that
-		it's not always necessary to dispose objects all the time. A good example for this is a game which consists of multiple levels. A good place for object disposal is when
-		switching the level. The app could traverse through the old scene and dispose all obsolete materials, geometries and textures. As mentioned in the previous section, it does not
-		produce a runtime error if you dispose an object that is actually still in use. The worst thing that can happen is performance drop for a single frame.
-	</p>
-
-	<h3>Why `renderer.info.memory` is still reporting geometries and textures after traversing the scene and disposing all reachable textures and geometries?</h3>
-
-	<p>
-		In certain cases, there are some textures and geometries used internally by Three.js
-		that are not reachable when traversing the scene graph in order to be disposed.
-		It is expected that `renderer.info.memory` will still report them even after a full scene cleanup.
-		However, they do not leak, but they are reused on consecutive scene cleanup/repopulating cycles.
-
-		These cases could be related to using `material.envMap`, `scene.background`, `scene.environment`,
-		or other contexts that would require the engine to create textures or geometries for internal use.
-	</p>
-
-	<h2>Examples that demonstrate the usage of dispose()</h2>
-
-	<p>
-		[example:webgl_test_memory WebGL / test / memory]<br />
-		[example:webgl_test_memory2 WebGL / test / memory2]<br />
-	</p>
-
-</body>
-
-</html>

docs/manual/en/introduction/How-to-update-things.html

@@ -1,249 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>[name]</h1>
-		<div>
-			<p>All objects by default automatically update their matrices if they have been added to the scene with</p>
-			<code>
-const object = new THREE.Object3D();
-scene.add( object );
-			</code>
-			or if they are the child of another object that has been added to the scene:
-			<code>
-const object1 = new THREE.Object3D();
-const object2 = new THREE.Object3D();
-
-object1.add( object2 );
-scene.add( object1 ); //object1 and object2 will automatically update their matrices
-			</code>
-		</div>
-
-		<p>However, if you know the object will be static, you can disable this and update the transform matrix manually just when needed.</p>
-
-		<code>
-object.matrixAutoUpdate = false;
-object.updateMatrix();
-		</code>
-
-		<h2>BufferGeometry</h2>
-		<div>
-			<p>
-				BufferGeometries store information (such as vertex positions, face indices, normals, colors,
-				UVs, and any custom attributes) in [page:BufferAttribute buffers] - that is,
-				[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays typed arrays].
-				This makes them generally faster than standard Geometries, at the cost of being somewhat harder to
-				work with.
-			</p>
-			<p>
-				With regards to updating BufferGeometries, the most important thing to understand is that
-				you cannot resize buffers (this is very costly,	basically the equivalent to creating a new geometry).
-				You can however update the content of buffers.
-			</p>
-			<p>
-				This means that if you know an attribute of your BufferGeometry will grow, say the number of vertices,
-				you must pre-allocate a buffer large enough to hold any new vertices that may be created. Of
-				course, this also means that there will be a maximum size for your BufferGeometry - there is
-				no way to create a BufferGeometry that can efficiently be extended indefinitely.
-			</p>
-			<p>
-				We'll use the example of a line that gets extended at render time. We'll allocate space
-				in the buffer for 500 vertices but draw only two at first, using [page:BufferGeometry.drawRange].
-			</p>
-			<code>
-const MAX_POINTS = 500;
-
-// geometry
-const geometry = new THREE.BufferGeometry();
-
-// attributes
-const positions = new Float32Array( MAX_POINTS * 3 ); // 3 floats (x, y and z) per point
-geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
-
-// draw range
-const drawCount = 2; // draw the first 2 points, only
-geometry.setDrawRange( 0, drawCount );
-
-// material
-const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
-
-// line
-const line = new THREE.Line( geometry, material );
-scene.add( line );
-			</code>
-		 	<p>
-				Next we'll randomly add points to the line using a pattern like:
-			</p>
-			<code>
-const positionAttribute = line.geometry.getAttribute( 'position' );
-
-let x = 0, y = 0, z = 0;
-
-for ( let i = 0; i < positionAttribute.count; i ++ ) {
-
-	positionAttribute.setXYZ( i, x, y, z );
-
-    x += ( Math.random() - 0.5 ) * 30;
-    y += ( Math.random() - 0.5 ) * 30;
-    z += ( Math.random() - 0.5 ) * 30;
-
-}
-			</code>
-			<p>
-				If you want to change the <em>number of points</em> rendered after the first render, do this:
-			</p>
-			<code>
-line.geometry.setDrawRange( 0, newValue );
-			</code>
-			<p>
-				If you want to change the position data values after the first render, you need to
-				set the needsUpdate flag like so:
-			</p>
-			<code>
-positionAttribute.needsUpdate = true; // required after the first render
-			</code>
-
-			<p>
-				If you change the position data values after the initial render, you may need to recompute
-				bounding volumes so other features of the engine like view frustum culling or helpers properly work.
-			</p>
-			<code>
-line.geometry.computeBoundingBox();
-line.geometry.computeBoundingSphere();
-			</code>
-
-			<p>
-				[link:https://jsfiddle.net/t4m85pLr/1/ Here is a fiddle] showing an animated line which you can adapt to your use case.
-			</p>
-
-			<h3>Examples</h3>
-
-			<p>
-				[example:webgl_custom_attributes WebGL / custom / attributes]<br />
-				[example:webgl_buffergeometry_custom_attributes_particles WebGL / buffergeometry / custom / attributes / particles]
-			</p>
-
-		</div>
-
-		<h2>Materials</h2>
-		<div>
-			<p>All uniforms values can be changed freely (e.g. colors, textures, opacity, etc), values are sent to the shader every frame.</p>
-
-			<p>Also GLstate related parameters can change any time (depthTest, blending, polygonOffset, etc).</p>
-
-			<p>The following properties can't be easily changed at runtime (once the material is rendered at least once):</p>
-			<ul>
-				<li>numbers and types of uniforms</li>
-				<li>presence or not of
-					<ul>
-						<li>texture</li>
-						<li>fog</li>
-						<li>vertex colors</li>
-						<li>morphing</li>
-						<li>shadow map</li>
-						<li>alpha test</li>
-						<li>transparent</li>
-					</ul>
-				</li>
-			</ul>
-
-			<p>Changes in these require building of new shader program. You'll need to set</p>
-			<code>material.needsUpdate = true</code>
-
-			<p>Bear in mind this might be quite slow and induce jerkiness in framerate (especially on Windows, as shader compilation is slower in DirectX than OpenGL).</p>
-
-			<p>For smoother experience you can emulate changes in these features to some degree by having "dummy" values like zero intensity lights, white textures, or zero density fog.</p>
-
-			<p>You can freely change the material used for geometry chunks, however you cannot change how an object is divided into chunks (according to face materials). </p>
-
-			<h3>If you need to have different configurations of materials during runtime:</h3>
-			<p>If the number of materials / chunks is small, you could pre-divide the object beforehand (e.g. hair / face / body / upper clothes / trousers for a human, front / sides / top / glass / tire / interior for a car). </p>
-
-			<p>If the number is large (e.g. each face could be potentially different), consider a different solution, such as using attributes / textures to drive different per-face look.</p>
-
-			<h3>Examples</h3>
-			<p>
-				[example:webgl_materials_car WebGL / materials / car]<br />
-				[example:webgl_postprocessing_dof WebGL / webgl_postprocessing / dof]
-			</p>
-		</div>
-
-
-		<h2>Textures</h2>
-		<div>
-			<p>Image, canvas, video and data textures need to have the following flag set if they are changed:</p>
-			<code>
-				texture.needsUpdate = true;
-			</code>
-			<p>Render targets update automatically.</p>
-
-			<h3>Examples</h3>
-			<p>
-				[example:webgl_materials_video WebGL / materials / video]<br />
-				[example:webgl_rtt WebGL / rtt]
-			</p>
-
-		</div>
-
-		<h2>Cameras</h2>
-		<div>
-			<p>A camera's position and target is updated automatically. If you need to change</p>
-			<ul>
-				<li>
-					fov
-				</li>
-				<li>
-					aspect
-				</li>
-				<li>
-					near
-				</li>
-				<li>
-					far
-				</li>
-			</ul>
-			<p>
-				then you'll need to recompute the projection matrix:
-			</p>
-			<code>
-camera.aspect = window.innerWidth / window.innerHeight;
-camera.updateProjectionMatrix();
-			</code>
-		</div>
-
-		<h2>InstancedMesh</h2>
-		<div>
-			<p>
-				`InstancedMesh` is a class for conveniently access instanced rendering in `three.js`. Certain library features like view frustum culling or
-				ray casting rely on up-to-date bounding volumes (bounding sphere and bounding box). Because of the way how `InstancedMesh` works, the class
-				has its own [page:InstancedMesh.boundingBox boundingBox] and [page:InstancedMesh.boundingSphere boundingSphere] properties that supersede
-				the bounding volumes on geometry level.
-			</p>
-			<p>
-				Similar to geometries you have to recompute the bounding box and sphere whenever you change the underlying data. In context of `InstancedMesh`, that
-				happens when you transform instances via [page:InstancedMesh.setMatrixAt setMatrixAt](). You can use the same pattern like with geometries.
-			</p>
-			<code>
-instancedMesh.computeBoundingBox();
-instancedMesh.computeBoundingSphere();
-			</code>
-
-		</div>
-
-		<h2>SkinnedMesh</h2>
-		<div>
-			<p>
-				`SkinnedMesh` follows the same principles like `InstancedMesh` in context of bounding volumes. Meaning the class has its own version of
-				[page:SkinnedMesh.boundingBox boundingBox] and [page:SkinnedMesh.boundingSphere boundingSphere] to correctly enclose animated meshes.
-				When calling `computeBoundingBox()` and `computeBoundingSphere()`, the class computes the respective bounding volumes based on the current
-				bone transformation (or in other words the current animation state).
-			</p>
-		</div>
-
-	</body>
-</html>

docs/manual/en/introduction/How-to-use-post-processing.html

@@ -1,115 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>How to use post-processing</h1>
-
-		<p>
-			Many three.js applications render their 3D objects directly to the screen. Sometimes, however, you want to apply one or more graphical
-			effects like Depth-Of-Field, Bloom, Film Grain or various types of Anti-aliasing. Post-processing is a widely used approach
-			to implement such effects. First, the scene is rendered to a render target which represents a buffer in the video card's memory.
-			In the next step one or more post-processing passes apply filters and effects to the image buffer before it is eventually rendered to
-			the screen.
-		</p>
-		<p>
-			three.js provides a complete post-processing solution via [page:EffectComposer] to implement such a workflow.
-		</p>
-
-		<h2>Workflow</h2>
-
-		<p>
-			The first step in the process is to import all necessary files from the examples directory. The guide assumes you are using the official
-			[link:https://www.npmjs.com/package/three npm package] of three.js. For our basic demo in this guide we need the following files.
-		</p>
-
-		<code>
-		import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
-		import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
-		import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
-		import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
-		</code>
-
-		<p>
-			After all files are successfully imported, we can create our composer by passing in an instance of [page:WebGLRenderer].
-		</p>
-
-		<code>
-		const composer = new EffectComposer( renderer );
-		</code>
-
-		<p>
-			When using a composer, it's necessary to change the application's animation loop. Instead of calling the render method of
-			[page:WebGLRenderer], we now use the respective counterpart of [page:EffectComposer].
-		</p>
-
-		<code>
-		function animate() {
-
-			requestAnimationFrame( animate );
-
-			composer.render();
-
-		}
-		</code>
-
-		<p>
-			Our composer is now ready so it's possible to configure the chain of post-processing passes. These passes are responsible for creating
-			the final visual output of the application. They are processed in order of their addition/insertion. In our example, the instance of `RenderPass`
-			is executed first, then the instance of `GlitchPass` and finally `OutputPass`. The last enabled pass in the chain is automatically rendered to the screen. 
-			The setup of the passes looks like so:
-		</p>
-
-		<code>
-		const renderPass = new RenderPass( scene, camera );
-		composer.addPass( renderPass );
-
-		const glitchPass = new GlitchPass();
-		composer.addPass( glitchPass );
-
-		const outputPass = new OutputPass();
-		composer.addPass( outputPass );
-		</code>
-
-		<p>
-			`RenderPass` is normally placed at the beginning of the chain in order to provide the rendered scene as an input for the next post-processing step. In our case,
-			`GlitchPass` is going to use these image data to apply a wild glitch effect. `OutputPass` is usually the last pass in the chain which performs sRGB color space conversion and tone mapping.
-			Check out this [link:https://threejs.org/examples/webgl_postprocessing_glitch live example] to see it in action.
-		</p>
-
-		<h2>Built-in Passes</h2>
-
-		<p>
-			You can use a wide range of pre-defined post-processing passes provided by the engine. They are located in the
-			[link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing postprocessing] directory.
-		</p>
-
-		<h2>Custom Passes</h2>
-
-		<p>
-			Sometimes you want to write a custom post-processing shader and include it into the chain of post-processing passes. For this scenario,
-			you can utilize `ShaderPass`. After importing the file and your custom shader, you can use the following code to setup the pass.
-		</p>
-
-		<code>
-		import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
-		import { LuminosityShader } from 'three/addons/shaders/LuminosityShader.js';
-
-		// later in your init routine
-
-		const luminosityPass = new ShaderPass( LuminosityShader );
-		composer.addPass( luminosityPass );
-		</code>
-
-		<p>
-			The repository provides a file called [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/shaders/CopyShader.js CopyShader] which is a
-			good starting code for your own custom shader. `CopyShader` just copies the image contents of the [page:EffectComposer]'s read buffer
-			to its write buffer without applying any effects.
-		</p>
-
-	</body>
-</html>

docs/manual/en/introduction/Installation.html

@@ -1,283 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>[name]</h1>
-
-		<h2>Project structure</h2>
-
-		<p>
-			Every three.js project needs at least one HTML file to define the webpage, and a JavaScript file to run your three.js code. The structure and naming choices below aren't required, but will be used throughout this guide for consistency.
-		</p>
-
-		<ul>
-			<li>
-				<i>index.html</i>
-				<code>
-		&lt;!DOCTYPE html&gt;
-		&lt;html lang="en"&gt;
-			&lt;head&gt;
-				&lt;meta charset="utf-8"&gt;
-				&lt;title&gt;My first three.js app&lt;/title&gt;
-				&lt;style&gt;
-					body { margin: 0; }
-				&lt;/style&gt;
-			&lt;/head&gt;
-			&lt;body&gt;
-				&lt;script type="module" src="/main.js"&gt;&lt;/script&gt;
-			&lt;/body&gt;
-		&lt;/html&gt;
-				</code>
-			</li>
-			<li>
-				<i>main.js</i>
-				<code>
-import * as THREE from 'three';
-
-...
-				</code>
-			</li>
-			<li>
-				<i>public/</i>
-				<ul>
-					<li>
-						The <i>public/</i> folder is sometimes also called a "static" folder, because the files it contains are pushed to the website unchanged. Usually textures, audio, and 3D models will go here.
-					</li>
-				</ul>
-			</li>
-		</ul>
-
-		<p>
-			Now that we've set up the basic project structure, we need a way to run the project locally and access it through a web browser. Installation and local development can be accomplished with npm and a build tool, or by importing three.js from a CDN. Both options are explained in the sections below.
-		</p>
-
-		<h2>Option 1: Install with NPM and a build tool</h2>
-
-		<h3>Development</h3>
-
-		<p>
-			Installing from the [link:https://www.npmjs.com/ npm package registry] and using a [link:https://eloquentjavascript.net/10_modules.html#h_zWTXAU93DC build tool] is the recommended approach for most users — the more dependencies your project needs, the more likely you are to run into problems that the static hosting cannot easily resolve. With a build tool, importing local JavaScript files and npm packages should work out of the box, without import maps.
-		</p>
-
-
-		<ol>
-			<li>
-				Install [link:https://nodejs.org/ Node.js]. We'll need it to load manage dependencies and to run our build tool.
-			</li>
-			<li>
-				<p>
-					Install three.js and a build tool, [link:https://vitejs.dev/ Vite], using a [link:https://www.joshwcomeau.com/javascript/terminal-for-js-devs/ terminal] in your project folder. Vite will be used during development, but it isn't part of the final webpage. If you prefer to use another build tool, that's fine — we support modern build tools that can import [link:https://eloquentjavascript.net/10_modules.html#h_zWTXAU93DC ES Modules].
-				</p>
-				<code>
-# three.js
-npm install --save three
-
-# vite
-npm install --save-dev vite
-				</code>
-				<aside>
-					<details>
-						<summary>Installation added <i>node_modules/</i> and <i>package.json</i> to my project. What are they?</summary>
-						<p>
-							npm uses <i>package.json</i> to describe which versions of each dependency you've installed. If you have other people working on the project with you, they can install the original versions of each dependency simply by running <i>npm install</i>. If you're using version history, commit <i>package.json</i>.
-						</p>
-						<p>
-							npm installs the code for each dependency in a new <i>node_modules/</i> folder. When Vite builds your application, it sees imports for 'three' and pulls three.js files automatically from this folder. The <i>node_modules/</i> folder is used only during development, and shouldn't be uploaded to your web hosting provider or committed to version history.
-						</p>
-					</details>
-					<details>
-						<summary>Improve your editor auto-completion with <i>jsconfig</i> or <i>tsconfig</i></summary>
-						<p>
-							Place a <i>jsconfig.json</i> (or <i>tsconfig.json</i> for TypeScript projects) in your project's root. Adding the configuration below helps your editor locate three.js files for enhanced auto-completion.
-						</p>
-						<code>
-							{
-								"compilerOptions": {
-									// other options...
-									"paths": {
-										"three/webgpu": ["node_modules/three/build/three.webgpu.js"],
-										"three/tsl": ["node_modules/three/build/three.tsl.js"],
-									},
-								}
-							}
-						</code>
-					</details>
-				</aside>
-			</li>
-			<li>
-				From your terminal, run:
-				<code>
-					npx vite
-				</code>
-				<aside>
-					<details>
-						<summary>What is <i>npx</i>?</summary>
-						<p>
-							npx is installed with Node.js, and runs command line programs like Vite so that you don't have to search for the right file in <i>node_modules/</i> yourself. If you prefer, you can put [link:https://vitejs.dev/guide/#command-line-interface Vite's common commands] into the [link:https://docs.npmjs.com/cli/v9/using-npm/scripts package.json:scripts] list, and use <i>npm run dev</i> instead.
-						</p>
-					</details>
-				</aside>
-			</li>
-			<li>
-				If everything went well, you'll see a URL like <i>http://localhost:5173</i> appear in your terminal, and can open that URL to see your web application.
-			</li>
-		</ol>
-
-		<p>
-			The page will be blank — you're ready to [link:#manual/introduction/Creating-a-scene create a scene].
-		</p>
-
-		<p>
-			If you want to learn more about these tools before you continue, see:
-		</p>
-
-		<ul>
-			<li>
-				[link:https://threejs-journey.com/lessons/local-server three.js journey: Local Server]
-			</li>
-			<li>
-				 [link:https://vitejs.dev/guide/cli.html Vite: Command Line Interface]
-			</li>
-			<li>
-				[link:https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management MDN: Package management basics]
-			</li>
-		</ul>
-
-		<h3>Production</h3>
-
-		<p>
-			Later, when you're ready to deploy your web application, you'll just need to tell Vite to run a production build — <i>npx vite build</i>. Everything used by the application will be compiled, optimized, and copied into the <i>dist/</i> folder. The contents of that folder are ready to be hosted on your website.
-		</p>
-
-		<h2>Option 2: Import from a CDN</h2>
-
-		<h3>Development</h3>
-
-		<p>Installing without build tools will require some changes to the project structure given above.</p>
-
-		<ol>
-			<li>
-				<p>
-					We imported code from 'three' (an npm package) in <i>main.js</i>, and web browsers don't know what that means. In <i>index.html</i> we'll need to add an [link:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap import map] defining where to get the package. Put the code below inside the <i>&lt;head>&lt/head></i> tag, after the styles.
-				</p>
-				<code>
-&lt;script type="importmap">
-  {
-    "imports": {
-      "three": "https://cdn.jsdelivr.net/npm/three@&lt;version&gt;/build/three.module.js",
-      "three/addons/": "https://cdn.jsdelivr.net/npm/three@&lt;version&gt;/examples/jsm/"
-    }
-  }
-&lt;/script>
-				</code>
-				<p>
-					Don't forget to replace <i>&lt;version&gt;</i> with an actual version of three.js, like <i>"v0.149.0"</i>. The most recent version can be found on the [link:https://www.npmjs.com/package/three?activeTab=versions npm version list].
-				</p>
-			</li>
-			<li>
-				<p>
-					We'll also need to run a <i>local server</i> to host these files at URL where the web browser can access them. While it's technically possible to double-click an HTML file and open it in your browser, important features that we'll later implement, do not work when the page is opened this way, for security reasons.
-				</p>
-				<p>
-					Install [link:https://nodejs.org/ Node.js], then run [link:https://www.npmjs.com/package/serve serve] to start a local server in the project's directory:
-				</p>
-				<code>
-					npx serve .
-				</code>
-			</li>
-			<li>
-				If everything went well, you'll see a URL like http://localhost:3000 appear in your terminal, and can open that URL to see your web application.
-			</li>
-		</ol>
-
-		<p>
-			The page will be blank — you're ready to [link:#manual/introduction/Creating-a-scene create a scene].
-		</p>
-
-		<p>
-			Many other local static servers are available — some use different languages instead of Node.js, and others are desktop applications. They all work basically the same way, and we've provided a few alternatives below.
-		</p>
-
-		<details>
-			<summary>More local servers</summary>
-
-			<h3>Command Line</h3>
-
-			<p>Command line local servers run from a terminal window. The associated programming language may need to be installed first.</p>
-
-			<ul>
-				<li><i>npx http-server</i> (Node.js)</li>
-				<li><i>npx five-server</i> (Node.js)</li>
-				<li><i>python -m SimpleHTTPServer</i> (Python 2.x)</li>
-				<li><i>python -m http.server</i> (Python 3.x)</li>
-				<li><i>php -S localhost:8000</i> (PHP 5.4+)</li>
-			</ul>
-
-
-			<h3>GUI</h3>
-
-			<p>GUI local servers run as an application window on your computer, and may have a user interface.</p>
-
-			<ul>
-				<li>[link:https://greggman.github.io/servez Servez]</li>
-			</ul>
-
-			<h3>Code Editor Plugins</h3>
-
-			<p>Some code editors have plugins that spawn a simple server on demand.</p>
-
-			<ul>
-				<li>[link:https://marketplace.visualstudio.com/items?itemName=yandeu.five-server Five Server] for Visual Studio Code</li>
-				<li>[link:https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer Live Server] for Visual Studio Code</li>
-				<li>[link:https://atom.io/packages/atom-live-server Live Server] for Atom</li>
-			</ul>
-
-
-		</details>
-
-		<h3>Production</h3>
-
-		<p>
-			When you're ready to deploy your web application, push the source files to your web hosting provider — no need to build or compile anything. The downside of that tradeoff is that you'll need to be careful to keep the import map updated with any dependencies (and dependencies of dependencies!) that your application requires. If the CDN hosting your dependencies goes down temporarily, your website will stop working too.
-		</p>
-
-		<p>
-			<i><b>IMPORTANT:</b> Import all dependencies from the same version of three.js, and from the same CDN. Mixing files from different sources may cause duplicate code to be included, or even break the application in unexpected ways.</i>
-		</p>
-
-		<h2>Addons</h2>
-
-		<p>
-			Out of the box, three.js includes the fundamentals of a 3D engine. Other three.js components — such as controls, loaders, and post-processing effects — are part of the [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm addons/] directory. Addons do not need to be <i>installed</i> separately, but do need to be <i>imported</i> separately.
-		</p>
-
-		<p>
-			The example below shows how to import three.js with the [page:OrbitControls] and [page:GLTFLoader] addons. Where necessary, this will also be mentioned in each addon's documentation or examples.
-		</p>
-
-		<code>
-import * as THREE from 'three';
-import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-
-const controls = new OrbitControls( camera, renderer.domElement );
-const loader = new GLTFLoader();
-		</code>
-
-		<p>
-			Some excellent third-party projects are available for three.js, too. These need to be installed separately — see [link:#manual/introduction/Libraries-and-Plugins Libraries and Plugins].
-		</p>
-
-		<h2>Next Steps</h2>
-
-		<p>
-			You're now ready to [link:#manual/introduction/Creating-a-scene create a scene].
-		</p>
-
-	</body>
-</html>

docs/manual/en/introduction/Libraries-and-Plugins.html

@@ -1,119 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>[name]</h1>
-
-		<p class="desc">
-			Listed here are externally developed compatible libraries and plugins for three.js. This
-			list and the associated packages are maintained by the community and not guaranteed
-			to be up to date. If you'd like to update this list make a PR!
-		</p>
-
-		<h3>Physics</h3>
-
-		<ul>
-			<li>[link:https://github.com/lo-th/Oimo.js/ Oimo.js]</li>
-			<li>[link:https://enable3d.io/ enable3d]</li>
-			<li>[link:https://github.com/kripken/ammo.js/ ammo.js]</li>
-			<li>[link:https://github.com/pmndrs/cannon-es cannon-es]</li>
-			<li>[link:https://rapier.rs/ rapier]</li>
-			<li>[link:https://github.com/jrouwe/JoltPhysics.js Jolt]</li>
-			
-		</ul>
-
-		<h3>Postprocessing</h3>
-
-		<p>
-			In addition to the [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing official three.js postprocessing effects],
-			support for some additional effects and frameworks are available through external libraries.
-		</p>
-
-		<ul>
-			<li>[link:https://github.com/vanruesc/postprocessing postprocessing]</li>
-		</ul>
-
-		<h3>Intersection and Raycast Performance</h3>
-
-		<ul>
-			<li>[link:https://github.com/gkjohnson/three-mesh-bvh three-mesh-bvh]</li>
-		</ul>
-
-		<h3>Path Tracing</h3>
-		
-		<ul>
-			<li>[link:https://github.com/gkjohnson/three-gpu-pathtracer three-gpu-pathtracer]</li>
-		</ul>
-		
-		<h3>File Formats</h3>
-
-		<p>
-			In addition to the [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders official three.js loaders],
-			support for some additional formats is available through external libraries.
-		</p>
-
-		<ul>
-			<li>[link:https://github.com/gkjohnson/urdf-loaders/tree/master/javascript urdf-loader]</li>
-			<li>[link:https://github.com/NASA-AMMOS/3DTilesRendererJS 3d-tiles-renderer-js]</li>
-			<li>[link:https://github.com/kaisalmen/WWOBJLoader WebWorker OBJLoader]</li>
-			<li>[link:https://github.com/IFCjs/web-ifc-three IFC.js]</li>
-		</ul>
-
-		<h3>Geometry</h3>
-
-		<ul>
-			<li>[link:https://github.com/spite/THREE.MeshLine THREE.MeshLine]</li>
-		</ul>
-
-		<h3>3D Text and Layout</h3>
-
-		<ul>
-			<li>[link:https://github.com/protectwise/troika/tree/master/packages/troika-three-text troika-three-text]</li>
-			<li>[link:https://github.com/felixmariotto/three-mesh-ui three-mesh-ui]</li>
-		</ul>
-
-		<h3>Particle Systems</h3>
-
-		<ul>
-			<li>[link:https://github.com/Alchemist0823/three.quarks three.quarks]</li>
-			<li>[link:https://github.com/creativelifeform/three-nebula three-nebula]</li>
-		</ul>
-
-		<h3>Inverse Kinematics</h3>
-
-		<ul>
-			<li>[link:https://github.com/jsantell/THREE.IK THREE.IK]</li>
-			<li>[link:https://github.com/lo-th/fullik fullik]</li>
-			<li>[link:https://github.com/gkjohnson/closed-chain-ik-js closed-chain-ik]</li>
-		</ul>
-
-		<h3>Game AI</h3>
-
-		<ul>
-			<li>[link:https://mugen87.github.io/yuka/ yuka]</li>
-			<li>[link:https://github.com/donmccurdy/three-pathfinding three-pathfinding]</li>
-			<li>[link:https://github.com/isaac-mason/recast-navigation-js recast-navigation-js]</li>
-		</ul>
-
-		<h3>Wrappers and Frameworks</h3>
-
-		<ul>
-			<li>[link:https://aframe.io/ A-Frame]</li>
-			<li>[link:https://lume.io/ Lume] - HTML elements for 3D graphics built on Three.</li>
-			<li>[link:https://github.com/pmndrs/react-three-fiber react-three-fiber] - React components for 3D graphics built on Three.</li>
-			<li>[link:https://threepipe.org/ threepipe] - A versatile 3D viewer framework using three.js for rendering.</li>
-			<li>[link:https://github.com/ecsyjs/ecsy-three ECSY]</li>
-			<li>[link:https://threlte.xyz/ Threlte] - Svelte components for 3D graphics built on Three.</li>
-			<li>[link:https://needle.tools/ Needle Engine]</li>
-			<li>[link:https://tresjs.org/ tresjs] - Vue components for 3D graphics built on Three.</li>
-			<li>[link:https://giro3d.org Giro3D] - Versatile framework built on Three for visualizing and interacting with Geospatial 2D, 2.5D and 3D data.</li>
-			<li>[link:https://zap.works/mattercraft/ Mattercraft] - Browser-based visual editor for AR, WebXR and 3D web content, built on three.js with real-time preview and physics engine.</li>
-		</ul>
-
-	</body>
-</html>

docs/manual/en/introduction/Loading-3D-models.html

@@ -1,167 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-	<meta charset="utf-8">
-	<base href="../../../" />
-	<script src="page.js"></script>
-	<link type="text/css" rel="stylesheet" href="page.css" />
-</head>
-
-<body>
-	<h1>[name]</h1>
-
-	<p>
-		3D models are available in hundreds of file formats, each with different
-		purposes, assorted features, and varying complexity. Although
-		<a href="https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders" target="_blank" rel="noopener">
-		three.js provides many loaders</a>, choosing the right format and
-		workflow will save time and frustration later on. Some formats are
-		difficult to work with, inefficient for realtime experiences, or simply not
-		fully supported at this time.
-	</p>
-
-	<p>
-		This guide provides a workflow recommended for most users, and suggestions
-		for what to try if things don't go as expected.
-	</p>
-
-	<h2>Before we start</h2>
-
-	<p>
-		If you're new to running a local server, begin with
-		[link:#manual/introduction/Installation installation]
-		first. Many common errors viewing 3D models can be avoided by hosting files
-		correctly.
-	</p>
-
-	<h2>Recommended workflow</h2>
-
-	<p>
-		Where possible, we recommend using glTF (GL Transmission Format). Both
-		<small>.GLB</small> and <small>.GLTF</small> versions of the format are
-		well supported. Because glTF is focused on runtime asset delivery, it is
-		compact to transmit and fast to load. Features include meshes, materials,
-		textures, skins, skeletons, morph targets, animations, lights, and
-		cameras.
-	</p>
-
-	<p>
-		Public-domain glTF files are available on sites like
-		<a href="https://sketchfab.com/models?features=downloadable&sort_by=-likeCount&type=models" target="_blank" rel="noopener">
-		Sketchfab</a>, or various tools include glTF export:
-	</p>
-
-	<ul>
-		<li><a href="https://www.blender.org/" target="_blank" rel="noopener">Blender</a> by the Blender Foundation</li>
-		<li><a href="https://www.allegorithmic.com/products/substance-painter" target="_blank" rel="noopener">Substance Painter</a> by Allegorithmic</li>
-		<li><a href="https://www.foundry.com/products/modo" target="_blank" rel="noopener">Modo</a> by Foundry</li>
-		<li><a href="https://www.marmoset.co/toolbag/" target="_blank" rel="noopener">Toolbag</a> by Marmoset</li>
-		<li><a href="https://www.sidefx.com/products/houdini/" target="_blank" rel="noopener">Houdini</a> by SideFX</li>
-		<li><a href="https://labs.maxon.net/?p=3360" target="_blank" rel="noopener">Cinema 4D</a> by MAXON</li>
-		<li><a href="https://github.com/KhronosGroup/COLLADA2GLTF" target="_blank" rel="noopener">COLLADA2GLTF</a> by the Khronos Group</li>
-		<li><a href="https://github.com/facebookincubator/FBX2glTF" target="_blank" rel="noopener">FBX2GLTF</a> by Facebook</li>
-		<li><a href="https://github.com/AnalyticalGraphicsInc/obj2gltf" target="_blank" rel="noopener">OBJ2GLTF</a> by Analytical Graphics Inc</li>
-		<li>&hellip;and <a href="http://github.khronos.org/glTF-Project-Explorer/" target="_blank" rel="noopener">many more</a></li>
-	</ul>
-
-	<p>
-		If your preferred tools do not support glTF, consider requesting glTF
-		export from the authors, or posting on
-		<a href="https://github.com/KhronosGroup/glTF/issues/1051" target="_blank" rel="noopener">the glTF roadmap thread</a>.
-	</p>
-
-	<p>
-		When glTF is not an option, popular formats such as FBX, OBJ, or COLLADA
-		are also available and regularly maintained.
-	</p>
-
-	<h2>Loading</h2>
-
-	<p>
-		Only a few loaders (e.g. [page:ObjectLoader]) are included by default with
-		three.js — others should be added to your app individually.
-	</p>
-
-	<code>
-		import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-	</code>
-
-	<p>
-		Once you've imported a loader, you're ready to add a model to your scene. Syntax varies among
-		different loaders — when using another format, check the examples and documentation for that
-		loader. For glTF, usage with global scripts would be:
-	</p>
-
-	<code>
-		const loader = new GLTFLoader();
-
-		loader.load( 'path/to/model.glb', function ( gltf ) {
-
-			scene.add( gltf.scene );
-
-		}, undefined, function ( error ) {
-
-			console.error( error );
-
-		} );
-	</code>
-
-	<p>
-		See [page:GLTFLoader GLTFLoader documentation] for further details.
-	</p>
-
-	<h2>Troubleshooting</h2>
-
-	<p>
-		You've spent hours modeling an artisanal masterpiece, you load it into
-		the webpage, and — oh no! 😭 It's distorted, miscolored, or missing entirely.
-		Start with these troubleshooting steps:
-	</p>
-
-	<ol>
-		<li>
-			Check the JavaScript console for errors, and make sure you've used an
-			`onError` callback when calling `.load()` to log the result.
-		</li>
-		<li>
-			View the model in another application. For glTF, drag-and-drop viewers
-			are available for
-			<a href="https://gltf-viewer.donmccurdy.com/" target="_blank" rel="noopener">three.js</a> and
-			<a href="https://sandbox.babylonjs.com/" target="_blank" rel="noopener">babylon.js</a>. If the model
-			appears correctly in one or more applications,
-			<a href="https://github.com/mrdoob/three.js/issues/new" target="_blank" rel="noopener">file a bug against three.js</a>.
-			If the model cannot be shown in any application, we strongly encourage
-			filing a bug with the application used to create the model.
-		</li>
-		<li>
-			Try scaling the model up or down by a factor of 1000. Many models are
-			scaled differently, and large models may not appear if the camera is
-			inside the model.
-		</li>
-		<li>
-			Try to add and position a light source. The model may be hidden in the dark.
-		</li>
-		<li>
-			Look for failed texture requests in the network tab, like
-			`"C:\\Path\To\Model\texture.jpg"`. Use paths relative to your
-			model instead, such as `images/texture.jpg` — this may require
-			editing the model file in a text editor.
-		</li>
-	</ol>
-
-	<h2>Asking for help</h2>
-
-	<p>
-		If you've gone through the troubleshooting process above and your model
-		still isn't working, the right approach to asking for help will get you to
-		a solution faster. Post a question on the
-		<a href="https://discourse.threejs.org/" target="_blank" rel="noopener">three.js forum</a> and, whenever possible,
-		include your model (or a simpler model with the same problem) in any formats
-		you have available. Include enough information for someone else to reproduce
-		the issue quickly — ideally, a live demo.
-	</p>
-
-</body>
-
-</html>

docs/manual/en/introduction/Matrix-transformations.html

@@ -1,70 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>[name]</h1>
-
-		<p>
-		Three.js uses `matrices` to encode 3D transformations---translations (position), rotations, and scaling. Every instance of [page:Object3D] has a [page:Object3D.matrix matrix] which stores that object's position, rotation, and scale. This page describes how to update an object's transformation.
-		</p>
-
-		<h2>Convenience properties and `matrixAutoUpdate`</h2>
-
-		<p>
-			There are two ways to update an object's transformation:
-		</p>
-		<ol>
-			<li>
-				Modify the object's `position`, `quaternion`, and `scale` properties, and let three.js recompute
-				the object's matrix from these properties:
-				<code>
-object.position.copy( start_position );
-object.quaternion.copy( quaternion );
-				</code>
-				By default, the `matrixAutoUpdate` property is set true, and the matrix will be automatically recalculated.
-				If the object is static, or you wish to manually control when recalculation occurs, better performance can be obtained by setting the property false:
-				<code>
-object.matrixAutoUpdate = false;
-				</code>
-				And after changing any properties, manually update the matrix:
-				<code>
-object.updateMatrix();
-				</code>
-			</li>
-			<li>
-				Modify the object's matrix directly. The [page:Matrix4] class has various methods for modifying the matrix:
-				<code>
-object.matrix.setRotationFromQuaternion( quaternion );
-object.matrix.setPosition( start_position );
-object.matrixAutoUpdate = false;
-				</code>
-				Note that `matrixAutoUpdate` <em>must</em> be set to `false` in this case, and you should make sure <em>not</em> to call `updateMatrix`. Calling `updateMatrix` will clobber the manual changes made to the matrix, recalculating the matrix from `position`, `scale`, and so on.
-			</li>
-		</ol>
-
-		<h2>Object and world matrices</h2>
-		<p>
-		An object's [page:Object3D.matrix matrix] stores the object's transformation <em>relative</em> to the object's [page:Object3D.parent parent]; to get the object's transformation in <em>world</em> coordinates, you must access the object's [page:Object3D.matrixWorld].
-		</p>
-		<p>
-		When either the parent or the child object's transformation changes, you can request that the child object's [page:Object3D.matrixWorld matrixWorld] be updated by calling [page:Object3D.updateMatrixWorld updateMatrixWorld]().
-		</p>
-		<p>
-		An object can be transformed via [page:Object3D.applyMatrix4]. Note: Under-the-hood, this method relies on [page:Matrix4.decompose], and not all matrices are decomposable in this way. For example, if an object has a non-uniformly scaled parent, then the object's world matrix may not be decomposable, and this method may not be appropriate.
-		</p>
-
-		<h2>Rotation and Quaternion</h2>
-		<p>
-		Three.js provides two ways of representing 3D rotations: [page:Euler Euler angles] and [page:Quaternion Quaternions], as well as methods for converting between the two. Euler angles are subject to a problem called "gimbal lock," where certain configurations can lose a degree of freedom (preventing the object from being rotated about one axis). For this reason, object rotations are <em>always</em> stored in the object's [page:Object3D.quaternion quaternion].
-		</p>
-		<p>
-		Previous versions of the library included a `useQuaternion` property which, when set to false, would cause the object's [page:Object3D.matrix matrix] to be calculated from an Euler angle. This practice is deprecated---instead, you should use the [page:Object3D.setRotationFromEuler setRotationFromEuler] method, which will update the quaternion.
-		</p>
-
-	</body>
-</html>

docs/manual/en/introduction/Useful-links.html

@@ -1,177 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>[name]</h1>
-
-		<p class="desc">
-			The following is a collection of links that you might find useful when learning three.js.<br />
-			If you find something that you'd like to add here, or think that one of the links below is no longer
-			relevant or working, feel free to click the 'edit' button in the bottom right and make some changes!<br /><br />
-
-			Note also that as three.js is under rapid development, a lot of these links will contain information that is
-			out of date - if something isn't working as you'd expect or as one of these links says it should,
-			check the browser console for warnings or errors. Also check the relevant docs pages.
-		</p>
-
-		<h2>Help forums</h2>
-		<p>
-			Three.js officially uses the [link:https://discourse.threejs.org/ forum] and [link:http://stackoverflow.com/tags/three.js/info Stack Overflow] for help requests.
-			If you need assistance with something, that's the place to go. Do NOT open an issue on Github for help requests.
-		</p>
-
-		<h2>Tutorials and courses</h2>
-
-		<h3>Getting started with three.js</h3>
-		<ul>
-			<li>
-				[link:https://threejs.org/manual/#en/fundamentals Three.js Fundamentals starting lesson]
-			</li>
-			<li>
-				[link:https://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-1-the-scene Beginning with 3D WebGL] by [link:https://codepen.io/rachsmith/ Rachel Smith].
-			</li>
-			<li>
-				[link:https://www.august.com.au/blog/animating-scenes-with-webgl-three-js/ Animating scenes with WebGL and three.js]
-			</li>
-		</ul>
-
-		<h3>More extensive / advanced articles and courses</h3>
-		<ul>
-			<li>
-				[link:https://threejs-journey.com/ Three Journey] Course by [link:https://bruno-simon.com/ Bruno Simon] - Teaches beginners how to use Three.js step by step
-			</li>
-			<li>
-				[link:https://discoverthreejs.com/ Discover three.js]
-			</li>
-			<li>
-				[link:http://blog.cjgammon.com/ Collection of tutorials] by [link:http://www.cjgammon.com/ CJ Gammon].
-			</li>
-			<li>
-				[link:https://medium.com/soffritti.pierfrancesco/glossy-spheres-in-three-js-bfd2785d4857 Glossy spheres in three.js].
-			</li>
-		 <li>
-			 [link:https://www.udacity.com/course/interactive-3d-graphics--cs291 Interactive 3D Graphics] - a free course on Udacity that teaches the fundamentals of 3D Graphics,
-			 and uses three.js as its coding tool.
-		 </li>
-		 <li>
-			[Link:https://aerotwist.com/tutorials/ Aerotwist] tutorials by [link:https://github.com/paullewis/ Paul Lewis].
-		 </li>
-		 <li>
-			 [link:https://discourse.threejs.org/t/three-js-bookshelf/2468 Three.js Bookshelf] - Looking for more resources about three.js or computer graphics in general?
-			 Check out the selection of literature recommended by the community.
-		 </li>
-		</ul>
-
-		<h2>News and Updates</h2>
-		<ul>
-			<li>
-				[link:https://twitter.com/hashtag/threejs Three.js on Twitter]
-			</li>
-			<li>
-				[link:http://www.reddit.com/r/threejs/ Three.js on reddit]
-			</li>
-			<li>
-				[link:http://www.reddit.com/r/webgl/ WebGL on reddit]
-			</li>
-		</ul>
-
-		<h2>Examples</h2>
-		<ul>
-			<li>
-				[link:https://github.com/edwinwebb/three-seed/ three-seed] - three.js starter project with ES6 and Webpack
-			</li>
-			<li>
-				[link:http://stemkoski.github.io/Three.js/index.html Professor Stemkoskis Examples] - a collection of beginner friendly
-				examples built using three.js r60.
-			</li>
-			<li>
-				[link:https://threejs.org/examples/ Official three.js examples] - these examples are
-				maintained as part of the three.js repository, and always use the latest version of three.js.
-			</li>
-			<li>
-				[link:https://raw.githack.com/mrdoob/three.js/dev/examples/ Official three.js dev branch examples]  -
-				Same as the above, except these use the dev branch of three.js,	and are used to check that
-				everything is working as three.js being is developed.
-			</li>
-		</ul>
-
-	<h2>Tools</h2>
-	<ul>
-		<li>
-			[link:https://github.com/tbensky/physgl physgl.org] - JavaScript front-end with wrappers to three.js, to bring WebGL
-			graphics to students learning physics and math.
-		</li>
-		<li>
-			[link:https://whsjs.readme.io/ Whitestorm.js] – Modular three.js framework with AmmoNext physics plugin.
-		</li>
-		<li>
-			[link:http://zz85.github.io/zz85-bookmarklets/threelabs.html Three.js Inspector]
-		</li>
-		<li>
-			[link:http://idflood.github.io/ThreeNodes.js/ ThreeNodes.js].
-		</li>
-		<li>
-			[link:https://marketplace.visualstudio.com/items?itemName=slevesque.shader vscode shader] - Syntax highlighter for shader language.
-			<br />
-			[link:https://marketplace.visualstudio.com/items?itemName=bierner.comment-tagged-templates vscode comment-tagged-templates] - Syntax highlighting for tagged template strings using comments to shader language, like: glsl.js.
-		</li>
-		<li>
-			[link:https://github.com/MozillaReality/WebXR-emulator-extension WebXR-emulator-extension]
-		</li>
-	</ul>
-
-	<h2>WebGL References</h2>
-		<ul>
-			<li>
-			[link:https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf webgl-reference-card.pdf] - Reference of all WebGL and GLSL keywords, terminology, syntax and definitions.
-			</li>
-		</ul>
-
-	<h2>Old Links</h2>
-	<p>
-		These links are kept for historical purposes - you may still find them useful, but be warned that
-		they may have information relating to very old versions of three.js.
-	</p>
-
-	<ul>
-		<li>
-			[link:https://www.youtube.com/watch?v=Dir4KO9RdhM AlterQualia at WebGL Camp 3]
-		</li>
-		<li>
-			[link:http://yomotsu.github.io/threejs-examples/ Yomotsus Examples] - a collection of examples using three.js r45.
-		</li>
-		<li>
-			[link:http://fhtr.org/BasicsOfThreeJS/#1 Introduction to Three.js] by [link:http://github.com/kig/ Ilmari Heikkinen] (slideshow).
-		</li>
-		<li>
-			[link:http://www.slideshare.net/yomotsu/webgl-and-threejs WebGL and Three.js] by [link:http://github.com/yomotsu Akihiro Oyamada] (slideshow).
-		</li>
-		<li>
-			[link:https://www.youtube.com/watch?v=VdQnOaolrPA Trigger Rally]  by [link:https://github.com/jareiko jareiko] (video).
-		</li>
-		<li>
-			[link:http://blackjk3.github.io/threefab/ ThreeFab] - scene editor, maintained up until around three.js r50.
-		</li>
-		<li>
-			[link:http://bkcore.com/blog/3d/webgl-three-js-workflow-tips.html Max to Three.js workflow tips and tricks] by [link:https://github.com/BKcore BKcore]
-		</li>
-		<li>
-			[link:http://12devsofxmas.co.uk/2012/01/webgl-and-three-js/ A whirlwind look at Three.js]
-			by [link:http://github.com/nrocy Paul King]
-		</li>
-		<li>
-			[link:http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html Animated selective glow in Three.js]
-			by [link:https://github.com/BKcore BKcore]
-		</li>
-		<li>
-			[link:http://www.natural-science.or.jp/article/20120220155529.php Building A Physics Simulation Environment] - three.js tutorial in Japanese
-		</li>
-	 </ul>
-
-	</body>
-</html>

docs/manual/en/introduction/WebGL-compatibility-check.html

@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>[name]</h1>
-		<p>
-			Even though this is becoming less and less of a problem, some devices or browsers may still not support WebGL 2.
-			The following method allows you to check if it is supported and display a message to the user if it is not.
-			Import the WebGL support detection module, and run the following before attempting to render anything.
-		</p>
-
-		<code>
-		import WebGL from 'three/addons/capabilities/WebGL.js';
-
-		if ( WebGL.isWebGL2Available() ) {
-
-			// Initiate function or other initializations here
-			animate();
-
-		} else {
-
-			const warning = WebGL.getWebGL2ErrorMessage();
-			document.getElementById( 'container' ).appendChild( warning );
-
-		}
-		</code>
-	</body>
-</html>

docs/manual/fr/introduction/Animation-system.html

@@ -1,146 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-	<head>
-		<meta charset="utf-8" />
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>Système d'animation ([name])</h1>
-
-		<h2>Aperçu</h2>
-
-		<p class="desc">
-			Dans le système d'animation de three.js vous pouvez animer différentes propriétés de vos modèles:
-			les os d'un [page:SkinnedMesh skinned and rigged model], les morph targets, les différentes propriétés des matériaux
-			(couleurs, opacité, booléens), la visibilité et les transformations. Les propriétés animées peuvent avoir différentes animations comme un fade-in,
-			un fade-out, un fondu ou un warp. Le poids et l'échelle temporelle des différentes animations simultanées
-			sur le même objet peuvent également être changées indépendamment.
-			Différentes animations sur le même objet peuvent-être
-			synchronisées.<br /><br />
-
-			Pour effectuer tout cela dans un système homogène, le système d'animation three.js
-			[link:https://github.com/mrdoob/three.js/issues/6881 a complètement changé en 2015]
-			(attention aux informations dépassées!), et a maintenant une architecture similaire à
-			Unity/Unreal Engine 4. Cette page offre un bref aperçu des principaux composants du système
-			et de comment ils fonctionnent ensemble.
-
-		</p>
-
-		<h3>Animation Clips</h3>
-
-		<p class="desc">
-
-			Si vous avez réussi à importer un modèle 3D (peu importe qu'il ait
-			des os ou une morph targets ou les deux) — par exemple en l'exportant depuis Blender avec le
-			[link:https://github.com/KhronosGroup/glTF-Blender-IO glTF Blender exporter] et
-			en le chargeant dans la scène three.js en utilisant [page:GLTFLoader] — un des champs doit-être
-			un tableau nommé "animations", contenant les [page:AnimationClip AnimationClips]
-			pour ce modèle (voir une liste des loaders possibles ci-dessous).<br /><br />
-
-			Chaque `AnimationClip` conserve les données d'une certaine activité d'un objet. Si le
-			mesh est un personnage, par exemple, il pourrait y avoir un AnimationClip pour une marche, un second
-			pour un saut, un troisième pour un pas de côté et ainsi de suite.
-
-		</p>
-
-		<h3>Keyframe Tracks</h3>
-
-		<p class="desc">
-
-			A l'intérieur d'un `AnimationClip` les données pour chaque propriétés animées sont stockées
-			dans un [page:KeyframeTrack] séparé. En considérant que l'objet personnage a un [page:Skeleton skeleton],
-			un keyframe track pourrait stocker les changements de valeur de la position de l'os inférieur d'un bras
-			à travers le temps, un track différent stockerait les changements de valeur de la rotation du même bras, un troisième
-			pourrait stocker la position, la rotation ou l'échelle d'un autre os, ainsi de suite. Il doit-être clair qu'un,
-			AnimationClip peut-être composé de beaucoup de ce genre de tracks.<br /><br />
-
-			En considérant que le modèle a un morph targets (par exemple un morph
-			target pour un visage amical et un autre pour un visage énervé), chaque track conserve
-			l'information de comment l'[page:Mesh.morphTargetInfluences influence] d'un certain morph
-			change durant l'exécution du clip.
-
-		</p>
-
-		<h3>Mixer d'Animations</h3>
-
-		<p class="desc">
-
-			Les informations stockées représentent uniquement la base de l'animation - le playback est en réalité contrôlé par
-			l'[page:AnimationMixer]. Vous vous doutez bien que ce n'est pas uniquement un visualiseur d'animations, mais
-			une simulation d'un hardware comme une vraie console de mixage , qui peut contrôler plusieurs animations
-			simultanément, les mélangeant et les fusionnant.
-
-		</p>
-
-		<h3>Actions d'Animations</h3>
-
-		<p class="desc">
-
-			L'`AnimationMixer` en lui-même a seulement quelques propriétés (générales) et méthodes, car il
-			peut-être contrôlé par l'[page:AnimationAction AnimationActions]. En configurant un
-			`AnimationAction` vous pouvez déterminer qu'un certain `AnimationClip` doit-être joué, mis en pause
-			ou stoppé sur un des mixers, si et à quelle fréquence le clip doit-être répété, si il
-			doit-être joué avec un fade, une mise à l'échelle temporelle, et d'autres choses, comme le fondu
-			ou la synchronisation.
-
-		</p>
-
-		<h3>Animations de Groupes d'Objets</h3>
-
-		<p class="desc">
-
-			Si vous voulez qu'un groupe d'objets reçoive un statut d'animation partagé, vous pouvez utiliser un
-			[page:AnimationObjectGroup].
-
-		</p>
-
-		<h3>Formats et loaders supportés</h3>
-
-		<p class="desc">
-			Notez que tous les formats de modèles n'incluent pas les animations (notamment OBJ ne les supporte pas), et que seulement certains
-			loaders three.js supportent les séquences d'[page:AnimationClip AnimationClip]. Plusieurs autres <i>supportent</i>
-			ce type d'animations:
-		</p>
-
-			<ul>
-				<li>[page:ObjectLoader THREE.ObjectLoader]</li>
-				<li>THREE.BVHLoader</li>
-				<li>THREE.ColladaLoader</li>
-				<li>THREE.FBXLoader</li>
-				<li>[page:GLTFLoader THREE.GLTFLoader]</li>
-			</ul>
-
-		<p class="desc">
-			Notez que 3ds max et Maya ne peuvent actuellement pas exporter plusieurs animations (qui ne sont pas sur
-			la même timeline) directement dans un seul fichier.
-		</p>
-
-		<h2>Exemple</h2>
-
-		<code>
-		let mesh;
-
-		// Create an AnimationMixer, and get the list of AnimationClip instances
-		const mixer = new THREE.AnimationMixer( mesh );
-		const clips = mesh.animations;
-
-		// Update the mixer on each frame
-		function update () {
-			mixer.update( deltaSeconds );
-		}
-
-		// Play a specific animation
-		const clip = THREE.AnimationClip.findByName( clips, 'dance' );
-		const action = mixer.clipAction( clip );
-		action.play();
-
-		// Play all animations
-		clips.forEach( function ( clip ) {
-			mixer.clipAction( clip ).play();
-		} );
-		</code>
-
-	</body>
-</html>

docs/manual/fr/introduction/Color-management.html

@@ -1,333 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-
-<head>
-	<meta charset="utf-8">
-	<base href="../../../" />
-	<script src="page.js"></script>
-	<link type="text/css" rel="stylesheet" href="page.css" />
-	<style>
-		blockquote {
-			font-size: 0.8em;
-			line-height: 1.5em;
-			margin-left: 0;
-			border-left: 4px solid #cccccc;
-			padding: 1em 2em 1em 2em;
-		}
-
-		blockquote p:first-child {
-			margin-top: 0;
-		}
-
-		blockquote p:last-child {
-			margin-bottom: 0;
-		}
-
-		figure {
-			width: 100%;
-			margin: 1em 0;
-			font-style: italic;
-		}
-
-		figure img {
-			width: 100%;
-		}
-
-		figure.float {
-			float: right;
-			max-width: 30%;
-			margin: 1em;
-		}
-
-		@media all and ( max-width: 640px ) {
-
-			figure.float {
-				float: none;
-				max-width: 100%;
-			}
-
-		}
-	</style>
-</head>
-
-<body>
-	<h1>Gestion des couleurs ([name])</h1>
-
-	<h2>Qu'est ce qu'un espace colorimétrique?</h2>
-
-	<p>
-		Chaque espace colorimétrique est un ensemble de plusieurs décisions de design, choisies ensemble pour supporter
-		un large éventail de couleurs tout en satisfaisant les contraintes techniques liées à la précision et aux technologies
-		d'affichage. Lors de la création d'un asset 3D, ou l'assemblage d'assets 3D ensemble dans une scène, il est
-		important de savoir quelles sont ces propriétés, et comment les propriétés d'un espace colorimétrique se rapporte
-		aux autres espaces colorimétriques de la scène.
-	</p>
-
-	<figure class="float">
-		<img src="resources/srgb_gamut.png" alt="">
-		<figcaption>
-			Les couleurs sRGB et le point blanc (D65) affichées dans le modèle CIE 1931 chromaticity
-			diagram. Les régions colorées représentent une projection 2D de la gamme sRGB, qui est un
-			volume 3D. Source: <a href="https://en.wikipedia.org/wiki/SRGB" target="_blank" rel="noopener">Wikipedia</a>
-		</figcaption>
-	</figure>
-
-	<ul>
-		<li>
-			<b>Couleurs primaires:</b> Les couleurs primaires (e.g. rouge, vert, bleu) ne sont pas absolues; elle sont
-			sélectionnées depuis le spectre visible basé sur les contraintes de la précision limitée et
-			les capacités des appareils d'affichage disponibles. Les couleurs sont exprimées comme un ratio des couleurs primaires.
-		</li>
-		<li>
-			<b>Point blanc:</b> La plupart des espaces colorimétriques sont conçus de telle manière qu'une somme équivalente
-			de couleurs primaires <i>R = G = B</i> apparaissent comme n'ayant pas de couleurs, ou "achromatique". L'apparition
-			des valeurs chromatiques (comme le blanc ou le gris) dépend de la perception humaine, qui dépend elle-même
-			fortement du contexte d'observation. Un espace colorimétrique spécifie son "point blanc" pour équilibrer
-			ces besoins. Le point blanc définit par l'espace colorimétrique sRGB est
-			[link:https://en.wikipedia.org/wiki/Illuminant_D65 D65].
-		</li>
-		<li>
-			<b>Fonctions de transfert:</b> Après avoir choisir la gamme de couleur et le modèle de couleur, il nous reste à toujours définir
-			le mapping ("fonctions de transfert") des valeurs numériques de l'espace colorimétrique. Est-ce-que <i>r = 0.5</i>
-			représente 50% moins d'illumination physique que <i>r = 1.0</i>? Ou 50% de luminosité en moins, comme perçu
-			par l'oeil humain moyen? Ce sont différentes choses, et ces différences peuvent être représentées par
-			une fonction mathématique. Les fonctions de transfert peuvent être <i>linéaires</i> ou <i>non-linéaires</i>, selon
-			les objectifs de l'espace colorimétrique. Le sRGB définit des fonctions de transfert non-linéaires. Ces fonctions
-			fonctions sont parfois approximées en <i>fonctions gamma</i>, mais le terme "gamma" est
-			ambigu et doit-être évité dans ce contexte.
-		</li>
-	</ul>
-
-	Ces trois paramètres — les couleurs primaires, le point blanc, et les fonctions de transfert — définissent un
-	espace colorimétrique, chacun est choisi pour un objectif particulier. Après avoir défini les paramètres, quelques termes supplémentaires
-	sont utiles:
-
-	<ul>
-		<li>
-			<b>Le modèle de couleur:</b> La syntaxe pour identifier naturellement les couleurs au sein de la gamme de couleur choisie —
-			un système de coordonnées pour les couleurs. Dans three.js nous utilisons principalement le système de couleurs RGB,
-			ayant trois coordonnées <i>r, g, b ∈ [0,1]</i> ("domaines fermés") ou
-			<i>r, g, b ∈ [0,∞]</i> ("domaine ouvert") chacune représentant une fraction d'une couleur
-			primaire. D'autres modèles de couleurs (HSL, Lab, LCH) sont communément utilisés pour un contrôle artistique.
-		</li>
-		<li>
-			<b>La gamme de couleurs:</b> Une fois que les couleurs primaires et le point blanc ont été choisis, ils représentent
-			un volume parmis le spectre visible (une "gamme"). Les couleurs qui ne sont pas dans ce volume ("hors de la gamme")
-			ne peuvent pas être exprimées par un domaine fermé [0,1] de valeurs RGB. Dans le domaine ouvert [0,∞], la gamme est
-			théoriquement infinie.
-		</li>
-	</ul>
-
-	<p>
-		Considérons deux espaces colorimétriques très communs: [page:SRGBColorSpace] ("sRGB") et
-		[page:LinearSRGBColorSpace] ("sRGB-Linéaire"). Les deux utilisent les mêmes primaires et point blanc,
-		et donc ont la même gamme de couleur. Le deux utilisent le modèle RGB. Leur seule différence sont
-		les fonctions de transfert — Le sRGB-Linéaire est linéaire et respecte l'intensité physique de la lumière.
-		Le sRGB utilise les fonctions de transfert non-linéaire du sRGB, et reproduit de manière plus proche la façon dont
-		l'oeil humain perçoit la lumière et la réactivité des écrans.
-	</p>
-
-	<p>
-		Cette différence est importante. Les calculs de lumières et les autres opérations de rendu doivent
-		généralement se produire dans un espace de lumière linéaire. Cependant, les espaces colorimétriques linéaires sont moins efficaces
-		dans le stockage d'images ou de framebuffer, et semblent incorrects quand ils sont vus par un humain.
-		Par conséquent, les textures d'entrée et l'image du rendu final vont généralement utiliser l'espace colorimétrique
-		sRGB non-linéaire.
-	</p>
-
-	<blockquote>
-		<p>
-			ℹ️ <i><b>NOTE:</b> Alors que certains écrans modernes supportent des gammes plus larges comme Display-P3,
-				les APIs graphiques du web reposent largement sur le sRGB. Les applications utilisant three.js
-				aujourd'hui utilisent généralement uniquement le sRGB et les espaces colorimétriques sRGB-linéaires.</i>
-		</p>
-	</blockquote>
-
-	<h2>Rôle des espaces colorimétriques</h2>
-
-	<p>
-		Workflows linéaires — requis pour les méthodes de rendu modernes — ils impliquent généralement
-		plus d'un espace de couleur, chacun assigné à un rôle particulier. Les espace colorimétriques linéaires et non-linéaires
-		sont appropriés pour différents usages, expliqués ci-dessous.
-	</p>
-
-	<h3>Espaces colorimétriques d'entrée</h3>
-
-	<p>
-		Les couleurs fournies à three.js — par les sélecteurs de couleurs, les textures, les modèles 3D, et d'autres sources —
-		ont toutes un espace colorimétrique associé. Celles qui ne sont pas déjà dans l'espace colorimétrique sRGB-Linéaire
-		doivent-être converties, et les textures doivent recevoir les bonnes consignes de <i>texture.colorSpace</i>.
-		Certaines conversions (pour l'hexadecimal et les couleurs CSS en sRGB) peuvent être automatisées si
-		l'héritage de la gestion des couleurs est désactivé avant l'initialisation des couleurs:
-	</p>
-
-	<code>
-THREE.ColorManagement.enabled = true;
-	</code>
-
-	<ul>
-		<li>
-			<b>Matériaux, lumières, et shaders:</b> Les couleurs des matériaux, lumières, et shaders stockent
-			des composantes RGB dans l'espace colorimétrique sRGB-Linéaire.
-		</li>
-		<li>
-			<b>Vertex colors:</b> [page:BufferAttribute BufferAttributes] stocke
-			des composantes RGB dans l'espace colorimétrique sRGB-Linéaire.
-		</li>
-		<li>
-			<b>Textures colorées:</b> PNG ou JPEG [page:Texture Textures] contiennent des informations de couleurs
-			(comme .map ou .emissiveMap) utilisant le domaine fermé de l'espace colorimétrique sRGB, et doivent être annotés avec
-			<i>texture.colorSpace = SRGBColorSpace</i>. Des formats comme OpenEXR (parfois utilisés par .envMap pi
-			.lightMap) utilisent l'espace colorimétrique sRGB-Linéaire indiqué par <i>texture.colorSpace = LinearSRGBColorSpace</i>,
-			et peuvent contenir des valeurs du domaine ouvert [0,∞].
-		</li>
-		<li>
-			<b>Textures non-colorées:</b> Les textures qui ne stockent aucune information de couleur (comme .normalMap
-			ou .roughnessMap) n'ont pas d'espace colorimétrique associé, et utilisent généralement l'annotation de texture (par défaut)
-			<i>texture.colorSpace = NoColorSpace</i>. Dans de rares cas, les données ne concernant pas la couleur
-			peuvent être représentées par d'autres encodages non-linéaires pour des raisons techniques.
-		</li>
-	</ul>
-
-	<blockquote>
-		<p>
-			⚠️ <i><b>ATTENTION:</b> Plusieurs formats de modèles 3D ne définissent par correctement ou de manière cohérente
-			les informations des espaces colorimétriques. Malgré le fait que three.js tente de gérer la plupart des situations, les problèmes
-			sont communs avec les formats de fichiers plus anciens. Pour de meilleurs résultats, utilisez glTF 2.0 ([page:GLTFLoader])
-			et testez vos modèles 3D dans des visualiseurs en ligne relativement tôt pour vérifier que le modèle est correct en tant que tel.</i>
-		</p>
-	</blockquote>
-
-	<h3>Espaces colorimétriques fonctionnels</h3>
-
-	<p>
-		Le rendu, l'interpolation, et plusieurs autres opérations doivent être performés dans un espace colorimétrique
-		au domaine ouvert, dans lequel les composantes RGB sont proportionnelles
-		à l'illumination physique. Dans three.js, l'espace colorimétrique est le sRGB-Linéaire.
-	</p>
-
-	<h3>L'espace colorimétrique de sortie</h3>
-
-	<p>
-		La sortie d'un écran, d'une image, ou d'une vidéo peut impliquer la conversion depuis un espace colorimétrique
-		sRGB-Linéaire au domaine ouvert vers un autre espace colorimétrique. Cette conversion peut être effectuée dans
-		le pass principal du moteur de rendu ([page:WebGLRenderer.outputColorSpace]), ou durant le post-processing.
-	</p>
-
-	<code>
-renderer.outputColorSpace = THREE.SRGBColorSpace; // optional with post-processing
-	</code>
-
-	<ul>
-		<li>
-			<b>Affichage:</b> Les couleurs envoyées à un canvas WebGL pour affichage doivent-être dans l'espace colorimétrique
-			sRGB.
-		</li>
-		<li>
-			<b>Image:</b> Les couleurs envoyées à une image doivent utiliser l'espace colorimétrique approprié au
-			format et à l'utilisation. Les images entièrement rendues sur des textures au format PNG ou JPEG
-			utilisent généralement l'espace colorimétrique sRGB. Les images contenant de l'émission, des light maps, ou d'autres données
-			qui ne sont pas restreintes à l'intervalle [0,1] utiliseront généralement l'espace colorimétrique sRGB à domaine ouvert,
-			et un format d'image compatible comme OpenEXR.
-		</li>
-	</ul>
-
-	<blockquote>
-		<p>
-			⚠️ <i><b>ATTENTION:</b> Les cibles de rendu doivent utiliser soit le sRGB soit le sRGB-Linéaire. Le sRGB gère
-			mieux la précision limitée. Dans le domaine fermé, 8 bits suffisent généralement au sRGB
-			tandis que ≥12 bits (demi float) peuvent être requis pour du sRGB-Linéaire. Si les étapes ultérieures
-			du pipeline nécessitent une entrée en sRGB-Linéaire, les conversions additionnelles peuvent
-			avoir un petit impact sur les performances.</i>
-		</p>
-	</blockquote>
-
-	<p>
-		Custom materials based on [page:ShaderMaterial] and [page:RawShaderMaterial] have to implement their own output color space conversion.
-		For instances of `ShaderMaterial`, adding the `colorspace_fragment` shader chunk to the fragment shader's `main()` function should be sufficient.
-	</p>
-
-	<h2>Utiliser des instances de THREE.Color</h2>
-
-	<p>
-		Les méthodes de lecture ou de modification des instances de [page:Color] partent du principe que les données sont déjà
-		dans l'espace colorimétrique de three.js, le sRGB-Linéaire. Les composantes RGB et HSL sont des représentations
-		directes de données stockées par l'instance Color, et ne sont jamais converties
-		implicitement. Les données Color peuvent être explicitement converties avec <i>.convertLinearToSRGB()</i>
-		ou <i>.convertSRGBToLinear()</i>.
-	</p>
-
-	<code>
-		// RGB components (no change).
-		color.r = color.g = color.b = 0.5;
-		console.log( color.r ); // → 0.5
-
-		// Manual conversion.
-		color.r = 0.5;
-		color.convertSRGBToLinear();
-		console.log( color.r ); // → 0.214041140
-	</code>
-
-	<p>
-		Avec <i>ColorManagement.enabled = true</i> d'activé (recommandé), certaines conversions
-		sont faites automatiquement. Parce que l'hexadécimal et les couleurs CSS sont généralement en sRGB, les méthodes [page:Color]
-		vont automatiquement convertir ces entrées du sRGB au sRGB-Linéaire dans des setters, ou
-		convertir depuis du sRGB-Linéaire au sRGB lors du renvoi de valeurs hexadécimales ou CSS depuis les getters.
-	</p>
-
-	<code>
-		// Hexadecimal conversion.
-		color.setHex( 0x808080 );
-		console.log( color.r ); // → 0.214041140
-		console.log( color.getHex() ); // → 0x808080
-
-		// CSS conversion.
-		color.setStyle( 'rgb( 0.5, 0.5, 0.5 )' );
-		console.log( color.r ); // → 0.214041140
-
-		// Override conversion with 'colorSpace' argument.
-		color.setHex( 0x808080, LinearSRGBColorSpace );
-		console.log( color.r ); // → 0.5
-		console.log( color.getHex( LinearSRGBColorSpace ) ); // → 0x808080
-		console.log( color.getHex( SRGBColorSpace ) ); // → 0xBCBCBC
-	</code>
-
-	<h2>Erreurs communes</h2>
-
-	<p>
-		Quand une couleur ou une texture individuelle est mal configurée, elle apparaîtra plus lumineuse ou plus sombre
-		qu'attendu. Quand l'espace colorimétrique de sortie du moteur de rendu est mal configuré, la scène entière peut sembler
-		plus sombre (e.g. conversion manquante vers le sRGB) ou plus lumineuse (e.g. une double conversion vers le sRGB avec du
-		post-processing). Dans chaque cas le problème peut ne pas être uniforme, et simplement augmenter/diminuer
-		peut ne pas le résoudre.
-	</p>
-
-	<p>
-		Un problème plus subtil peut se produire quand <i>à la fois</i> l'espace colorimétrique d'entrée et
-		l'espace colorimétrique de sortie sont incorrects — les niveaux de luminosité globaux peuvent être corrects, mais les couleurs peuvent changer
-		d'une manière inattendue sous différentes lumières, ou des ombres peuvent sembler plus abruptes et moins lisses
-		que prévu. Ces deux erreurs assemblées ne forment pas une réussite, et il est important que
-		l'espace colorimétrique soit linéaire ("scene referred") et que l'espace colorimétrique de sortie soit linéaire
-		("display referred").
-	</p>
-
-	<h2>Lectures additionnelles</h2>
-
-	<ul>
-		<li>
-			<a href="https://developer.nvidia.com/gpugems/gpugems3/part-iv-image-effects/chapter-24-importance-being-linear" target="_blank" rel="noopener">GPU Gems 3: The Importance of Being Linear</a>, par Larry Gritz et Eugene d'Eon
-		</li>
-		<li>
-			<a href="https://blog.johnnovak.net/2016/09/21/what-every-coder-should-know-about-gamma/" target="_blank" rel="noopener">What every coder should know about gamma</a>, par John Novak
-		</li>
-		<li>
-			<a href="https://hg2dc.com/" target="_blank" rel="noopener">The Hitchhiker's Guide to Digital Color</a>, par Troy Sobotka
-		</li>
-		<li>
-			<a href="https://docs.blender.org/manual/en/latest/render/color_management.html" target="_blank" rel="noopener">Color Management</a>, Blender
-		</li>
-	</ul>
-
-</body>
-
-</html>

docs/manual/fr/introduction/Creating-a-scene.html

@@ -1,163 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>Créer une scène ([name])</h1>
-
-		<p>L'objectif de cette section est d'effectuer une brève introduction à three.js. Nous commencerons par mettre en place une scène, avec un cube en rotation. Un exemple fonctionnel est fourni à la fin de la page au cas où vous seriez bloqués et que vous auriez besoin d'aide.</p>
-
-		<h2>Avant de commencer</h2>
-
-		<p>Avant de pouvoir utiliser three.js, vous aurez besoin d'un endroit pour l'afficher. Enregistrez le code HTML suivant dans un fichier sur votre ordinateur et ouvrez-le dans votre navigateur.</p>
-
-		<code>
-		&lt;!DOCTYPE html&gt;
-		&lt;html&gt;
-			&lt;head&gt;
-				&lt;meta charset="utf-8"&gt;
-				&lt;title&gt;My first three.js app&lt;/title&gt;
-				&lt;style&gt;
-					body { margin: 0; }
-				&lt;/style&gt;
-			&lt;/head&gt;
-			&lt;body&gt;
-				&lt;script type="module"&gt;
-					import * as THREE from 'https://cdn.jsdelivr.net/npm/three/build/three.module.js';
-
-					// Our Javascript will go here.
-				&lt;/script&gt;
-			&lt;/body&gt;
-		&lt;/html&gt;
-		</code>
-
-		<p>C'est tout. Tout le code qui va suivre doit aller dans la balise &lt;script&gt;.</p>
-
-		<h2>Créer la scène</h2>
-
-		<p>Pour pouvoir afficher quelque chose avec three.js, nous avons besoin de trois choses: une scène, une caméra et un moteur de rendu, afin de pouvoir effectuer un rendu de la scène à travers la caméra.</p>
-
-		<code>
-		const scene = new THREE.Scene();
-		const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
-
-		const renderer = new THREE.WebGLRenderer();
-		renderer.setSize( window.innerWidth, window.innerHeight );
-		document.body.appendChild( renderer.domElement );
-		</code>
-
-		<p>Prenons un moment pour expliquer ce qu'il se passe. Nous avons maintenant mis en place la scène, notre caméra et le moteur de rendu.</p>
-
-		<p>Il existe différentes caméras dans three.js. Pour l'instant, utilisons une `PerspectiveCamera`.</p>
-
-		<p>Le premier attribut est le `field of view`. Le champ de vision (FOV) est l'étendue de la scène visible sur l'écran à un moment donné. La valeur est en degrés.</p>
-
-		<p>Le second attribut est nommé `aspect ratio`. Vous devrez presque toujours utiliser la largeur de l'élément divisée par sa hauteur, ou vous aurez le même résultat que lorsque vous regardez un vieux film sur une télévision avec un écran large - l'image semble écrasée.</p>
-
-		<p>Les deux attributs suivants sont le `near` et le `far` du plan de coupe. Les objets plus loins de la caméra que la valeur `far` ou plus proches que `near` ne seront pas rendus. Vous n'avez pas besoin de vous préoccuper de ça pour l'instant, mais vous devriez ajuster ces valeurs dans vos applications afin d'obtenir de meilleures performances.</p>
-
-		<p>Ensuite vient le moteur de rendu. En plus d'instancier le moteur de rendu, nous avons aussi besoin de définir la taille à laquelle doit-être effectué le rendu de l'application. Il est recommandé d'utiliser la largeur et la hauteur de la zone qu'est censée occuper l'application - dans ce cas, la largeur et la hauteur de la fenêtre du navigateur. Pour les applications gourmandes en ressources, vous pouvez aussi donner à `setSize` des valeurs plus petites, comme `window.innerWidth/2` et `window.innerHeight/2`, qui permettra d'effectuer le rendu à un quart de sa taille initiale.</p>
-
-		<p>Si vous souhaitez conserver la taille de votre application mais effectuer un rendu avec une résolution plus faible, vous pouvez le faire appelant `setSize` avec false comme `updateStyle` (le troisième argument). Par exemple, `setSize(window.innerWidth/2, window.innerHeight/2, false)` effectuera un rendu de votre application à demi-résolution, en considérant que votre &lt;canvas&gt; a 100% de largeur et de hauteur.</p>
-
-		<p>Pour finir, nous ajoutons l’élément `renderer` à notre document HTML. C'est un élément &lt;canvas&gt; que le moteur de rendu utilise pour nous afficher la scène.</p>
-
-		<p><em>"C'est sympa tout ça, mais où sont les cubes que tu nous avais promis?"</em> Ajoutons-les maintenant.</p>
-
-		<code>
-		const geometry = new THREE.BoxGeometry( 1, 1, 1 );
-		const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
-		const cube = new THREE.Mesh( geometry, material );
-		scene.add( cube );
-
-		camera.position.z = 5;
-		</code>
-
-		<p>Pour créer un cube, nous avons besoin d'une `BoxGeometry`. C'est un objet qui contient tous les points (`vertices`) et le remplissage (`faces`) du cube. Nous en verrons plus à ce propos dans le futur.</p>
-
-		<p>En plus de la forme (geometry), nous avons besoin d'un matériau (material) pour le colorer. Three.js contient plusieurs matériaux, mais nous nous contenterons du `MeshBasicMaterial` pour l'instant. Tous les matériaux prennent un objet avec un ensemble de propriétés qui s'appliquent à eux. Pour rester dans la simplicité, ne renseignons qu'un attribut couleur avec la valeur `0x00ff00`, qui est du vert. Cela fonctionne de la même manière que les couleurs en CSS ou dans Photoshop (`hex colors`).</p>
-
-		<p>La dernière chose dont nous avons besoin est un `Mesh`. Un mesh (maillage) est un objet qui prends une forme (geometry), et qui y applique un matériau (material), que nous pouvons ensuite insérer dans notre scène, et déplacer librement.</p>
-
-		<p>Par défaut, quand nous appelons `scene.add()`, l'élément est ajouté aux coordonnées `(0,0,0)`. Cela causera la superposition du cube et de la caméra qui seront les uns à l'intérieur des autres. Pour éviter ça, nous devons simplement déplacer un peu la caméra.</p>
-
-		<h2>Faire un rendu de la scène</h2>
-
-		<p>Si vous avez copié le code du dessus dans le fichier HTML créé plus tôt, vous ne verrez rien. C'est parce que nous n'effectuons aucun rendu pour l'instant. Pour cela, nous avons besoin de ce que l'on appelle une `render or animate loop`.</p>
-
-		<code>
-		function animate() {
-			requestAnimationFrame( animate );
-			renderer.render( scene, camera );
-		}
-		animate();
-		</code>
-
-		<p>Cela va créer une boucle qui va déclencher le moteur de rendu afin qu'il dessine la scène à chaque fois que l'écran est rafraîchi (sur un écran classique c'est 60 fois par secondes). Si l'écriture de jeux sur navigateur vous est étrangère, vous devez vous dire <em>"Pourquoi nous ne créons pas de setInterval ?"</em> C'est que - nous pourrions, mais `requestAnimationFrame` a plusieurs avantages. Le plus important est peut-être qu'il se met en pause lorsque l'utilisateur change d'onglet sur son navigateur, par conséquence, pas de perte de leur précieuse puissance de calcul ou de durée de vie de leur batterie.</p>
-
-		<h2>Animer le cube</h2>
-
-		<p>Si vous insérez tout le code au-dessus dans le fichier que vous avez créé avant que nous commencions, vous devriez voir un cube vert. Rendons tout ça un peu plus intéressant en le faisant tourner.</p>
-
-		<p>Ajoutez le code suivant juste au dessus de l'appel `renderer.render` dans votre fonction `animate`:</p>
-
-		<code>
-		cube.rotation.x += 0.01;
-		cube.rotation.y += 0.01;
-		</code>
-
-		<p>Ceci sera exécuté à chaque frame (normalement 60 fois par secondes), et donnera au cube une belle animation de rotation. Pour résumer, tout ce que vous souhaitez déplacer ou changer pendant que l'application est en cours d'exécution doit passer par la boucle animate. Vous pouvez évidemment appeler d'autres fonctions depuis cet endroit, afin de ne pas finir avec une fonction `animate` de plusieurs centaines de lignes.</p>
-
-		<h2>Le résultat</h2>
-		<p>Félicitations! Vous avez maintenant terminé votre première application three.js. C'est trivial, mais il faut bien commencer quelque part.</p>
-
-		<p>Le code complet est disponible ci-dessous et ainsi que sous forme d'éditable [link:https://jsfiddle.net/0c1oqf38/ exemple live]. Amusez-vous avec pour avoir une meilleure idée de son fonctionnement.</p>
-
-		<code>
-		&lt;!DOCTYPE html&gt;
-		&lt;html&gt;
-			&lt;head&gt;
-				&lt;meta charset="utf-8"&gt;
-				&lt;title&gt;My first three.js app&lt;/title&gt;
-				&lt;style&gt;
-					body { margin: 0; }
-				&lt;/style&gt;
-			&lt;/head&gt;
-			&lt;body&gt;
-				&lt;script type="module"&gt;
-					import * as THREE from 'https://cdn.jsdelivr.net/npm/three/build/three.module.js';
-
-					const scene = new THREE.Scene();
-					const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
-
-					const renderer = new THREE.WebGLRenderer();
-					renderer.setSize( window.innerWidth, window.innerHeight );
-					document.body.appendChild( renderer.domElement );
-
-					const geometry = new THREE.BoxGeometry( 1, 1, 1 );
-					const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
-					const cube = new THREE.Mesh( geometry, material );
-					scene.add( cube );
-
-					camera.position.z = 5;
-
-					function animate() {
-						requestAnimationFrame( animate );
-
-						cube.rotation.x += 0.01;
-						cube.rotation.y += 0.01;
-
-						renderer.render( scene, camera );
-					}
-
-					animate();
-				&lt;/script&gt;
-			&lt;/body&gt;
-		&lt;/html&gt;
-		</code>
-	</body>
-</html>

docs/manual/fr/introduction/Creating-text.html

@@ -1,142 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>Créer un texte ([name])</h1>
-		<div>
-			<p>
-				Parfois vous aurez besoin d'utiliser du texte dans votre application three.js - ici
-				sont présentées quelques façons de le faire.
-			</p>
-		</div>
-
-		<h2>1. DOM + CSS</h2>
-		<div>
-			<p>
-				Utiliser du HTML est généralement la manière la plus simple et la plus rapide d'ajouter du texte. Ceci est la méthode
-				utilisée pour les overlays descriptifs de la plupart des exemples three.js.
-			</p>
-			<p>Vous pouvez ajouter du contenu à une</p>
-			<code>&lt;div id="info"&gt;Description&lt;/div&gt;</code>
-
-			<p>
-				et utiliser CSS pour donner une position absolute située au-dessus de tout le reste du contenu grâce au
-				z-index plus particulièrement si vous utilisez three.js en plein-écran.
-			</p>
-
-			<code>
-#info {
-	position: absolute;
-	top: 10px;
-	width: 100%;
-	text-align: center;
-	z-index: 100;
-	display:block;
-}
-			</code>
-
-		</div>
-
-
-		<h2>2. Utiliser [page:CSS2DRenderer] ou [page:CSS3DRenderer]</h2>
-		<div>
-			<p>
-				Utilisez ces moteurs de rendu pour dessiner des textes de haute-qualité contenus dans l'élément DOM de vos scène three.js.
-				Cette approche est similaire à la 1. excepté qu'avec ces moteurs de rendu les éléments peuvent être intégrés plus précisément et dynamiquement à la scène.
-			</p>
-		</div>
-
-
-		<h2>3. Associer un texte au canvas et l'utiliser comme [page:Texture]</h2>
-		<div>
-			<p>Utilisez cette méthode si vous souhaitez dessiner du texte facilement sur un plane dans votre scène three.js.</p>
-		</div>
-
-
-		<h2>4. Créez un modèle dans votre application 3D préférée et exportez le dans three.js</h2>
-		<div>
-			<p>Utilisez cette méthode si vous préférez travailler avec vos applications 3D puis importer vos modèles dans three.js.</p>
-		</div>
-
-
-		<h2>5. Forme de texte procédurale</h2>
-		<div>
-			<p>
-				Si vous souhaitez travailler en three.js pur ou créer des formes de texte 3D procédurales et dynamiques,
-				vous pouvez créer un mesh qui aura pour geometry une instance de THREE.TextGeometry:
-			</p>
-			<p>
-				<code>new THREE.TextGeometry( text, parameters );</code>
-			</p>
-			<p>
-				Pour que cela fonctionne, dans tous les cas, votre TextGeometry aura besoin d'une instance de THREE.Font
-				avec comme paramètre "font".
-
-				Voir [page:TextGeometry] pour avoir plus d'informations sur comment cela peut-être mis en place, une description de chaque
-				paramètre accepté, et une liste des fonts JSON qui viennent avec la distribution THREE.js.
-			</p>
-
-			<h3>Exemples</h3>
-
-			<p>
-				[example:webgl_geometry_text WebGL / geometry / text]<br />
-				[example:webgl_shadowmap WebGL / shadowmap]
-			</p>
-
-			<p>
-				Si Typeface ne fonctionne pas, ou que vous souhaitez une font qui n'est pas ici, il y a un tutoriel
-				avec un script python pour blender qui vous permet d'exporter du texte dans au format JSON de Three.js:
-				[link:http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html]
-			</p>
-
-		</div>
-
-
-		<h2>6. Fonts Bitmap</h2>
-		<div>
-			<p>
-				BMFonts (bitmap fonts) permet de transformer les lots de glyphs en une seule BufferGeometry. Le rendu BMFont
-				supporte les sauts-de-ligne, l'espacement des lettres, le crénage, les fonctions de distance signée avec
-				des dérivées, les fonctions de distance signée multi-channel, les fonts multi-texture, et bien plus.
-				Voir [link:https://github.com/felixmariotto/three-mesh-ui three-mesh-ui] ou [link:https://github.com/Jam3/three-bmfont-text three-bmfont-text].
-			</p>
-			<p>
-				Les fonts de base sont disponibles dans des projets comme
-				[link:https://github.com/etiennepinchon/aframe-fonts A-Frame Fonts], ou vous pouvez créer la votre
-				depuis n'importe quelle font .TTF, en optimisant les performances en n'incluant que les character requis par le projet.
-			</p>
-			<p>
-				Quelques outils utiles:
-			</p>
-			<ul>
-				<li>[link:http://msdf-bmfont.donmccurdy.com/ msdf-bmfont-web] <i>(web-based)</i></li>
-				<li>[link:https://github.com/soimy/msdf-bmfont-xml msdf-bmfont-xml] <i>(ligne de commande)</i></li>
-				<li>[link:https://github.com/libgdx/libgdx/wiki/Hiero hiero] <i>(applications desktop)</i></li>
-			</ul>
-		</div>
-
-
-		<h2>7. Troika Text</h2>
-		<div>
-			<p>
-				Le package [link:https://www.npmjs.com/package/troika-three-text troika-three-text] effectue un rendu
-				de qualité et anti-aliasé des textes, utilisant une technique similaire à BMFonts, mais fonctionne directement avec n'importe quel fichier de font .TTF
-				ou .WOFF pour que vous n'ayez pas à pré-générer une texture glyph hors-ligne. Il ajoute également des fonctionnalités
-				comme:
-			</p>
-			<ul>
-				<li>Des effets comme les strokes, les ombres portées, et les courbures</li>
-				<li>La capacité d'appliquer n'importe quel matériau three.js, même un ShaderMaterial customisé</li>
-				<li>Le support des ligatures de fonts, des scripts pour les lettres jointes, et un layout bi-directionnel de droite-à-gauche</li>
-				<li>Une optimisation pour les grandes quantités de textes dynamiques, en réalisant la plupart du travail en dehors du thread principal dans un web worker</li>
-			</ul>
-		</div>
-
-
-	</body>
-</html>

docs/manual/fr/introduction/Drawing-lines.html

@@ -1,64 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>Dessiner des lignes ([name])</h1>
-		<div>
-			<p>
-				Disons que vous voulez dessiner une ligne ou un cercle, pas un wireframe [page:Mesh].
-				Premièrement nous devons préparer le [page:WebGLRenderer renderer], [page:Scene scene] et la caméra (voir la page Créer une scène).
-			</p>
-
-			<p>Voici le code que nous allons utiliser:</p>
-			<code>
-const renderer = new THREE.WebGLRenderer();
-renderer.setSize( window.innerWidth, window.innerHeight );
-document.body.appendChild( renderer.domElement );
-
-const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
-camera.position.set( 0, 0, 100 );
-camera.lookAt( 0, 0, 0 );
-
-const scene = new THREE.Scene();
-			</code>
-			<p>La prochaine chose que nous allons faire est définir un matériau (material). Pour les lignes, nous devons utiliser [page:LineBasicMaterial] ou [page:LineDashedMaterial].</p>
-			<code>
-//create a blue LineBasicMaterial
-const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
-			</code>
-
-			<p>
-				Après le matériau, nous devons utiliser une forme (geometry) avec quelques sommets:
-			</p>
-
-			<code>
-const points = [];
-points.push( new THREE.Vector3( - 10, 0, 0 ) );
-points.push( new THREE.Vector3( 0, 10, 0 ) );
-points.push( new THREE.Vector3( 10, 0, 0 ) );
-
-const geometry = new THREE.BufferGeometry().setFromPoints( points );
-			</code>
-
-			<p>Notez que les lignes sont tracées entre chaque paire consécutive de sommets, mais pas entre la première et la deuxième (la ligne n'est pas fermée).</p>
-
-			<p>Maintenant que nous avons les points pour deux lignes et un matériau, nous pouvons les assembler pour former une ligne.</p>
-			<code>
-const line = new THREE.Line( geometry, material );
-			</code>
-			<p>Il ne manque qu'à l'ajouter à la scène et appeler [page:WebGLRenderer.render render].</p>
-
-			<code>
-scene.add( line );
-renderer.render( scene, camera );
-			</code>
-
-			<p>Vous devez maintenant voir une flèche pointant vers le haut, faite de deux lignes bleues.</p>
-		</div>
-	</body>
-</html>

docs/manual/fr/introduction/FAQ.html

@@ -1,60 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>[name]</h1>
-
-		<h2>Quel format de modèle 3D est le mieux supporté?</h2>
-		<div>
-			<p>
-				Le format recommandé pour l'import et l'export de modèles est glTF (GL Transmission Format). Parce que glTF est ciblé sur la rapidité du temps d'exécution, le format est compact et rapide à charger.
-			</p>
-			<p>
-				three.js fournit des loaders pour plusieurs autres formats populaires comme FBX, Collada ou OBJ. Néanmoins, vous devez toujours essayer d'établir un workflow basé sur glTF dans vos projets. Pour plus d'informations, voir [link:#manual/introduction/Loading-3D-models loading 3D models].
-			</p>
-		</div>
-
-		<h2>Pourquoi y a-t-il des tags meta viewport dans les exemples?</h2>
-		<div>
-				<code>&lt;meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"&gt;</code>
-
-				<p>Ces tags contrôlent la taille du viewport et l'échelle pour les navigateurs mobiles (où le contenu de la page peut être rendu à des tailles différentes de celle du viewport visible).</p>
-
-				<p>[link:https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html Safari: Using the Viewport]</p>
-
-				<p>[link:https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag MDN: Using the viewport meta tag]</p>
-		</div>
-
-		<h2>Comment conserver l'échelle de la scène au resize?</h2>
-		<p>
-			Nous voulons que tous les objets, peu importe leur distance à la caméra, conservent leur taille, même si la fenêtre est redimensionnée.
-
-			L'équation clé pour résoudre ce problème est la formule suivante, concernant la hauteur visible à une distance donnée:
-
-			<code>
-visible_height = 2 * Math.tan( ( Math.PI / 180 ) * camera.fov / 2 ) * distance_from_camera;
-			</code>
-			Si nous augmentons la hauteur de la fenêtre d'un certain pourcentage, alors nous souhaitons que la hauteur visible à toutes distances soit augmentée
-			du même pourcentage.
-
-			Cela ne peut pas être fait en changeant la position de la camera. Il faut plutôt changer le champ de vision de celle-ci.
-			[link:http://jsfiddle.net/Q4Jpu/ Example].
-		</p>
-
-		<h2>Pourquoi une partie de mon objet est invisible?</h2>
-		<p>
-			Cela peut être causé par le face culling. Les faces ont une orientation qui décident quel côté est lequel. Et le culling retire la face arrière dans des circonstances normales. Pour voir si c'est bien votre problème, changez la propriété material side pour THREE.DoubleSide.
-			<code>material.side = THREE.DoubleSide</code>
-		</p>
-
-		<h2>Pourquoi three.js retourne quelques fois des valeurs étranges pour des inputs invalides?</h2>
-		<p>
-			Pour des raisons de performances, three.js ne valide pas les inputs dans la plupart des cas. Il en va de la responsabilité de votre application de vérifier que tous les inputs sont valides.
-		</p>
-	</body>
-</html>

docs/manual/fr/introduction/How-to-create-VR-content.html

@@ -1,81 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-
-<head>
-	<meta charset="utf-8">
-	<base href="../../../" />
-	<script src="page.js"></script>
-	<link type="text/css" rel="stylesheet" href="page.css" />
-</head>
-
-<body>
-	<h1>Créer du contenu VR ([name])</h1>
-
-	<p>
-		Ce guide fournit une brève vue d'ensemble des composants basiques d'une application VR web
-		faite avec three.js.
-	</p>
-
-	<h2>Workflow</h2>
-
-	<p>
-		Premièrement, vous devez inclure [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/webxr/VRButton.js VRButton.js]
-		dans votre projet.
-	</p>
-
-	<code>
-import { VRButton } from 'three/addons/webxr/VRButton.js';
-	</code>
-
-	<p>
-		*VRButton.createButton()* fait deux choses importantes: Cela crée un bouton qui indique
-		la compatibilité VR. De plus, cela initie une session VR si l'utilisateur active le bouton. La seule chose que vous avez
-		à faire est d'ajouter la ligne de code suivante à votre application.
-	</p>
-
-	<code>
-document.body.appendChild( VRButton.createButton( renderer ) );
-	</code>
-
-	<p>
-		Ensuite, vous devez dire à votre instance de `WebGLRenderer` d'activer le rendu XR.
-	</p>
-
-	<code>
-renderer.xr.enabled = true;
-	</code>
-
-	<p>
-		Finalement, vous n'avez plus qu'à ajuster votre boucle d'animation étant donné que nous ne pouvons pas utiliser notre fonction bien aimée
-		*window.requestAnimationFrame()*. Pour les projets VR nous utilisons [page:WebGLRenderer.setAnimationLoop setAnimationLoop].
-		Le code minimal ressemble à cela:
-	</p>
-
-	<code>
-renderer.setAnimationLoop( function () {
-
-	renderer.render( scene, camera );
-
-} );
-	</code>
-
-	<h2>Étapes Suivantes</h2>
-
-	<p>
-		Jetez un coup d'oeil à un des exemples officiels WebVR pour voir le workflow en action.<br /><br />
-
-		[example:webxr_xr_ballshooter WebXR / XR / ballshooter]<br />
-		[example:webxr_xr_cubes WebXR / XR / cubes]<br />
-		[example:webxr_xr_dragging WebXR / XR / dragging]<br />
-		[example:webxr_xr_paint WebXR / XR / paint]<br />
-		[example:webxr_xr_sculpt WebXR / XR / sculpt]<br />
-		[example:webxr_vr_panorama_depth WebXR / VR / panorama_depth]<br />
-		[example:webxr_vr_panorama WebXR / VR / panorama]<br />
-		[example:webxr_vr_rollercoaster WebXR / VR / rollercoaster]<br />
-		[example:webxr_vr_sandbox WebXR / VR / sandbox]<br />
-		[example:webxr_vr_video WebXR / VR / video]
-	</p>
-
-</body>
-
-</html>

docs/manual/fr/introduction/How-to-dispose-of-objects.html

@@ -1,124 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-
-<head>
-	<meta charset="utf-8">
-	<base href="../../../" />
-	<script src="page.js"></script>
-	<link type="text/css" rel="stylesheet" href="page.css" />
-</head>
-
-<body>
-	<h1>Supprimer un objet ([name])</h1>
-
-	<p>
-		Un des aspects importants dans l'amélioration des performances et qui permet d'éviter les fuites de mémoire dans votre application est la suppression des entités non-utilisées de la librairie.
-		Dès que vous créez une instance d'un type *three.js*, vous allouez une certaine quantité de mémoire. Toutefois, *three.js* crée pour certains objets
-		comme les formes ou les matériaux, des entités WebGL associées comme des buffers ou des programmes de shaders qui sont nécessaires au rendu. Il est important de
-		souligner que ces objets ne sont pas automatiquement débarrassés. Au contraire, l'application doit utiliser une API particulière pour libérer ce genre de ressources.
-		Ce guide vous fournit une brève vue d'ensemble du fonctionnement de cette API et des objets considérés comme pertinents dans ce contexte.
-	</p>
-
-	<h2>Formes</h2>
-
-	<p>
-		Une forme représente généralement des informations concernant des sommets présentés comme un ensemble d'attributs. *three.js* crée en interne un objet de type [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLBuffer WebGLBuffer]
-		pour chaque attribut. Ces entités sont supprimées uniquement si vous appelez [page:BufferGeometry.dispose](). Si une forme devient obsolète dans votre application,
-		exécutez cette méthode pour libérer toutes les ressources associées.
-	</p>
-
-	<h2>Matériaux</h2>
-
-	<p>
-		Un matériau définit comment un objet est rendu. *three.js* utilise les informations de la définition du matériau pour construire un programme de shader pour le rendu.
-		Les programmes de shader peuvent être supprimés seulement si leur matériau respectif est supprimé. Dans un souci de performances, *three.js* essaye de réutiliser des
-		programmes de shaders existants si possible. Donc un programme de shader est supprimé uniquement si tous les matériaux associés sont supprimés. Vous pouvez indiquer la suppression d'un matériau en
-		exécutant [page:Material.dispose]().
-	</p>
-
-	<h2>Textures</h2>
-
-	<p>
-		La suppression d'un matériau n'a aucun effet sur les textures. Elles sont gérées séparément étant donné qu'une seule texture peut-être utilisée par plusieurs matériaux au même moment.
-		Chaque fois que vous créez une instance de [page:Texture], three.js crée en interne une instance de [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture WebGLTexture].
-		Comme les buffers, cet objet ne peut-être supprimé qu'en appelant [page:Texture.dispose]().
-	</p>
-
-	<p>
-		Si vous utilisez une `ImageBitmap` comme source de données pour une texture, vous devez appeler [link:https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap/close ImageBitmap.close]() au niveau de l'application pour libérer toutes les ressources côté processeur.
-		Un appel automatisé de `ImageBitmap.close()` dans [page:Texture.dispose]() n'est pas possible, étant donné que le bitmap devient inutilisable, et que le moteur n'a aucun moyen de savoir si l'image bitmap est utilisée ailleurs.
-	</p>
-
-	<h2>Cibles de rendu</h2>
-
-	<p>
-		Les objets de type [page:WebGLRenderTarget] n'allouent pas qu'une instance de [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture WebGLTexture] mais également
-		[link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLFramebuffer WebGLFramebuffer]s et [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderbuffer WebGLRenderbuffer]s
-		pour réaliser des rendus customisés. Ces objets ne sont désalloués qu'en exécutant [page:WebGLRenderTarget.dispose]().
-	</p>
-
-	<h2>Divers</h2>
-
-	<p>
-		Il y a d'autres classes du dossier example comme controls ou les effets de post processings qui fournissent la méthode `dispose()` pour retirer des event listeners internes
-		ou des cibles de rendu. En général, il est recommandé de jeter un coup d'oeil à l'API ou à la documentation d'une classe en cherchant un `dispose()`. Si il existe, vous devez l'utiliser pour faire votre petit ménage après utilisation.
-	</p>
-
-	<h2>FAQ</h2>
-
-	<h3>Pourquoi *three.js* ne peut pas supprimer automatiquement les objets?</h3>
-
-	<p>
-		Cette question a été posée énormément de fois par la communauté, il est donc important de clarifier ce sujet. Le fait est que *three.js* ne connaît pas la durée de vie ou la portée des
-		entités comme les formes ou les matériaux créés par les utilisateurs. Il en va de la responsabilité de l'application. Par exemple, si un matériau n'est pas utilisé pour le rendu pour l'instant,
-		il peut être nécessaire pour le prochain frame. Donc si l'application décide qu'un certain objet peut-être supprimé, elle doit en notifier le moteur en appelant la méthode
-		`dispose()`.
-	</p>
-
-	<h3>Retirer un mesh de la scène supprime également sa forme et son matériau?</h3>
-
-	<p>
-		Non, vous devez explicitement supprimer la forme et le matériau via *dispose()*. Gardez à l'esprit que les formes et matériaux peuvent être partagés entre plusieurs objets 3D comme les meshes.
-	</p>
-
-	<h3>Est-ce que *three.js* fournit des informations à propos des objets en cache?</h3>
-
-	<p>
-		Oui. Il est possible d'interroger [page:WebGLRenderer.info], qui est une propriété spéciale du moteur de rendu avec une série d'informations et de statistiques à propos de l'usage graphique
-		et du processus de rendu. Entre autres, cela peut vous donner des informations comme le nombre de textures, de formes et de programmes de shaders stockés en interne. Si vous remarquez des problèmes de performance
-		dans votre application, une bonne idée serait de débugger cette propriété pour facilement identifier une fuite de mémoire.
-	</p>
-
-	<h3>Que se passe t-il quand on appelle `dispose()` sur une texture mais que l'image n'est pas encore chargée?</h3>
-
-	<p>
-		Des ressources internes sont allouées pour une texture uniquement si l'image est entièrement chargée. Si vous supprimez une texture avant que l'image soit chargée,
-		rien ne se produit. Aucune ressource n'était allouée il n'y a donc rien à libérer.
-	</p>
-
-	<h3>Que se passe t-il quand on appelle `dispose()` puis qu'on utilise l'objet plus tard?</h3>
-
-	<p>
-		Les ressources internes libérées sont réallouées par le moteur. Il n'y aura donc pas d'erreur d'exécution mais vous remarquerez probablement un impact négatif sur les performances au frame actuel,
-		particulièrement quand le programme de shaders doit-être compilé.
-	</p>
-
-	<h3>Comment gérer les objets *three.js* dans mon application? Quand dois-je supprimer les objets?</h3>
-
-	<p>
-		En général, il n'y a pas de recommandation universelle pour cette question. Savoir si l'utilisation de `dispose()` est appropriée dépend grandement des cas d'utilisation. Il est important de souligner qu'il
-		n'est pas nécessaire de toujours se débarrasser des objets. Un bon exemple serait un jeu avec de multiple niveaux. Le bon moment pour supprimer les objets serait à un changement
-		de niveau. L'application devrait traverser les anciennes scènes et supprimer tous les matériaux, les formes et les textures obsolètes. Comme mentionné dans la section précédente, supprimer des
-		objets toujours utilisés ne produit pas d'erreur d'exécution. La pire chose qui pourrait se produire serait une baisse de la performance à un seul frame.
-	</p>
-
-	<h2>Exemples qui montrent l'utilisation de dispose()</h2>
-
-	<p>
-		[example:webgl_test_memory WebGL / test / memory]<br />
-		[example:webgl_test_memory2 WebGL / test / memory2]<br />
-	</p>
-
-</body>
-
-</html>

docs/manual/fr/introduction/How-to-update-things.html

@@ -1,221 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>Mettre les éléments à jour ([name])</h1>
-		<div>
-			<p>Tous les objets mettent par défaut automatiquement leur matrice à jour si ils ont été ajoutés dans la scène avec</p>
-			<code>
-const object = new THREE.Object3D();
-scene.add( object );
-			</code>
-			ou si ils sont l'enfant d'un autre objet qui a été ajouté à la scène:
-			<code>
-const object1 = new THREE.Object3D();
-const object2 = new THREE.Object3D();
-
-object1.add( object2 );
-scene.add( object1 ); //object1 and object2 will automatically update their matrices
-			</code>
-		</div>
-
-		<p>Cependant, si vous savez que l'objet va être statique, vous pouvez désactiver ce comportement et mettre la matrice à jour manuellement quand le besoin se présente.</p>
-
-		<code>
-object.matrixAutoUpdate = false;
-object.updateMatrix();
-		</code>
-
-		<h2>BufferGeometry</h2>
-		<div>
-			<p>
-				Les BufferGeometries stockent des informations comme (la position des sommets, l'indice des faces, les normales, les couleurs,
-				les UVs et tout autre attribut customisé) dans [page:BufferAttribute buffers] - c'est un,
-				[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays typed arrays].
-				Ceci les rend généralement plus rapides que les Geometries standard, le contrecoup est qu'il est plus difficile de les
-				utiliser.
-			</p>
-			<p>
-				En ce qui concerne la mise à jour des BufferGeometries, la chose la plus importante à comprendre est que
-				vous ne pouvez pas changer la taille des buffers (c'est très coûteux, en réalité, c'est équivalent à créer une nouvelle forme).
-				Vous pouvez toutefois mettre à jour le contenu des buffers.
-			</p>
-			<p>
-				Ce qui signifie que si vous savez qu'un attribut de votre BufferGeometry va augmenter, disons le nombre de sommets,
-				vous devez pré-allouer un buffer assez grand pour contenir n'importe quel nouveau sommet qui pourra être créé. Évidemment,
-				cela signifie également qu'il y aura une taille maximale pour votre BufferGeometry - il n'y a
-				aucun moyen de créer une BufferGeometry qui peut être étendue à l'infini d'une manière efficiente.
-			</p>
-			<p>
-				Nous utiliserons l'exemple d'une ligne qui est étendue à chaque rendu. Nous allouerons de l'espace
-				dans le buffer pour 500 sommets mais nous n'en dessinerons que deux au début, en utilisant [page:BufferGeometry.drawRange].
-			</p>
-			<code>
-const MAX_POINTS = 500;
-
-// geometry
-const geometry = new THREE.BufferGeometry();
-
-// attributes
-const positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
-geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
-
-// draw range
-const drawCount = 2; // draw the first 2 points, only
-geometry.setDrawRange( 0, drawCount );
-
-// material
-const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
-
-// line
-const line = new THREE.Line( geometry, material );
-scene.add( line );
-			</code>
-		 	<p>
-				Ensuite nous ajouterons aléatoirement des points à l'aide d'un pattern comme:
-			</p>
-			<code>
-const positionAttribute = line.geometry.getAttribute( 'position' );
-
-let x = 0, y = 0, z = 0;
-
-for ( let i = 0; i < positionAttribute.count; i ++ ) {
-
-	positionAttribute.setXYZ( i, x, y, z );
-
-	x += ( Math.random() - 0.5 ) * 30;
-	y += ( Math.random() - 0.5 ) * 30;
-	z += ( Math.random() - 0.5 ) * 30;
-
-}
-			</code>
-			<p>
-				Si vous voulez changer le <em>nombre de points</em> rendus après le premier rendu, faites ainsi :
-			</p>
-			<code>
-line.geometry.setDrawRange( 0, newValue );
-			</code>
-			<p>
-				Si vous voulez changer la valeur des données de position après le premier rendu, vous devez
-				régler le flag needsUpdate ainsi :
-			</p>
-			<code>
-positionAttribute.needsUpdate = true; // required after the first render
-			</code>
-
-			<p>
-				Si vous changez les valeurs de la donnée de position après le premier rendu, vous devez
-				recalculer les volumes englobants de telle sorte que les autres fonctionnalités du moteur comme
-				le frustrum culling ou les helpers le prenne en compte correctement.
-			</p>
-			<code>
-line.geometry.computeBoundingBox();
-line.geometry.computeBoundingSphere();
-			</code>
-
-			<p>
-				[link:https://jsfiddle.net/t4m85pLr/1/ Voici un fiddle] montrant une ligne animée, que vous pouvez adapter comme vous le souhaitez.
-			</p>
-
-			<h3>Exemples</h3>
-
-			<p>
-				[example:webgl_custom_attributes WebGL / custom / attributes]<br />
-				[example:webgl_buffergeometry_custom_attributes_particles WebGL / buffergeometry / custom / attributes / particles]
-			</p>
-
-		</div>
-
-		<h2>Matériaux</h2>
-		<div>
-			<p>Toutes les valeurs uniformes peuvent être changées librement(e.g. couleurs, textures, opacité, etc), les valeurs sont envoyées aux shaders à chaque frame.</p>
-
-			<p>De plus, les paramètres en relation avec GLstate peuvent changer à tout moment (depthTest, blending, polygonOffset, etc).</p>
-
-			<p>Les propriétés suivantes ne peuvent pas être changées facilement durant l'exécution (une fois que le matériau a été rendu au moins une fois):</p>
-			<ul>
-				<li>numbers and types of uniforms</li>
-				<li>présence ou non de
-					<ul>
-						<li>texture</li>
-						<li>fog</li>
-						<li>vertex colors</li>
-						<li>morphing</li>
-						<li>shadow map</li>
-						<li>alpha test</li>
-						<li>transparent</li>
-					</ul>
-				</li>
-			</ul>
-
-			<p>Des changements dans ces propriétés exigent la création d'un nouveau programme de shader. Vous devrez définir</p>
-			<code>material.needsUpdate = true</code>
-
-			<p>Gardez à l'esprit que cela risque d'être assez lent et de causer des saccades dans le framerate (particulièrement sur Windows, étant donné que la compilation de shader est plus lente dans DirectX que dans OpenGL).</p>
-
-			<p>Pour des expériences plus fluides vous pouvez émuler des changements dans ces fonctionnalités pour qu'elles contiennent un genre de valeurs "factices"  comme zéro en intensité de lumières, des textures blanches ou zéro brouillard.</p>
-
-			<p>Vous pouvez librement changer le matériau utilisé pour les différents morceaux de formes, mais pas comment un objet est divisé en morceaux (selon le matériau des faces). </p>
-
-			<h3>Si vous avez besoin d'avoir différentes configurations de matériaux durant l'exécution:</h3>
-			<p>Si le nombre de matériaux / morceaux est petit, vous pouvez pré-diviser l'objet préalablement (e.g. cheveux / visage / corps / vêtements supérieurs / pantalon pour un humain, avant / côtés / toit / fenêtres / pneu / intérieur pour une voiture.). </p>
-
-			<p>Si le nombre est grand (e.g. chaque face peut potentiellement être différente), songez à utiliser une autre solution, comme l'utilisation d'attributs / textures pour avoir une apparence différente par face.</p>
-
-			<h3>Exemples</h3>
-			<p>
-				[example:webgl_materials_car WebGL / materials / car]<br />
-				[example:webgl_postprocessing_dof WebGL / webgl_postprocessing / dof]
-			</p>
-		</div>
-
-
-		<h2>Textures</h2>
-		<div>
-			<p>Les images, canvas, vidéos et les données des textures doivent avoir le flag suivant si elles sont changées:</p>
-			<code>
-				texture.needsUpdate = true;
-			</code>
-			<p>La cible du rendu se met automatiquement à jour.</p>
-
-			<h3>Exemples</h3>
-			<p>
-				[example:webgl_materials_video WebGL / materials / video]<br />
-				[example:webgl_rtt WebGL / rtt]
-			</p>
-
-		</div>
-
-
-		<h2>Caméras</h2>
-		<div>
-			<p>La position de la caméra et sa cible sont automatiquement mises à jour. Si vous devez changer</p>
-			<ul>
-				<li>
-					fov
-				</li>
-				<li>
-					aspect
-				</li>
-				<li>
-					near
-				</li>
-				<li>
-					far
-				</li>
-			</ul>
-			<p>
-				alors vous aurez besoin de recalculer la matrice de projection:
-			</p>
-			<code>
-camera.aspect = window.innerWidth / window.innerHeight;
-camera.updateProjectionMatrix();
-			</code>
-		</div>
-	</body>
-</html>

docs/manual/fr/introduction/How-to-use-post-processing.html

@@ -1,114 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>Utiliser le post-processing ([name])</h1>
-
-		<p>
-			Plusieurs applications three.js effectuent un rendu de leurs objets 3D directement dans la scène. Parfois, vous souhaitez appliquer un ou plusieurs
-			effects graphiques comme la profondeur de champ, le flou lumineux, du grain, ou différents types d'Anti-aliasing. Le post-processing est une approche très utilisée
-			pour implémenter de tels effets. Premièrement, la scène est rendue dans une cible de rendu qui représente un buffer dans la mémoire de la carte vidéo.
-			A la prochaine étape un ou plusieurs effets de post-processing appliquent des filtres au buffer de l'image qui est finalement rendue à
-			l'écran.
-		</p>
-		<p>
-			three.js fournit une solution complète de post-processing via [page:EffectComposer] pour implémenter un tel workflow.
-		</p>
-
-		<h2>Workflow</h2>
-
-		<p>
-			La première étape est d'importer tous les fichiers nécessaires du dossier exemple. Le guide part du principe que vous utilisez le
-			[link:https://www.npmjs.com/package/three npm package] officiel de three.js. Pour notre démo basique, nous avons besoin des fichiers suivants.
-		</p>
-
-		<code>
-		import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
-		import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
-		import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
-		import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
-		</code>
-
-		<p>
-			Après avoir importé tous les fichiers correctement, nous pouvons créer notre composer en lui passant une instance de [page:WebGLRenderer].
-		</p>
-
-		<code>
-		const composer = new EffectComposer( renderer );
-		</code>
-
-		<p>
-			Lors de l'utilisation d'un composer, il est nécessaire de changer la boucle d'animation de l'application. Au lieu d'appeler la méthode de rendu
-			[page:WebGLRenderer], nous devons utiliser appeler [page:EffectComposer].
-		</p>
-
-		<code>
-		function animate() {
-
-			requestAnimationFrame( animate );
-
-			composer.render();
-
-		}
-		</code>
-
-		<p>
-			Notre composer est maintenant prêt, il est donc possible de configurer la chaîne d'effets de post-processing. Ces effets (passes) sont chargés de la création
-			de l'apparence visuelle finale de l'application. Ils sont traités dans l'ordre de leur ajout/insertion. Dans notre exemple, l'instance de `RenderPass` est exécutée en premier, puis l'instance de `GlitchPass` et enfin `OutputPass`. Le dernier effet activé de la chaîne est automatiquement rendu dans la scène. Le setup
-			des effets ressemble à ça:
-		</p>
-
-		<code>
-		const renderPass = new RenderPass( scene, camera );
-		composer.addPass( renderPass );
-
-		const glitchPass = new GlitchPass();
-		composer.addPass( glitchPass );
-
-		const outputPass = new OutputPass();
-		composer.addPass( outputPass );
-		</code>
-
-		<p>
-			`RenderPass` est normalement placé au début de la chaîne pour fournir la scène rendue en tant qu'entrée pour les prochaines étapes de post-processing. Dans notre cas,
-			`GlitchPass` va utiliser les données de l'image pour appliquer un effet de glitch.  `OutputPass` est généralement le dernier passage de la chaîne qui effectue la conversion de l'espace colorimétrique sRGB et le mappage tonal optionnel.
-			Regardez cet [link:https://threejs.org/examples/webgl_postprocessing_glitch exemple live] pour voir cela en action.
-		</p>
-
-		<h2>Effets Intégrés</h2>
-
-		<p>
-			Vous pouvez utiliser une large palette d'effets de post-processing pré-définis fournis par le moteur. Ils se trouvent dans le dossier
-			[link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing postprocessing].
-		</p>
-
-		<h2>Effets Personnalisés</h2>
-
-		<p>
-			Parfois vous voulez écrire un shader de post-processing personnalisé et l'inclure dans les effets (passes) de post-processing. Dans ce scénario,
-			vous pouvez utiliser `ShaderPass`. Après avoir importé le fichier et votre shader personnalisé, vous pouvez utiliser le code suivant pour mettre en place l'effet (pass).
-		</p>
-
-		<code>
-		import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
-		import { LuminosityShader } from 'three/addons/shaders/LuminosityShader.js';
-
-		// later in your init routine
-
-		const luminosityPass = new ShaderPass( LuminosityShader );
-		composer.addPass( luminosityPass );
-		</code>
-
-		<p>
-			Ce dépôt fournit un fichier appelé [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/shaders/CopyShader.js CopyShader] qui est
-			une bonne base de code pour créer votre propose shader personnalisé. `CopyShader` copie simplement le contenu de l'image du buffer de l'[page:EffectComposer]
-			à son buffer d'écriture sans y appliquer aucun effet.
-		</p>
-
-	</body>
-</html>

docs/manual/fr/introduction/Installation.html

@@ -1,152 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>[name]</h1>
-
-		<p>
-			Vous pouvez installer three.js avec [link:https://www.npmjs.com/ npm] et d'autres outils de build modernes, ou commencer rapidement avec just un hébergement static ou un CDN. Pour la plupart des utilisateurs, installer depuis npm est le meilleur choix.
-		</p>
-
-		<p>
-			Peu importe votre choix, soyez cohérents et importez tous vos fichiers avec la même version de la librairie. Mélanger des fichiers de différentes sources peut causer une duplication de certaines parties de code, ou même casser l'application d'une manière imprédictible.
-		</p>
-
-		<p>
-			Toutes les méthodes d'installation de three.js dépendent des Modules ES (voir [link:https://eloquentjavascript.net/10_modules.html#h_hF2FmOVxw7 Eloquent JavaScript: ECMAScript Modules]), ce qui vous permet d'inclure uniquement les parties requises de la librairie dans le projet final.
-		</p>
-
-		<h2>Installer depuis npm</h2>
-
-		<p>
-			Pour installer le module npm [link:https://www.npmjs.com/package/three three], ouvrez une fenêtre de terminal dans le dossier de votre projet et lancez la commande suivante:
-		</p>
-
-		<code>
-		npm install three
-		</code>
-
-		<p>
-			Le package sera téléchargé et installé. Puis vous pouvez l'importer dans votre projet:
-		</p>
-
-		<code>
-		// Option 1: Import the entire three.js core library.
-		import * as THREE from 'three';
-
-		const scene = new THREE.Scene();
-
-
-		// Option 2: Import just the parts you need.
-		import { Scene } from 'three';
-
-		const scene = new Scene();
-		</code>
-
-		<p>
-			En l'installant depuis npm, vous utiliserez quasiment toujours une sorte de [link:https://eloquentjavascript.net/10_modules.html#h_zWTXAU93DC bundling tool] pour combiner tous les packages dont votre projet a besoin en un seul fichier JavaScript. N'importe quel bundler JavaScript modern peut être utilisé avec three.js, le choix le plus populaire est [link:https://webpack.js.org/ webpack].
-		</p>
-
-		<p>
-			Toutes les fonctionnalités ne sont pas directement accédées depuis le module <em>three</em> (également appelé "bare import"). D'autres parties populaires de la librairie — comme les contrôles, les loaders, et les effets de post-processing — doivent être importés depuis le sous-dossier [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm]. Pour en apprendre plus, consulter <em>Examples</em> ci-dessous.
-		</p>
-
-		<p>
-			Apprenez-en plus à propos des modules npm depuis [link:https://eloquentjavascript.net/20_node.html#h_J6hW/SmL/a Eloquent JavaScript: Installation avec npm].
-		</p>
-
-		<h2>Installer depuis un CDN ou un hébergement statique</h2>
-
-		<p>
-			La librairie three.js peut être utilisée sans aucun build system, soit en uploadant les fichiers sur votre propre server web ou en utilisant un CDN existant. Parce que la librairie repose sur les modules ES, n'importe quel script qui y fait référence doit utiliser le <em>type="module"</em> comme montré ci-dessous.
-			Il est également requis de définir une Import Map qui effectue la résolution du bare module specifier `three`.
-		</p>
-
-		<code>
-		&lt;script type="importmap">
-		  {
-		    "imports": {
-		      "three": "https://cdn.jsdelivr.net/npm/three@&lt;version&gt;/build/three.module.js"
-		    }
-		  }
-		&lt;/script>
-
-		&lt;script type="module">
-
-		  import * as THREE from 'three';
-
-		  const scene = new THREE.Scene();
-
-		&lt;/script>
-		</code>
-
-		<h2>Addons</h2>
-
-		<p>
-			Le noyau de three.js est concentré sur les composants les plus importans d'un moteur 3D. Plusieurs autres composants utiles - comme les contrôles, les loaders, et les effets de post-processing - font partie du dossier [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm]. Ils sont désignés comme "exemples", parce que, en plus de pouvoir les utiliser directement tel qu'ils sont, ils sont aussi supposés être remixés et customisés. Ces composants sont toujours synchronisés avec le noyau de la librarie, là où des packages tiers similaires sur npm sont maintenus par différentes personnes et peuvent ne pas être à jour.
-		</p>
-
-		<p>
-			Les addons n'ont pas besoin d'être <em>installés</em> séparément, mais doivent être <em>importés</em> séparément. Si three.js a été installé avec npm, vous pouvez charger le composant [page:OrbitControls] avec:
-		</p>
-
-
-		<code>
-		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-
-		const controls = new OrbitControls( camera, renderer.domElement );
-		</code>
-
-		<p>
-			Si three.js a été installé depuis un CDN, utilisez le même CDN pour installer d'autres composants:
-		</p>
-
-		<code>
-		&lt;script type="importmap">
-			{
-			"imports": {
-				"three": "https://cdn.jsdelivr.net/npm/three@&lt;version&gt;/build/three.module.js",
-				"three/addons/": "https://cdn.jsdelivr.net/npm/three@&lt;version&gt;/examples/jsm/"
-			}
-			}
-		&lt;/script>
-
-		&lt;script type="module">
-
-			import * as THREE from 'three';
-			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-
-			const controls = new OrbitControls( camera, renderer.domElement );
-
-		&lt;/script>
-		</code>
-
-		<p>
-			Il est important que tous les fichiers utilisent la même version. N'importez pas différents addons de différentes versions, ou n'utilisez pas d'addons d'une version de three.js différente de celle de la librarie elle-même.
-		</p>
-
-		<h2>Compatibilité</h2>
-
-		<h3>Imports CommonJS</h3>
-
-		<p>
-			Alors que la plupart des bundlers JavaScript modernes supportent les modules ES par défaut, cela peut ne pas être le cas de certains build tools plus anciens. Dans ce cas, vous pouvez probablement configurer le bundler pour qu'il comprenne les modules ES: [link:http://browserify.org/ Browserify] a just besoin du plugin [link:https://github.com/babel/babelify babelify], par exemple.
-		</p>
-
-		<h3>Node.js</h3>
-
-		<p>
-			Parce que three.js est construit pour le web, il dépend de navigateurs et d'APIs DOM qui n'existent pas toujours dans Node.js. Certains de ces problèmes peuvent être résolus en utilisant des morceaux de code comme [link:https://github.com/stackgl/headless-gl headless-gl],  ou en remplaçant des composants comme [page:TextureLoader] avec des alternatives customisées. D'autres APIs DOM peuvent être profondément entrelacées avec le code qui les utilises, et il sera compliqué de le modifier. Nous soutenons les pull requests simples et maintenables pour améliorer le support de Node.js, mais recommandons d'ouvrir une issue pour parler de vos améliorations avant.
-		</p>
-
-		<p>
-			Faites attention à bien ajouter `{ "type": "module" }` à votre `package.json` pour autoriser les modules ES6 dans votre projet Node.
-		</p>
-
-	</body>
-</html>

docs/manual/fr/introduction/Libraries-and-Plugins.html

@@ -1,117 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-	<head>
-		<meta charset="utf-8" />
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>Librairies et Plugins ([name])</h1>
-
-		<p class="desc">
-			Ici sont listés des plugins et librairies développés en externe et compatibles avec three.js. Cette
-			liste et les packages associés sont maintenus par la communauté et ne sont pas forcément
-			à jour. Si vous souhaitez mettre à jour cette liste, faites une PR!
-		</p>
-
-		<h3>Physique</h3>
-
-		<ul>
-			<li>[link:https://github.com/lo-th/Oimo.js/ Oimo.js]</li>
-			<li>[link:https://enable3d.io/ enable3d]</li>
-			<li>[link:https://github.com/kripken/ammo.js/ ammo.js]</li>
-			<li>[link:https://github.com/pmndrs/cannon-es cannon-es]</li>
-			<li>[link:https://rapier.rs/ rapier]</li>
-			<li>[link:https://github.com/jrouwe/JoltPhysics.js Jolt]</li>
-		</ul>
-
-		<h3>Postprocessing</h3>
-
-		<p>
-			En plus de [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing official three.js postprocessing effects],
-			du support pour des effets et frameworks additionnels sont disponibles à travers des librairies externes.
-		</p>
-
-		<ul>
-			<li>[link:https://github.com/vanruesc/postprocessing postprocessing]</li>
-		</ul>
-
-		<h3>Intersections et lancers de rayon</h3>
-
-		<ul>
-			<li>[link:https://github.com/gkjohnson/three-mesh-bvh three-mesh-bvh]</li>
-		</ul>
-
-		<h3>Path Tracing</h3>
-
-		<ul>
-			<li>[link:https://github.com/gkjohnson/three-gpu-pathtracer three-gpu-pathtracer]</li>
-		</ul>
-
-		<h3>Formats de fichiers</h3>
-
-		<p>
-			En plus de [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders official three.js loaders],
-			du support pour des formats additionnels sont disponibles à travers des librairies externes.
-		</p>
-
-		<ul>
-			<li>[link:https://github.com/gkjohnson/urdf-loaders/tree/master/javascript urdf-loader]</li>
-			<li>[link:https://github.com/NASA-AMMOS/3DTilesRendererJS 3d-tiles-renderer-js]</li>
-			<li>[link:https://github.com/kaisalmen/WWOBJLoader WebWorker OBJLoader]</li>
-			<li>[link:https://github.com/IFCjs/web-ifc-three IFC.js]</li>
-		</ul>
-
-		<h3>Géométrie</h3>
-
-		<ul>
-			<li>[link:https://github.com/spite/THREE.MeshLine THREE.MeshLine]</li>
-		</ul>
-
-		<h3>Texte 3D et Layout</h3>
-
-		<ul>
-			<li>[link:https://github.com/protectwise/troika/tree/master/packages/troika-three-text troika-three-text]</li>
-			<li>[link:https://github.com/felixmariotto/three-mesh-ui three-mesh-ui]</li>
-		</ul>
-
-		<h3>Systèmes de particules</h3>
-
-		<ul>
-			<li>[link:https://github.com/Alchemist0823/three.quarks three.quarks]</li>
-			<li>[link:https://github.com/creativelifeform/three-nebula three-nebula]</li>
-		</ul>
-
-		<h3>Cinématique inverse</h3>
-
-		<ul>
-			<li>[link:https://github.com/jsantell/THREE.IK THREE.IK]</li>
-			<li>[link:https://github.com/lo-th/fullik fullik]</li>
-			<li>[link:https://github.com/gkjohnson/closed-chain-ik-js closed-chain-ik]</li>
-		</ul>
-
-		<h3>Jeu et IA</h3>
-
-		<ul>
-			<li>[link:https://mugen87.github.io/yuka/ yuka]</li>
-			<li>[link:https://github.com/donmccurdy/three-pathfinding three-pathfinding]</li>
-			<li>[link:https://github.com/isaac-mason/recast-navigation-js recast-navigation-js]</li>
-		</ul>
-
-		<h3>Wrappers et Frameworks</h3>
-
-		<ul>
-			<li>[link:https://aframe.io/ A-Frame]</li>
-			<li>[link:https://lume.io/ Lume] - Éléments HTML pour interface 3D, basé sur Three.</li>
-			<li>[link:https://github.com/pmndrs/react-three-fiber react-three-fiber] - Composants React pour interface 3D, basé sur Three.</li>
-			<li>[link:https://threepipe.org/ threepipe] - Un framework de visualisation 3D polyvalent utilisant Three pour le rendu.</li>
-			<li>[link:https://github.com/ecsyjs/ecsy-three ECSY]</li>
-			<li>[link:https://threlte.xyz/ Threlte] - Des composants Svelte pour interface 3D, basé sur Three.</li>
-			<li>[link:https://needle.tools/ Needle Engine]</li>
-			<li>[link:https://tresjs.org/ tresjs] - Des composants Vue pour interface 3D, basé sur Three.</li>
-			<li>[link:https://giro3d.org Giro3D] - Un framework polyvalent basé sur Three pour la visualisation et l'interaction avec des données géospatiales 2D, 2.5D et 3D.</li>
-		</ul>
-
-	</body>
-</html>

docs/manual/fr/introduction/Loading-3D-models.html

@@ -1,167 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-
-<head>
-	<meta charset="utf-8">
-	<base href="../../../" />
-	<script src="page.js"></script>
-	<link type="text/css" rel="stylesheet" href="page.css" />
-</head>
-
-<body>
-	<h1>Importer des modèles 3D ([name])</h1>
-
-	<p>
-		Les modèles 3D sont disponibles dans des centaines de formats, chacun ayant des objectifs
-		différents, des fonctionnalités assorties, et une complexité variable. Même si
-		<a href="https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders" target="_blank" rel="noopener">
-		three.js fournit plusieurs loaders</a>, choisir le bon format et
-		workflow vous fera gagner du temps et vous épargnera beaucoup de frustration par la suite. Certains formats sont
-		difficiles à appréhender, inefficaces pour les expériences en temps-réel, ou simplement
-		pas entièrement supportés pour le moment.
-	</p>
-
-	<p>
-		Ce guide vous fournit un workflow recommandé pour la plupart des utilisateurs, et des suggestions
-		concernant quoi essayer si les choses ne se déroulent pas comme prévu.
-	</p>
-
-	<h2>Avant de commencer</h2>
-
-	<p>
-		Si vous n'êtes pas familier avec le fait de lancer un serveur local, commencez par
-		[link:#manual/introduction/How-to-run-things-locally how to run things locally].
-		Plusieurs erreurs communes concernant les modèles 3D peuvent-être évitées en hébergeant les fichiers
-		correctement.
-	</p>
-
-	<h2>Workflow recommandé</h2>
-
-	<p>
-		Dans la mesure du possible, nous recommandons l'utilisation de glTF (GL Transmission Format). Les versions
-		<small>.GLB</small> et <small>.GLTF</small> du format sont
-		bien supportées. Étant-donné que glTF se concentre sur la réduction du temps d'exécution du chargement des modèles, il est
-		compact et rapide à transmettre. Les fonctionnalités inclusent sont les meshes, les matériaux,
-		les textures, les skins, les squelettes, les morph targets, les animations, les lumières, et les
-		caméras.
-	</p>
-
-	<p>
-		Les fichiers glTF appartenant au domaine public sont disponibles sur des sites comme
-		<a href="https://sketchfab.com/models?features=downloadable&sort_by=-likeCount&type=models" target="_blank" rel="noopener">
-		Sketchfab</a>, différents outils incluent l'export de glTF:
-	</p>
-
-	<ul>
-		<li><a href="https://www.blender.org/" target="_blank" rel="noopener">Blender</a> par the Blender Foundation</li>
-		<li><a href="https://www.allegorithmic.com/products/substance-painter" target="_blank" rel="noopener">Substance Painter</a> par Allegorithmic</li>
-		<li><a href="https://www.foundry.com/products/modo" target="_blank" rel="noopener">Modo</a> par Foundry</li>
-		<li><a href="https://www.marmoset.co/toolbag/" target="_blank" rel="noopener">Toolbag</a> par Marmoset</li>
-		<li><a href="https://www.sidefx.com/products/houdini/" target="_blank" rel="noopener">Houdini</a> par SideFX</li>
-		<li><a href="https://labs.maxon.net/?p=3360" target="_blank" rel="noopener">Cinema 4D</a> par MAXON</li>
-		<li><a href="https://github.com/KhronosGroup/COLLADA2GLTF" target="_blank" rel="noopener">COLLADA2GLTF</a> par the Khronos Group</li>
-		<li><a href="https://github.com/facebookincubator/FBX2glTF" target="_blank" rel="noopener">FBX2GLTF</a> par Facebook</li>
-		<li><a href="https://github.com/AnalyticalGraphicsInc/obj2gltf" target="_blank" rel="noopener">OBJ2GLTF</a> par Analytical Graphics Inc</li>
-		<li>&hellip;et <a href="http://github.khronos.org/glTF-Project-Explorer/" target="_blank" rel="noopener">beaucoup d'autres</a></li>
-	</ul>
-
-	<p>
-		Si votre outil de prédilection n'inclut pas le support des glTF, pensez à demander
-		aux auteurs d'inclure l'export des glTF, ou postez sur
-		<a href="https://github.com/KhronosGroup/glTF/issues/1051" target="_blank" rel="noopener">the glTF roadmap thread</a>.
-	</p>
-
-	<p>
-		Quand glTF n'est pas utilisable, des formats populaires comme FBX, OBJ, ou COLLADA
-		sont également disponibles et régulièrement maintenus.
-	</p>
-
-	<h2>Charger les modèles</h2>
-
-	<p>
-		Seulement quelques loaders (e.g. [page:ObjectLoader]) sont inclus par défaut dans
-		three.js — les autres doivent être ajoutés individuellement à votre application.
-	</p>
-
-	<code>
-		import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-	</code>
-
-	<p>
-		Une fois que vous avez importé un loader, vous pouvez ajouter un modèle à votre scène. La syntaxe varie selon
-		les loaders — quand vous utilisez un autre format, jetez un oeil à la documentation de ce
-		loader. Pour glTF, l'utilisation avec des scripts globaux doit-être:
-	</p>
-
-	<code>
-		const loader = new GLTFLoader();
-
-		loader.load( 'path/to/model.glb', function ( gltf ) {
-
-			scene.add( gltf.scene );
-
-		}, undefined, function ( error ) {
-
-			console.error( error );
-
-		} );
-	</code>
-
-	<p>
-		Voir [page:GLTFLoader GLTFLoader documentation] pour plus de détails.
-	</p>
-
-	<h2>Dépannage</h2>
-
-	<p>
-		Vous avez passé des heures à modeler votre chef-d'oeuvre artisanal, vous le chargez sur
-		la page web, et — oh non! 😭 Il est tordu, mal coloré, ou tout simplement porté-disparu.
-		Commencez par ces étapes de dépannage:
-	</p>
-
-	<ol>
-		<li>
-			Vérifiez la console JavaScript à la recherche d'erreurs, et assurez-vous d'utiliser un callback
-			`onError` à l'appel de `.load()` pour afficher le résultat.
-		</li>
-		<li>
-			Visualisez le modèle dans une autre application. Pour glTF, des visualiseurs de type cliquez-glissez
-			sont disponibles pour
-			<a href="https://gltf-viewer.donmccurdy.com/" target="_blank" rel="noopener">three.js</a> et
-			<a href="https://sandbox.babylonjs.com/" target="_blank" rel="noopener">babylon.js</a>. Si le modèle
-			apparaît correctement dans une ou plusieurs autres applications,
-			<a href="https://github.com/mrdoob/three.js/issues/new" target="_blank" rel="noopener">signalez une erreur auprès de three.js</a>.
-			Si le modèle ne peut être visualisé dans n'importe quelle application, nous encourageons fortement
-			le signalement d'un bug auprès de l'application avec laquelle vous avez réalisé le modèle 3D.
-		</li>
-		<li>
-			Essayez de diviser ou de multiplier la taille du modèle par un facteur de 1000. Plusieurs modèles sont mis à
-			l'échelles différemment, et les gros modèles peuvent ne pas apparaître si la caméra est
-			à l'intérieur du modèle.
-		</li>
-		<li>
-			Essayez d'ajouter et de positionner une source de lumière. Le modèle peut-être caché dans le noir.
-		</li>
-		<li>
-			Cherchez des requêtes concernant des textures erronées dans votre onglet réseau, comme
-			`"C:\\Path\To\Model\texture.jpg"`. Utilisez des chemins relatifs menant à votre
-			modèle à la place, comme `images/texture.jpg` — cela peut nécessiter
-			la modification du fichier du modèle dans un éditeur de texte.
-		</li>
-	</ol>
-
-	<h2>Demander de l'aide</h2>
-
-	<p>
-		Si vous avez effectué le processus de dépannage ci-dessus et que votre modèle
-		ne fonctionne toujours pas, utiliser la bonne approche pour demander de l'aide vous mènera
-		plus rapidement à la solution. Postez une question sur le
-		<a href="https://discourse.threejs.org/" target="_blank" rel="noopener">forum three.js</a> et, incluez dès que possible,
-		votre modèle (ou un modèle plus simple avec le même problème) dans n'importe quel format
-		qui vous est disponible. Incluez suffisamment d'informations pour que quelqu'un puisse reproduire
-		ce problème rapidement — idéalement, une démo live.
-	</p>
-
-</body>
-
-</html>

docs/manual/fr/introduction/Matrix-transformations.html

@@ -1,67 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>Matrices de transformation ([name])</h1>
-
-		<p>
-		Three.js utilise des `matrices` pour encoder des transformations 3D---translations (position), rotations, et mise à l'échelle. Chaque instance d'un [page:Object3D] a une [page:Object3D.matrix matrix] qui stocke la position de l'objet, sa rotation, ainsi que son échelle. Cette page décrit comment mettre à jour les transformations d'un objet.
-		</p>
-
-		<h2>Propriétés de commodité et `matrixAutoUpdate`</h2>
-
-		<p>
-			Il y a deux façons de mettre à jour les transformations d'un objet:
-		</p>
-		<ol>
-			<li>
-				Modifier les propriétés `position`, `quaternion`, et `scale` de l'objet, et laissez three.js recalculer
-				la matrice de l'objet à l'aide de ces propriétés:
-				<code>
-object.position.copy( start_position );
-object.quaternion.copy( quaternion );
-				</code>
-				Par défaut, la propriété `matrixAutoUpdate` est à true, et la matrice sera automatiquement recalculée.
-				Si l'objet est statique, ou si vous souhaitez contrôler manuellement quand le recalcul de la matrice intervient, de meilleur performances peuvent-être obtenues en définissant la propriété comme false:
-				<code>
-object.matrixAutoUpdate = false;
-				</code>
-				Et après avoir changé n'importe quelle propriété, mettez manuellement la matrice à jour:
-				<code>
-object.updateMatrix();
-				</code>
-			</li>
-			<li>
-				Modifier la matrice de l'objet directement. La classe [page:Matrix4] dispose de différentes méthodes pour modifier les matrices:
-				<code>
-object.matrix.setRotationFromQuaternion( quaternion );
-object.matrix.setPosition( start_position );
-object.matrixAutoUpdate = false;
-				</code>
-				Notez que `matrixAutoUpdate` <em>doit</em> être définie comme `false` dans ce cas, et vous devez vérifier que vous n'appelez <em>pas</em> `updateMatrix`. Appeler `updateMatrix` écrasera les modifications manuelles apportées à la matrice, en recalculant la matrice grâce à sa `position`, `scale`, ainsi de suite.
-			</li>
-		</ol>
-
-		<h2>Matrices d'objets et du monde</h2>
-		<p>
-		La [page:Object3D.matrix matrix] d'un objet stocke les transformations <em>relatives</em> au [page:Object3D.parent parent] de l'objet; pour obtenir les transformations de l'objets en coordonnées du <em>monde</em>, vous devez accéder à la [page:Object3D.matrixWorld] de l'objet.
-		</p>
-		<p>
-		Quand les transformations de l'objet parent ou enfant changent, vous pouvez demander que la [page:Object3D.matrixWorld matrixWorld] de l'objet enfant soit mise à jour en appelant [page:Object3D.updateMatrixWorld updateMatrixWorld]().
-		</p>
-
-		<h2>Rotation et Quaternions</h2>
-		<p>
-		Three.js propose deux manières de représenter les rotations 3D: [page:Euler Euler angles] et [page:Quaternion Quaternions], ainsi que des méthodes pour effectuer des conversions entre les deux. Les angles d'Euler sont sujets à un problème nommé "gimbal lock", où certaines configurations peuvent perdre un certain degré de liberté (empêchant l'objet d'effectuer une rotation sur un axe). Pour cette raison, les rotations d'objets sont <em>toujours</em> stockées dans la propriété [page:Object3D.quaternion quaternion] de l'objet.
-		</p>
-		<p>
-		Des versions précédentes de la librairie incluaient une propriété `useQuaternion` qui, si réglée sur false, faisait que la [page:Object3D.matrix matrix] matrice de l'objet était calculée depuis un angle d'Euler. Cette pratique est dépassée---à la place, vous devez utiliser la méthode [page:Object3D.setRotationFromEuler setRotationFromEuler], qui mettra le quaternion à jour.
-		</p>
-
-	</body>
-</html>

docs/manual/fr/introduction/Useful-links.html

@@ -1,177 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>Liens Utiles ([name])</h1>
-
-		<p class="desc">
-			Sur cette page vous trouverez un ensemble de liens qui pourraient vous êtres utiles dans votre apprentissage de three.js.<br />
-			Si vous souhaitez ajouter quelque chose ici, ou si vous pensez que quelque chose n'est plus
-			pertinent ou fonctionnel, n'hésitez pas à cliquer sur le bouton 'edit' en bas à droite de la page pour faire quelques modifications!<br /><br />
-
-			Notez également que three.js connaît un développement rapide, beaucoup de ces liens contiennent des informations qui sont
-			dépassées - si quelque chose ne fonctionne pas comme vous l'attendiez, ou comme un de ces liens l'annonce,
-			jetez un oeil à la console du navigateur à la recherche d'erreurs ou de warnings. Regardez également la documentation appropriée.
-		</p>
-
-		<h2>Forums d'aide</h2>
-		<p>
-			Three.js utilise officiellement le [link:https://discourse.threejs.org/ forum] et [link:http://stackoverflow.com/tags/three.js/info Stack Overflow] pour les demandes d'aide.
-			Si vous avez besoin d'assistance avec quelque chose, c'est là où vous devez vous rendre. N'ouvrez PAS d'issue sur Github pour les demandes d'aide.
-		</p>
-
-		<h2>Cours et tutoriels</h2>
-
-		<h3>Commencer three.js</h3>
-		<ul>
-			<li>
-				[link:https://threejs.org/manual/#en/fundamentals Three.js Fundamentals starting lesson]
-			</li>
-			<li>
-				[link:https://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-1-the-scene Beginning with 3D WebGL] par [link:https://codepen.io/rachsmith/ Rachel Smith].
-			</li>
-			<li>
-				[link:https://www.august.com.au/blog/animating-scenes-with-webgl-three-js/ Animating scenes with WebGL and three.js]
-			</li>
-		</ul>
-
-		<h3>More extensive / advanced articles and courses</h3>
-		<ul>
-			<li>
-				[link:https://threejs-journey.com/ Three Journey] par [link:https://bruno-simon.com/ Bruno Simon] - Ce cours apprends aux débutants à utiliser Three.js étape par étape
-			</li>
-			<li>
-				[link:https://discoverthreejs.com/ Discover three.js]
-			</li>
-			<li>
-				[link:http://blog.cjgammon.com/ Collection of tutorials] par [link:http://www.cjgammon.com/ CJ Gammon].
-			</li>
-			<li>
-				[link:https://medium.com/soffritti.pierfrancesco/glossy-spheres-in-three-js-bfd2785d4857 Glossy spheres in three.js].
-			</li>
-		 <li>
-			 [link:https://www.udacity.com/course/interactive-3d-graphics--cs291 Interactive 3D Graphics] - un cours gratuit sur Udacity qui enseigne les fondamentaux de l'infographie 3D,
-			 et qui utilise three.js comme outil de code.
-		 </li>
-		 <li>
-			[Link:https://aerotwist.com/tutorials/ Aerotwist] tutoriels par [link:https://github.com/paullewis/ Paul Lewis].
-		 </li>
-		 <li>
-			 [link:https://discourse.threejs.org/t/three-js-bookshelf/2468 Three.js Bookshelf] - Vous cherchez plus de ressources concernant three.js ou sur l'infographie en général?
-			 Jetez un oeil à la sélection de littérature recommandée par la communauté.
-		 </li>
-		</ul>
-
-		<h2>News et Mises à jour</h2>
-		<ul>
-			<li>
-				[link:https://twitter.com/hashtag/threejs Three.js on Twitter]
-			</li>
-			<li>
-				[link:http://www.reddit.com/r/threejs/ Three.js on reddit]
-			</li>
-			<li>
-				[link:http://www.reddit.com/r/webgl/ WebGL on reddit]
-			</li>
-		</ul>
-
-		<h2>Examples</h2>
-		<ul>
-			<li>
-				[link:https://github.com/edwinwebb/three-seed/ three-seed] - un projet prêt à l'emploi three.js avec ES6 et Webpack
-			</li>
-			<li>
-				[link:http://stemkoski.github.io/Three.js/index.html Professor Stemkoskis Examples] - une collection d'exemples adaptés aux débutant
-				construits  three.js r60.
-			</li>
-			<li>
-				[link:https://threejs.org/examples/ Official three.js examples] - ces exemples sont
-				conservés dans le dossier three.js, et utilisent toujours la dernière version de three.js.
-			</li>
-			<li>
-				[link:https://raw.githack.com/mrdoob/three.js/dev/examples/ Official three.js dev branch examples]  -
-				Pareil qu'au dessus, sauf que ceux-ci utilisent la branche dev de three.js,	et sont utilisés pour s'assurer
-				que tout fonctionne durant le développement de three.js.
-			</li>
-		</ul>
-
-	<h2>Outils</h2>
-	<ul>
-		<li>
-			[link:https://github.com/tbensky/physgl physgl.org] - un front-end JavaScript avec des wrappers pour three.js, pour montrer des graphiques WebGL
-			aux étudiants qui apprennent les mathématiques et la physique.
-		</li>
-		<li>
-			[link:https://whsjs.readme.io/ Whitestorm.js] – Framework three.js modulaire avec le plugin de physique AmmoNext.
-		</li>
-		<li>
-			[link:http://zz85.github.io/zz85-bookmarklets/threelabs.html Three.js Inspector]
-		</li>
-		<li>
-			[link:http://idflood.github.io/ThreeNodes.js/ ThreeNodes.js].
-		</li>
-		<li>
-			[link:https://marketplace.visualstudio.com/items?itemName=slevesque.shader vscode shader] - Coloration syntaxique pour le langage des shaders.
-			<br />
-			[link:https://marketplace.visualstudio.com/items?itemName=bierner.comment-tagged-templates vscode comment-tagged-templates] - Coloration syntaxique pour les littéraux de gabarits, comme: glsl.js.
-		</li>
-		<li>
-			[link:https://github.com/MozillaReality/WebXR-emulator-extension WebXR-emulator-extension]
-		</li>
-	</ul>
-
-	<h2>Références WebGL</h2>
-		<ul>
-			<li>
-			[link:https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf webgl-reference-card.pdf] - Référentiel de tous les mots-clés de WebGL et GLSL, la terminologie, syntaxe et les définitions.
-			</li>
-		</ul>
-
-	<h2>Anciens Liens</h2>
-	<p>
-		Ces liens sont conservés pour des raisons d'historisation - vous pouvez les trouver encore utile, mais gardez à l'esprit qu'ils
-		peuvent contenir des informations qui font référence à de très anciennes versions de three.js.
-	</p>
-
-	<ul>
-		<li>
-			[link:https://www.youtube.com/watch?v=Dir4KO9RdhM AlterQualia at WebGL Camp 3]
-		</li>
-		<li>
-			[link:http://yomotsu.github.io/threejs-examples/ Yomotsus Examples] - une liste d'exemple utilisant three.js r45.
-		</li>
-		<li>
-			[link:http://fhtr.org/BasicsOfThreeJS/#1 Introduction to Three.js] par [link:http://github.com/kig/ Ilmari Heikkinen] (slideshow).
-		</li>
-		<li>
-			[link:http://www.slideshare.net/yomotsu/webgl-and-threejs WebGL and Three.js] par [link:http://github.com/yomotsu Akihiro Oyamada] (slideshow).
-		</li>
-		<li>
-			[link:https://www.youtube.com/watch?v=VdQnOaolrPA Trigger Rally]  par [link:https://github.com/jareiko jareiko] (video).
-		</li>
-		<li>
-			[link:http://blackjk3.github.io/threefab/ ThreeFab] - éditeur de scène, maintenu jusqu'à three.js r50 environ.
-		</li>
-		<li>
-			[link:http://bkcore.com/blog/3d/webgl-three-js-workflow-tips.html Max to Three.js workflow tips and tricks] par [link:https://github.com/BKcore BKcore]
-		</li>
-		<li>
-			[link:http://12devsofxmas.co.uk/2012/01/webgl-and-three-js/ A whirlwind look at Three.js]
-			par [link:http://github.com/nrocy Paul King]
-		</li>
-		<li>
-			[link:http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html Animated selective glow in Three.js]
-			par [link:https://github.com/BKcore BKcore]
-		</li>
-		<li>
-			[link:http://www.natural-science.or.jp/article/20120220155529.php Building A Physics Simulation Environment] - tutoriel three.js en Japonais
-		</li>
-	 </ul>
-
-	</body>
-</html>

docs/manual/fr/introduction/WebGL-compatibility-check.html

@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>Compatibilité WebGL ([name])</h1>
-		<p>
-			Même si le problème se présente de moins en moins, certains appareils ou navigateurs peuvent ne toujours pas supporter WebGL 2.
-			La méthode suivante vous permet de vérifier si il est supporté et d'afficher un message à l'utilisateur si il ne l'est pas.
-			Importez le module de détection de support WebGL et exécutez ce qui suit avant d'essayer de rendre quoi que ce soit.
-		</p>
-
-		<code>
-		import WebGL from 'three/addons/capabilities/WebGL.js';
-
-		if ( WebGL.isWebGL2Available() ) {
-
-			// Initiate function or other initializations here
-			animate();
-
-		} else {
-
-			const warning = WebGL.getWebGL2ErrorMessage();
-			document.getElementById( 'container' ).appendChild( warning );
-
-		}
-		</code>
-	</body>
-</html>

docs/manual/it/introduction/Animation-system.html

@@ -1,121 +0,0 @@
-<!DOCTYPE html>
-<html lang="it">
-	<head>
-		<meta charset="utf-8" />
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>Sistema di animazione ([name])</h1>
-
-		<h2>Panoramica</h2>
-
-		<p class="desc">
-      Con il sistema di animazione di three.js si possono animare varie proprietà dei modelli:
-      le ossa di un [page:SkinnedMesh modello skinned], i target morph, le diverse proprietà dei materiali 
-      (colori, opacità, booleani), la visibilità e le trasformazioni. Le proprietà di animazione possono essere 
-      sfumate, incrociate e deformate. Il peso e la scala temporale di diverse animazioni simultanee sullo stesso 
-      oggetto o su oggetti diversi possono essere modificate in modo indipendente. È possibile sincronizzare 
-      diverse animazioni sullo stesso oggetto e su oggetti diversi.<br /><br />
-
-      Per ottenere tutto questo in un sistema omogeneo, il [link:https://github.com/mrdoob/three.js/issues/6881 sistema di animazione di three.js] 
-      è stato cambiato completamente nel 2015 (attenzione alle informazioni non aggiornate!), ed ora ha un'architettura simile a quella di Unity/Unreal Engine 4.
-      Questa pagina fornisce una breve panoramica dei componenti principali del sistema e di come lavorano insieme.
-		</p>
-
-		<h3>Clip di animazione (AnimationClips)</h3>
-
-		<p class="desc">
-      Se si è importato con successo un oggetto 3D animato (non importa se ha ossa o target morph o entrambi)
-      - per esempio esportandolo da Blender con [link:https://github.com/KhronosGroup/glTF-Blender-IO l'exporter glTF Blender] e caricandolo
-      nella scena three.js usando [page:GLTFLoader] - uno dei campi di risposta dovrà essere un array chiamato "animations", contenente
-      gli [page:AnimationClip AnimationClips] per questo modello (vedi l'elenco dei possibili loader qui sotto).<br /><br />
-
-      Ogni `AnimationClip` contiene solitamente i dati per una certa attività dell'oggetto. Se la mesh è un personaggio,
-      per esempio, ci può essere un AnimationClip per la camminata, un altro per il salto e un terzo per il salto laterale e così via.
-		</p>
-
-		<h3>Keyframe Tracks</h3>
-
-		<p class="desc">
-      All'interno di un `AnimationClip` i dati, per ogni propietà di animazione, sono memorizzati in un [page:KeyframeTrack] separato.
-      Supponendo che un oggetto personaggio abbia uno [page:Skeleton scheletro], un keyframe track potrebbe memorizzare i dati relativi alle variazioni di 
-      posizione dell'osso inferiore del braccio nel tempo, un'altra traccia potrebbe memorizzare i dati relativi alle variazioni di rotazione dello stesso osso,
-      una terza traccia la posizione, la rotazione e la scala di un altro osso e così via. Dovrebbe essere chiaro, che un AnimationClip può essere composto
-      da molte tracce di questo tipo.<br /><br />
-
-      Supponendo che il modello abbia dei target morph (per esempio un target morph che mostra una faccia amichevole e un altro che mostra una faccia arrabbiata),
-      ogni traccia contiene le informazioni su come l'influenza di un certo target morph cambia durante l'esecuzione del clip.
-		</p>
-
-		<h3>Mixer di Animazioni</h3>
-
-		<p class="desc">
-      I dati memorizzati costituiscono solo la base per le animazioni - la riproduzione vera e propria è controllata dall'[page:AnimationMixer].
-      È possibile immaginarlo non solo come un lettore di animazioni, ma come un simulatore di un hardware come una vera e propria console di mixaggio,
-      che può controllare diverse animazioni simultaneamente, mescolandole e fondendole.
-		</p>
-
-		<h3>Azioni di Animazioni</h3>
-
-		<p class="desc">
-      Lo stesso `AnimationMixer` ha pochissime proprietà e metodi (generali), perché può essere controllato dall'[page:AnimationAction AnimationActions].
-      Per configurare un `AnimationAction` è necessario specificare quando un `AnimationClip` deve essere eseguito, messo in pausa o stoppato su uno dei mixer, 
-      se e con quale frequenza la clip deve essere ripetuta, se deve essere eseguita con una dissolvenza o una scala temporale e altre cose aggiuntive come 
-      dissolvenza incrociata o sincronizzazione. 
-		</p>
-
-		<h3>Gruppi di oggetti Animati</h3>
-
-		<p class="desc">
-      Se si desidera che un gruppo di oggetti riceva uno stato di animazione condiviso, è possibile utilizzare un [page:AnimationObjectGroup].
-		</p>
-
-		<h3>Formati supportati e Loader</h3>
-
-		<p class="desc">
-      Si noti che non tutti i formati includono le animazioni (in particolare OBJ non lo fa) e che solo alcuni loader di three.js
-      supportano le sequenze [page:AnimationClip AnimationClip]. Di seguito alcuni che supportano questo tipo di animazioni:
-		</p>
-
-			<ul>
-				<li>[page:ObjectLoader THREE.ObjectLoader]</li>
-				<li>THREE.BVHLoader</li>
-				<li>THREE.ColladaLoader</li>
-				<li>THREE.FBXLoader</li>
-				<li>[page:GLTFLoader THREE.GLTFLoader]</li>
-			</ul>
-
-		<p class="desc">
-      Si noti che 3ds max e Maya attualmente non possono esportare più animazioni (ovvero animazioni che non si trovano nella stessa timeline)
-      direttamente in un singolo file.
-		</p>
-
-		<h2>Esempio</h2>
-
-		<code>
-		let mesh;
-
-		// Create an AnimationMixer, and get the list of AnimationClip instances
-		const mixer = new THREE.AnimationMixer( mesh );
-		const clips = mesh.animations;
-
-		// Update the mixer on each frame
-		function update () {
-			mixer.update( deltaSeconds );
-		}
-
-		// Play a specific animation
-		const clip = THREE.AnimationClip.findByName( clips, 'dance' );
-		const action = mixer.clipAction( clip );
-		action.play();
-
-		// Play all animations
-		clips.forEach( function ( clip ) {
-			mixer.clipAction( clip ).play();
-		} );
-		</code>
-
-	</body>
-</html>

docs/manual/it/introduction/Color-management.html

@@ -1,409 +0,0 @@
-<!DOCTYPE html>
-<html lang="it">
-	<head>
-		<meta charset="utf-8" />
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-		<style>
-			blockquote {
-				font-size: 0.8em;
-				line-height: 1.5em;
-				margin-left: 0;
-				border-left: 4px solid #cccccc;
-				padding: 1em 2em 1em 2em;
-			}
-
-			blockquote p:first-child {
-				margin-top: 0;
-			}
-
-			blockquote p:last-child {
-				margin-bottom: 0;
-			}
-
-			figure {
-				width: 100%;
-				margin: 1em 0;
-				font-style: italic;
-			}
-
-			figure img {
-				width: 100%;
-			}
-
-			figure.float {
-				float: right;
-				max-width: 30%;
-				margin: 1em;
-			}
-
-			@media all and (max-width: 640px) {
-				figure.float {
-					float: none;
-					max-width: 100%;
-				}
-			}
-		</style>
-	</head>
-
-	<body>
-		<h1>Gestione del colore ([name])</h1>
-
-		<h2>Cos'è lo spazio colore?</h2>
-
-		<p>
-			Ogni spazio colore è una collezione di diverse decisioni progettuali,
-			scelte insieme per supportare un'ampia gamma di colori e al contempo
-			soddisfare i vincoli tecnici legati alla precisione e alle tecnologie di
-			visualizzazione. Quando si crea una risorsa 3D, o si assemblano delle
-			risorse 3D insieme in una scena, è importante sapere quali sono queste
-			proprietà e come le proprietà di uno spazio colore si relazionano con
-			altri spazi colore nella scena.
-		</p>
-
-		<figure class="float">
-			<img src="resources/srgb_gamut.png" alt="" />
-			<figcaption>
-				Colori sRGB e il punto di bianco (D65) visualizzati nel diagramma
-				cromatico di riferimento CIE 1931. La regione colorata rappresenta una
-				proiezione 2D della gamma sRGB, che è un volume 3D. Fonte:
-				<a
-					href="https://en.wikipedia.org/wiki/SRGB"
-					target="_blank"
-					rel="noopener"
-					>Wikipedia</a
-				>
-			</figcaption>
-		</figure>
-
-		<ul>
-			<li>
-				<b>Colori primari:</b> I colori primari (rosso, verde, blu) non sono
-				assoluti; vengono selezionati dallo spettro visibile in base ai vincoli
-				di precisione limitata e alla capacità dei dispositivi di
-				visualizzazione disponibili. I colori sono espressi come rapporto tra i
-				colori primari.
-			</li>
-			<li>
-				<b>Punto di bianco:</b> La maggior parte degli spazi colore è progettata
-				in modo tale che una somma equamente ponderata di primari
-				<i>R = G = B</i> appaia priva di colore o "acromatica". L'aspetto dei
-				valori cromatici (come il bianco o il grigio) dipende dalla percezione
-				umana, che a sua volta dipende fortemente dal contesto dell'osservatore.
-				Uno spazio colore specifica il suo "punto di bianco" per bilanciare
-				queste esigenze. Il punto di bianco definito dallo spazio colore sRGB è
-				<a href="https://en.wikipedia.org/wiki/Illuminant_D65" target="_blank"
-					>D65</a
-				>.
-			</li>
-			<li>
-				<b>Funzioni di trasferimento (transfer functions):</b> Dopo aver scelto
-				la gamma cromatica e un modello di colore, dobbiamo ancora definire le
-				mappature ("funzioni di trasferimento") dei valori numerici da/verso lo
-				spazio colore. R = 0,5 rappresenta il 50% in meno di illuminazione
-				fisica rispetto a <i>r = 1,0</i>? O il 50% in meno di luminosità, come
-				percepito da un occhio umano medio? Sono cose diverse e questa
-				differenza può essere rappresentata come una funzione matematica. Le
-				funzioni di trasferimento possono essere <i>lineari</i> o
-				<i>non lineari</i>, a seconda degli obiettivi dello spazio colore. sRGB
-				definisce funzioni di trasferimento non lineari. Queste funzioni sono
-				talvolta approssimate come <i>funzioni gamma</i>, ma il termine "gamma"
-				è ambiguo e dovrebbe essere evitato in questo contesto.
-			</li>
-		</ul>
-
-		Questi tre parametri - colori primari, punto di bianco e funzioni di
-		trasferimento - definiscono uno spazio colore, ognuno scelto per obiettivi
-		specifici. Dopo aver definito i parametri, sono utili alcuni termini
-		aggiuntivi:
-
-		<ul>
-			<li>
-				<b>Modello di colore:</b> Sintassi per identificare numericamente i
-				colori all'interno della gamma cromatica scelta - un sistema di
-				coordinate per i colori. In three.js ci occupiamo principalmente del
-				modello di colore RGB, con tre coordinate
-				<i>r, g, b ∈ [0,1]</i> ("dominio chiuso") o
-				<i>r, g, b ∈ [0,∞]</i> ("dominio aperto") che rappresentano ciascuna una
-				frazione di un colore primario. Altri modelli di colore (HSL, Lab, LCH)
-				sono comunemente utilizzati per il controllo artistico.
-			</li>
-			<li>
-				<b>Gamma di colori:</b> Quando i colori primari e il punto di bianco
-				sono stati scelti, questi rappresentano un volume all'interno dello
-				spettro visibile (un "gamut"). I colori che non rientrano in questo
-				volume ("fuori gamut") non possono essere espressi dai valori RGB del
-				dominio chiuso [0,1]. Nel dominio aperto [0,∞], il gamut è tecnicamente
-				infinito.
-			</li>
-		</ul>
-
-		<p>
-			Consideriamo due spazi colori comuni: [page:SRGBColorSpace] ("sRGB") e
-			[page:LinearSRGBColorSpace] ("Linear-sRGB"). Entrambi usano gli stessi
-			colori primari e lo stesso punto di bianco, e quindi hanno la stessa gamma
-			di colori. Entrambi utilizzano il modello di colore RGB. Sono diversi solo
-			nelle funzioni di trasferimento - Linear-sRGB è lineare rispetto
-			all'intensità della luce fisica, mentre sRGB utilizza le funzioni di
-			trasferimento non lineari di sRGB e si avvicina maggiormente al modo in
-			cui l'occhio umano percepisce la luce e alla reattività dei comuni
-			dispositivi di visualizzazione.
-		</p>
-
-		<p>
-			Questa differenza è importante. I calcoli di illuminazione e altre
-			operazioni di rendering devono generalmente avvenire in uno spazio di
-			colore lineare. Tuttavia, i colori lineari sono meno efficienti da
-			memorizzare in un'immagine o in un framebuffer e non hanno un aspetto
-			corretto quando vengono osservati da un osservatore umano. Di conseguenza,
-			le texture di input e l'immagine finale renderizzata utilizzano
-			generalmente lo spazio di colore sRGB non lineare.
-		</p>
-
-		<blockquote>
-			<p>
-				ℹ️
-				<i
-					><b>ATTENZIONE:</b> Anche se alcuni display moderni supportano gamme
-					più ampie come Display-P3, le API grafiche della piattaforma web si
-					basano in gran parte su sRGB. Le applicazioni che utilizzano three.js
-					oggi utilizzano in genere solo gli spazi colore sRGB e Linear-sRGB.
-				</i>
-			</p>
-		</blockquote>
-
-		<h2>Ruoli degli spazi colore</h2>
-
-		<p>
-			Un flusso di lavoro lineare - richiesto per moderni metodi di rendering -
-			generalmente coinvolge più di uno spazio di colore, ognuno assegnato ad un
-			ruolo specifico. Spazi colore lineari o non lineari sono adatti a ruoli
-			diversi, come spiegato di seguito.
-		</p>
-
-		<h3>Input color space</h3>
-
-		<p>
-			I colori forniti a three.js - dai color picker, dalle texture, dai modelli
-			3D e da altre risorse - hanno ciascuno uno spazio colore associato. Quelli
-			che non sono già nello spazio colore di lavoro Linear-sRGB devono essere
-			convertiti e alle texture deve essere assegnata la corretta assegnazione
-			<i>texture.colorSpace</i>. Alcune conversioni (per i colori esadecimali e
-			CSS in sRGB) possono essere effettuate automaticamente se la modalità di
-			gestione del colore legacy è disabilitata prima dell'inizializzazione dei
-			colori:
-		</p>
-
-		<code> THREE.ColorManagement.enabled = true; </code>
-
-		<ul>
-			<li>
-				<b>Materiali, luci, e shader:</b> I colori nei materiali, nelle luci e
-				negli shader memorizzano i componenti RGB nello spazio colore di lavoro
-				Linear-sRGB.
-			</li>
-			<li>
-				<b>Colori dei vertici:</b> [page:BufferAttribute BufferAttributes]
-				memorizza i componenti RGB nello spazio colore di lavoro Linear-sRGB.
-			</li>
-
-			<li>
-				<b>Colori delle texture:</b> Le [page:Texture Texture] PNG o JPEG
-				contenti informazioni sul colore (come .map o .emissiveMap) usano lo
-				spazio colore sRGB a dominio chiuso, e devono essere annotate con
-				<i>texture.colorSpace = SRGBColorSpace</i>. I formati come OpenEXR (a volte
-				usati per .envMap o .lightMap) utilizzano lo spazio colore Linear-sRGB
-				indicato con <i>texture.colorSpace = LinearSRGBColorSpace</i>, e possono
-				contenere valori nel dominio aperto [0,∞].
-			</li>
-			<li>
-				<b>Texture non a colori:</b> Le texture che non memorizzano informazioni
-				relative ai colori (come .normalMap o .roughnessMap) non hanno associato
-				uno spazio colore, e generalmente usano l'annotazione (predefinita)
-				<i>texture.colorSpace = NoColorSpace</i>. In rari casi, i dati non a
-				colori possono essere rappresentati con altre codifiche non lineari per
-				motivi tecnici.
-			</li>
-		</ul>
-
-		<blockquote>
-			<p>
-				⚠️
-				<i
-					><b>ATTENZIONE:</b> Molti formati per modelli 3D non definiscono
-					correttamente o in modo coerente le informazioni sullo spazio colore.
-					Sebbene three.js tenti di gestire la maggior parte dei casi, i
-					problemi sono spesso con i file con formati meno recenti. Per ottenere
-					un miglior risultato bisogna utilizzare il formato glTF 2.0
-					([page:GLTFLoader]) e prima bisogna testare i modelli 3D in
-					visualizzatori online per confermare che la risorsa stessa sia
-					corretta.
-				</i>
-			</p>
-		</blockquote>
-
-		<h3>Spazio colore di lavoro</h3>
-
-		<p>
-			Rendering, interpolazione e molte altre operazioni devono essere eseguite
-			in uno spazio colore di lavoro lineare, nel quale i componenti RGB sono
-			proporzionali all'illuminazione fisica. In three.js, lo spazio colore di
-			lavoro è Linear-sRGB.
-		</p>
-
-		<h3>Output color space</h3>
-
-		<p>
-			L'output su un dispositivo di visualizzazione, a un'immagine o a un video,
-			può comportare la conversione dallo spazio colore di lavoro Linear-sRGB di
-			dominio aperto a un altro spazio di colore. Questa conversione può essere
-			eseguita nel passaggio di rendering principale
-			([page:WebGLRenderer.outputColorSpace]), o durante il post-processing.
-		</p>
-
-		<code>
-			renderer.outputColorSpace = THREE.SRGBColorSpace; // optional with post-processing
-		</code>
-
-		<ul>
-			<li>
-				<b>Display:</b> I colori scritti in un canvas WebGL per i display devono
-				essere nello spazio colore sRGB.
-			</li>
-			<li>
-				<b>Immagine:</b> I colori scritti su un'immagine devono utilizzare lo
-				spazio colore appropriato per il formato e per il suo uso. Le immagini
-				completamente renderizzate scritte per texture PNG o JPEG generalmente
-				usano lo spazio colore sRGB. Immagini contenenti emissioni, mappe di
-				luce, o altri dati non limitati all'intervallo [0,1] utilizzaranno
-				generalmente lo spazio colore Linear-sRGB a dominio aperto, e un formato
-				immagine compatibile come OpenEXR.
-			</li>
-		</ul>
-
-		<blockquote>
-			<p>
-				⚠️
-				<i
-					><b>ATTENZIONE:</b> I target di rendering possono utilizzare sia sRGB
-					che Linear-sRGB. sRGB utilizza meglio la precisione limitata. Nel
-					dominio chiuso, 8 bit sono sufficienti per sRGB mentre ≥12 (mezzo
-					float) possono essere richiesti per Linear-sRGB. Se gli stadi
-					successivi delle pipeline richiedono un ingresso Linear-sRGB, le
-					conversioni aggiuntive possono avere un piccolo costo in termini di
-					prestazioni.</i
-				>
-			</p>
-		</blockquote>
-
-		<p>
-			Custom materials based on [page:ShaderMaterial] and [page:RawShaderMaterial] have to implement their own output color space conversion.
-			For instances of `ShaderMaterial`, adding the `colorspace_fragment` shader chunk to the fragment shader's `main()` function should be sufficient.
-		</p>
-
-		<h2>Lavorare con le istanze di THREE.Color</h2>
-
-		<p>
-			I metodi di lettura o modifica delle istanze [page:Color] presuppongono
-			che i dati siano già nello spazio colore di lavoro di three.js,
-			Linear-sRGB. I componenti RGB e HSL sono rappresentazioni dirette dei dati
-			memorizzati dall'istanza Color, e non sono mai convertiti implicitamente.
-			I dati di Color possono essere esplicitamenre convertiti con
-			<i>.convertLinearToSRGB()</i> o <i>.convertSRGBToLinear()</i>.
-		</p>
-
-		<code>
-		// RGB components (no change).
-		color.r = color.g = color.b = 0.5;
-		console.log( color.r ); // → 0.5
-
-		// Manual conversion.
-		color.r = 0.5;
-		color.convertSRGBToLinear();
-		console.log( color.r ); // → 0.214041140
-		</code>
-
-		<p>
-			Con <i>ColorManagement.enabled = true</i> impostato (consigliato),
-			alcune conversioni vengono effettuate automaticamente. Poiché i colori
-			esadecimali e CSS sono generalmente sRGB, i metodi [page:Color]
-			convertiranno automaticamente questi input da sRGB a Linear-sRGB nei
-			setter, oppure convertiranno da Linear-sRGB a sRGB quando restituiscono
-			output esadecimali o CSS dai getter.
-		</p>
-
-		<code>
-		// Hexadecimal conversion.
-		color.setHex( 0x808080 );
-		console.log( color.r ); // → 0.214041140
-		console.log( color.getHex() ); // → 0x808080
-
-		// CSS conversion.
-		color.setStyle( 'rgb( 0.5, 0.5, 0.5 )' );
-		console.log( color.r ); // → 0.214041140
-
-		// Override conversion with 'colorSpace' argument.
-		color.setHex( 0x808080, LinearSRGBColorSpace );
-		console.log( color.r ); // → 0.5
-		console.log( color.getHex( LinearSRGBColorSpace ) ); // → 0x808080
-		console.log( color.getHex( SRGBColorSpace ) ); // → 0xBCBCBC
-		</code>
-
-		<h2>Errori comuni</h2>
-
-		<p>
-			Quando un singolo colore o una texture non sono configurati correttamente,
-			apparirà più scuro o più chiaro del previsto. Quando lo spazio colore di
-			output del renderer non è configurato correttamente, l'intera scena
-			potrebbe essere più scura (ad es. manca la conversione ad sRGB) o più
-			chiara (ad es. una doppia conversione a sRGB con post-processing). In ogni
-			caso il problema potrebbe non essere uniforme e semplicemente
-			aumentare/dimunire la luminosità non lo risolverebbe.
-		</p>
-
-		<p>
-      Un problema più sottile si verifica quando <i>entrambi</i> lo spazio colore di
-      input e quello di output non sono corretti - i livelli di luminosità complessivi
-      potrebbero andare bene, ma i colori potrebbero cambiare in modo imprevisto in 
-      condizioni di illuminazione diversa o l'ombreggiatura potrebbe apparire più sbiadita 
-      e meno morbida del previsto. Questi due errori non fanno una cosa giusta, ed è importante
-      che lo spazio colore di lavoro sia lineare ("riferito alla scena") e che lo spazio di colore 
-      dell'output sia non lineare ("riferito alla visualizzazione").
-		</p>
-
-		<h2>Ulteriori letture</h2>
-
-		<ul>
-			<li>
-				<a
-					href="https://developer.nvidia.com/gpugems/gpugems3/part-iv-image-effects/chapter-24-importance-being-linear"
-					target="_blank"
-					rel="noopener"
-					>GPU Gems 3: The Importance of Being Linear</a
-				>, di Larry Gritz and Eugene d'Eon
-			</li>
-			<li>
-				<a
-					href="https://blog.johnnovak.net/2016/09/21/what-every-coder-should-know-about-gamma/"
-					target="_blank"
-					rel="noopener"
-					>What every coder should know about gamma</a
-				>, di John Novak
-			</li>
-			<li>
-				<a href="https://hg2dc.com/" target="_blank" rel="noopener"
-					>The Hitchhiker's Guide to Digital Color</a
-				>, di Troy Sobotka
-			</li>
-			<li>
-				<a
-					href="https://docs.blender.org/manual/en/latest/render/color_management.html"
-					target="_blank"
-					rel="noopener"
-					>Color Management</a
-				>, Blender
-			</li>
-		</ul>
-	</body>
-</html>

docs/manual/it/introduction/Creating-a-scene.html

@@ -1,181 +0,0 @@
-<!DOCTYPE html>
-<html lang="it">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>Creare una scena ([name])</h1>
-
-		<p>Lo scopo di questa sezione è quello di fornire una breve introduzione di three.js. 
-      Inizieremo impostando una scena con un cubo rotante. 
-      Se sei bloccato e hai bisogno di aiuto, in fondo alla pagina troverai un esempio funzionante.</p>
-
-		<h2>Prima di iniziare</h2>
-
-		<p>Prima di poter utilizzare three.js hai bisogno di un posto dove visualizzarlo. 
-      Salva il seguente codice HTML in un file sul tuo computer e aprilo nel browser.</p>
-
-		<code>
-		&lt;!DOCTYPE html&gt;
-		&lt;html&gt;
-			&lt;head&gt;
-				&lt;meta charset="utf-8"&gt;
-				&lt;title&gt;My first three.js app&lt;/title&gt;
-				&lt;style&gt;
-					body { margin: 0; }
-				&lt;/style&gt;
-			&lt;/head&gt;
-			&lt;body&gt;
-				&lt;script type="module"&gt;
-					import * as THREE from 'https://cdn.jsdelivr.net/npm/three/build/three.module.js';
-
-					// Il nostro Javascript andrà qui
-				&lt;/script&gt;
-			&lt;/body&gt;
-		&lt;/html&gt;
-		</code>
-
-		<p>Questo è quanto. Tutto il codice seguente va nel tag vuoto &lt;script&gt;.</p>
-
-		<h2>Creare la scena</h2>
-
-		<p>Per poter visualizzare qualsiasi cosa con three.js abbiamo bisogno di tre cose: scena, 
-      telecamera e renderer, in modo da poter renderizzare la scena con la telecamera.</p>
-		
-    <code>
-		const scene = new THREE.Scene();
-		const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
-
-		const renderer = new THREE.WebGLRenderer();
-		renderer.setSize( window.innerWidth, window.innerHeight );
-		document.body.appendChild( renderer.domElement );
-		</code>
-
-		<p>Spieghiamo un attimo cosa sta succedendo. Abbiamo impostato la scena, la telecamera e il renderer.</p>
-
-		<p>Esistono diverse telecamere in three.js. Per ora usiamo una `PerspectiveCamera`.</p>
-
-		<p>Il primo attributo è il `field of view` (campo visivo). Il FOV è l'estensione della scena che 
-      viene vista sul display in qualsiasi momento. Il valore è espresso in gradi.</p>
-
-		<p>Il secondo attributo è l'`aspect ratio` (rapporto di aspetto). 
-      È quasi sempre consigliabile usare la larghezza dell'elemento divisa per l'altezza, 
-      altrimenti si otterrà lo stesso risultato di quando si riproducono vecchi film su un televisore widescreen - l'immagine appare schiacciata.</p>
-
-		<p>I successivi due attributi sono il piano di ritaglio, `near` (il vicino) e `far` (il lontano). 
-      Ciò significa che gli oggetti più lontani dalla telecamera rispetto al valore `far` o più vicini 
-      rispetto al valore `near` non saranno renderizzati. Non è neccessario preoccuparsi di questo 
-      aspetto adesso, ma potresti voler usare altri valori nella tua applicazione per avere delle prestazioni migliori.</p>
-
-		<p>Il prossimo passo è il renderer. È qui che avviene la magia. Oltre a creare l'istanza del renderer, abbiamo bisogno di impostare le dimensioni con cui vogliamo che l'applicazione venga visualizzata. È una buona idea usare la larghezza e l'altezza dell'area che vogliamo riempire con la nostra applicazione - in questo caso, la larghezza e l'altezza della finestra del browser. Per le applicazioni ad alte prestazioni si possono dare a `setSize` dei valori più piccoli, come `window.innerWidth/2` e `window.innerHeight/2`, che faranno si che l'applicazione venga renderizzata ad una dimensione di un quarto.</p>
-
-		<p>Se si desidera mantenere la dimensione dell'applicazione ma visualizzarla ad una risoluzione minore, è possibile farlo aggiungendo a `setSize` il valore false, corrispondente a `updateStyle` (il terzo parametro). Per esempio, `setSize(window.innerWidth/2, window.innerHeight/2, false)` visualizzerà l'applicazione a metà risoluzione, dato che il &lt;canvas&gt; ha larghezza e altezza del 100%.</p>
-
-		<p>Infine, aggiungiamo l'elemento `renderer` al nostro documento HTML. Si tratta di un elemento &lt;canvas&gt; che il renderer utilizza per visualizzare la scena.</p>
-
-		<p><em>"Va bene, ma dov'è il cubo che ci avevi promesso?"</em> Aggiungiamolo ora.</p>
-
-		<code>
-		const geometry = new THREE.BoxGeometry( 1, 1, 1 );
-		const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
-		const cube = new THREE.Mesh( geometry, material );
-		scene.add( cube );
-
-		camera.position.z = 5;
-		</code>
-
-		<p>Per creare un cubo abbiamo bisogno di una `BoxGeometry`. Un oggetto che contiene tutti i punti (`vertices`) e le facce (`faces`) del cubo. Lo esploreremo meglio in futuro.</p>
-
-		<p>Oltre alla geometria, abbiamo bisogno di un materiale per colorarla. Three.js mette a disposizione molti materiali, ma per ora ci limiteremo al `MeshBasicMaterial`. Tutti i materiali come parametro accettano un oggetto al cui interno avrà delle proprietà che li verrano applicate. Per mantenere le cose molto semplici, impostiamo solo un attributo di colore verde `0x00ff00`. Questo funziona come i colori nei CSS o in Photoshop (`hex colors`).</p>
-
-		<p>La terza cosa di cui abbiamo bisogno è una `Mesh`. Una mesh è un oggetto che prende una geometria, e le applica un materiale, che possiamo, poi, inserire nella scena e spostare liberamente. </p>
-
-		<p>Per impostazione predefinita, quando chiamiamo `scene.add()`, la cosa che sarà aggiunta verrà posizionata nelle coordinate `(0,0,0)`. In questo modo la telecamera e il cubo si troveranno l'uno dentro l'altro. Per evitare questo inconveniente, è sufficiente spostare la telecamera un po' più in là.</p>
-
-		<h2>Renderizzare la scena</h2>
-
-		<p>Se si copiasse il codice qui sopra nel file HTML creato in precedenza, non si vedrebbe nulla. Questo perché ancora non stiamo visualizzando nulla. Per questo abbiamo bisogno di quello che viene chiamato un ciclo `render o animate`.</p>
-
-		<code>
-		function animate() {
-			requestAnimationFrame( animate );
-			renderer.render( scene, camera );
-		}
-		animate();
-		</code>
-
-		<p>Questa funzione creerà un loop che fa sì che il renderer disegni la scena ogni volta che la scena viene aggiornata 
-      (su uno schermo tipico questo vuol dire 60 volte al secondo). Se sei nuovo nella scrittura di giochi su browser, 
-      potresti dire <em>"perché non creiamo semplicemente un setInterval?"</em> Il fatto è che potremmo ma `requestAnimationFrame` 
-      ha una serie di vantaggi. Forse il più importante è che si interrompe quando l'utente passa ad un'altra scheda del browser, 
-      così da non sprecare la preziosa potenza di elaborazione e la vita della batteria del computer.</p>
-
-		<h2>Animare il cubo</h2>
-
-		<p>Se inserisci tutto il codice sopra nel file che hai creato prima di iniziare, dovresti vedere un box verde. 
-      Rendiamo tutto un po' più interessante ruotandolo.</p>
-
-		<p>Aggiungi quanto segue proprio sopra la chiamata `renderer.render` nella tua funzione `animate`:</p>
-
-		<code>
-		cube.rotation.x += 0.01;
-		cube.rotation.y += 0.01;
-		</code>
-
-		<p>Verrà eseguito per ogni frame (normalmente 60 volte per secondo) e darà al cubo un'animazione di rotazione. 
-      Fondamentalmente, tutto ciò che vuoi spostare o modificare mentre l'applicazione è in esecuzione deve passare 
-      attraverso il ciclo di animazione. Ovviamente, si possono chiamare altre funzioni all'interno di `animate`, 
-      in modo da non avere una funzione con centinaia di righe.</p>
-
-		<h2>Il risultato</h2>
-		<p>Congratulazioni! Hai completato la tua prima applicazione three.js. È semplice, ma da qualche parte devi pur iniziare.</p>
-
-		<p>Il codice completo è disponibile di seguito e come esempio modificabile [link:https://jsfiddle.net/0c1oqf38/ live example]. Giocaci per capire meglio come funziona.</p>
-
-		<code>
-		&lt;!DOCTYPE html&gt;
-		&lt;html&gt;
-			&lt;head&gt;
-				&lt;meta charset="utf-8"&gt;
-				&lt;title&gt;My first three.js app&lt;/title&gt;
-				&lt;style&gt;
-					body { margin: 0; }
-				&lt;/style&gt;
-			&lt;/head&gt;
-			&lt;body&gt;
-				&lt;script type="module"&gt;
-					import * as THREE from 'https://cdn.jsdelivr.net/npm/three/build/three.module.js';
-
-					const scene = new THREE.Scene();
-					const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
-
-					const renderer = new THREE.WebGLRenderer();
-					renderer.setSize( window.innerWidth, window.innerHeight );
-					document.body.appendChild( renderer.domElement );
-
-					const geometry = new THREE.BoxGeometry( 1, 1, 1 );
-					const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
-					const cube = new THREE.Mesh( geometry, material );
-					scene.add( cube );
-
-					camera.position.z = 5;
-
-					function animate() {
-						requestAnimationFrame( animate );
-
-						cube.rotation.x += 0.01;
-						cube.rotation.y += 0.01;
-
-						renderer.render( scene, camera );
-					}
-
-					animate();
-				&lt;/script&gt;
-			&lt;/body&gt;
-		&lt;/html&gt;
-		</code>
-	</body>
-</html>

docs/manual/it/introduction/Creating-text.html

@@ -1,138 +0,0 @@
-<!DOCTYPE html>
-<html lang="it">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>Creare testo ([name])</h1>
-		<div>
-			<p>
-				Spesso si ha la necessità di utilizzare del testo nella propria applicazione three.js - ecco un paio di modi per farlo.
-			</p>
-		</div>
-
-		<h2>1. DOM + CSS</h2>
-		<div>
-			<p>
-				L'uso dell'HTML è generalmente il modo più facile e veloce per aggiungere testo. Questo è il metodo
-        usato per gli overlay descrittivi in quasi tutti gli esempi di three.js.
-			</p>
-			<p>È possibile aggiungere contenuto ad un div:</p>
-			<code>&lt;div id="info"&gt;Description&lt;/div&gt;</code>
-
-			<p>
-        e usare il markup CSS per posizionare l'elemento in modo assoluto, in una posizione sopra tutti gli altri elementi
-        con la proprietà z-index, specialmente se three.js viene eseguito in modalità full screen.
-			</p>
-
-			<code>
-#info {
-	position: absolute;
-	top: 10px;
-	width: 100%;
-	text-align: center;
-	z-index: 100;
-	display:block;
-}
-			</code>
-
-		</div>
-
-		
-		<h2>2. Usare [page:CSS2DRenderer] o [page:CSS3DRenderer]</h2>
-		<div>
-			<p>
-				Questi renderer vengono utilizzati per disegnare testo di alta qualità all'interno di elementi del DOM nella scena three.js.
-        Questo metodo è simile al punto 1 eccetto per il fatto che con questi renderer è possibile integrare più facilmente e dinamicamente gli elementi nella scena three.js.
-			</p>
-		</div>
-		
-
-		<h2>3. Disegnare il testo nel canvas e usarlo come [page:Texture]</h2>
-		<div>
-			<p>Utilizza questo metodo se desideri disegnare testo facilmente su un piano nella scena three.js.</p>
-		</div>
-
-
-		<h2>4. Disegnare un modello nella tua applicazione 3D preferita ed esportarlo in three.js</h2>
-		<div>
-			<p>Utilizza questo metodo se preferisci lavorare con la tua applicazione 3D e importare i modelli in three.js.</p>
-		</div>
-
-
-		<h2>5. Text Geometry Procedurale</h2>
-		<div>
-			<p>
-				Se preferisci lavorare solo in three.js o creare geometrie di testo 3D dinamiche e procedurali, è possibile creare una mesh che abbia come geometria
-        un'istanza di THREE.TextGeometry:
-			</p>
-			<p>
-				<code>new THREE.TextGeometry( text, parameters );</code>
-			</p>
-      <p>
-				In modo tale che questo funzioni correttamente, TextGeometry necessita che un'istanza di THREE.Font venga impostata come valore del parametro "font".
-        Per avere maggiori informazioni su come implementare questo metodo, consulta la pagina [page:TextGeometry], contenente la descrizione di ogni
-        parametro che la classe accetta e una lista di font JSON che vengono forniti con la distribuzione di three.js. 
-			</p>
-
-			<h3>Esempi</h3>
-
-			<p>
-				[example:webgl_geometry_text WebGL / geometry / text]<br />
-				[example:webgl_shadowmap WebGL / shadowmap]
-			</p>
-
-      <p>
-        TextGeometry utilizza i font generati da <a href='http://gero3.github.io/facetype.js/' target="_top">typeface.json</a>.
-				Se Typeface è inattivo, o si preferisce usare un font che non è presente, esiste un tutorial che mostra come con uno script python
-        per blender è possibile esportare il testo nel formato JSON di Three.js:
-				[link:http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html]
-			</p>
-
-		</div>
-
-
-		<h2>6. Font Bitmap</h2>
-		<div>
-			<p>
-				BMFont (font bitmap) consente di raggruppare glyphs in un unico BufferGeometry. Il rendering di BMFont
-				supporta il word-wrapping, letter spacing, kerning, signed distance fields with standard derivatives, multi-channel signed distance fields, multi-texture fonts, ed altro ancora.
-				Per saperne di più consulta [link:https://github.com/felixmariotto/three-mesh-ui three-mesh-ui] o [link:https://github.com/Jam3/three-bmfont-text three-bmfont-text].
-			</p>
-			<p>
-				I font sono disponibili in progetti come
-				[link:https://github.com/etiennepinchon/aframe-fonts A-Frame Fonts], o puoi creare il tuo personale partendo da qualsiasi font .TTF, 
-        ottimizzazione per includere solo caratteri richiesti per il progetto.
-			</p>
-			<p>
-				Alcuni strumenti utili:
-			</p>
-			<ul>
-				<li>[link:http://msdf-bmfont.donmccurdy.com/ msdf-bmfont-web] <i>(web-based)</i></li>
-				<li>[link:https://github.com/soimy/msdf-bmfont-xml msdf-bmfont-xml] <i>(commandline)</i></li>
-				<li>[link:https://github.com/libgdx/libgdx/wiki/Hiero hiero] <i>(desktop app)</i></li>
-			</ul>
-		</div>
-
-
-		<h2>7. Troika Text</h2>
-		<div>
-			<p>
-				Il pacchetto [link:https://www.npmjs.com/package/troika-three-text troika-three-text] esegue il rendering
-        del testo con antialias utilizzando una tecnica simile a BMFont, ma funziona direttamente con font di tipo .TTF o .WOFF
-        in modo da non dover pregenerare una texture glyph offline. Ha anche altre funzionalità, tra cui:
-			</p>
-			<ul>
-				<li>Effetti come pennellate, ombreggiature e curvature</li>
-				<li>La capacità di applicare qualsiasi materiale three.js, anche un ShaderMaterial personalizzato</li>
-				<li>Supporto per le legature dei font, script con lettere unite e il layout da destra-a-sinistra/bidirezionale</li>
-				<li>Ottimizzazione per grandi quantità di testo dinamico, eseguendo la maggior parte del lavoro fuori dal thread principale in un web worker</li>
-			</ul>
-		</div>
-
-
-	</body>
-</html>

docs/manual/it/introduction/Drawing-lines.html

@@ -1,64 +0,0 @@
-<!DOCTYPE html>
-<html lang="it">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>Disegnare linee ([name])</h1>
-		<div>
-      <p>
-				Diciamo che tu voglia disegnare una linea o un cerchio, non un wireframe [page:Mesh].
-        Prima bisogna impostare il [page:WebGLRenderer renderer], la [page:Scene scene] e la camera (vedi la pagina Creare una scena).
-			</p>
-
-			<p>Di seguito il codice che utilizzeremo:</p>
-			<code>
-const renderer = new THREE.WebGLRenderer();
-renderer.setSize( window.innerWidth, window.innerHeight );
-document.body.appendChild( renderer.domElement );
-
-const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
-camera.position.set( 0, 0, 100 );
-camera.lookAt( 0, 0, 0 );
-
-const scene = new THREE.Scene();
-			</code>
-			<p>La prossima cosa da fare è definire il materiale. Per le linee possiamo usare [page:LineBasicMaterial] o [page:LineDashedMaterial].</p>
-			<code>
-//crea una LineBasicMaterial blu
-const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
-			</code>
-
-			<p>
-				Dopo la definizione del materiale abbiamo bisogno di una geometria con alcuni vertici:
-			</p>
-
-			<code>
-const points = [];
-points.push( new THREE.Vector3( - 10, 0, 0 ) );
-points.push( new THREE.Vector3( 0, 10, 0 ) );
-points.push( new THREE.Vector3( 10, 0, 0 ) );
-
-const geometry = new THREE.BufferGeometry().setFromPoints( points );
-			</code>
-
-			<p>Da notare che le linee vengono tracciate tra ogni coppia consecutiva di vertici, ma non tra il primo e l'ultimo vertice (la linea non è chiusa).</p>
-
-			<p>Ora che abbiamo i punti per due linee e un materiale, possiamo unirli per formare una linea.</p>
-			<code>
-const line = new THREE.Line( geometry, material );
-			</code>
-			<p>Non resta che aggiungerlo alla scena e chiamare il [page:WebGLRenderer.render render].</p>
-
-			<code>
-scene.add( line );
-renderer.render( scene, camera );
-			</code>
-
-			<p>Ora dovresti vedere una freccia che punta verso l'alto formata da due linee blu.</p>
-		</div>
-	</body>
-</html>

docs/manual/it/introduction/FAQ.html

@@ -1,64 +0,0 @@
-<!DOCTYPE html>
-<html lang="it">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>FAQ ([name])</h1>
-
-		<h2>Qual è il formato per i modelli 3D meglio supportato?</h2>
-		<div>
-			<p>
-        Il formato raccomandato per importare ed esportare modelli 3D è il glTF (GL Transmission Format). 
-        Poiché è focalizzato sulla distribuzione di risorse in runtime, è compatto da trasmettere e veloce da caricare. 
-			</p>
-			<p>
-        Three.js mette a disposizione loader per molti altri formati popolari come FBX, Collada o OBJ.
-        Tuttavia, si dovrebbe, nei propri progetti, sempre cercare di stabilire prima un flusso di lavoro basato su glTF.
-        Per maggiori informazioni consultare la guida sul [link:#manual/introduction/Loading-3D-models caricamento dei modelli 3D].
-			</p>
-		</div>
-
-		<h2>Perché negli esempi sono presenti meta tag viewport?</h2>
-		<div>
-				<code>&lt;meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"&gt;</code>
-
-				<p>Questi tag controllano le dimensioni e la scala del viewport per i browser su mobile (dove il contenuto della pagina può essere visualizzato con dimensioni diverse rispetto al viewport).</p>
-
-				<p>[link:https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html Safari: Usare il Viewport]</p>
-
-				<p>[link:https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag MDN: Usare il meta tag viewport]</p>
-		</div>
-
-		<h2>Come si può conservare la scala della scena durante il ridimensionamento?</h2>
-		<p>
-      Vogliamo che tutti gli oggetti indipendentemente dalla loro distanza dalla camera, siano visualizzati con le stesse dimensioni anche se la finestra viene ridimensionata.
-
-      L'equazione chiave per risolvere questo problema è data da questa formula per l'altezza visibile ad una data distanza:
-
-			<code>
-visible_height = 2 * Math.tan( ( Math.PI / 180 ) * camera.fov / 2 ) * distance_from_camera;
-			</code>
-      Se aumentiamo l'altezza della finestra di una certa percentuale, vogliamo che l'altezza visibile a tutte le distanze aumenti della stessa percentuale.
-
-      Questo non può essere fatto cambiando la posizione della camera. È invece necessario modificare il valore del campo visivo (fov) della camera.
-			[link:http://jsfiddle.net/Q4Jpu/ Esempio].
-		</p>
-
-		<h2>Perché una parte del mio oggetto è invisibile?</h2>
-		<p>
-      Questo comportamento può essere causato dal "face culling" (eliminazione delle facce). Le facce hanno un orientamento che decide quale lato è quello giusto.
-      E il culling (eliminazione) rimuove il lato posteriore in circostanze normali. Per verificare se il problema è questo cambia la proprietà side del materiale con THREE.DoubleSide.
-
-			<code>material.side = THREE.DoubleSide</code>
-		</p>
-
-		<h2>Perché three.js a volte restituisce strani risultati per input non validi?</h2>
-		<p>
-      Per ragioni di performance three.js nella maggior parte dei casi non convalida gli input. È responsabilità della tua applicazione di controllare i dati che vengono passati a three.js.
-		</p>
-	</body>
-</html>

docs/manual/it/introduction/How-to-create-VR-content.html

@@ -1,79 +0,0 @@
-<!DOCTYPE html>
-<html lang="it">
-
-<head>
-	<meta charset="utf-8">
-	<base href="../../../" />
-	<script src="page.js"></script>
-	<link type="text/css" rel="stylesheet" href="page.css" />
-</head>
-
-<body>
-	<h1>Come creare contenuti VR ([name])</h1>
-
-	<p>
-    Questa guida fornisce una breve panoramica sui componenti di base di un'applicazione VR basata sul web realizzata con three.js.
-	</p>
-
-	<h2>Workflow</h2>
-
-	<p>
-    Prima di tutto devi includere [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/webxr/VRButton.js VRButton.js] nel tuo progetto.
-	</p>
-
-	<code>
-import { VRButton } from 'three/addons/webxr/VRButton.js';
-	</code>
-
-	<p>
-    *VRButton.createButton()* fa due cose importanti: Crea un bottone per indicare la compatibilità con il VR.
-    Inoltre, se l'utente attiva il bottone, viene avviata una sessione VR. L'unica cosa che devi fare è aggiungere la seguente
-    linea di codice al tuo progetto.
-	</p>
-
-	<code>
-document.body.appendChild( VRButton.createButton( renderer ) );
-	</code>
-
-	<p>
-    Successivamente, hai bisogno di dire alla tua istanza di `WebGLRenderer` di abilitare il rendering XR.
-	</p>
-
-	<code>
-renderer.xr.enabled = true;
-	</code>
-
-	<p>
-    Infine, devi regolare il ciclo di animazione poiché non possiamo utilizzare la nota funzione *window.requestAnimationFrame()*.
-    Per i progetti VR viene utilizzato il metodo [page:WebGLRenderer.setAnimationLoop setAnimationLoop].
-    Il codice minimo si presenta così:
-	</p>
-
-	<code>
-renderer.setAnimationLoop( function () {
-
-	renderer.render( scene, camera );
-
-} );
-	</code>
-
-	<h2>Prossimi passi</h2>
-
-	<p>
-    Dai un'occhiata ad uno degli esempi ufficiali di WebVR per vedere questo flusso di lavoro in azione. <br /><br />
-
-		[example:webxr_xr_ballshooter WebXR / XR / ballshooter]<br />
-		[example:webxr_xr_cubes WebXR / XR / cubes]<br />
-		[example:webxr_xr_dragging WebXR / XR / dragging]<br />
-		[example:webxr_xr_paint WebXR / XR / paint]<br />
-		[example:webxr_xr_sculpt WebXR / XR / sculpt]<br />
-		[example:webxr_vr_panorama_depth WebXR / VR / panorama_depth]<br />
-		[example:webxr_vr_panorama WebXR / VR / panorama]<br />
-		[example:webxr_vr_rollercoaster WebXR / VR / rollercoaster]<br />
-		[example:webxr_vr_sandbox WebXR / VR / sandbox]<br />
-		[example:webxr_vr_video WebXR / VR / video]
-	</p>
-
-</body>
-
-</html>

docs/manual/it/introduction/How-to-dispose-of-objects.html

@@ -1,124 +0,0 @@
-<!DOCTYPE html>
-<html lang="it">
-
-<head>
-	<meta charset="utf-8">
-	<base href="../../../" />
-	<script src="page.js"></script>
-	<link type="text/css" rel="stylesheet" href="page.css" />
-</head>
-
-<body>
-	<h1>Come liberare le risorse ([name])</h1>
-
-	<p>
-    Un aspetto importante per migliorare le prestazioni ed evitare perdite di memoria nella tua applicazione è l'eliminazione delle entità della libreria non utilizzate.
-    Ogni volta che viene creata un'istanza di un tipo *three.js*, viene allocata una certa quantità di memoria. Tuttavia, *three.js* crea per oggetti specifici
-    come le geometrie o i materiali, entità correlate WebGL, come buffer o programmi shader, necessari per il rendering. È importante sottolineare che
-    questi oggetti non vengono rilasciati automaticamente. Invece, l'applicazione utilizza una speciale API per liberare tali risorse. Questa guida fornisce
-    una breve panoramica su come l'API viene utilizzata e quali oggetti sono rilevanti in questo contesto.
-	</p>
-
-	<h2>Geometrie</h2>
-
-	<p>
-    Una geometria solitamente rappresenta le informazioni sui vertici come una collezione di attributi. *three.js* internamente crea un oggetto di tipo [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLBuffer WebGLBuffer]
-    per ogni attributo. Queste entità vengono cancellate solo se viene chiamato il metodo [page:BufferGeometry.dispose](). Se una geometria, nella tua applicazione,
-    diventa obsoleta, esegui questo metodo per liberare tutte le risorse correlate.
-	</p>
-
-	<h2>Materiali</h2>
-
-	<p>
-    Un materiale definisce come sono visualizzati gli oggetti. *three.js* utilizza le informazioni di una definizione di materiale per costruire un programma shader per il rendering.
-    I programmi shader possono essere cancellati solo se il respettivo materiale è eliminato. Per ragioni di prestazioni, *three.js* prova, se possibile, a riutilizzare 
-    il programma shader già esiste. Quindi un progamma di shader può essere cancellato solo se tutti i relativi materiali sono eliminati. Puoi eseguire l'eliminazione
-    di un materiale eseguendo il metodo [page:Material.dispose]().
-	</p>
-
-	<h2>Texture</h2>
-
-	<p>
-    L'eliminazione di un materiale non ha effetti sulle texture. Queste vengono gestite separatamente, poiché una singola texture può essere usata da più materiali contemporaneamente.
-    Ogni volta che crei un'istanza di [page:Texture], three.js internamente crea un'istanza di [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture WebGLTexture].
-    Come per i buffer, questo oggetto può essere eliminato  solo chiamando il metodo[page:Texture.dispose]().
-	</p>
-
-	<p>
-    Se stai usando `ImageBitmap` come origine dati della texture, devi chiamare il metodo [link:https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap/close ImageBitmap.close]() a livello applicativo per liberare le risorse lato CPU.
-    Una chiamata automatica di `ImageBitmap.close()`in [page:Texture.dispose]() non è possibile, poiché il bitmap dell'immagine diventa inutilizzabile, e l'engine non ha modo di sapere se il bitmap dell'immagine è utilizzata da altre parti.
-	</p>
-
-	<h2>Render Target</h2>
-
-	<p>
-    Oggetti di tipo [page:WebGLRenderTarget] non allocano solo un'istanza di [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture WebGLTexture] ma anche 
-    di [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLFramebuffer WebGLFramebuffer] e di [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderbuffer WebGLRenderbuffer]
-    per realizzare destinazioni di rendering personalizzate. Questi oggetti vengono solo deallocati eseguendo il metodo [page:WebGLRenderTarget.dispose]().
-	</p>
-
-	<h2>Varie</h2>
-
-	<p>
-    Ci sono altre classi nella cartella degli esempi come i control o passaggi di post-processing che forniscono metodi `dispose()` per rimuovere i listener di eventi interni o 
-    renderizzare i target. In generale, viene raccomandato di controllare le API o la documentazione della classe e controllare il metodo `dispose()`. Se presente dovresti utilizzarlo per liberare le risorse.
-	</p>
-
-	<h2>FAQ</h2>
-
-	<h3>Perché *three.js* non può eliminare gli oggetti automaticamente?</h3>
-
-	<p>
-    Questa domanda è stata fatta spesso dalla community, quindi è importante chiarire la questione. Il fatto è che *three.js* non conosce il ciclo di vita o lo scopo 
-    delle entità create dall'utente come le geometrie o i materiali, questa è una responsabilità dell'applicazione. Per esempio, anche se un materiale non è momentamenente utilizzato per il 
-    rendering, potrebbe essere necessario per il prossimo frame. Quindi se l'applicazione decide che un determianto oggetto può essere cancellato lo notifica all'engine tramite la chiamata 
-    al rispettivo metodo `dispose()`.
-	</p>
-
-	<h3>La rimozione di una mesh dalla scena elimina anche la sua geometria e il suo materiale?</h3>
-
-  <p>
-		No, devi eliminare esplicitamente la geometria e il materiale chiamando il metodo *dispose()*. Tieni a mente che le geometrie e i materiali possono essere condivisi tra oggetti 3D come le mesh.
-	</p>
-
-	<h3>*three.js* fornisce informazioni sulla quantità di oggetti memorizzati nella cache?</h3>
-  
-	<p>
-    Si, è possibile consultare [page:WebGLRenderer.info]. Una proprietà speciale del renderer con una serie di informazioni statistiche sulla memoria della scheda grafica
-    e il processo di rendering. Tra le altre cose, riporta anche quante texture, geometrie e programmi shader sono internamente memorizzati. Se noti che ci sono problemi 
-    di performance nell'applicazione, è una buona idea debuggare questa proprietà per identificare facilmente se c'è una perdita di memoria.
-	</p>
-
-	<h3>Che cosa succede quando il metodo `dispose()` viene chiamato su una texture ma l'immagine non è ancora stata caricata?</h3>
-
-	<p>
-    Le risorse interne di una texture vengono allocate solo se l'immagine è caricata con successo. Se elimini una texture prima che l'immagine venga caricata
-    non succede niente. Nessuna risorsa è stata allocata, quindi niente deve essere pulito.
-	</p>
-
-	<h3>Cosa succede quando chiamo `dispose()` e poi utilizzo il rispettivo oggetto in un secondo momento?</h3>
-
-	<p>
-    Le risorse interne che sono state cancellate saranno ricreate dall'engine, in questo modo non ci saranno errori a runtime. Probabilmente, però, noterai un impatto negativo sulle performance nel 
-    frame corrente quando il programma shader sarà compilato.
-	</p>
-
-	<h3>Come devo gestire gli oggetti *three.js* nella mia app? Quando so che devo eliminare le risorse?</h3>
-
-	<p>
-    In generale non c'è una raccomandazione definitiva per questo. Dipende molto dal caso d'uso specifico. È importante sottolineare che non è sempre necessario 
-    eliminare oggetti tutto il tempo. Un buon esempio esemplificativo è un gioco a più livelli. Un buon momento per eliminare gli oggetti è quando viene cambiato il livello.
-    L'applicazione può attraversare tutta la vecchia scena (livello) ed eliminare tutti i vecchi materiali, geometrie e texture. Come accennato nella sezione precedente,
-    se viene cancellato un oggetto che è attualmente in uso non produce un errore a runtime. La cosa peggiore che può accadere è un calo delle prestazioni in un singolo frame. 
-	</p>
-
-	<h2>Esempi che mostarno l'uso del metodo dispose()</h2>
-
-	<p>
-		[example:webgl_test_memory WebGL / test / memory]<br />
-		[example:webgl_test_memory2 WebGL / test / memory2]<br />
-	</p>
-
-</body>
-
-</html>

docs/manual/it/introduction/How-to-update-things.html

@@ -1,220 +0,0 @@
-<!DOCTYPE html>
-<html lang="it">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>Come aggiornare le cose ([name])</h1>
-		<div>
-			<p>Tutti gli oggetti di default, automaticamente aggiornano le loro matrici se vengono aggiunti alla scena seguendo il codice qui sotto:</p>
-			<code>
-const object = new THREE.Object3D();
-scene.add( object );
-			</code>
-      o se sono figli di un altro oggetto che è stato aggiunto alla scena:
-			<code>
-const object1 = new THREE.Object3D();
-const object2 = new THREE.Object3D();
-
-object1.add( object2 );
-scene.add( object1 ); // object1 e object2 aggiorneranno automaticamente le loro matrici
-			</code>
-		</div>
-
-		<p>Comunque, se sai che l'oggetto sarà statico, puoi disabilitare questo automatismo e aggiornare manualmente la matrice di trasformazione, solo quando necessario.</p>
-
-		<code>
-object.matrixAutoUpdate = false;
-object.updateMatrix();
-		</code>
-
-		<h2>BufferGeometry</h2>
-		<div>
-			<p>
-        Le BufferGeometry memorizzano le informazioni (come le posizioni dei vertici, gli indici delle facce, le normali, i colori,
-        le coordinate UV, e qualsiasi attributo personalizzato) nel [page:BufferAttribute buffer] - cioè in 
-        [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays array tipizzati].
-        Ciò le rende generalmente più veloci delle Geometry standard, al costo di essere un po' più difficili da lavorare.
-			</p>
-			<p>
-        Per quanto riguarda l'aggiornamento delle BufferGeometry, la cosa più importante da capire è che 
-        il buffer non può essere ridimensionato (questo è molto costoso e basicamente equivalente a creare una nuova geometria).
-        Indipendetemente da questo il contenuto dei buffer può essere comunque aggiornato.
-			</p>
-			<p>
-        Questo significa che se sai che un attributo della BufferGeometry crescerà, ad esempio il numero di vertici,
-        è necessario preallocare un buffer sufficientemente grande per contenere i nuovi vertici che potrebbero essere creati. 
-        Ovviamente, questo significa anche che ci sarà una dimensione massima per la tua BufferGeometry - non è possibile
-        creare una BufferGeometry che possa essere estesa in modo efficiente indefinitamente.
-			</p>
-			<p>
-        Useremo l'esempio di una linea che viene estesa al momento del rendering. Allocheremo spazio nel buffer per contenere 500 vertici
-        ma all'inizio ne disegneremo soltanto due, usando [page:BufferGeometry.drawRange].
-			</p>
-			<code>
-const MAX_POINTS = 500;
-
-// geometry
-const geometry = new THREE.BufferGeometry();
-
-// attributes
-const positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
-geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
-
-// draw range
-const drawCount = 2; // draw the first 2 points, only
-geometry.setDrawRange( 0, drawCount );
-
-// material
-const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
-
-// line
-const line = new THREE.Line( geometry, material );
-scene.add( line );
-			</code>
-		 	<p>
-        Quindi, aggiungeremo punti alla linea in maniera random usando un pattern come questo:
-			</p>
-			<code>
-const positionAttribute = line.geometry.getAttribute( 'position' );
-
-let x = 0, y = 0, z = 0;
-
-for ( let i = 0; i < positionAttribute.count; i ++ ) {
-
-	positionAttribute.setXYZ( i, x, y, z );
-
-	x += ( Math.random() - 0.5 ) * 30;
-	y += ( Math.random() - 0.5 ) * 30;
-	z += ( Math.random() - 0.5 ) * 30;
-
-}
-			</code>
-			<p>
-				Se vuoi cambiare il <em>numero di punti</em> visualizzati dopo il primo render, procedi come segue;
-			</p>
-			<code>
-line.geometry.setDrawRange( 0, newValue );
-			</code>
-			<p>
-        Se vuoi cambiare i valori dei dati di posizione dopo il primo render, è necessario
-        impostare il flag di needsUpdate come segue:
-			</p>
-			<code>
-positionAttribute.needsUpdate = true; // required after the first render
-			</code>
-
-			<p>
-        Se vuoi modificare i valori dei dati di posizione dopo il rendering iniziale, è necessario
-        ricalcolare i volumi di delimitazione (bounding volumes) in modo che altre funzionalità dell'engine
-        come l'eliminazione del frustum di visualizzazione o gli helpers possano funzionare correttamente. 
-			</p>
-			<code>
-line.geometry.computeBoundingBox();
-line.geometry.computeBoundingSphere();
-			</code>
-
-			<p>
-				[link:https://jsfiddle.net/t4m85pLr/1/ Qui un fiddle] che mostra una linea animata che può essere adattata al tuo caso d'uso.
-			</p>
-
-			<h3>Esempi</h3>
-
-			<p>
-				[example:webgl_custom_attributes WebGL / custom / attributes]<br />
-				[example:webgl_buffergeometry_custom_attributes_particles WebGL / buffergeometry / custom / attributes / particles]
-			</p>
-
-		</div>
-
-		<h2>Materiali</h2>
-		<div>
-			<p>Tutti i valori costanti possono essere cambiati liberamente (come i colori, le texture, l'opacità, etc), valori che vengono inviati allo shader ad ogni frame.</p>
-
-			<p>Anche i parametri relativi a GLstate possono essere cambiati in qualsiasi momento (depthTest, blending, polygonOffset, etc).</p>
-
-			<p>Invece, le proprietà seguenti non possono essere modificare facilmente in fase di esecuzione (una volta che il materiale è stato renderizzato almeno una volta):</p>
-			<ul>
-				<li>numero e tipi di costanti</li>
-				<li>presenza oppure no di
-					<ul>
-						<li>texture</li>
-						<li>fog</li>
-						<li>vertex colors</li>
-						<li>morphing</li>
-						<li>shadow map</li>
-						<li>alpha test</li>
-						<li>transparent</li>
-					</ul>
-				</li>
-			</ul>
-
-			<p>Le modifiche di questi richiedono la creazione di un nuovo programma di shader. Dovrai impostare:</p>
-			<code>material.needsUpdate = true</code>
-
-			<p>Tieni presente che questa operazione potrebbe essere piuttosto lenta e causare scatti nel framerate (specialmente su Windows, poiché la compilazione degli shader è più lenta in DirectX che in OpenGL).</p>
-
-			<p>Per creare un'esperienza più fluida puoi emulare in una certa misura le modifiche a queste funzionalità avendo valori "fittizi" come luci ad intensità zero, texture bianche, o fog a zero densità.</p>
-
-			<p>È possibile cambiare liberamente il materiale utilizzato per i blocchi di geometria, tuttavia non è possibile modificare il modo in cui un oggetto è diviso in blocchi (in base ai materiali della faccia).</p>
-
-			<h3>Se è necessario disporre di diverse configurazioni dei materiali durante l'esecuzione:</h3>
-			<p>Se il numero di materiali / blocchi è piccolo, puoi dividere l'oggetto in anticipo (per esempio capelli / faccia / corpo / vestiti superiori / pantaloni per un umano / davanti / dietro / parte superiore / occhiali / pneumatico / interni di una macchina). </p>
-
-			<p>Se, invece, il numero è grande (per esempio, ogni faccia potrebbe essere potenzialmente diversa), considera una soluzione divera, come usare attributi / texture per ottenere un aspetto diverso per faccia.</p>
-
-			<h3>Esempi</h3>
-			<p>
-				[example:webgl_materials_car WebGL / materials / car]<br />
-				[example:webgl_postprocessing_dof WebGL / webgl_postprocessing / dof]
-			</p>
-		</div>
-
-
-		<h2>Texture</h2>
-		<div>
-			<p>Se immagini, canvas, video e texture vengono modificate devono avere il flag <em>needsUpdate</em> impostato come segue:</p>
-			<code>
-				texture.needsUpdate = true;
-			</code>
-			<p>Le destinazioni di rendering si aggiornano automaticamente.</p>
-
-			<h3>Esempi</h3>
-			<p>
-				[example:webgl_materials_video WebGL / materials / video]<br />
-				[example:webgl_rtt WebGL / rtt]
-			</p>
-
-		</div>
-
-
-		<h2>Telecamere</h2>
-		<div>
-			<p>La posizione e il target di una camera vengono aggiornati automaticamente. Se hai bisogno di cambiare</p>
-			<ul>
-				<li>
-					fov
-				</li>
-				<li>
-					aspect
-				</li>
-				<li>
-					near
-				</li>
-				<li>
-					far
-				</li>
-			</ul>
-			<p>
-        dovrai ricalcolare la matrice di proiezione:
-			</p>
-			<code>
-camera.aspect = window.innerWidth / window.innerHeight;
-camera.updateProjectionMatrix();
-			</code>
-		</div>
-	</body>
-</html>

docs/manual/it/introduction/How-to-use-post-processing.html

@@ -1,117 +0,0 @@
-<!DOCTYPE html>
-<html lang="it">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>Come utilizzare il post-processing (How to use post-processing)</h1>
-
-		<p>
-      Molte applicazioni 3D visualizzano i loro oggetti 3D direttamente sullo schermo. A volte, tuttavia, si vuole applicare uno o più effetti grafici
-      come Depth-Of-Field, Bloom, Film Grain o vari tipi di Anti-aliasing. Il Post-processing è una soluzione ampiamente utilizzata per implementare questi effetti.
-      Prima di tutto, la scena viene renderizzata su un target di rendering che rappresenta un buffer nella memoria della scheda video.
-      Nella fase successiva, uno o più passaggi di post-processing applicano filtri ed effetti al buffer dell'immagine prima che questa venga infine renderizzata
-      sullo schermo.
-		</p>
-		<p>
-      three.js fornisce una soluzione di post-processing completa tramite [page:EffectComposer] per implementare tale flusso di lavoro.
-		</p>
-
-		<h2>Workflow</h2>
-
-		<p>
-      Il primo step, nel processo, è quello di importare tutti i file necessari dalla cartella degli esempi. La guida presuppone che si utilizzi
-      il [link:https://www.npmjs.com/package/three pacchetto npm] ufficiale di three.js. Per la nostra demo di base in questa guida abbiamo
-      bisogno dei seguenti file:
-		</p>
-
-		<code>
-		import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
-		import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
-		import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
-		import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
-		</code>
-
-		<p>
-      Dopo che tutti i file sono stati importati con successo, possiamo creare il nostro composer passandogli un'istanza di [page:WebGLRenderer].
-		</p>
-
-		<code>
-		const composer = new EffectComposer( renderer );
-		</code>
-
-		<p>
-      Quando viene usato un composer è necessario modificare il ciclo di animazine dell'applicazione. Invece di chiamare il metodo render di
-      [page:WebGLRenderer], usiamo la rispettiva controparte di [page:EffectComposer].
-		</p>
-
-		<code>
-		function animate() {
-
-			requestAnimationFrame( animate );
-
-			composer.render();
-
-		}
-		</code>
-
-		<p>
-      Il composer è pronto, ed è possibile configurare la catena di passaggi di post-processing. Questi passaggi sono i responsabili per la creazione
-      dell'output visivo finale dell'applicazione. Vengono elaborati nello stesso ordine in cui sono stati aggiunti/inseriti. In our example, the instance of `RenderPass`
-      is executed first, then the instance of `GlitchPass` and finally `OutputPass`. L'ultimo passaggio abilitato della catena viene automaticamente renderizzato sullo schermo.
-      La configurazione dei passaggi è la seguente:
-		</p>
-
-		<code>
-		const renderPass = new RenderPass( scene, camera );
-		composer.addPass( renderPass );
-
-		const glitchPass = new GlitchPass();
-		composer.addPass( glitchPass );
-
-		const outputPass = new OutputPass();
-		composer.addPass( outputPass );
-		</code>
-
-		<p>
-      `RenderPass` viene normalmente posizionata all'inizio della catena per fornire la scena renderizzata come input per il passaggio successivo di post-processing.
-      Nel nostro caso `GlitchPass` utilizzarà questi dati di immagine per applicare un effetto glitch selvaggio.  `OutputPass` is usually the last pass in the chain which performs sRGB color space conversion and optional tone mapping.
-      Guarda questo [link:https://threejs.org/examples/webgl_postprocessing_glitch esempio live] per vederli in azione.
-		</p>
-
-		<h2>Passi Built-in</h2>
-
-		<p>
-      È possibile utilizzare un'ampia gamma di passaggi di post-processing predefiniti forniti dall'engine. Si possono trovare nella
-      cartella di [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing postprocessing].
-		</p>
-
-		<h2>Passi personalizzati</h2>
-
-		<p>
-      A volte si desidera scrivere uno shader di post-processing personalizzato e includerlo nella catena dei passi di post-processing.
-      Per questo scenario puoi utilizzare `ShaderPass`. Dopo aver importato il file e lo shader personalizzato, si può usare il seguente codice per
-      impostare i passaggi:
-		</p>
-
-		<code>
-		import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
-		import { LuminosityShader } from 'three/addons/shaders/LuminosityShader.js';
-
-		// later in your init routine
-
-		const luminosityPass = new ShaderPass( LuminosityShader );
-		composer.addPass( luminosityPass );
-		</code>
-
-		<p>
-      Il repository fornisce un file chiamato [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/shaders/CopyShader.js CopyShader], il quale è un ottimo
-      punto di partenza per il tuo shader personalizzato. `CopyShader` copia semplicemente il contenuto dell'immagine del buffer di lettura dell'[page:EffectComposer]
-      nel buffer di scrittura senza applicare alcun effetto.
-		</p>
-
-	</body>
-</html>

docs/manual/it/introduction/Installation.html

@@ -1,152 +0,0 @@
-<!DOCTYPE html>
-<html lang="it">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>Installazione ([name])</h1>
-
-    <p>
-			È possibile installare three.js con [link:https://www.npmjs.com/ npm] e i moderni strumenti di compilazione, o iniziare rapidamente con un hosting statico o un CDN. Per la maggior parte degli utenti fare l'installazione usando npm è la scelta migliore.
-		</p>
-
-    <p>
-			Qualsiasi soluzione venga scelta, sii coerente e importa tutti i file della stessa versione della libreria.
-      Mescolare file provenienti da fonti diverse può causare l'inclusione di codice duplicato o addirittura rompere l'applicazione in modo imprevisto.
-		</p>
-
-    <p>
-			Tutti i metodi di installazione di three.js dipendono dai moduli ES (vedi [link:https://eloquentjavascript.net/10_modules.html#h_hF2FmOVxw7 Eloquent JavaScript: ECMAScript Modules]), i quali permettono di includere nel progetto finale solo le parti della libreria necessarie.
-		</p>
-
-		<h2>Installazione tramite npm</h2>
-
-    <p>
-			Per installare il modulo npm di [link:https://www.npmjs.com/package/three three], apri il terminale nella cartella del progetto ed esegui:
-		</p>
-
-		<code>
-		npm install three
-		</code>
-
-    <p>
-			Il pacchetto verrà scaricato e installato. Quindi sarà pronto per essere importato nel tuo codice:
-		</p>
-
-		<code>
-		// Opzione 1: Importa l'intera libreria di base di three.js
-		import * as THREE from 'three';
-
-		const scene = new THREE.Scene();
-
-
-		// Opzione 2: Importa solo le parti di cui hai bisogno
-		import { Scene } from 'three';
-
-		const scene = new Scene();
-		</code>
-
-    <p>
-			Quando la libreria viene installata da npm, verrà quasi sempre utilizzato uno [link:https://eloquentjavascript.net/10_modules.html#h_zWTXAU93DC strumento di bundling] per combinare tutti i pacchetti richiesti dal tuo progetto in un unico file JavaScript. Sebbene con three.js si possa utilizzare qualsiasi moderno strumento di bundling, la scelta più popolare è [link:https://webpack.js.org/ webpack].
-		</p>
-
-		<p>
-			Non tutte le funzioni sono accessibili direttamente attraverso il modulo <em>three</em> (chiamato anche "bare import"). Altre parti popolari della libreria — come i controls, i loaders e gli effetti di post-processing — devono essere importati dalla sottocartella [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm]. Per saperne di più si vedano gli <em>Esempi</em> qui sotto.
-		</p>
-
-    <p>
-			Per saperne di più sui moduli npm, consultare [link:https://eloquentjavascript.net/20_node.html#h_J6hW/SmL/a Eloquent JavaScript: Installing with npm].
-		</p>
-
-		<h2>Installazione da CDN o hosting statico</h2>
-
-    <p>
-			La libreria three.js può essere usata senza alcun sistema di building, sia caricando i file sul tuo server web o usando un CDN esistente. Poiché la libreria si basa su moduli ES, qualsiasi script che fa riferimento ad essa deve usare <em>type="module"</em> come mostrato di seguito.
-      Inoltre è necessario anche definire un Import Map che risolva il bare module `three`.
-		</p>
-
-		<code>
-		&lt;script type="importmap">
-		  {
-		    "imports": {
-		      "three": "https://cdn.jsdelivr.net/npm/three@&lt;version&gt;/build/three.module.js"
-		    }
-		  }
-		&lt;/script>
-
-		&lt;script type="module">
-
-		  import * as THREE from 'three';
-
-		  const scene = new THREE.Scene();
-
-		&lt;/script>
-		</code>
-
-		<h2>Addons</h2>
-
-		<p>
-			Il core di three.js è incentrato sui componenti più importanti di un engine 3D. Molti altri componenti utili - come i controls, i loaders e gli effetti post-processing - sono parte della sottocartella [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm]. Vengono definiti "esempi" perché, pur potendo essere utilizzati in modo immediato, sono anche destinati a essere remixati e personalizzati. Questi componenti vengono sempre mantenuti sincronizzati con la libreria principale, mentre i pacchetti di terze parti su npm sono gestiti da persone differenti e potrebbero non essere aggiornati.
-		</p>
-
-		<p>
-			Non è necessario <em>installare</em> gli addons separatamente, ma dovranno essere <em>importati</em> separatamente. Se three.js è stato installato con npm, è possibile caricare il componente [page:OrbitControls] con:
-		</p>
-
-		<code>
-		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-
-		const controls = new OrbitControls( camera, renderer.domElement );
-		</code>
-
-		<p>
-			Se three.js è stato installato da un CDN, usare lo stesso CDN per installare altri componenti:
-		</p>
-
-		<code>
-		&lt;script type="importmap">
-			{
-			"imports": {
-				"three": "https://cdn.jsdelivr.net/npm/three@&lt;version&gt;/build/three.module.js",
-				"three/addons/": "https://cdn.jsdelivr.net/npm/three@&lt;version&gt;/examples/jsm/"
-			}
-			}
-		&lt;/script>
-
-		&lt;script type="module">
-
-			import * as THREE from 'three';
-			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-
-			const controls = new OrbitControls( camera, renderer.domElement );
-
-		&lt;/script>
-		</code>
-
-		<p>
-			È importante che tutti i file usino la stessa versione. Non devono essere importati addons diversi con versioni diverse, o usare addons che derivano da una versione differente di three.js.
-		</p>
-
-		<h2>Compatibilità</h2>
-
-		<h3>Import CommonJS</h3>
-
-		<p>
-			La maggior parte dei bundler JavaScript moderni supportano i moduli ES di default, ma questo non è detto per bundler più vecchi. In questo caso è possibile configurare il bundler per riconoscere i moduli ES. Ad esempio [link:http://browserify.org/ Browserify] ha solo bisogno del plugin [link:https://github.com/babel/babelify babelify].
-		</p>
-
-		<h3>Node.js</h3>
-
-		<p>
-			Poiché three.js è stato creato per il web, dipende dal browser e dalle API del DOM che non sempre esistono in Node.js. Alcuni di questi problemi possono essere risolti usando dei "tappa buchi" come [link:https://github.com/stackgl/headless-gl headless-gl], o sostituendo i componenti come [page:TextureLoader] con alternative personalizzate. Altre API del DOM potrebbero essere profondamente intrecciate con il codice che le utilizza e potrebbe essere più difficile aggirarle. Accettiamo benvolentieri le pull request semplici e gestibili per migliorare il supporto di Node.js, ma raccomandiamo di aprire prima una issue per discutere dei tuoi miglioramenti.
-		</p>
-
-		<p>
-			Assicurati di aggiungere `{ "type": "module" }` al tuo `package.json` per abilitare i moduli ES nel tuo progetto Node.
-		</p>
-
-	</body>
-</html>

docs/manual/it/introduction/Libraries-and-Plugins.html

@@ -1,118 +0,0 @@
-<!DOCTYPE html>
-<html lang="it">
-	<head>
-		<meta charset="utf-8" />
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>Librerie e Plugin ([name])</h1>
-
-		<p class="desc">
-      Di seguito sono elencate librerie e plugin, sviluppati esternamente, compatibili con three.js.
-      Questo elenco e i pacchetti associati sono mantenuti e gestiti dalla community e non è garantito che siano
-      aggiornati. Se vuoi aggiornare questa lista apri una PR!
-		</p>
-
-		<h3>Fisica</h3>
-
-		<ul>
-			<li>[link:https://github.com/lo-th/Oimo.js/ Oimo.js]</li>
-			<li>[link:https://enable3d.io/ enable3d]</li>
-			<li>[link:https://github.com/kripken/ammo.js/ ammo.js]</li>
-			<li>[link:https://github.com/pmndrs/cannon-es cannon-es]</li>
-			<li>[link:https://rapier.rs/ rapier]</li>
-			<li>[link:https://github.com/jrouwe/JoltPhysics.js Jolt]</li>
-		</ul>
-
-		<h3>Post-processing</h3>
-
-		<p>
-			Oltre agli [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing effetti di post-processing ufficiali di three.js] 
-      è disponibile tramite librerie esterne il supporto per alcuni effetti e framework aggiuntivi.
-		</p>
-
-		<ul>
-			<li>[link:https://github.com/vanruesc/postprocessing postprocessing]</li>
-		</ul>
-
-		<h3>Intersezione e Performance Raycast</h3>
-
-		<ul>
-			<li>[link:https://github.com/gkjohnson/three-mesh-bvh three-mesh-bvh]</li>
-		</ul>
-
-		<h3>Path Tracing</h3>
-		
-		<ul>
-			<li>[link:https://github.com/gkjohnson/three-gpu-pathtracer three-gpu-pathtracer]</li>
-		</ul>
-		
-		<h3>File Formats</h3>
-
-		<p>
-      Oltre [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders ai loaders ufficili di three.js], 
-      è disponibile tramite librerie esterne il supporto per alcuni formati aggiuntivi.
-		</p>
-
-		<ul>
-			<li>[link:https://github.com/gkjohnson/urdf-loaders/tree/master/javascript urdf-loader]</li>
-			<li>[link:https://github.com/NASA-AMMOS/3DTilesRendererJS 3d-tiles-renderer-js]</li>
-			<li>[link:https://github.com/kaisalmen/WWOBJLoader WebWorker OBJLoader]</li>
-			<li>[link:https://github.com/IFCjs/web-ifc-three IFC.js]</li>
-		</ul>
-
-		<h3>Geometria</h3>
-
-		<ul>
-			<li>[link:https://github.com/spite/THREE.MeshLine THREE.MeshLine]</li>
-		</ul>
-
-		<h3>Layout e Testo 3D</h3>
-
-		<ul>
-			<li>[link:https://github.com/protectwise/troika/tree/master/packages/troika-three-text troika-three-text]</li>
-			<li>[link:https://github.com/felixmariotto/three-mesh-ui three-mesh-ui]</li>
-		</ul>
-
-		<h3>Sistemi di particelle</h3>
-
-		<ul>
-			<li>[link:https://github.com/Alchemist0823/three.quarks three.quarks]</li>
-			<li>[link:https://github.com/creativelifeform/three-nebula three-nebula]</li>
-		</ul>
-
-		<h3>Cinematica inversa</h3>
-
-		<ul>
-			<li>[link:https://github.com/jsantell/THREE.IK THREE.IK]</li>
-			<li>[link:https://github.com/lo-th/fullik fullik]</li>
-			<li>[link:https://github.com/gkjohnson/closed-chain-ik-js closed-chain-ik]</li>
-		</ul>
-
-		<h3>Game AI</h3>
-
-		<ul>
-			<li>[link:https://mugen87.github.io/yuka/ yuka]</li>
-			<li>[link:https://github.com/donmccurdy/three-pathfinding three-pathfinding]</li>
-			<li>[link:https://github.com/isaac-mason/recast-navigation-js recast-navigation-js]</li>
-		</ul>
-
-		<h3>Wrappers e Frameworks</h3>
-
-		<ul>
-			<li>[link:https://aframe.io/ A-Frame]</li>
-			<li>[link:https://lume.io/ Lume] - HTML elements for 3D graphics built on Three.</li>
-			<li>[link:https://github.com/pmndrs/react-three-fiber react-three-fiber] - React components for 3D graphics built on Three.</li>
-			<li>[link:https://threepipe.org/ threepipe] - A versatile 3D viewer framework using three.js for rendering.</li>
-			<li>[link:https://github.com/ecsyjs/ecsy-three ECSY]</li>
-			<li>[link:https://threlte.xyz/ Threlte] - Svelte components for 3D graphics built on Three.</li>
-			<li>[link:https://needle.tools/ Needle Engine]</li>
-			<li>[link:https://tresjs.org/ tresjs] - Vue components for 3D graphics built on Three.</li>
-			<li>[link:https://giro3d.org Giro3D] - Versatile framework built on Three for visualizing and interacting with Geospatial 2D, 2.5D and 3D data.</li>			
-			<li>[link:https://zap.works/mattercraft/ Mattercraft] - Browser-based visual editor for AR, WebXR and 3D web content, built on three.js with real-time preview and physics engine.</li>
-		</ul>
-
-	</body>
-</html>

docs/manual/it/introduction/Loading-3D-models.html

@@ -1,155 +0,0 @@
-<!DOCTYPE html>
-<html lang="it">
-
-<head>
-	<meta charset="utf-8">
-	<base href="../../../" />
-	<script src="page.js"></script>
-	<link type="text/css" rel="stylesheet" href="page.css" />
-</head>
-
-<body>
-	<h1>Caricare modelli 3D ([name])</h1>
-
-  <p>
-		I modelli 3D sono disponibili in centinai di formati, ognuno con uno scopo differente, diverse funzioni
-    e complessità varie. Sebbene <a href="https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders" target="_blank" rel="noopener">
-    three.js metta a disposizione molti loader</a>, la scelta del formato e del flusso di lavoro giusti farà risparmiare tempo e frustrazione in seguito.
-    Con alcuni formati è difficile lavorare, possono essere inefficienti per le esperienze in tempo reale, o semplicemente non supportati al momento.
-	</p>
-
-  <p>
-		Questa guida mette a dispozione un flusso di lavoro consigliato per la maggior parte degli utenti, e dei suggerimenti
-    per affrontare i malfunzionamenti nel caso in cui non funzionasse come ci si aspetta.
-	</p>
-
-	<h2>Prima di iniziare</h2>
-
-	<p>
-		Se siete alle prime armi con la gestione di un server locale,
-    iniziate prima di tutto a capire [link:#manual/introduction/Installation installation].
-    Molti errori comuni nella visualizzazione dei modelli 3D possono essere evitati gestendo correttamente l'hosting dei file.
-	</p>
-
-	<h2>Workflow consigliato</h2>
-
-  <p>
-    Dove possibile, consigliamo di utilizzare il formato glTF (GL Transmission Format).
-    Entrambe le versioni <small>.GLB</small> e <small>.GLTF</small> sono supportate.
-    Il formato glTF è incentrato sulla distribuzione di asset in runtime, è compatto da trasmette e veloce da caricare.
-		Le carattestistiche includono mesh, materiali, texture, skin, skeleton, morph target, animazioni, luci, e camera.
-	</p>
-
-	<p>
-    Modelli glTF pubblici sono disponibili su siti come <a href="https://sketchfab.com/models?features=downloadable&sort_by=-likeCount&type=models" target="_blank" rel="noopener">
-      Sketchfab</a>, o vari strumenti di sviluppo di modelli includono l'esportazione glTF:
-	</p>
-
-	<ul>
-		<li><a href="https://www.blender.org/" target="_blank" rel="noopener">Blender</a> di the Blender Foundation</li>
-		<li><a href="https://www.allegorithmic.com/products/substance-painter" target="_blank" rel="noopener">Substance Painter</a> di Allegorithmic</li>
-		<li><a href="https://www.foundry.com/products/modo" target="_blank" rel="noopener">Modo</a> di Foundry</li>
-		<li><a href="https://www.marmoset.co/toolbag/" target="_blank" rel="noopener">Toolbag</a> di Marmoset</li>
-		<li><a href="https://www.sidefx.com/products/houdini/" target="_blank" rel="noopener">Houdini</a> di SideFX</li>
-		<li><a href="https://labs.maxon.net/?p=3360" target="_blank" rel="noopener">Cinema 4D</a> di MAXON</li>
-		<li><a href="https://github.com/KhronosGroup/COLLADA2GLTF" target="_blank" rel="noopener">COLLADA2GLTF</a>di the Khronos Group</li>
-		<li><a href="https://github.com/facebookincubator/FBX2glTF" target="_blank" rel="noopener">FBX2GLTF</a> di Facebook</li>
-		<li><a href="https://github.com/AnalyticalGraphicsInc/obj2gltf" target="_blank" rel="noopener">OBJ2GLTF</a> di Analytical Graphics Inc</li>
-		<li>&hellip;e <a href="http://github.khronos.org/glTF-Project-Explorer/" target="_blank" rel="noopener">molti altri</a></li>
-	</ul>
-
-	<p>
-    Se i tuoi strumenti preferiti di sviluppo dei modelli, non supportano il formato glTF,
-    considera di richiedere l'esportazione glTF agli autori,
-    o di fare un post <a href="https://github.com/KhronosGroup/glTF/issues/1051" target="_blank" rel="noopener">sul thread della roadmap di glTF</a>.
-	</p>
-
-	<p>
-    Quando il formato glTF non è disponibile, i formati popolari come FBX, OBJ, o COLLADA
-    sono comunque disponibili e mantenuti regolarmente.
-	</p>
-
-	<h2>Caricamento</h2>
-
-  <p>
-    Solo alcuni loader (ad es. [page:ObjectLoader]) sono inclusi di default con three.js — altri devono essere aggiunti all'applicazione individualmente.
-	</p>
-
-	<code>
-		import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-	</code>
-
-	<p>
-    Una volta importato un loader, sei pronto per aggiungere e caricare un modello alla scena. La sintassi
-    varia a seconda del loader utilizzato - quando vengono utilizzati altri formati, contralla gli esempi e la
-    documentazione del loader. Per il formato glTF, l'utilizzo con gli script globali sarebbe:
-	</p>
-
-	<code>
-		const loader = new GLTFLoader();
-
-		loader.load( 'path/to/model.glb', function ( gltf ) {
-
-			scene.add( gltf.scene );
-
-		}, undefined, function ( error ) {
-
-			console.error( error );
-
-		} );
-	</code>
-
-	<p>
-		Per maggiori dettagli consulta la [page:GLTFLoader documentazione GLTFLoader].
-	</p>
-
-	<h2>Troubleshooting</h2>
-
-	<p>
-    Hai passato ore a modellare un capolavoro artigianale, lo carichi nella pagina web e — oh no! 😭
-    è distorto, scolorito o mancante.
-    Inizia con questi passaggi per la risoluzione dei problemi:
-	</p>
-
-	<ol>
-		<li>
-      Controlla la console JavaScript per vedere se ci sono errori,
-      ed accertati di aver usato la funzione di callback `onError` del meotodo `.load()`
-      per visualizzare il risultato nella console.
-		</li>
-		<li>
-      Visualizza il modello in un'altra applicazione. Per il formato glTF, sono disponibili visualizzatori drag-and-drop per
-			<a href="https://gltf-viewer.donmccurdy.com/" target="_blank" rel="noopener">three.js</a> e
-			<a href="https://sandbox.babylonjs.com/" target="_blank" rel="noopener">babylon.js</a>.
-      Se il modello viene visualizzato correttamente in una o più applicazioni,
-      <a href="https://github.com/mrdoob/three.js/issues/new" target="_blank" rel="noopener">segnala il bug a three.js</a>.
-      Se il modello non è visualizzabile in nessuna applicazione, incoraggiamo vivamente di segnalare un bug
-      all'applicazione utilizzata per creare il modello.
-		</li>
-		<li>
-      Prova a scalare il modello verso l'alto o il basso di un fattore di 1000. Molti modelli sono scalati diversamente,
-      e molti modelli di grandi dimensioni non vengono visualizzati se la telecamera si trova all'interno del modello.
-		</li>
-		<li>
-      Prova ad aggiungere e posizionare una luce nella scena. Il modello potrebbe essere nascosto nell'oscurità.
-		</li>
-		<li>
-      Cerca le richieste delle texture fallite nel tab network degli strumenti per sviluppatori del browser,
-      come `"C:\\Path\To\Model\texture.jpg"`. Utilizza path relativi al tuo modello come `images/texture.jpg` -
-      ciò potrebbe richiedere una modifica del file del modello in un editor di testo.
-		</li>
-	</ol>
-
-	<h2>Chiedere aiuto</h2>
-
-	<p>
-		Se hai eseguito la procedura di risoluzione dei problemi qui sopra e il tuo modello ancora non funziona,
-    il giusto approccio è chiedere aiuto per una soluzione più veloce. Scrivi una domanda sul
-    <a href="https://discourse.threejs.org/" target="_blank" rel="noopener">forum three.js</a> e, quando possibile,
-    includi il tuo modello (o un modello più semplice con lo stesso problema) in qualsiasi formato disponibile.
-    Includi informazioni sufficienti per consentire a qualcun altro di riprodurre rapidamente il problema - idealmente, una demo dal vivo.
-	</p>
-
-</body>
-
-</html>

docs/manual/it/introduction/Matrix-transformations.html

@@ -1,78 +0,0 @@
-<!DOCTYPE html>
-<html lang="it">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>Trasformazioni di matrici ([name])</h1>
-
-		<p>
-      Three.js utilizza le `matrici` per codificare le trasformazioni 3D, traslazioni (posizione), rotazioni e ridimensionamento. Ogni istanza di [page:Object3D]
-      ha una [page:Object3D.matrix matrice] che memorizza la posizione, la rotazione e il ridimensionamento. Questa pagina descrive come aggiornare la trasformazione 
-      di un oggetto.
-		</p>
-
-		<h2>Proprietà di convenienza e `matrixAutoUpdate`</h2>
-
-		<p>
-      Ci sono due modi per aggiornare la trasformazione di un oggetto:
-		</p>
-		<ol>
-			<li>
-        Modificare le proprietà `position`, `quaternion` e `scale` dell'oggetto e lasciare che three.js ricalcoli la 
-        matrice dell'oggetto da queste proprietà:
-				<code>
-object.position.copy( start_position );
-object.quaternion.copy( quaternion );
-				</code>
-        Per impostazione predefinita, la proprietà `matrixAutoUpdate` è impostata su true e la matrice viene ricalcolata automaticamente.
-        Se l'oggetto è statico, o desideri controllare manualmente quando avviene il ricalcolo, è possibile ottenere prestazioni migliori se la 
-        proprietà è impostata a false.
-				<code>
-object.matrixAutoUpdate = false;
-				</code>
-        E dopo aver modificato le proprietà, aggiornare manualmente la matrice:
-				<code>
-object.updateMatrix();
-				</code>
-			</li>
-			<li>
-        Modificare direttamente la matrice dell'oggetto. La classe [page:Matrix4] possiede vari metodi per modificare la matrice:
-				<code>
-object.matrix.setRotationFromQuaternion( quaternion );
-object.matrix.setPosition( start_position );
-object.matrixAutoUpdate = false;
-				</code>
-				Nota che, in questo caso, `matrixAutoUpdate` <em>deve</em> essere impostata a `false`, e devi essere sicuro di <em>non</em> chiamare `updateMatrix`.
-        La chiamata di `updateMatrix` eliminerà le modifiche manuali apportate alla matrice, ricalcolando la matrice da `position`, `scale`, e così via.
-			</li>
-		</ol>
-
-		<h2>Oggetto e matrici del mondo (world matrices)</h2>
-		<p>
-      La [page:Object3D.matrix matrice] dell'oggetto memorizza la trsformazione dell'oggetto <em>relativa</em> al [page:Object3D.parent genitore] dell'oggetto:
-      per ottenere la trasformazione dell'oggetto nelle coordinate del <em>mondo</em>, è necessario accedere alla [page:Object3D.matrixWorld] dell'oggetto.
-		</p>
-		<p>
-      Quando la trasformazione dell'oggetto padre o dell'oggetto figlio cambia, puoi richiedere che la [page:Object3D.matrixWorld matrixWorld] dell'oggetto
-      figlio venga aggiornata chiamando il metodo [page:Object3D.updateMatrixWorld updateMatrixWorld]().
-		</p>
-
-		<h2>Rotazione e Quaternione</h2>
-		<p>
-      Three.js fornisce due modi per rappresentare le rotazioni 3D: [page:Euler angoli di Eulero] e [page:Quaternion Quaternioni],
-      nonché metodi per la conversione tra i due. Gli angoli di Eulero sono soggetti ad un problema chiamato "gimbal lock", in cui alcune 
-      configurazioni possono perdere un grado di libertà (impedendo all'oggetto di essere ruotato su un asse). Per questo motivo, le 
-      rotazioni degli oggetti sono <em>sempre</em> memorizzate nei [page:Object3D.quaternion quaternioni] dell'oggetto.
-		</p>
-		<p>
-      Le versioni precedenti della libreria includevano una proprietà `useQuaternion` che, se impostata a false, faceva si che la 
-      [page:Object3D.matrix matrix] dell'oggetto fosse calcolata da un angolo di Eulero. Questa pratica è deprecata, si deve invece
-      usare il metodo [page:Object3D.setRotationFromEuler setRotationFromEuler], il quale aggiornerà il quaternione.
-		</p>
-
-	</body>
-</html>

docs/manual/it/introduction/Useful-links.html

@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-<html lang="it">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>Link utili ([name])</h1>
-
-		<p class="desc">
-      Quella che segue è una raccolta di link che potresti trovare utili durante lo studio di three.js.<br />
-      Se trovi qualcosa che ti piacerebbe aggiungere a questa lista o se pensi che uno dei link qui sotto non sia rilevante o non funzioni,
-      sentiti libero di modificare la pagina cliccando sul bottone 'edit' in basso a destra.<br /><br />
-
-      Considera anche che, essendo three.js in rapida crescita, molti di questi link conterranno informazioni non aggiornate -
-      se qualcosa non funziona come ti aspetti o come uno di questi link dice che dovrebbe, controlla la console
-      del browser per verificare la presenza di warning o errori. Controlla anche le pagine dei documenti pertinenti.
-		</p>
-
-		<h2>Forum di supporto</h2>
-		<p>
-      Three.js ufficialmente utilizza il [link:https://discourse.threejs.org/ forum] e [link:http://stackoverflow.com/tags/three.js/info Stack Overflow] per richieste di aiuto.
-      Se hai bisogno di assistenza con qualcosa, questi sono i posti dove andare a chiedere e cercare una soluzione. NON aprire una issue su Github per richieste di aiuto.
-		</p>
-
-		<h2>Corsi e tutorial</h2>
-
-		<h3>Iniziare con three.js</h3>
-		<ul>
-			<li>
-				[link:https://threejs.org/manual/#en/fundamentals Three.js Fundamentals starting lesson]
-			</li>
-			<li>
-				[link:https://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-1-the-scene Beginning with 3D WebGL] di [link:https://codepen.io/rachsmith/ Rachel Smith].
-			</li>
-			<li>
-				[link:https://www.august.com.au/blog/animating-scenes-with-webgl-three-js/ Animating scenes with WebGL and three.js]
-			</li>
-		</ul>
-
-		<h3>Articoli e corsi avanzati</h3>
-		<ul>
-			<li>
-				[link:https://threejs-journey.com/ Three Journey] Corso di [link:https://bruno-simon.com/ Bruno Simon] - Insegna ai beginners come usare Three.js step by step
-			</li>
-			<li>
-				[link:https://discoverthreejs.com/ Discover three.js]
-			</li>
-			<li>
-				[link:http://blog.cjgammon.com/ Collection of tutorials] di [link:http://www.cjgammon.com/ CJ Gammon].
-			</li>
-			<li>
-				[link:https://medium.com/soffritti.pierfrancesco/glossy-spheres-in-three-js-bfd2785d4857 Glossy spheres in three.js].
-			</li>
-		  <li>
-			 [link:https://www.udacity.com/course/interactive-3d-graphics--cs291 Interactive 3D Graphics] - un corso gratuito su Udacity che insegna i fondamenti della grafica 3D,
-       utilizza three.js come strumenti di coding.
-		  </li>
-		  <li>
-			[Link:https://aerotwist.com/tutorials/ Aerotwist] tutorial di [link:https://github.com/paullewis/ Paul Lewis].
-		  </li>
-		  <li>
-			 [link:https://discourse.threejs.org/t/three-js-bookshelf/2468 Three.js Bookshelf] - Stai cercando più risorse relative a three.js o alla computer graphics in generale?
-			 Controlla la selezione di letteratura suggerita dalla community.
-		  </li>
-		</ul>
-
-		<h2>News e Aggiornamenti</h2>
-		<ul>
-			<li>
-				[link:https://twitter.com/hashtag/threejs Three.js on Twitter]
-			</li>
-			<li>
-				[link:http://www.reddit.com/r/threejs/ Three.js on reddit]
-			</li>
-			<li>
-				[link:http://www.reddit.com/r/webgl/ WebGL on reddit]
-			</li>
-		</ul>
-
-		<h2>Esempi</h2>
-		<ul>
-			<li>
-				[link:https://github.com/edwinwebb/three-seed/ three-seed] - starter kit di un progetto three.js con ES6 e Webpack
-			</li>
-			<li>
-				[link:http://stemkoski.github.io/Three.js/index.html Professor Stemkoskis Examples] - una raccolta di esempi per principianti creati utilizzando three.js r60.
-			</li>
-			<li>
-				[link:https://threejs.org/examples/ Esempi three.js ufficiali] - questi esempi sono gestiti come parte del repository di three.js e usano sempre l'ultima versione della libreria.
-			</li>
-			<li>
-				[link:https://raw.githack.com/mrdoob/three.js/dev/examples/ Esempi three.js ufficiali del branch di dev]  -
-        Come sopra, tranne che questi usano il branch di dev di three.js, e vengono utilizzati per verificare
-        che tutto funzioni mentre viene sviluppato three.js.
-			</li>
-		</ul>
-
-	<h2>Strumenti</h2>
-	<ul>
-		<li>
-			[link:https://github.com/tbensky/physgl physgl.org] - Applicazione front-end JavaScript con un wrapper per three.js, per avvicinare la grafica WebGL
-			agli studenti che stanno imparando fisica e matematica.
-		</li>
-		<li>
-			[link:https://whsjs.readme.io/ Whitestorm.js] – Framework modulare three.js con plugin per la fisica AmmoNext.
-		</li>
-		<li>
-			[link:http://zz85.github.io/zz85-bookmarklets/threelabs.html Three.js Inspector]
-		</li>
-		<li>
-			[link:http://idflood.github.io/ThreeNodes.js/ ThreeNodes.js].
-		</li>
-		<li>
-			[link:https://marketplace.visualstudio.com/items?itemName=slevesque.shader vscode shader] - Syntax highlighter per il linguaggio dello shader.
-			<br />
-			[link:https://marketplace.visualstudio.com/items?itemName=bierner.comment-tagged-templates vscode comment-tagged-templates] - Syntax highlighting per le stringhe di template etichettate
-      usando i commenti al linguaggio shader, come: glsl.js.
-		</li>
-		<li>
-			[link:https://github.com/MozillaReality/WebXR-emulator-extension WebXR-emulator-extension]
-		</li>
-	</ul>
-
-	<h2>Riferimenti WebGL</h2>
-		<ul>
-			<li>
-			[link:https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf webgl-reference-card.pdf] - Riferimento di tutte le parole chiave, terminologia, sintassi e definizioni WebGL e GLSL.
-			</li>
-		</ul>
-
-	<h2>Vecchi Link</h2>
-	<p>
-    Questi link sono conservati per scopi storici - potresti trovarli utili, ma tieni presente che
-    potrebbero contenere informazioni relative a versioni molto vecchie di three.js.
-	</p>
-
-	<ul>
-		<li>
-			[link:https://www.youtube.com/watch?v=Dir4KO9RdhM AlterQualia at WebGL Camp 3]
-		</li>
-		<li>
-			[link:http://yomotsu.github.io/threejs-examples/ Yomotsus Examples] - una collezione di esempi che utilizza la versione r45 di three.js.
-		</li>
-		<li>
-			[link:http://fhtr.org/BasicsOfThreeJS/#1 Introduction to Three.js] di [link:http://github.com/kig/ Ilmari Heikkinen] (slideshow).
-		</li>
-		<li>
-			[link:http://www.slideshare.net/yomotsu/webgl-and-threejs WebGL and Three.js] di [link:http://github.com/yomotsu Akihiro Oyamada] (slideshow).
-		</li>
-		<li>
-			[link:https://www.youtube.com/watch?v=VdQnOaolrPA Trigger Rally] di [link:https://github.com/jareiko jareiko] (video).
-		</li>
-		<li>
-			[link:http://blackjk3.github.io/threefab/ ThreeFab] - editor di scene, mantenuto fino alla versione r50 di three.js.
-		</li>
-		<li>
-			[link:http://bkcore.com/blog/3d/webgl-three-js-workflow-tips.html Max to Three.js workflow tips and tricks] di [link:https://github.com/BKcore BKcore]
-		</li>
-		<li>
-			[link:http://12devsofxmas.co.uk/2012/01/webgl-and-three-js/ A whirlwind look at Three.js]
-			di [link:http://github.com/nrocy Paul King]
-		</li>
-		<li>
-			[link:http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html Animated selective glow in Three.js]
-			di [link:https://github.com/BKcore BKcore]
-		</li>
-		<li>
-			[link:http://www.natural-science.or.jp/article/20120220155529.php Building A Physics Simulation Environment] - tutorial di three.js in Giapponese
-		</li>
-	 </ul>
-
-	</body>
-</html>

docs/manual/it/introduction/WebGL-compatibility-check.html

@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html lang="it">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>Controllo compatibilità WebGL ([name])</h1>
-		<p>
-		Anche se questo sta diventano sempre meno un problema, alcuni dispositivi o browser potrebbero ancora non supportare WebGL 2.
-		Il seguente codice è utile per controllare se WebGL 2 è supportato, infatti se non lo fosse viene mostrato un messaggio di errore all'utente.
-		Importa il modulo di rilevamento del supporto WebGL ed esegui quanto segue prima di tentare di eseguire il rendering di qualsiasi cosa.
-		</p>
-
-
-		<code>
-		import WebGL from 'three/addons/capabilities/WebGL.js';
-
-		if ( WebGL.isWebGL2Available() ) {
-
-			// Initiate function or other initializations here
-			animate();
-
-		} else {
-
-			const warning = WebGL.getWebGL2ErrorMessage();
-			document.getElementById( 'container' ).appendChild( warning );
-
-		}
-		</code>
-	</body>
-</html>

docs/manual/ja/introduction/Animation-system.html

@@ -1,115 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-	<head>
-		<meta charset="utf-8" />
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>[name]</h1>
-
-		<h2>概要</h2>
-
-		<p class="desc">
-			three.jsのアニメーションシステムの中では、モデルの様々なプロパティをアニメーション化できます。
-			例えば、装飾を行なったモデル([page:SkinnedMesh skinned and rigged model])の骨格や、morphTargets、異なるマテリアルの要素(色、不透明度、有無)、可視性、変形などを操作できます。
-			アニメーションの要素は、フェードインやフェードアウト、クロスフェード、重ね合わせが可能です。
-			同一のオブジェクトであっても異なるものであっても、異なるアニメーションの比重やタイムスケールは独立して変更出来ます。また、同じオブジェクトでも、異なるオブジェクトでもアニメーションは同期出来ます。<br /><br />
-
-			これらを一つのシステムで達成するために、three.jsのアニメーションシステムは2015に完全に変更されました([link:https://github.com/mrdoob/three.js/issues/6881 link])。古い情報に気をつけてください！three.jsのアニメーションシステムは現在はUnityやUnreal Engine 4と似た設計になっています。このページではメインの要素と、それがどうやって動くのかを簡単に説明します。
-
-		</p>
-
-		<h3>Animation Clips</h3>
-
-		<p class="desc">
-			アニメーション付きの3Dオブジェクトをインポートすることに成功した場合(そのオブジェクトが骨格なのか、モーフターゲットなのか、はたまた両方なのかには関係なく)、レスポンスフィールドのうちの一つは"animations"という配列で、そのモデルの[page:AnimationClip AnimationClips]を含んでいるはずです(下記の利用可能なローダーを参照)。
-			アニメーション付きの3Dオブジェクトをインポートすることに成功する状況というのは、例えばBlenderから[link:https://github.com/KhronosGroup/glTF-Blender-IO glTF Blender exporter]でオブジェクトをエクスポートして、そのオブジェクトを[page:GLTFLoader]を使って、three.jsに読みこむ、といったことが挙げられます。<br /><br />
-
-
-			*AnimationClip*は普通、オブジェクトの特定の動作のデータを持っています。
-			例えば、メッシュの場合、1つめのAnimationClipはウォークサイクルのためのもの、2つ目のAnimationClipはジャンプ用の、3つ目はサイドステップ用という風に動作のデータをAnimationClipに持たせています。
-
-		</p>
-
-		<h3>Keyframe Tracks</h3>
-
-		<p class="desc">
-
-			こういった*AnimationClip*の中では、アニメーションの要素のデータは別の[page:KeyframeTrack]に保存されています。キャラクターオブジェクトが骨格を持っていると仮定すると、あるキートラックフレームは腕の下の方の骨の、位置の時間変化のデータを保存し、別のキートラックは同じ骨の回転成分の動きのデータを保存し、また別のキートラックは他の骨の位置や回転、スケールの変化といったデータを保存します。AnimationClipは、このようなたくさんのトラックで構成できることがわかります。
-
-			モデルがmorph targetsを持っていると仮定すると(例えば、友好的な顔から怒った顔にモーフィングするような場合)、それぞれのトラックは特定のモーフィングターゲットの[page:Mesh.morphTargetInfluences influence]がclipのパフォーマンス中にどうやって変化するかについての情報を持っています。
-
-		</p>
-
-		<h3>Animation Mixer</h3>
-
-		<p class="desc">
-
-			保存されたデータは、アニメーションのベースを形成するだけで、実際のアニメーションの再生は[page:AnimationMixer]によってコントロールされます。AnimationMixerはアニメーションのプレイヤーであるだけでなく、本物のミキサーコンソールのようなハードウェアのシミレーションでもあります。これによって、複数のアニメーションを同時にコントロールして、ブレンドしたり、マージしたり出来ます。
-
-		</p>
-
-		<h3>Animation Actions</h3>
-
-		<p class="desc">
-
-			[page:AnimationAction AnimationActions]によってコントールできるので、*AnimationMixer*自体の(一般的な)メソッドやプロパティは少ないです。*AnimationAction*を設定することで、あるミキサー上での*AnimationClip*の再生や、一時停止、停止のタイミングであったり、clipをリピートする頻度やリピートの有無、フェードや時間変化の有無、クロスフェードやシンクロなどの補助的なことを設定することが出来ます。
-
-		</p>
-
-		<h3>Animation Object Groups</h3>
-
-		<p class="desc">
-
-			オブジェクトのグループに、アニメーションの状態を受け取らせたい場合は、[page:AnimationObjectGroup]が使えます。
-
-		</p>
-
-		<h3>サポートされているフォーマットとloader</h3>
-
-		<p class="desc">
-			全てのモデル形式がアニメーションを含んでいるわけではないことに注意してください(OBJは特に含まれていません)。
-			またthree.jsのloaderのうちのいくつかしか[page:AnimationClip AnimationClip]シーケンスをサポートしていないことにも注意してください。このアニメーションのタイプをサポートしているものがいくつかあります。
-		</p>
-
-			<ul>
-				<li>[page:ObjectLoader THREE.ObjectLoader]</li>
-				<li>THREE.BVHLoader</li>
-				<li>THREE.ColladaLoader</li>
-				<li>THREE.FBXLoader</li>
-				<li>[page:GLTFLoader THREE.GLTFLoader]</li>
-			</ul>
-
-		<p class="desc">
-			3ds maxとMayaは今のところ、複数のアニメーション(同じタイムラインにないもの)を一つのファイルに直接エクスポートすることは出来ません
-		</p>
-
-		<h2>Example</h2>
-
-		<code>
-		let mesh;
-
-		// Create an AnimationMixer, and get the list of AnimationClip instances
-		const mixer = new THREE.AnimationMixer( mesh );
-		const clips = mesh.animations;
-
-		// Update the mixer on each frame
-		function update () {
-			mixer.update( deltaSeconds );
-		}
-
-		// Play a specific animation
-		const clip = THREE.AnimationClip.findByName( clips, 'dance' );
-		const action = mixer.clipAction( clip );
-		action.play();
-
-		// Play all animations
-		clips.forEach( function ( clip ) {
-			mixer.clipAction( clip ).play();
-		} );
-		</code>
-
-	</body>
-</html>

docs/manual/ja/introduction/Creating-a-scene.html

@@ -1,164 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>[name]</h1>
-
-		<p>このセクションでは、three.jsを簡単に紹介します。まず、回転するキューブを描画することから始めます。困った時には、ページの下にあるサンプルコードを参考にしてみてください。</p>
-
-		<h2>始める前に</h2>
-
-		<p>three.jsを使う前に、表示するための場所が必要です。Save the following HTML to a file on your computer and open it in your browser.</p>
-
-		<code>
-		&lt;!DOCTYPE html&gt;
-		&lt;html&gt;
-			&lt;head&gt;
-				&lt;meta charset="utf-8"&gt;
-				&lt;title&gt;My first three.js app&lt;/title&gt;
-				&lt;style&gt;
-					body { margin: 0; }
-				&lt;/style&gt;
-			&lt;/head&gt;
-			&lt;body&gt;
-				&lt;script type="module"&gt;
-					import * as THREE from 'https://cdn.jsdelivr.net/npm/three/build/three.module.js';
-
-					// Our Javascript will go here.
-				&lt;/script&gt;
-			&lt;/body&gt;
-		&lt;/html&gt;
-		</code>
-
-		<p>これで完了です。下のコードは全て空の&lt;script&gt;タグに挿入されます。</p>
-
-		<h2>シーンの作成</h2>
-
-		<p>実際にthree.jsで何かものを表示できるようにするには、scene、camera、rendererの3つが必要です。</p>
-
-		<code>
-		const scene = new THREE.Scene();
-		const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
-
-		const renderer = new THREE.WebGLRenderer();
-		renderer.setSize( window.innerWidth, window.innerHeight );
-		document.body.appendChild( renderer.domElement );
-		</code>
-
-		<p>この時点でscene、camera、rendererの設定が完了したことになります。</p>
-
-		<p>three.jsにはcameraには種類がありますが、今回は<strong>PerspectiveCamera</strong>を使ってみましょう。</p>
-
-		<p>最初の属性は、<strong>field of view</strong>です。FOV(field of view)は、任意の瞬間にディスプレイ上で見られるシーンの範囲で、単位は度数です。</p>
-
-		<p>2つ目は<strong>アスペクト比</strong>です。アスペクト比は要素の幅を高さで割ったもので、描画する際には、アスペクト比を使うことが多いと思います。そうしないと、ワイドスクリーンのテレビで古い映画を再生したときと同じようになってしまいます。</p>
-
-		<p>次の2つの属性は、<strong>near</strong>と<strong>far</strong>です。この二つの値を設定することで、<strong>far</strong>の値よりもカメラから離れたオブジェクトや<strong>near</strong>の値よりも近いオブジェクトはレンダリングされなくなります。今回はこのことを気にする必要はありませんが、より良いパフォーマンスを得るために、アプリで変更するということがあるかもしれません。</p>
-
-		<p>次はrendererです。ここでmagicが起きます。ここで使用しているWebGLRendererの他にも、three.jsにはいくつかの機能があり、古いブラウザを使用しているユーザーや、何らかの理由でWebGLをサポートしていないユーザーのための後方互換として使用されています。</p>
-
-		<p>rendererのインスタンスを作成することに加えて、アプリを描画するサイズを設定する必要があります。アプリで塗りつぶしたい領域の幅と高さを使用することをお勧めします(この場合、ブラウザウィンドウの幅と高さ)。パフォーマンスを重視するアプリの場合、<strong>setSize</strong>に<strong>window.innerWidth/2</strong>や<strong>window.innerHeight/2</strong>のような小さな値を与えることもできます。こうすることでアプリは半分のサイズでレンダリングされます。</p>
-
-		<p>アプリのサイズを維持しつつ、より低い解像度でレンダリングしたい場合は、<strong>updateStyle</strong> (3番目の引数)としてfalseを指定して <strong>setSize</strong> を呼び出すことで行うことができます。例えば、<strong>setSize(window.innerWidth/2, window.innerHeight/2, false)</strong>は、&lt;canvas&gt;の幅と高さが100%の場合、アプリを半分の解像度でレンダリングします。</p>
-
-		<p>最後に、HTMLドキュメントに <strong>renderer</strong> 要素を追加します。これは、rendererがシーンを表示するために使用する &lt;canvas&gt; 要素です。</p>
-
-		<p><em>"それはそれとして、冒頭で言っていたキューブはどこにあるの？"</em> いますぐ追加しましょう。</p>
-
-		<code>
-		const geometry = new THREE.BoxGeometry( 1, 1, 1 );
-		const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
-		const cube = new THREE.Mesh( geometry, material );
-		scene.add( cube );
-
-		camera.position.z = 5;
-		</code>
-
-		<p>キューブを作成するには、<strong>BoxGeometry</strong>が必要です。これは、キューブのすべての点 (<strong>頂点</strong>) および塗りつぶし(<strong>面</strong>)を含むオブジェクトです。これについては、今後さらに詳しく説明していきます。</p>
-
-		<p>形状を表すジオメトリに加えて、色をつけるためのマテリアルが必要です。Three.jsにはいくつかのマテリアルが付属していますが、ここでは<strong>MeshBasicMaterial</strong>だけを使うことにします。すべてのマテリアルは、それらに適用されるプロパティのオブジェクトを取ります。物事を非常にシンプルに保つために、<strong>0x00ff00</strong>のcolor属性を与えるだけにします。これは、CSSやPhotoshopで色が動作するのと同じ方法で動作します(<strong>hex colors</strong>)。</p>
-
-		<p>3番目に必要なのは、<strong>メッシュ</strong>です。メッシュとは、ジオメトリを受け取り、それにマテリアルを適用するオブジェクトのことで、シーンに挿入して自由に動作させることができます。</p>
-
-		<p>デフォルトでは、<strong>scene.add()</strong> を呼び出すと、追加したものが座標 <strong>(0,0,0)</strong> に追加されます。これにより、カメラとキューブの両方が互いに内側になってしまいます。これを回避するために、カメラを少しずらします。</p>
-
-		<h2>sceneのレンダリング</h2>
-
-		<p>先ほど作成したHTMLファイルに上のコードをコピーしても何も表示されません。これは、実際にはまだ何も描画していないからです。そのためには、<strong>レンダリングまたはアニメーションループ</strong>と呼ばれるものが必要です。</p>
-
-		<code>
-		function animate() {
-			requestAnimationFrame( animate );
-			renderer.render( scene, camera );
-		}
-		animate();
-		</code>
-
-		<p>このコードでは、画面が更新されるたびにrendererがシーンを描画するループを作成しています(一般的な画面では、これは1秒間に60回を意味します)。ブラウザでゲームを書くのが初めての方は、<em>「なぜ setIntervalでやらないのか」</em>と言うかもしれません。おそらく最も重要なのは、ユーザーが別のブラウザタブに移動するときに一時停止し、貴重な処理能力とバッテリー寿命を無駄にしないことです。</p>
-
-		<h2>キューブのアニメーション</h2>
-
-		<p>始める前に作成したファイルに上記のコードをすべて挿入すると、緑色のボックスが表示されるはずです。これを回転させて少し面白くしてみましょう。</p>
-
-		<p><strong>animate</strong> 関数の中で<strong>renderer.render</strong> を呼び出している箇所のすぐ上に以下のコードを追加します。</p>
-
-		<code>
-		cube.rotation.x += 0.01;
-		cube.rotation.y += 0.01;
-		</code>
-
-		<p>これはフレームごとに実行され(通常は1秒間に60回)、キューブに素敵な回転アニメーションを与えます。基本的に、アプリの実行中に移動または変更したいものはすべて、アニメーションループを通過する必要があります。もちろん、そこから他の関数を呼び出すこともできます。</p>
-
-		<h2>成果</h2>
-		<p>おめでとうございます。これで初めてのthree.jsアプリが完成しました。簡単なことですが、誰でもはじめは初心者です。</p>
-
-		<p>今回使用したコードは[link:https://jsfiddle.net/0c1oqf38/ live example]にあり編集可能です。紹介したコードがどうやって動作するかをより理解するために、それを使って遊んでみてください。</p>
-
-		<code>
-		&lt;!DOCTYPE html&gt;
-		&lt;html&gt;
-			&lt;head&gt;
-				&lt;title&gt;My first three.js app&lt;/title&gt;
-				&lt;style&gt;
-					body { margin: 0; }
-				&lt;/style&gt;
-			&lt;/head&gt;
-			&lt;body&gt;
-				&lt;script type="module"&gt;
-					import * as THREE from 'https://cdn.jsdelivr.net/npm/three/build/three.module.js';
-
-					const scene = new THREE.Scene();
-					const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
-
-					const renderer = new THREE.WebGLRenderer();
-					renderer.setSize( window.innerWidth, window.innerHeight );
-					document.body.appendChild( renderer.domElement );
-
-					const geometry = new THREE.BoxGeometry( 1, 1, 1 );
-					const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
-					const cube = new THREE.Mesh( geometry, material );
-					scene.add( cube );
-
-					camera.position.z = 5;
-
-					function animate() {
-						requestAnimationFrame( animate );
-
-						cube.rotation.x += 0.01;
-						cube.rotation.y += 0.01;
-
-						renderer.render( scene, camera );
-					}
-
-					animate();
-				&lt;/script&gt;
-			&lt;/body&gt;
-		&lt;/html&gt;
-		</code>
-	</body>
-</html>

docs/manual/ja/introduction/Creating-text.html

@@ -1,108 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>[name]</h1>
-		<div>
-			<p>
-				three.jsアプリケーションを作る上でテキストを使う必要がある場合がしばしばあります。それを実現する方法はいくつかあります。
-			</p>
-		</div>
-
-		<h2>1. DOM + CSS</h2>
-		<div>
-			<p>
-				HTMLを使用することは、一般的にテキストを追加する最も簡単で早い方法です。これは、three.jsにテキストを追加する際に主に使用されている方法です。
-			</p>
-			<p>以下のようにすることでコンテンツを追加できます。</p>
-			<code>&lt;div id="info"&gt;Description&lt;/div&gt;</code>
-
-			<p>
-				そして、three.jsをフルスクリーンで使用する場合は、CSSを使ってz-indexの絶対的な位置を他の要素よりも上にしておきましょう。
-			</p>
-
-			<code>
-#info {
-	position: absolute;
-	top: 10px;
-	width: 100%;
-	text-align: center;
-	z-index: 100;
-	display:block;
-}
-			</code>
-
-		</div>
-
-
-
-		<h2>2.テキストをcanvasに書いて、[page:Texture]として使用する</h2>
-		<div>
-			<p>three.jsのsceneで平面上にテキストを簡単に描きたい場合は、この方法を使用します。</p>
-		</div>
-
-
-		<h2>3.お気に入りの3Dアプリケーションでモデルを作成し、three.jsに書き出す</h2>
-		<div>
-			<p>他の3Dアプリケーションを使用して、three.jsにインポートしたい場合にこの方法を使用します。</p>
-		</div>
-
-
-
-		<h2>4. Procedural Text Geometry</h2>
-		<div>
-			<p>
-				純粋なTHREE.jsで作業したい場合や、手続き的に動的な3Dのテキストジオメトリを作成したい場合、メッシュで実現することが出来ます。そのメッシュのジオメトリはTHREE.TextGeometryインスタンスを使います。
-			</p>
-			<p>
-				<code>new THREE.TextGeometry( text, parameters );</code>
-			</p>
-			<p>
-				しかし、これを機能させるためには、TextGeometryのfontパラメータにTHREE.Fontのインスタンスを設定する必要があります。
-
-				これをどのように行うかについては [page:TextGeometry] ページを参照してください。また、受け入れ可能な各パラメータの説明、THREE.js ディストリビューションに付属する JSON フォントの一覧も参照してください。
-			</p>
-
-			<h3>Examples</h3>
-
-			<p>
-				[example:webgl_geometry_text WebGL / geometry / text]<br />
-				[example:webgl_shadowmap WebGL / shadowmap]
-			</p>
-
-			<p>
-				Typefaceがダウンしている場合や、そこにないフォントを使いたい場合は、以下のリンク先のチュートリアル(blender用のPythonスクリプトでテキストをThree.jsのJSON形式に書き出す)を参考にしてください。
-				[link:http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html]
-			</p>
-
-		</div>
-
-
-
-		<h2>5. Bitmap Fonts</h2>
-		<div>
-			<p>
-				BMFonts（ビットマップフォント）では、グリフを1つのBufferGeometryにバッチ処理することができます。BMFont レンダリングは、ワードラッピング、文字間隔、カーニング、標準的な導関数を持つ符号付き距離フィールド、マルチチャンネル符号付き距離フィールド、マルチテクスチャフォントなどをサポートしています。[link:https://github.com/Jam3/three-bmfont-text three-bmfont-text]を参照してください。
-			</p>
-			<p>
-				[link:https://github.com/etiennepinchon/aframe-fonts A-Frame Fonts]のようなプロジェクトではストックフォントが利用できますが、任意の .TTF フォントから独自のフォントを作成し、プロジェクトに必要な文字のみを含めるように最適化することもできます。
-			</p>
-			<p>
-				役に立つツール
-			</p>
-			<ul>
-				<li>[link:http://msdf-bmfont.donmccurdy.com/ msdf-bmfont-web] <i>(web-based)</i></li>
-				<li>[link:https://github.com/soimy/msdf-bmfont-xml msdf-bmfont-xml] <i>(commandline)</i></li>
-				<li>[link:https://github.com/libgdx/libgdx/wiki/Hiero hiero] <i>(desktop app)</i></li>
-			</ul>
-		</div>
-
-
-
-	</body>
-</html>

docs/manual/ja/introduction/Drawing-lines.html

@@ -1,70 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>[name]</h1>
-		<div>
-			<p>
-				ワイヤーフレームの[page:Mesh]ではなく、線や円が描きたいとします。
-				そのためには、[page:WebGLRenderer renderer]と[page:Scene scene]そしてcameraを設定する必要があります。(詳しくはシーンを作成するページを参照)
-			</p>
-
-			<p>これがその場合に使用するコードです。</p>
-			<code>
-const renderer = new THREE.WebGLRenderer();
-renderer.setSize( window.innerWidth, window.innerHeight );
-document.body.appendChild( renderer.domElement );
-
-const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
-camera.position.set( 0, 0, 100 );
-camera.lookAt( 0, 0, 0 );
-
-const scene = new THREE.Scene();
-			</code>
-			<p>
-				次にやるべきことはマテリアルを定義することです。線を描くには、[page:LineBasicMaterial]か [page:LineDashedMaterial]を使う必要があります。
-			</p>
-			<code>
-//create a blue LineBasicMaterial
-const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
-			</code>
-
-			<p>
-				マテリアルの次は、複数の頂点を持つジオメトリを定義する必要があります。
-			</p>
-
-			<code>
-const points = [];
-points.push( new THREE.Vector3( - 10, 0, 0 ) );
-points.push( new THREE.Vector3( 0, 10, 0 ) );
-points.push( new THREE.Vector3( 10, 0, 0 ) );
-
-const geometry = new THREE.BufferGeometry().setFromPoints( points );
-			</code>
-
-			<p>
-				線は連続する頂点の組の間に引かれますが、最初の点と最後の点の間には引かれないことに注意してください(線は閉じません)
-			</p>
-
-			<p>
-				ここで、2つの線とマテリアルが1つがあるので、これを組み合わせて一つの線にすることができます。
-			</p>
-			<code>
-const line = new THREE.Line( geometry, material );
-			</code>
-			<p>あとはシーンに追加して[page:WebGLRenderer.render render]を呼び出すだけです。</p>
-
-			<code>
-scene.add( line );
-renderer.render( scene, camera );
-			</code>
-
-			<p>2本の青い線で出来た上向きの矢印が表示されているはずです</p>
-		</div>
-	</body>
-</html>

docs/manual/ja/introduction/FAQ.html

@@ -1,64 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-
-<head>
-    <meta charset="utf-8">
-    <base href="../../../" />
-    <script src="page.js"></script>
-    <link type="text/css" rel="stylesheet" href="page.css" />
-</head>
-
-<body>
-    <h1>[name]</h1>
-
-    <h2>
-        3Dモデルの形式はどれががおすすめでしょうか？
-    </h2>
-    <div>
-        <p>
-            アセットをimportしたり、exportしたりするのにおすすめなのは、glTF(GL Transmission Format)です。 その理由としてはglTFはランタイムでのアセットの配信に焦点を合わせているので、コンパクトに変換でき、ロードが早いからです。
-        </p>
-        <p>
-            three.jsはFBX、Collada、OBJなどの他の多くの一般的なフォーマットにも対応したローダーを提供しています。 それでも、プロジェクトでは常に最初にglTF ベースのワークフローの作成を試してください。詳細については、[link:#manual/introduction/Loading-3D-models Loading-3D-models]を参照してください。
-
-        </p>
-    </div>
-
-    <h2>なぜmetaタグのviewpointがexampleに入っているのですか？</h2>
-    <div>
-        <code>&lt;meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"&gt;</code>
-
-        <p>
-            これらのタグは、モバイルブラウザのビューポートのサイズとスケールを制御します（ページの内容が表示されているビューポートとは異なるサイズでレンダリングされる場合があります）。
-
-        </p>
-
-        <p>[link:https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html Safari: Using the Viewport]</p>
-
-        <p>[link:https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag MDN: Using the viewport meta tag]</p>
-    </div>
-
-    <h2>
-        リサイズをしたときに、シーンのスケールを保存しておくにはどうしたらよいですか？
-    </h2>
-    <p>
-        カメラからの距離に関係なく、ウィンドウのサイズを変更しても、すべてのオブジェクトが同じサイズで表示されるようにしたいです。この問題を解くための重要な方程式は、ある距離での可視高さの計算式です。
-
-        <code>
-visible_height = 2 * Math.tan( ( Math.PI / 180 ) * camera.fov / 2 ) * distance_from_camera;
-			</code> ウィンドウの高さを一定の割合で増加させると、すべての距離で同じ割合で表示される高さが増加することになります。これは、カメラの位置を変えてもできません。 その代わりに、カメラの視野を変更する必要があります。 具体例は[link:http://jsfiddle.net/Q4Jpu/ sample]を参照してください。
-    </p>
-
-    <h2>オブジェクトの一部が非表示になる原因はなんですか？</h2>
-    <p>
-        これはface cullingが原因かもしれません。Faceにはどちらの面かを決める向きがあります。 そして、cullingは通常の状況では裏面を削除します。 これが問題となって非表示になっているかどうかを確認するには、 マテリアルの面をTHREE.DoubleSideに変更してください。
-        <code>material.side = THREE.DoubleSide</code>
-    </p>
-
-		<h2>Why does three.js sometimes return strange results for invalid inputs?</h2>
-		<p>
-			For performance reasons, three.js doesn't validate inputs in most cases. It's your app's responsibility to make sure that all inputs are valid.
-		</p>
-</body>
-
-</html>

docs/manual/ja/introduction/How-to-create-VR-content.html

@@ -1,75 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-
-<head>
-	<meta charset="utf-8">
-	<base href="../../../" />
-	<script src="page.js"></script>
-	<link type="text/css" rel="stylesheet" href="page.css" />
-</head>
-
-<body>
-	<h1>[name]</h1>
-
-	<p>
-		このガイドでは、three.jsを使って作成したWebベースのVRアプリケーションの基本的なコンポーネントの概要を説明しています。
-	</p>
-
-	<h2>Workflow</h2>
-
-	<p>
-		はじめに、プロジェクトに[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/webxr/VRButton.js VRButton.js]を追加する必要があります。
-	</p>
-
-	<code>
-import { VRButton } from 'three/addons/webxr/VRButton.js';
-	</code>
-
-	<p>
-		*VRButton.createButton()* は2つの重要なことを行います。VR互換性であることを表すボタンを作成し、ユーザーがボタンをアクティブにするとVRセッションを開始します。この機能を追加するためには、次のコードをアプリに追加するだけで良いです。
-	</p>
-
-	<code>
-document.body.appendChild( VRButton.createButton( renderer ) );
-	</code>
-
-	<p>
-		次に *WebGLRenderer* インスタンスのXRレンダリングを有効にしてください。
-	</p>
-
-	<code>
-renderer.xr.enabled = true;
-	</code>
-
-	<p>
-		最後にアニメーションループを調整する必要があります。というのも、よく知られた *window.requestAnimationFrame()* 関数を使えないからです。VRプロジェクトのためには、[page:WebGLRenderer.setAnimationLoop setAnimationLoop]を使います。最低限必要なコードは以下のようになります。
-	</p>
-
-	<code>
-renderer.setAnimationLoop( function () {
-
-	renderer.render( scene, camera );
-
-} );
-	</code>
-
-	<h2>Next Steps</h2>
-
-	<p>
-		このワークフローを実際に見るために、公式のWebVRの例を見てみましょう。<br /><br />
-
-		[example:webxr_xr_ballshooter WebXR / XR / ballshooter]<br />
-		[example:webxr_xr_cubes WebXR / XR / cubes]<br />
-		[example:webxr_xr_dragging WebXR / XR / dragging]<br />
-		[example:webxr_xr_paint WebXR / XR / paint]<br />
-		[example:webxr_xr_sculpt WebXR / XR / sculpt]<br />
-		[example:webxr_vr_panorama_depth WebXR / VR / panorama_depth]<br />
-		[example:webxr_vr_panorama WebXR / VR / panorama]<br />
-		[example:webxr_vr_rollercoaster WebXR / VR / rollercoaster]<br />
-		[example:webxr_vr_sandbox WebXR / VR / sandbox]<br />
-		[example:webxr_vr_video WebXR / VR / video]
-	</p>
-
-</body>
-
-</html>

docs/manual/ja/introduction/How-to-dispose-of-objects.html

@@ -1,135 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-
-<head>
-	<meta charset="utf-8">
-	<base href="../../../" />
-	<script src="page.js"></script>
-	<link type="text/css" rel="stylesheet" href="page.css" />
-</head>
-
-<body>
-	<h1>[name]</h1>
-
-	<p>
-		アプリケーションのパフォーマンスを向上させ、メモリリークを回避するための重要なこととして、
-		未使用のライブラリエンティティの廃棄が挙げられます。
-		three.js型のインスタンスを作成すると、決まった量のメモリが割り当てられます。
-		しかし、*three.js*はジオメトリやマテリアルのような特定のオブジェクトのために、レンダリングに必要なバッファやshaderといったWebGL関連のエンティティを作成します。これらのオブジェクトは自動的に解放されるわけではありません。
-		その代わり、アプリケーションはこのようなリソースを解放するために特別なAPIを使用する必要があります。
-		このガイドでは、このAPIがどのように使用されるのか、また、このコンテキストではどのようなオブジェクトが関連しているのかについて簡単に説明します。
-	</p>
-
-	<h2>Geometries</h2>
-
-	<p>
-		ジオメトリは普通は、属性の集合として定義された頂点の情報を表します。
-		*three.js*は、内部にはそれぞれの属性に対して、[link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLBuffer WebGLBuffer]型のオブジェクトを作成します。
-		これらのentityは[page:BufferGeometry.dispose]()が呼ばれた時にのみ削除されます。
-		もしアプリケーションの中で、あるジオメトリが使われなくなった場合は、関連したリソースを開放するためにこの方法を実行してください。
-	</p>
-
-	<h2>Materials</h2>
-
-	<p>
-		マテリアルは、オブジェクトをどのように描画するかを定義します。
-		*three.js*はマテリアルの定義情報をレンダリング用のシェーダプログラムを構築するために使います。
-		シェーダプログラムは対応するマテリアルを捨てることでのみ、削除することができます。
-		パフォーマンスのために、*three.js*は可能であればすでに存在するシェーダプログラムを再利用しようとします。
-		そのため、シェーダプログラムは、関連したマテリアルがすべて廃棄された場合のみ削除されます。
-		[page:Material.dispose]()を実行することで、マテリアルの削除を指示できます。
-	</p>
-
-	<h2>Textures</h2>
-
-	<p>
-		マテリアルの廃棄をしても、テクスチャには影響がありません。
-		一つのテクスチャが複数のマテリアルに同時に使用されることがあるので、
-		テクスチャとマテリアルは別々に制御されています。
-		テクスチャのインスタンスを作成すると、three.jsは内部に[link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture WebGLTexture]を作成します。
-		バッファと同様に、このオブジェクトは[page:Texture.dispose]()を呼ぶことでしか削除できません。
-	</p>
-
-	<p>
-		If you use an *ImageBitmap* as the texture's data source, you have to call [link:https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap/close ImageBitmap.close]() at the application level to dispose of all CPU-side resources.
-		An automated call of *ImageBitmap.close()* in [page:Texture.dispose]() is not possible, since the image bitmap becomes unusable, and the engine has no way of knowing if the image bitmap is used elsewhere.
-	</p>
-
-	<h2>Render Targets</h2>
-
-	<p>
-		[page:WebGLRenderTarget]型のオブジェクトは、描画先をカスタム出来るように、
-		[link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture WebGLTexture]インスタンスだけでなく、[link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLFramebuffer WebGLFramebuffer]と
-		[link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderbuffer WebGLRenderbuffer]も確保します。
-		これらのオブジェクトは[page:WebGLRenderTarget.dispose]()を実行することで、解放されます。
-	</p>
-
-	<h2>Miscellaneous</h2>
-
-	<p>
-		exampleディレクトリには、コントロールや後処理用のパスクラスといったクラスがあります。
-		これらのクラスは内部のイベントリスナーや描画対象を取り除くための*dispose()*メソッドを提供します。
-		一般的には、APIやクラスのドキュメントで*dispose()*があるかどうか探すのがおすすめです。
-		*dispose()*メソッドが存在するなら、片付けの際に使うとよいでしょう。
-	</p>
-
-	<h2>FAQ</h2>
-
-	<h3>なぜthree.jsは自動的にオブジェクトを処分できないのですか？</h3>
-
-	<p>
-		この質問はコミュニティで何度も訊かれた質問なので、この問題についてはきちんと解説します。
-		実のところ、*three.js*はライフタイムや、ユーザが作成したジオメトリやマテリアルのようなエンティティのスコープの情報をもっていません。これはアプリケーション側に責任があります。例えば、マテリアルが今のところレンダリングのために使用されていなくとも、次のフレームでは必要になるかもしれません。そのため、アプリケーションが特定のオブジェクトを削除しても良いと判断した場合、対応する*dispose()*メソッドを呼ぶことで描画エンジンに対してそのことを知らせなくてはなりません。
-	</p>
-
-	<h3>シーンからmeshを取り除くとそのジオメトリとマテリアルも削除されますか？</h3>
-
-	<p>
-		いいえ。ジオメトリとマテリアルは*dispose()*で明示的に削除する必要があります。
-		メッシュのような3Dオブジェクト間でジオメトリとマテリアルは共有できることを覚えておいてください。
-	</p>
-
-	<h3>*three.js*でキャッシュされたオブジェクトの量について情報を知ることができますか？</h3>
-
-	<p>
-		はい。グラフィックボードのメモリとレンダリングプロセスの一連の統計情報で
-		レンダラの特別なプロパティである[page:WebGLRenderer.info]を評価することができます。
-		また、ほかにはテクスチャやジオメトリ、シェーダプログラムがどれくらい内部に保存されているかを知ることができます。
-		もし、アプリケーションにパフォーマンス上の問題があることに気づいた場合、簡単にメモリリークを見つけるために
-		このプロパティを調べてみることをおすすめします。
-	</p>
-
-	<h3>画像がまだロードされていない時に、テクスチャの*dispose()*を呼び出すとどうなりますか？</h3>
-
-	<p>
-		テクスチャの内部リソースは、イメージが完全に読み込まれた場合にのみ割り当てられます。
-		画像が読み込まれる前にテクスチャを破棄しても何も起こりません。
-		リソースが割り当てられていないので、クリーンアップの必要もありません。
-	</p>
-
-	<h3>dispose()を呼び出した後に、対象のオブジェクトを使用すると何が起きますか？</h3>
-
-	<p>
-		削除された内部のリソースは、エンジンによって再び作成されます。
-		そのため、ランタイムエラーは発生しませんが、シェーダプログラムのコンパイルが必要な場合には特に
-		現在のフレームでのパフォーマンスの低下が発生するかもしれません。
-
-	</p>
-
-	<h3>*three.js*のオブジェクトをどのように管理するべきでしょうか？いつオブジェクトを削除するべきでしょうか?</h3>
-
-	<p>
-		この問いに対する明確で一般的な答えはありません。いつ*dispose()*を呼ぶのが正しいのかは、ユースケースに大きく依存します。常にオブジェクトを削除する必要があるわけではないことは強調しておきます。そのよい例として、複数のレベルで構成されているゲームがあります。こういったアプリの場合、オブジェクトを削除するのに適しているのはレベルを切り替えるときです。
-		そうすることで、古いシーンを通じてオブジェクトに対して処理を適用し、古いマテリアルやジオメトリ、テクスチャを削除できます。前の章で言及したように、まだ使用中のオブジェクトを削除してもランタイムエラーは発生しません。最悪でも１フレーム分のパフォーマンス低下が発生するだけです。
-	</p>
-
-	<h2>Examples that demonstrate the usage of dispose()</h2>
-
-	<p>
-		[example:webgl_test_memory WebGL / test / memory]<br />
-		[example:webgl_test_memory2 WebGL / test / memory2]<br />
-	</p>
-
-</body>
-
-</html>

docs/manual/ja/introduction/How-to-update-things.html

@@ -1,233 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-
-<head>
-    <meta charset="utf-8">
-    <base href="../../../" />
-    <script src="page.js"></script>
-    <link type="text/css" rel="stylesheet" href="page.css" />
-</head>
-
-<body>
-    <h1>[name]</h1>
-    <div>
-        <p>
-            下記のコードのようにシーンに追加されたオブジェクトはデフォルトで自動的にマトリクスを更新します。
-        </p>
-        <code>
-const object = new THREE.Object3D();
-scene.add( object );
-			</code> もしくは、シーンに親オブジェクトが追加されると子オブジェクトも自動的に更新されます。
-        <code>
-const object1 = new THREE.Object3D();
-const object2 = new THREE.Object3D();
-
-object1.add( object2 );
-scene.add( object1 ); //object1 and object2 will automatically update their matrices
-			</code>
-    </div>
-
-    <p>
-        しかしながら、オブジェクトが静的なものであると分かっている場合は、自動更新を無効にして必要な時だけ、更新することが出来ます。
-    </p>
-
-    <code>
-object.matrixAutoUpdate = false;
-object.updateMatrix();
-		</code>
-
-    <h2>BufferGeometry</h2>
-    <div>
-        <p>
-            BufferGeometriesは、情報（頂点の位置、面のインデックス、法線、色、UV、カスタム属性など）をバッファ、 つまり[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays Typed_arrays](型付の配列)に保存します。 このため、標準的なジオメトリよりも一般的に高速ですが、その反面、作業がやや難しくなっています。
-        </p>
-        <p>
-            BufferGeometriesの更新についてバッファのサイズを変更することができないということは理解しておく必要があります。(これは非常にコストがかかり、基本的には新しいジオメトリを作成するのと同じです）。しかし、バッファの内容を更新することはできます。
-
-        </p>
-        <p>
-            つまり、BufferGeometry の属性（例えば頂点の数など）が増加することがわかっている場合、 新たに作成される可能性のある頂点を保持するのに十分な大きさのバッファを事前に確保しておく必要があります。 もちろん、これはBufferGeometryの最大サイズが存在することになります。
-        </p>
-        <p>
-            ここでは、レンダリング時に拡張される線の例を使用します。 バッファに500頂点分のスペースを確保しますが、[page:BufferGeometry.drawRange]を使って最初は2つだけ描画します。
-        </p>
-        <code>
-const MAX_POINTS = 500;
-
-// geometry
-const geometry = new THREE.BufferGeometry();
-
-// attributes
-const positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
-geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
-
-// draw range
-const drawCount = 2; // draw the first 2 points, only
-geometry.setDrawRange( 0, drawCount );
-
-// material
-const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
-
-// line
-const line = new THREE.Line( geometry, material );
-scene.add( line );
-			</code>
-        <p>
-            次に以下のようにして、線上にランダムに点を追加してみましょう。
-        </p>
-        <code>
-const positionAttribute = line.geometry.getAttribute( 'position' );
-
-let x = 0, y = 0, z = 0;
-
-for ( let i = 0; i < positionAttribute.count; i ++ ) {
-
-    positionAttribute.setXYZ( i, x, y, z );
-
-    x += ( Math.random() - 0.5 ) * 30;
-    y += ( Math.random() - 0.5 ) * 30;
-    z += ( Math.random() - 0.5 ) * 30;
-
-}
-			</code>
-        <p>
-            もし、最初の描画以降に<em>点の数</em>を変更したい場合は、以下のようにしてください。
-        </p>
-        <code>
-line.geometry.setDrawRange( 0, newValue );
-			</code>
-        <p>
-            最初の描画以降に位置データの値を変更したい場合は、needsUpdateをtrueにセットする必要があります。
-        </p>
-        <code>
-positionAttribute.needsUpdate = true; // required after the first render
-			</code>
-
-        <p>
-            最初の描画以降に位置データの値を変更した場合は、frustum cullingやヘルパーといったエンジンの他の機能がちゃんと機能するようにboundingボリュームを再計算する必要があるかもしれません。
-        </p>
-        <code>
-line.geometry.computeBoundingBox();
-line.geometry.computeBoundingSphere();
-			</code>
-
-        <p>
-           ここ([link:https://jsfiddle.net/t4m85pLr/1/ link])では、あなたのユースケースに合わせることができるアニメーションを表示しています。
-        </p>
-
-        <h3>Examples</h3>
-
-        <p>
-            [example:webgl_custom_attributes WebGL / custom / attributes]<br /> [example:webgl_buffergeometry_custom_attributes_particles WebGL / buffergeometry / custom / attributes / particles]
-        </p>
-
-    </div>
-
-    <h2>Materials</h2>
-    <div>
-        <p>
-            ユニフォームの値(例えば、色やテクスチャや透明度)は自由に変更することが出来ます。 これらの値はフレームごとにシェーダに送られます。
-        </p>
-
-        <p>
-            GLstateに関連したパラメータ(depthTest, blending, polygonOffsetなど)もいつでも変更出来ます。
-        </p>
-
-        <p>
-            以下に示すパラメータはランタイム(マテリアルが一度描画された後)には簡単に変更ができません。
-        </p>
-        <ul>
-            <li>ユニフォームの種類や数</li>
-            <li>以下の要素の有無
-                <ul>
-                    <li>texture</li>
-                    <li>fog</li>
-                    <li>vertex colors</li>
-                    <li>morphing</li>
-                    <li>shadow map</li>
-                    <li>alpha test</li>
-                    <li>transparent</li>
-                </ul>
-            </li>
-        </ul>
-
-        <p>
-            これらの値を変更するのには新しいシェーダプログラムが必要です、そのためには以下のように設定してください。
-        </p>
-        <code>material.needsUpdate = true</code>
-
-        <p>
-            こうすることで、プログラムはとても遅くなり、フレームレートが不安定になるかもしれないことを覚えておいてください。(特にWindowsでは、シェーダのコンパイルがOpenGLよりもDirectXの方が遅いので、より顕著に現れる可能性があります）。
-        </p>
-
-        <p>
-            より滑らかな体験を提供するために、明るさ0の光や、白紙のテクスチャ、密度0の霧といった"ダミー"の値を使うことで、これらの変化をある程度模倣することができます。
-        </p>
-
-        <p>
-            ジオメトリチャンクに使用するマテリアルは自由に変更できますが、オブジェクトをチャンクに分割する方法は変更できません。オブジェクトをどのようにチャンクに分割するからは、表面のマテリアルによって決まります。
-        </p>
-
-        <h3>
-            ランタイムに異なるマテリアルの設定が必要な場合
-        </h3>
-        <p>
-            マテリアル/チャンクの数が少ない場合は、あらかじめオブジェクトを分割しておくことができます（例：人間の場合は髪/顔/胴体/上着/ズボン、車の場合はフロント/サイド/トップ/ガラス/タイヤ/内装）。
-
-
-        </p>
-
-        <p>
-            数が多い場合（例えば、人の顔はそれぞれ違っている可能性があります）は、顔ごとに異なる外観にするために属性/テクスチャを使用するなど、別の解決策を検討してください。
-        </p>
-
-        <h3>Examples</h3>
-        <p>
-            [example:webgl_materials_car WebGL / materials / car]<br /> [example:webgl_postprocessing_dof WebGL / webgl_postprocessing / dof]
-        </p>
-    </div>
-
-
-    <h2>Textures</h2>
-    <div>
-        <p>
-            画像やcanvas、ビデオやデータのテクスチャが変化する場合は、以下のフラグを有効にする必要があります。
-        </p>
-        <code>
-				texture.needsUpdate = true;
-			</code>
-        <p>描画の対象が自動的に更新されます。</p>
-
-        <h3>Examples</h3>
-        <p>
-            [example:webgl_materials_video WebGL / materials / video]<br /> [example:webgl_rtt WebGL / rtt]
-        </p>
-
-    </div>
-
-
-    <h2>Cameras</h2>
-    <div>
-        <p>カメラの位置とターゲットは自動的に更新されます。以下の要素を変更する必要がある場合、projection matrixを再計算する必要があります。</p>
-        <ul>
-            <li>
-                fov
-            </li>
-            <li>
-                aspect
-            </li>
-            <li>
-                near
-            </li>
-            <li>
-                far
-            </li>
-        </ul>
-        <code>
-camera.aspect = window.innerWidth / window.innerHeight;
-camera.updateProjectionMatrix();
-			</code>
-    </div>
-</body>
-
-</html>

docs/manual/ja/introduction/How-to-use-post-processing.html

@@ -1,120 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-
-<head>
-	<meta charset="utf-8">
-	<base href="../../../" />
-	<script src="page.js"></script>
-	<link type="text/css" rel="stylesheet" href="page.css" />
-</head>
-
-<body>
-	<h1>How to use post-processing(後処理の使い方)</h1>
-
-	<p>
-		three.jsアプリケーションの多くは3Dオブジェクトをスクリーンに直接描画します。
-		しかしながら時々、一つ以上のエフェクト(被写界深度、Bloom、フィルムグレイン、様々なアンチエイリアス効果など)を適用したい場合があります。こういったエフェクトを実装するためにpost-processingは広く使用されています。
-		まず、シーンはビデオカードメモリのバッファを表す描画対象に対して描画されます。
-		次に、最終的なスクリーンへのレンダリングの前に、1つ以上のpost-processingで画像バッファにフィルタとエフェクトを適用します。
-	</p>
-	<p>
-		こういったワークフローを実装するために、three.jsは[page:EffectComposer]で完全なpost-processingを提供しています。
-	</p>
-
-	<h2>Workflow</h2>
-
-	<p>
-		プロセスの一段階目はexampleディレクトリから必要なファイルを全てimportすることです。
-		このガイドではthree.jsの[link:https://www.npmjs.com/package/three npm package](npmの公式のパッケージ)を使っていると想定しています。
-		このガイドのデモでは下に示したファイルが必要です。
-	</p>
-
-	<code>
-		import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
-		import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
-		import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
-		import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
-		</code>
-
-	<p>
-		全てのファイルのimportが成功したのちに、[page:WebGLRenderer]のインスタンスを渡すことでcomposerを作成します。
-	</p>
-
-	<code>
-		const composer = new EffectComposer( renderer );
-		</code>
-
-	<p>
-		composerを使うときにはアプリケーションのアニメーションループを変更する必要があります。
-		[page:WebGLRenderer]のrenderメソッドを呼ぶ代わりに[page:EffectComposer]のそれぞれの対応するものを使います。
-	</p>
-
-	<code>
-		function animate() {
-
-			requestAnimationFrame( animate );
-
-			composer.render();
-
-		}
-		</code>
-
-	<p>
-		composerが準備できたので、post-processingパスのチェーンを設定できるようになりました。
-		これらのパスはアプリケーションの最終的なビジュアルを出力することに責任を持ちます。
-		これらのパスは追加/挿入の順番で処理されます。この例では、まず*RenderPass*のインスタンスが実行され、次に*GlitchPass*のインスタンスが実行され、最後に*OutputPass*が実行されます。
-		チェーンの中で最後の有効なpassが自動的に画面に描画されます。
-		passの設定は以下のように行います。
-	</p>
-
-	<code>
-		const renderPass = new RenderPass( scene, camera );
-		composer.addPass( renderPass );
-
-		const glitchPass = new GlitchPass();
-		composer.addPass( glitchPass );
-
-		const outputPass = new OutputPass();
-		composer.addPass( outputPass );
-	</code>
-
-	<p>
-		*RenderPass*は普通チェインのはじめにあります。
-		これはレンダリングされたシーンを次のpost-processingの入力とするためです。
-		*GlitchPass*は、これらのイメージをワイルドなglitch effectを適用するために使います。
-		*OutputPass*は通常、連鎖の最後のパスで、sRGB カラースペースの変換とオプションのトーンマッピングを実行します。
-		実際に動いているものを見るために、[link:https://threejs.org/examples/webgl_postprocessing_glitch sample]を見てみましょう。
-	</p>
-
-	<h2>Built-in Passes(組み込みのpass)</h2>
-
-	<p>
-		エンジンに元から入っている定義済みの後処理passが使えます。
-		このpassは[link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing postprocessing]ディレクトリに入っていて、広範囲に使用できます。
-	</p>
-
-	<h2>Custom Passes(カスタムpass)</h2>
-
-	<p>
-		独自のpostprocessing shaderを書いて、post-processing passのチェーンの中に組み込みたい場合があります。そういった場合には、*ShaderPass*を利用することが出来ます。
-		ファイルと独自のshaderをインポートしたのちに、以下のコードでpassを設定することができます。
-	</p>
-
-	<code>
-		import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
-		import { LuminosityShader } from 'three/addons/shaders/LuminosityShader.js';
-
-		// later in your init routine
-
-		const luminosityPass = new ShaderPass( LuminosityShader );
-		composer.addPass( luminosityPass );
-		</code>
-
-	<p>
-		リポジトリには[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/shaders/CopyShader.js CopyShader]と呼ばれるファイルがあり、カスタムshaderを作る上での良いスタートコードです。
-		*CopyShader*はエフェクトを適用せずに、EffectComposerの読み込みバッファの画像内容を書き込みバッファにコピーするだけです。
-	</p>
-
-</body>
-
-</html>

docs/manual/ja/introduction/Installation.html

@@ -1,165 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-
-<head>
-    <meta charset="utf-8">
-    <base href="../../../" />
-    <script src="page.js"></script>
-    <link type="text/css" rel="stylesheet" href="page.css" />
-</head>
-
-<body>
-    <h1>[name]</h1>
-
-    <p>
-        [link:https://www.npmjs.com/ npm]を使ってthree.jsとモダンなビルドツールをインストール出来ます。もしくは、静的ホスティングやCDNを使って素早く使い始めることも可能です。ほとんどの人にとっては、npmを使ってインストールするのが良いでしょう。
-    </p>
-
-    <p>
-        どちらの方法を選ぶにしても、一貫して同じバージョンのライブラリからファイルをimportしてください。異なるソースのファイルを混ぜるとコードが重複するかもしれませんし、予想外の方法でアプリケーションが壊れるかもしれません。
-    </p>
-
-    <p>
-        three.jsをインストール方法は、ES modules依存です([link:https://eloquentjavascript.net/10_modules.html#h_hF2FmOVxw7 Eloquent JavaScript: ECMAScript Modules]を参照)。そのおかげで、最新版のプロジェクトのライブラリの必要な部分だけを取り込むことができます。
-    </p>
-
-    <h2>npmでインストールする</h2>
-
-    <p>
-        [link:https://www.npmjs.com/package/three there] npm moduleをインストールするために, プロジェクトのフォルダでターミナルを開いて以下のコードを実行してください。
-    </p>
-
-    <code>
-		npm install three
-		</code>
-
-    <p>
-        パッケージがダウンロードされて、インストールされます。これで、three.jsをコードの中で使う準備が完了しました。
-    </p>
-
-    <code>
-		// Option 1: Import the entire three.js core library.
-		import * as THREE from 'three';
-
-		const scene = new THREE.Scene();
-
-
-		// Option 2: Import just the parts you need.
-		import { Scene } from 'three';
-
-		const scene = new Scene();
-		</code>
-
-    <p>
-        npmからインストールする際に、プロジェクトで必要なパッケージを一つのJavaScriptのファイルにまとめるために、ビルドツールを使うことがあるでしょう。ほとんどのモダンなJavaScriptのビルダーでthree.jsは使えますが、最も人気なのは[link:https://webpack.js.org/ webpack]です。
-    </p>
-
-    <p>
-        すべての機能が <em>three</em> モジュールから直接アクセスできるわけではありません(直接アクセスすることを「ベアインポート」とも呼びます)。コントロール、ローダー、エフェクトの前処理など、ライブラリの他の一般的な部分はサプフォルダ[link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm]からインポートしなければなりません。詳細については、以下の<em>Examples</em>を参照してください。
-    </p>
-
-    <p>
-        [link:https://eloquentjavascript.net/20_node.html#h_J6hW/SmL/a Eloquent JavaScript: Installing with npm]でnpm moduleについて詳しく学習する。
-    </p>
-
-    <h2>CDNや静的ホスティングからインストールをする</h2>
-
-    <p>
-        three.jsは、自分の Web サーバーにファイルをアップロードするか、既存の CDN を利用することで、ビルドシステムなしで利用することができます。ライブラリはES moduleに依存しているため、ライブラリを参照するスクリプトは以下のように<em>type="module"</em>を使用する必要があります。
-    </p>
-
-    <code>
-&lt;script type="importmap">
-    {
-    "imports": {
-        "three": "https://cdn.jsdelivr.net/npm/three@&lt;version&gt;/build/three.module.js"
-    }
-    }
-&lt;/script>
-
-&lt;script type="module">
-
-    import * as THREE from 'three';
-
-    const scene = new THREE.Scene();
-
-&lt;/script>
-</code>
-
-    <h2>Addons</h2>
-
-    <p>
-        three.jsのコアは、3Dエンジンの最も重要なコンポーネントに焦点を当てています。コントロール、ローダー、エフェクトの前処理といった、他の多くの便利なコンポーネントは [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm] ディレクトリの一部です。これらは「examples」と呼ばれています。その理由としては、ユーザーが既製品を使用でき、リミックスやカスタマイズも可能だからです。これらのコンポーネントは常にコアライブラリと同期していますが、npm上の同様のサードパーティ製パッケージは別の人によってメンテナンスされており、最新ではないかもしれません。
-    </p>
-
-    <p>
-        Addonsはそれだけ別でインストールする必要はありませんが、importは分けて行う必要があります。 three.jsをnpmでインストールしている場合、以下のようにして[page:OrbitControls]コンポーネントを読み込むことができます。
-    </p>
-
-
-    <code>
-		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-
-		const controls = new OrbitControls( camera, renderer.domElement );
-		</code>
-
-    <p>
-        three.jsをCDNを使用してインストールしている場合は、同じCDNを使用して他のコンポートをインストールしてください。
-    </p>
-
-    <code>
-&lt;script type="importmap">
-    {
-    "imports": {
-        "three": "https://cdn.jsdelivr.net/npm/three@&lt;version&gt;/build/three.module.js",
-        "three/addons/": "https://cdn.jsdelivr.net/npm/three@&lt;version&gt;/examples/jsm/"
-    }
-    }
-&lt;/script>
-
-&lt;script type="module">
-
-    import * as THREE from 'three';
-    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-
-    const controls = new OrbitControls( camera, renderer.domElement );
-
-&lt;/script>
-</code>
-
-    <p>
-        重要なのは、すべてのファイルで同じバージョンを使用することです。異なるバージョンの異なるAddonsをインポートしたり、three.jsライブラリ自体とは異なるバージョンのAddonsを使用したりしないでください。
-    </p>
-
-    <h2>互換性について</h2>
-
-    <h3>CommonJSでのimport</h3>
-
-    <p>
-        最近のJavaScriptバンドラーはデフォルトでESモジュールをサポートしていますが、古いビルドツールの中にはサポートしていないものもあります。そのような場合は,バンドラーがESモジュールのことがわかるように設定することができます。例えば [link:http://browserify.org/ Browserify]では[link:https://github.com/babel/babelify babelify] プラグインが必要です。
-    </p>
-
-    <h3>Import maps</h3>
-
-    <p>
-        npmからインストールする時と、静的ホスティングやCDN からインストールする時とでは、インポートに使用するパスが異なります。これは、両方のグループのユーザーが、どういったものを使いやすいと感じるかが異なるために起こります。ビルドツールやバンドルを使用している開発者は、相対パスよりも裸のパッケージ指定子(例えば、'three')を好み、<em>examples/</em> フォルダ内のファイルは、この形式に従わない <em>three.module.js</em> への相対参照を使用しています。ビルドツールを使用しない人（高速プロトタイピング、学習、個人的な好みなど）は、同様に、特定のフォルダ構造を必要とし、グローバルな<em>three.*</em>名前空間よりも厳密な相対インポートを嫌うかもしれません。
-    </p>
-
-    <p>
-        [link:https://github.com/WICG/import-maps import maps] が広く利用できるようになったら、これらの相対パスを削除して、npm パッケージ名の 'three' への裸のパッケージ指定子に置き換えたいと考えています。これにより、ビルドツールが期待するnpmパッケージとより密接にマッチし、ファイルをインポートする際に両グループのユーザが全く同じコードを書くことができるようになります。ビルドツールを避けたいユーザーのために、シンプルなJSONマッピングですべてのインポートをCDNや静的ファイルフォルダに向けることができます。試しに、私たちの
-        [link:https://glitch.com/edit/#!/three-import-map?path=index.html import map example] で示されているように、import mapsのPolyfillを使って、今日はよりシンプルなインポートを使ってみることができます。
-    </p>
-
-    <h3>Node.js</h3>
-
-    <p>
-        Because three.js is built for the web, it depends on browser and DOM APIs that don't always exist in Node.js. Some of these issues can be resolved by using shims like [link:https://github.com/stackgl/headless-gl headless-gl], or by replacing components like [page:TextureLoader] with custom alternatives. Other DOM APIs may be deeply intertwined with the code that uses them, and will be harder to work around. We welcome simple and maintainable pull requests to improve Node.js support, but recommend opening an issue to discuss your improvements first.
-    </p>
-
-    <p>
-        Make sure to add `{ "type": "module" }` to your `package.json` to enable ES6 modules in your node project.
-    </p>
-
-</body>
-
-</html>

docs/manual/ja/introduction/Libraries-and-Plugins.html

@@ -1,112 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-
-<head>
-    <meta charset="utf-8" />
-    <base href="../../../" />
-    <script src="page.js"></script>
-    <link type="text/css" rel="stylesheet" href="page.css" />
-</head>
-
-<body>
-    <h1>[name]</h1>
-
-    <p class="desc">
-        外部で開発された互換性のあるthree.jsのライブラリやプラグインをここでリストアップしています。 このリストと関連したパッケージはコミュニティによってメンテナンスされており、最新である保証はありません。 もしこのリストを更新したい場合はPullRequestを送ってください！
-    </p>
-
-    <h3>Physics(物理)</h3>
-
-    <ul>
-        <li>[link:https://github.com/lo-th/Oimo.js/ Oimo.js]</li>
-        <li>[link:https://enable3d.io/ enable3d]</li>
-        <li>[link:https://github.com/kripken/ammo.js/ ammo.js]</li>
-        <li>[link:https://github.com/pmndrs/cannon-es cannon-es]</li>
-        <li>[link:https://rapier.rs/ rapier]</li>
-        <li>[link:https://github.com/jrouwe/JoltPhysics.js Jolt]</li>
-    </ul>
-
-    <h3>Postprocessing(後処理)</h3>
-
-    <p>
-        [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing official three.js postprocessing effects]に加えて、外部のライブラリを通して、追加のエフェクトやフレームワークのサポートが利用可能です。
-
-
-    </p>
-
-    <ul>
-        <li>[link:https://github.com/vanruesc/postprocessing postprocessing]</li>
-    </ul>
-
-    <h3>Intersection and Raycast Performance</h3>
-
-    <ul>
-        <li>[link:https://github.com/gkjohnson/three-mesh-bvh three-mesh-bvh]</li>
-    </ul>
-
-    <h3>File Formats(ファイル形式)</h3>
-
-    <p>
-        [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders official three.js loaders]に加えて、外部のライブラリを通して、追加のフォーマットのサポートが利用できます。
-    </p>
-
-    <ul>
-        <li>[link:https://github.com/gkjohnson/urdf-loaders/tree/master/javascript urdf-loader]</li>
-        <li>[link:https://github.com/NASA-AMMOS/3DTilesRendererJS 3d-tiles-renderer-js]</li>
-        <li>[link:https://github.com/kaisalmen/WWOBJLoader WebWorker OBJLoader]</li>
-        <li>[link:https://github.com/IFCjs/web-ifc-three IFC.js]</li>
-    </ul>
-
-    <h3>Geometry</h3>
-
-    <ul>
-        <li>[link:https://github.com/spite/THREE.MeshLine THREE.MeshLine]</li>
-    </ul>
-
-    <h3>3D Text and Layout</h3>
-
-    <ul>
-        <li>[link:https://github.com/protectwise/troika/tree/master/packages/troika-three-text troika-three-text]</li>
-        <li>[link:https://github.com/felixmariotto/three-mesh-ui three-mesh-ui]</li>
-    </ul>
-
-    <h3>Particle Systems</h3>
-
-    <ul>
-        <li>[link:https://github.com/Alchemist0823/three.quarks three.quarks]</li>
-        <li>[link:https://github.com/creativelifeform/three-nebula three-nebula]</li>
-    </ul>
-
-    <h3>Inverse Kinematics</h3>
-
-    <ul>
-        <li>[link:https://github.com/jsantell/THREE.IK THREE.IK]</li>
-        <li>[link:https://github.com/lo-th/fullik fullik]</li>
-    </ul>
-
-    <h3>Game AI</h3>
-
-    <ul>
-        <li>[link:https://mugen87.github.io/yuka/ yuka]</li>
-        <li>[link:https://github.com/donmccurdy/three-pathfinding three-pathfinding]</li>
-        <li>[link:https://github.com/isaac-mason/recast-navigation-js recast-navigation-js]</li>
-    </ul>
-
-    <h3>Wrappers and Frameworks</h3>
-
-    <ul>
-        <li>[link:https://aframe.io/ A-Frame]</li>
-        <li>[link:https://lume.io/ Lume] - HTML elements for 3D graphics built on Three.</li>
-        <li>[link:https://github.com/pmndrs/react-three-fiber react-three-fiber] - React components for 3D graphics built on Three.</li>
-        <li>[link:https://threepipe.org/ threepipe] - A versatile 3D viewer framework using three.js for rendering.</li>
-        <li>[link:https://github.com/ecsyjs/ecsy-three ECSY]</li>
-        <li>[link:https://threlte.xyz/ Threlte] - Svelte components for 3D graphics built on Three.</li>
-        <li>[link:https://needle.tools/ Needle Engine]</li>
-        <li>[link:https://tresjs.org/ tresjs] - Vue components for 3D graphics built on Three.</li>
-		<li>[link:https://giro3d.org Giro3D] - Versatile framework built on Three for visualizing and interacting with Geospatial 2D, 2.5D and 3D data.</li>        
-        <li>[link:https://zap.works/mattercraft/ Mattercraft] - Browser-based visual editor for AR, WebXR and 3D web content, built on three.js with real-time preview and physics engine.</li>
-    </ul>
-
-</body>
-
-</html>

docs/manual/ja/introduction/Loading-3D-models.html

@@ -1,156 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-
-<head>
-	<meta charset="utf-8">
-	<base href="../../../" />
-	<script src="page.js"></script>
-	<link type="text/css" rel="stylesheet" href="page.css" />
-</head>
-
-<body>
-	<h1>[name]</h1>
-
-	<p>
-		3Dモデルはたくさんのファイル形式で利用可能で、それぞれに目的があり、複雑さも様々です。
-		<a href="https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders" target="_blank" rel="noopener">
-			three.jsは様々なloaderを提供しています</a>
-		が、適切な形式とワークフローを選択することで、パフォーマンスを改善することができます。
-		うまく動作させるのが難しいフォーマットや、リアルタイムでの体験に適さないフォーマットもあり、
-		中にはまったくサポートされていないフォーマットもあります。
-	</p>
-
-	<p>
-		このガイドでは、ほとんどのユーザにおすすめのワークフローと、予期しないことが発生したときに何を試してみればよいかを紹介します。
-	</p>
-
-	<h2>始める前に</h2>
-
-	<p>
-		もしthree.jsをローカルサーバで動かすのが初めてなら、
-		[link:#manual/introduction/Installation installation]を見てみてください。
-		3Dモデルを表示する際の多くの一般的なエラーはファイルを正しく配置することで防ぐことができます。
-	</p>
-
-	<h2>おすすめのワークフロー</h2>
-
-	<p>
-		可能なら、glTF(GL Transmission Format)を使うことをおすすめします。
-		glTFは<small>.GLB</small> と <small>.GLTF</small>の両方のフォーマットについてサポートしています。
-		glTFはランタイムアセットの配信に注力しているので、変換時にはコンパクトでロードも早いです。
-		機能としては、メッシュやマテリアル、テクスチャ、スキン、スケルトン、morphターゲット、アニメーション、ライト、カメラがあります。
-	</p>
-
-	<p>
-		公開されているglTFファイルは<a href="https://sketchfab.com/models?features=downloadable&sort_by=-likeCount&type=models" target="_blank" rel="noopener">Sketchfab</a>のようなサイトで利用可能です。
-		また様々なツールでglTF形式でexportすることが出来ます。
-	</p>
-
-	<ul>
-		<li><a href="https://www.blender.org/" target="_blank" rel="noopener">Blender</a> by the Blender Foundation</li>
-		<li><a href="https://www.allegorithmic.com/products/substance-painter" target="_blank" rel="noopener">Substance
-				Painter</a> by Allegorithmic</li>
-		<li><a href="https://www.foundry.com/products/modo" target="_blank" rel="noopener">Modo</a> by Foundry</li>
-		<li><a href="https://www.marmoset.co/toolbag/" target="_blank" rel="noopener">Toolbag</a> by Marmoset</li>
-		<li><a href="https://www.sidefx.com/products/houdini/" target="_blank" rel="noopener">Houdini</a> by SideFX</li>
-		<li><a href="https://labs.maxon.net/?p=3360" target="_blank" rel="noopener">Cinema 4D</a> by MAXON</li>
-		<li><a href="https://github.com/KhronosGroup/COLLADA2GLTF" target="_blank" rel="noopener">COLLADA2GLTF</a> by
-			the Khronos Group</li>
-		<li><a href="https://github.com/facebookincubator/FBX2glTF" target="_blank" rel="noopener">FBX2GLTF</a> by
-			Facebook</li>
-		<li><a href="https://github.com/AnalyticalGraphicsInc/obj2gltf" target="_blank" rel="noopener">OBJ2GLTF</a> by
-			Analytical Graphics Inc</li>
-		<li>&hellip;and <a href="http://github.khronos.org/glTF-Project-Explorer/" target="_blank" rel="noopener">many
-				more</a></li>
-	</ul>
-
-	<p>
-		glTFをサポートしていないツールが使いたい場合は、ツールの作者にglTFのエクスポートを依頼するか、
-		<a href="https://github.com/KhronosGroup/glTF/issues/1051" target="_blank" rel="noopener">the glTF roadmap
-			thread</a>に投稿することを検討してください。
-	</p>
-
-	<p>
-		glTFが選択肢にない場合は、FBX,OBJ,COLLADAといった一般的な形式も利用可能です。
-		これらは定期的にメンテナンスされています。
-	</p>
-
-	<h2>Loading</h2>
-
-	<p>
-		ごく一部のローダ(例えば、[page:ObjectLoader])はデフォルトでthree.jsに入っています。
-		ほかのものは、ユーザがそれぞれ自分のアプリに加える必要があります。
-
-	</p>
-
-	<code>
-		import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-	</code>
-
-	<p>
-		ローダをimportした時点で、シーンにモデルを追加できるようになります。
-		文法はローダによって異なります。異なるフォーマットを使う場合は、そのローダのドキュメントやサンプルを確認してください。glTFの場合、グローバルスクリプトでは以下のように使用します。
-	</p>
-
-	<code>
-		const loader = new GLTFLoader();
-
-		loader.load( 'path/to/model.glb', function ( gltf ) {
-
-			scene.add( gltf.scene );
-
-		}, undefined, function ( error ) {
-
-			console.error( error );
-
-		} );
-	</code>
-
-	<p>
-		より詳細な機能について知りたい場合は[page:GLTFLoader GLTFLoader documentation]を見てください。
-	</p>
-
-	<h2>Troubleshooting</h2>
-
-	<p>
-		何時間もかけて傑作をモデリングしたのに、webpageに読み込むと、なんと！😭
-		歪んでいたり、色がおかしかったり、表示されなかったりすることがあります。
-		そういったときにはトラブルシューティングを始めましょう。
-	</p>
-
-	<ol>
-		<li>
-			JavaScriptコンソールでエラーが発生していないか確認し、<em>.load()</em> を呼び出す際に<em>onError</em>コールバックを使用して結果をログに記録していることを確認してください
-
-		</li>
-		<li>
-			モデルを別のアプリケーションで見てみてください。
-			glTFでは<a href="https://gltf-viewer.donmccurdy.com/" target="_blank" rel="noopener">three.js</a> と
-			<a href="https://sandbox.babylonjs.com/" target="_blank" rel="noopener">babylon.js</a>でドラックアンドドロップでviewerが利用できます。
-			一つ以上のアプリケーションでモデルが正しく表示された場合、<a href="https://github.com/mrdoob/three.js/issues/new" target="_blank" rel="noopener">three.jsにバグを報告</a>してください。
-			モデルがどのアプリケーションでも表示できない場合、モデルを作成する際に使ったアプリにバグを報告することを強くお勧めします。
-		</li>
-		<li>
-			モデルを1000倍にスケールアップしたり、スケールダウンしたりしてみてください。
-			多くのモデルはスケールが異なります。大きなモデルだと、カメラがモデルの中に入ってしまって見えなくなっていることがあります。
-		</li>
-		<li>
-			光源を追加して配置してみてください。暗闇の中にモデルが隠れている可能性があります。
-		</li>
-		<li>
-			ネットワークタブで失敗しているテクスチャのリクエスト(例えば、<em>C:\\Path\To\Model\texture.jpg</em>)を探してみてください。見つかったら代わりに <em>images/texture.jpg</em>
-			のようなモデルへの相対パスを使ってください。
-			これはテキストエディタでモデルファイルを編集する必要があるかもしれません。
-		</li>
-	</ol>
-
-	<h2>助けを求める(Asking for help)</h2>
-
-	<p>
-		上記のトラブルシューティングのプロセスを一通りやってもまだ動かない場合、正しいやり方で助けを求めることが
-		早期の解決につながります。<a href="https://discourse.threejs.org/" target="_blank" rel="noopener">three.js forum</a>に質問を投稿して、可能であれば自分のモデル(もしくは同じ問題を持つよりシンプルなモデル)を利用可能な形式で添付してください。他の人が問題を迅速に再現できるように、十分な情報を含めてください。
-	</p>
-
-</body>
-
-</html>

docs/manual/ja/introduction/Matrix-transformations.html

@@ -1,86 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-
-<head>
-	<meta charset="utf-8">
-	<base href="../../../" />
-	<script src="page.js"></script>
-	<link type="text/css" rel="stylesheet" href="page.css" />
-</head>
-
-<body>
-	<h1>[name]</h1>
-
-	<p>
-		Three.jsは行列(*matrices*)を使って3次元変換(位置の変換、回転、スケーリング)をエンコードします。
-		すべての[page:Object3D]インスタンスは、そのオブジェクトの位置や回転、スケールを保存した行列([page:Object3D.matrix
-		matrix])を持っています。このページではオブジェクトの３次元変換をどうやって行うかを説明しています。
-
-	</p>
-
-	<h2>Convenience properties and *matrixAutoUpdate*(便利なプロパティとmatrixAutoUpdate)</h2>
-
-	<p>
-		オブジェクトの変換を更新するには二つの方法があります。
-	</p>
-	<ol>
-		<li>
-			オブジェクトの*position*や*quaternion*(四元数)や<strong>スケールのプロパティ</strong>を変更することで、three.jsに
-			オブジェクトの行列を再計算させます。
-			<code>
-object.position.copy( start_position );
-object.quaternion.copy( quaternion );
-				</code>
-			デフォルトでは、*matrixAutoUpdate*のプロパティはtrueで、行列は自動的に再計算されます。
-			オブジェクトが静的な場合や、再計算するタイミングを制御したい場合は、このプロパティをfalseに設定することでパフォーマンスが改善する可能性があります。
-
-			<code>
-object.matrixAutoUpdate = false;
-				</code>
-			プロパティを変更した後には、行列を手動で更新してください。
-			<code>
-object.updateMatrix();
-				</code>
-		</li>
-		<li>
-			オブジェクトの行列を直接修正する方法です。
-			[page:Matrix4]クラスには行列を変更するための様々なメソッドがあります。
-			<code>
-object.matrix.setRotationFromQuaternion( quaternion );
-object.matrix.setPosition( start_position );
-object.matrixAutoUpdate = false;
-				</code>
-			この場合 *matrixAutoUpdate*は*false*に設定<em>しなくてはならない</em>ことに注意してください。
-			また*updateMatrix*を呼ば<em>ない</em>ようにしてください。
-			*updateMatrix*を呼ぶと、行列にマニュアルで加えた変更がなくなり、<strong>位置やスケール</strong>などから行列が再計算されます。
-		</li>
-	</ol>
-
-	<h2>Object and world matrices(オブジェクトとワールド座標系での行列)</h2>
-	<p>
-		オブジェクトの行列([page:Object3D.matrix matrix])は、[page:Object3D.parent parent](親オブジェクト)に対する<em>相対的な</em>変換を保持しています。
-		<em>ワールド座標系での</em>オブジェクトの変換を取得するには、オブジェクトの[page:Object3D.matrixWorld]にアクセスする必要があります。
-
-	</p>
-	<p>
-		親オブジェクトや子オブジェクトの変換が変更された場合は、[page:Object3D.updateMatrixWorld updateMatrixWorld]()を呼び出すことで、子オブジェクトの[page:Object3D.matrixWorld matrixWorld]の更新を要求することができます。
-	</p>
-
-	<h2>Rotation and Quaternion(回転と四元数)</h2>
-	<p>
-		three.jsでは3次元の回線を表すためにオイラー角([page:Euler Euler angles])と4元数([page:Quaternion Quaternions])という2つの方法があります。
-		また、three.jsではこの2つの間の変換メソッドも提供されています。
-		オイラー角はgimbal lockと呼ばれる問題の影響をうけることがあります。
-		gimbal lockが発生すると、特定の設定のときにオブジェクトの回転の自由度が失われます(オブジェクトが特定の軸方向に回転できなくなります)
-		このため、オブジェクトの回転は<em>つねに</em>オブジェクトの4元数([page:Object3D.quaternion quaternion])に保持されます。
-	</p>
-	<p>
-		以前のバージョンのライブラリには*useQuaternion*プロパティがあり、これをfalseに設定すると、
-		オブジェクトの行列([page:Object3D.matrix matrix])がオイラー角から計算されるようになっていました。
-		このやり方は古くなってきたので、代わりに[page:Object3D.setRotationFromEuler setRotationFromEuler]メソッドを使用して、
-		四元数を更新します。
-	</p>
-
-</body>
-
-</html>

docs/manual/ja/introduction/Typescript-setup.html

@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>[name]</h1>
-
-		<p>
-			three.jsはJavaScriptベースのライブラリですが、[link:https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html 宣言ファイル](*d.ts*　ファイル)は公開されているので、TypeScriptプロジェクトで使用することも可能です。
-		</p>
-
-		<p>
-			Typescriptのコンパイラがthree.jsの型を判別するために最小限の設定は必要です。<br>
-			[link:https://www.typescriptlang.org/docs/handbook/module-resolution.html moduleResolution]を *node* に、[link:https://www.typescriptlang.org/docs/handbook/compiler-options.html target]を *es6* 以降に設定する必要があります。
-		</p>
-
-		<code>
-		// Example of minimal `tsconfig.json` file
-		{
-			"compilerOptions": {
-				"target": "es6",
-				"moduleResolution": "node",
-			},
-			"include": [ "./src/**/*.ts" ],
-		}
-		</code>
-
-		<p>
-			注意事項 : 今のところ、この２つのオプションを使わずにthree.jsの型を使うことはできません。
-		</p>
-
-		<p>
-			注意事項 : いくつかの宣言が間違っていたり欠けていたりすることがあります。宣言ファイルの改良に貢献することは、コミュニティにとって非常に有益であり、three.jsの型付けをより正確で良いものにします。
-		</p>
-	</body>
-</html>

docs/manual/ja/introduction/Useful-links.html

@@ -1,172 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>[name]</h1>
-
-		<p class="desc">
-			以下は、three.jsを学ぶ際に役立つと思われるリンク集です。<br />
-			ここに追加したいものがあったり、以下のリンクのどれかがもう関連していない、もしくは機能していないと思われる場合は、右下の「編集」ボタンをクリックして、自由に変更してください<br /><br />
-
-			また、three.jsは急速に開発が進んでいるため、これらのリンクの多くには古い情報が含まれていることにも注意してください。
-			期待通りに動作しない場合や、これらのリンクのいずれかに記載されている通りに動作しない場合は、
-			ブラウザコンソールで警告やエラーがないか確認してください。また、関連するドキュメントページもチェックしてください。
-		</p>
-
-		<h2>ヘルプ</h2>
-		<p>
-			Three.jsは公式の[link:https://discourse.threejs.org/ forum]と[link:http://stackoverflow.com/tags/three.js/info Stack Overflow]をヘルプリクエストに利用しています。何か支援が必要な場合は、ここを利用してください。ヘルプリクエストのためにGithubのissueを作成しないでください
-		</p>
-
-		<h2>チュートリアルと学習コース</h2>
-
-		<h3>three.jsを始める</h3>
-		<ul>
-			<li>
-				[link:https://threejs.org/manual/#en/fundamentals Three.js Fundamentals starting lesson]
-			</li>
-			<li>
-				[link:https://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-1-the-scene Beginning with 3D WebGL] by [link:https://codepen.io/rachsmith/ Rachel Smith].
-			</li>
-			<li>
-				[link:https://www.august.com.au/blog/animating-scenes-with-webgl-three-js/ Animating scenes with WebGL and three.js]
-			</li>
-		</ul>
-
-		<h3>より先進的な内容の記事やコース</h3>
-		<ul>
-			<li>
-				[link:https://discoverthreejs.com/ Discover three.js]
-			</li>
-			<li>
-				[link:http://blog.cjgammon.com/ Collection of tutorials] by [link:http://www.cjgammon.com/ CJ Gammon].
-			</li>
-			<li>
-				[link:https://medium.com/soffritti.pierfrancesco/glossy-spheres-in-three-js-bfd2785d4857 Glossy spheres in three.js].
-			</li>
-		 <li>
-			 [link:https://www.udacity.com/course/interactive-3d-graphics--cs291 Interactive 3D Graphics] - a free course on Udacity that teaches the fundamentals of 3D Graphics,
-			 and uses three.js as its coding tool.
-		 </li>
-		 <li>
-			[Link:https://aerotwist.com/tutorials/ Aerotwist] tutorials by [link:https://github.com/paullewis/ Paul Lewis].
-		 </li>
-		 <li>
-			 [link:https://discourse.threejs.org/t/three-js-bookshelf/2468 Three.js Bookshelf] - Looking for more resources about three.js or computer graphics in general?
-			 Check out the selection of literature recommended by the community.
-		 </li>
-		</ul>
-
-		<h2>ニュースとアップデート情報</h2>
-		<ul>
-			<li>
-				[link:https://twitter.com/hashtag/threejs Three.js on Twitter]
-			</li>
-			<li>
-				[link:http://www.reddit.com/r/threejs/ Three.js on reddit]
-			</li>
-			<li>
-				[link:http://www.reddit.com/r/webgl/ WebGL on reddit]
-			</li>
-		</ul>
-
-		<h2>Examples</h2>
-		<ul>
-			<li>
-				[link:https://github.com/edwinwebb/three-seed/ three-seed] - three.js starter project with ES6 and Webpack
-			</li>
-			<li>
-				[link:http://stemkoski.github.io/Three.js/index.html Professor Stemkoskis Examples] - a collection of beginner friendly
-				examples built using three.js r60.
-			</li>
-			<li>
-				[link:https://threejs.org/examples/ Official three.js examples] - these examples are
-				maintained as part of the three.js repository, and always use the latest version of three.js.
-			</li>
-			<li>
-				[link:https://raw.githack.com/mrdoob/three.js/dev/examples/ Official three.js dev branch examples]  -
-				Same as the above, except these use the dev branch of three.js,	and are used to check that
-				everything is working as three.js being is developed.
-			</li>
-		</ul>
-
-	<h2>ツール</h2>
-	<ul>
-		<li>
-			[link:https://github.com/tbensky/physgl physgl.org] - JavaScript front-end with wrappers to three.js, to bring WebGL
-			graphics to students learning physics and math.
-		</li>
-		<li>
-			[link:https://whsjs.readme.io/ Whitestorm.js] – Modular three.js framework with AmmoNext physics plugin.
-		</li>
-		<li>
-			[link:http://zz85.github.io/zz85-bookmarklets/threelabs.html Three.js Inspector]
-		</li>
-		<li>
-			[link:http://idflood.github.io/ThreeNodes.js/ ThreeNodes.js].
-		</li>
-		<li>
-			[link:https://marketplace.visualstudio.com/items?itemName=slevesque.shader vscode shader] - Syntax highlighter for shader language.
-			<br />
-			[link:https://marketplace.visualstudio.com/items?itemName=bierner.comment-tagged-templates vscode comment-tagged-templates] - Syntax highlighting for tagged template strings using comments to shader language, like: glsl.js.
-		</li>
-		<li>
-			[link:https://github.com/MozillaReality/WebXR-emulator-extension WebXR-emulator-extension]
-		</li>
-	</ul>
-
-	<h2>WebGLのリファレンス</h2>
-	 <ul>
-		 <li>
-			[link:https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf webgl-reference-card.pdf] - Reference of all WebGL and GLSL keywords, terminology, syntax and definitions.
-		 </li>
-	 </ul>
-
-	 <h2>古いリンク(Old Links)</h2>
-	 <p>
-		以下のリンクは歴史的な理由で残っています。現在でも役に立つと思うかもしれませんが、リンク先の情報は
-		すごく古いバージョンのthree.jsの情報を含んでいる可能性があるので気をつけてください。
-	 </p>
-
-	 <ul>
-		<li>
-			[link:https://www.youtube.com/watch?v=Dir4KO9RdhM AlterQualia at WebGL Camp 3]
-		</li>
-		<li>
-			[link:http://yomotsu.github.io/threejs-examples/ Yomotsus Examples] - a collection of examples using three.js r45.
-		</li>
-		<li>
-			[link:http://fhtr.org/BasicsOfThreeJS/#1 Introduction to Three.js] by [link:http://github.com/kig/ Ilmari Heikkinen] (slideshow).
-		</li>
-		<li>
-			[link:http://www.slideshare.net/yomotsu/webgl-and-threejs WebGL and Three.js] by [link:http://github.com/yomotsu Akihiro Oyamada] (slideshow).
-		</li>
-		<li>
-			[link:https://www.youtube.com/watch?v=VdQnOaolrPA Trigger Rally]  by [link:https://github.com/jareiko jareiko] (video).
-		</li>
-		<li>
-			[link:http://blackjk3.github.io/threefab/ ThreeFab] - scene editor, maintained up until around three.js r50.
-		</li>
-		<li>
-			[link:http://bkcore.com/blog/3d/webgl-three-js-workflow-tips.html Max to Three.js workflow tips and tricks] by [link:https://github.com/BKcore BKcore]
-		</li>
-		<li>
-			[link:http://12devsofxmas.co.uk/2012/01/webgl-and-three-js/ A whirlwind look at Three.js]
-			by [link:http://github.com/nrocy Paul King]
-		</li>
-		<li>
-			[link:http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html Animated selective glow in Three.js]
-			by [link:https://github.com/BKcore BKcore]
-		</li>
-		<li>
-			[link:http://www.natural-science.or.jp/article/20120220155529.php Building A Physics Simulation Environment] - three.js tutorial in Japanese
-		</li>
-	 </ul>
-
-	</body>
-</html>

docs/manual/ja/introduction/WebGL-compatibility-check.html

@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>[name]</h1>
-		<p>
-			問題が少なくなってきたとはいえ、端末やブラウザによってはWebGLに対応していない場合があります。以下の方法で、ブラウザがWebGLをサポートしているかどうかを確認し、サポートされていない場合はユーザーにメッセージを表示することができます。
-			WebGL サポート検出モジュールをインポートし、レンダリングを試みる前に以下を実行します。
-		</p>
-
-		<code>
-		import WebGL from 'three/addons/capabilities/WebGL.js';
-
-		if ( WebGL.isWebGL2Available() ) {
-
-			// Initiate function or other initializations here
-			animate();
-
-		} else {
-
-			const warning = WebGL.getWebGL2ErrorMessage();
-			document.getElementById( 'container' ).appendChild( warning );
-
-		}
-		</code>
-	</body>
-</html>

docs/manual/ko/introduction/Animation-system.html

@@ -1,129 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-	<head>
-		<meta charset="utf-8" />
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>애니메이션 시스템([name])</h1>
-
-		<h2>Overview</h2>
-
-		<p class="desc">
-            three.js 애니메이션 시스템에서는 모델의 다양한 속성을 설정할 수 있습니다:
-            [page:SkinnedMesh skinned and rigged model]의 뼈, 모프타깃, 서로 다른 재질의 속성(색상, 불투명도, 참/거짓 연산),
-            가시성과 변환이 그 예입니다. 애니메이션의 속성은 페이드 아웃, 페이드 아웃, 크로스페이드, 랩이 있습니다.
-            한 오브젝트에 대한 동시에 일어나는 다른 확대 시간 및 가중치 조절이나, 서로 다른 오브젝트간의 애니메이션도 전부 개별로 변화시킬 수 있습니다.
-            같은, 혹은 서로 다른 오브젝트틀간의 다양한 애니메이션도 싱크를 맞출 수 있습니다.
-            <br /><br />
-
-            이를 한 시스템 안에 구현하기 위해서, three.js 애니메이션 시스템은 2015년에 완전히 변경되었으며([link:https://github.com/mrdoob/three.js/issues/6881 Link])
-            되었으며(지난 정보에 주의하세요!), 현재는 Unity/Unreal Engine 4와 유사한 구조를 가지고 있습니다.
-            이 페이지에서는 어떻게 시스템 메인 컴포넌트가 구성되고 동작되는지를 간단하게 알아보겠습니다.
-
-		</p>
-
-		<h3>애니메이션 클립(Animation Clips)</h3>
-
-		<p class="desc">
-            애니메이션 3D 오브젝트를 잘 불러왔다면(구조에 골자 혹은 모프 타깃이 있는지는 상관 없습니다) — 예를 들면
-            [link:https://github.com/KhronosGroup/glTF-Blender-IO glTF Blender exporter]라는 익스포터로 추출하고
-            [page:GLTFLoader]를 사용해 three.js에 불러왔다면 — 응답 필드 중 하나가 "animations"라는 이름의 배열로 되어 있고 해당 모델에 대한
-            [page:AnimationClip AnimationClips]를 담고 있을 것입니다(활용 가능한 로더는 아래 리스트를 확인하세요).
-            <br /><br />
-
-			각각의 *AnimationClip*은 대개 해당 오브젝트의 특정 행동에 대한 데이터를 담고 있습니다.
-			예를 들어 mesh가 이름이라면, walkcycle AnimationClip 한 개와, 두 번째는 jump, 세 번째는 sidestepping 등등이 들어 있을 것입니다.
-
-		</p>
-
-		<h3>키프레임 트랙(Keyframe Tracks)</h3>
-
-		<p class="desc">
-
-            이러한 *AnimationClip* 안에는 각각의 애니메이션 속성별 데이터가 별도의 [page:KeyframeTrack]에 저장되어 있습니다.
-            [page:Skeleton skeleton] 이라는 오브젝트가 있다고 가정하면, 한 키프레임 트랙은 하완골격의 위치가 수시로 변화하는 데이터를 저장할 수 있을 것이며
-            또 다른 트랙에는 같은 뼈의 회전, 세 번째 트랙에는 다른 뼈의 위치와 회전각, 치수 등을 저장할 것입니다.
-            애니매이션 클립은 이런 트랙으로 여러 번 구성될 수 있다는 것을 잘 알아야 합니다.
-            <br /><br />
-
-            가령 모형이 모프 타깃(예를 들어 한 모프타깃은 웃는 표정, 다른 하나는 화난 표정을 나타낸다거 히면)을 가지고 있다고 하면, 각 트랙은
-            해당 모프 타깃이 변화하는 동안에 어떻게 [page:Mesh.morphTargetInfluences 영향]을 미치는지에 대한 정보를 담고 있을 것입니다.
-		</p>
-
-		<h3>애니메이션 믹서(Animation Mixer)</h3>
-
-		<p class="desc">
-
-            저장된 데이터 폼은 오직 애니메이션에 대한 기본 정보일 뿐입니다. 실제 플레이백은 [page:AnimationMixer]가 담당합니다.
-            이 믹서는 단지 애니메이션 플레이어가 아닌, 리얼 믹서 콘솔처럼 여러 애니메이션을 동시재생, 혼합, 병합재생할 수 있다는 점을 알 수 있을 것입니다.
-		</p>
-
-		<h3>애니메이션 액션(Animation Actions)</h3>
-
-		<p class="desc">
-
-			*AnimationMixer*는 아주 적은(일반적인) 속성과 메서드를 가지고 있는데,
-            [page:AnimationAction AnimationActions]으로 설정할 수 있습니다. *AnimationAction*을 설정하면
-            특정 *AnimationClip*이 언제, 어떤 믹서에서 실행, 정지, 중지되어야 하는지를 조절할 수 있으며 얼마나 반복되어야 하는지, 페이드나 타임 스케일링이 필요한지,
-            크로스페이딩이나 싱크로나이징 같은 것들이 필요한지도 설정할 수 있습니다.
-		</p>
-
-		<h3>애니메이션 오브젝트 그룹(Animation Object Groups)</h3>
-
-		<p class="desc">
-
-			같은 애니메이션 효과를 공유하는 오브젝트 그룹을 만들고 싶다면,
-			[page:AnimationObjectGroup]을 사용하면 됩니다.
-
-		</p>
-
-		<h3>지원되는 포맷 및 로더</h3>
-
-		<p class="desc">
-			애니메이션을 포함한 모든 모델들(OBJ는 확실히 안 됩니다)이 지원되는 것은 아니며, 아주 몇몇
-			three.js 로더만 [page:AnimationClip AnimationClip] 시퀀스를 지원합니다. 지원<i>되는</i>
-			애니메이션 타입은 다음과 같습니다:
-		</p>
-
-			<ul>
-				<li>[page:ObjectLoader THREE.ObjectLoader]</li>
-				<li>THREE.BVHLoader</li>
-				<li>THREE.ColladaLoader</li>
-				<li>THREE.FBXLoader</li>
-				<li>[page:GLTFLoader THREE.GLTFLoader]</li>
-			</ul>
-
-		<p class="desc">
-			3ds max와 Maya는 현재 여러 애니메이션 (같은 시간대에 있지 않은 애니메이션)을 한 파일로 내보내기 할 수 없습니다.
-		</p>
-
-		<h2>예제</h2>
-
-		<code>
-		let mesh;
-
-		// AnimationMixer 만들기, AnimationClip 인스턴스 리스트 가져오기
-		const mixer = new THREE.AnimationMixer( mesh );
-		const clips = mesh.animations;
-
-		// 각 프레임의 mixer 업데이트
-		function update () {
-			mixer.update( deltaSeconds );
-		}
-
-		// 특정 애니메이션 재생
-		const clip = THREE.AnimationClip.findByName( clips, 'dance' );
-		const action = mixer.clipAction( clip );
-		action.play();
-
-		// 전체 애니메이션 재생
-		clips.forEach( function ( clip ) {
-			mixer.clipAction( clip ).play();
-		} );
-		</code>
-
-	</body>
-</html>

docs/manual/ko/introduction/Color-management.html

@@ -1,265 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-
-<head>
-	<meta charset="utf-8">
-	<base href="../../../" />
-	<script src="page.js"></script>
-	<link type="text/css" rel="stylesheet" href="page.css" />
-	<style>
-		blockquote {
-			font-size: 0.8em;
-			line-height: 1.5em;
-			margin-left: 0;
-			border-left: 4px solid #cccccc;
-			padding: 1em 2em 1em 2em;
-		}
-
-		blockquote p:first-child {
-			margin-top: 0;
-		}
-
-		blockquote p:last-child {
-			margin-bottom: 0;
-		}
-
-		figure {
-			width: 100%;
-			margin: 1em 0;
-			font-style: italic;
-		}
-
-		figure img {
-			width: 100%;
-		}
-
-		figure.float {
-			float: right;
-			max-width: 30%;
-			margin: 1em;
-		}
-
-		@media all and ( max-width: 640px ) {
-
-			figure.float {
-				float: none;
-				max-width: 100%;
-			}
-
-		}
-	</style>
-</head>
-
-<body>
-	<h1>색상 관리[name]</h1>
-
-	<h2>색상 공간이란 무엇입니까?</h2>
-
-	<p>
-		각 색상 공간은 정밀도 및 디스플레이 기술과 관련된 기술적 제한을 충족하는 동시에 다양한 색상을 지원하기 위해 선택된 여러 설계 결정의 집합입니다.3D 에셋을 만들거나 장면에 3D 에셋을 어셈블할 때 이러한 속성이 무엇인지, 한 색상 공간의 속성과 장면의 다른 색상 공간의 관계를 이해하는 것이 중요합니다.
-	</p>
-
-	<figure class="float">
-		<img src="resources/srgb_gamut.png" alt="">
-		<figcaption>
-			CIE 1931 색상 차트에 표시된 sRGB 색상 및 흰색 점(D65)을 참조하십시오.색상 영역은 3D 볼륨인 sRGB 색재현율의 2D 투영을 나타냅니다.출처: <a href="https://en.wikipedia.org/wiki/SRGB" target="_blank" rel="noopener">Wikipedia</a>
-		</figcaption>
-	</figure>
-
-	<ul>
-		<li>
-			<b>원색:</b>원색(예를 들어 빨간색, 녹색, 파란색)은 절대적인 것이 아니다.그들은
-			제한된 정밀도 제약조건을 기반으로 가시 스펙트럼에서 선택
-			사용 가능한 디스플레이 장치의 성능색상은 원색의 비율을 나타냅니다.
-		</li>
-		<li>
-			<b> 흰색: </b> 대부분의 색상 공간은 다음과 같이 설계되었습니다.
-			원색 <i>R=G=B</i>는 색상이 없거나 "무채색" 으로 표시됩니다.모양
-			흰색이나 회색과 같은 소색 차이의 변화는 인간의 지각에 달려 있고 인간의 지각은
-			어느 정도 관찰자의 배경에 달려 있다.색상 공간의 균형을 맞추려면 흰색 점을 지정합니다.
-			이러한 요구 사항.sRGB 색상 공간에 정의된 흰색 점은
-			[link:https://en.wikipedia.org/wiki/Illuminant_D65D65]。
-		</li>
-		<li>
-			<b> 전송 함수: </b> 색재현율과 색상 모델을 선택한 후에도
-			숫자와 색상 공간 사이의 매핑을 정의합니다 (전달 함수).<i>r=0.5</i> 여부
-			물리적 조도가 <i>r=1.0</i>보다 50% 낮음을 나타냅니까?또는 인식에 따라 밝기 50% 감소
-			보통 사람의 눈?이것들은 서로 다른 것이다. 이런 차이는
-			수학 함수전송 함수는 <i> 선형 </i> 또는 <i> 비선형 </i> 일 수 있습니다.
-			색상 공간에 대한 대상입니다.sRGB는 비선형 전송 함수를 정의합니다.그것들
-			함수는 가끔 <i>gamma 함수 </i>와 비슷하지만 "gamma"는
-			애매모호하니 이런 상황에서는 피해야 한다.
-		</li>
-	</ul>
-
-		원색, 흰색 점 및 전송 함수라는 세 개의 매개변수는 각 매개변수가 특정 대상에 대해 선택된 색상 공간을 정의합니다.매개변수를 정의한 후에는 다음과 같은 추가 용어가 도움이 됩니다.
-
-		<ul>
-			<li>
-			<b> 색상 모델: </b> 선택한 색재현율에서 숫자로 색상을 식별하는 구문 - 색상의 좌표계입니다.three.js에서는 주로 RGB 색상에 초점을 맞춥니다.세 개의 좌표 <i>r, g, b∈[0,1]</i>("닫힌 도메인") 또는<i> r, g, b∈[0, ></i>("개역"), 각 마스터 도메인의 일부를 나타냅니다.색상.기타 색상 모델(HSL, Lab, LCH)은 일반적으로 예술 제어에 사용됩니다.
-			</li>
-			<li>
-			<b> 색재현율: </b> 원색과 흰색 점을 선택한 경우 가시 스펙트럼 내의 볼륨 (색재현율)이 볼륨에 포함되지 않는 색상 (색상 외부) 닫힌 도메인 [0,1] RGB 값으로는 표시할 수 없습니다.열린 도메인 [0, 에서 색재현율은 다음과 같습니다.기술적으로 무한하다.
-			</li>
-			</ul>
-
-	<p>
-		[page: SRGBColorSpace]("sRGB") 및 [page: LinearSRGBColorSpace]("Linear-sRGB") 두 가지 일반적인 색상 공간을 고려합니다.둘 다 같은 원색과 흰색 점을 사용하기 때문에 같은 색재현율을 가집니다.둘 다 RGB 색상 모델을 사용합니다.이들은 전송 함수에서만 다릅니다. 선형 sRGB는 물리적 빛 강도와 선형 관계입니다.sRGB는 비선형 sRGB 전달 함수를 사용하여 사람의 눈이 빛을 감지하는 방식과 일반적인 디스플레이 장치의 응답성에 더 가깝습니다.
-	</p>
-
-	<p>
-		이런 차이는 매우 중요하다.조명 계산 및 기타 렌더링 작업은 일반적으로 선형 색상 공간에서 수행되어야 합니다.그러나 선형 색상은 이미지나 프레임 버퍼에서 저장 효율이 낮고 인간 관찰자가 볼 때 올바르게 보이지 않습니다.따라서 텍스쳐 입력 및 최종 렌더링 이미지에는 일반적으로 비선형 sRGB 색상 공간이 사용됩니다.
-	</p>
-
-	<blockquote>
-		<p>
-			ℹ️ <i><b>NOTICE:</b> 일부 현대 모니터는 Display-P3와 같은 더 넓은 색재현율을 지원하지만 네트워크 플랫폼의 그래픽 API는 sRGB에 크게 의존합니다.현재 three.js를 사용하는 응용 프로그램은 일반적으로 sRGB 및 Linear sRGB 색상 공간만 사용합니다.</i>
-		</p>
-	</blockquote>
-
-	<h2>색채공간의 역할</h2>
-
-	<p>
-		현대 렌더링 방법에 필요한 선형 워크플로우는 일반적으로 여러 색상 공간과 관련되며 각 색상 공간은 특정 역할에 할당됩니다.선형 및 비선형 색상 공간은 다음과 같이 서로 다른 역할에 적용됩니다.
-	</p>
-
-	<h3>색상 공간 가져오기</h3>
-
-	<p>
-    three.js에 제공되는 색상 -- 색상 선택기, 텍스쳐, 3D 모델 및 다른 소스에서 가져온 각 색상 공간은 연관되어 있습니다.Linear sRGB 작업 색상 공간에 아직 없는 색상을 변환하고 텍스쳐에 올바른 <i>texture.colorSpace</i> 할당을 할당해야 합니다.세 가지 조건이 충족되면 특정 변환을 자동으로 수행할 수 있습니다 (sRGB의 16진수 및 CSS 색상).색상을 초기화하기 전에 ColorManagement API를 활성화합니다.
-	</p>
-
-	<code>
-    THREE.ColorManagement.enabled = true;
-	</code>
-
-	<p>
-		THREE.ColorManagement 기본적으로 활성화됩니다.
-	</p>
-
-	<ul>
-		<li>
-			<b>Materials, lights, and shaders:</b> 재료, 조명 및 셰이더의 색상은 RGB 컴포넌트를 Linear sRGB 작업 색상 공간에 저장합니다.
-		</li>
-		<li>
-			<b>Vertex colors:</b> [page:BufferAttribute BufferAttributes] RGB 컴포넌트 저장 선형 sRGB 작업 색상 공간.
-		</li>
-		<li>
-			<b> 색상 텍스처: </b>.map 또는.emissiveMap과 같은 색상 정보가 포함된 PNG 또는 JPEG[페이지: 텍스처 텍스처]는 닫힌 도메인 sRGB 색상 공간을 사용하며 <i>Texture.colorSpace=SRGBColorSpace</i>를 사용해야 합니다.OpenEXR(.envMap 또는.lightMap의 경우) 같은 형식은 <i>texture.colorSpace LinearSRGBColorSpace</i>로 표시된 선형 sRGB 색상 공간을 사용합니다.
-			또한 개역 [0,]의 값을 포함할 수 있습니다.
-			</li>
-			<li>
-			<b> 비컬러 텍스쳐: </b> 색상 정보를 저장하지 않는 텍스쳐(예:.normalMap 또는.rawnessMap)에는 연관된 색상 공간이 없으며, 일반적으로 (기본값) 텍스쳐 메모 <i> texture.colorSpace = NoColorSpace</i> 를 사용합니다.기술적인 이유로 비색상 데이터가 다른 비선형 인코딩으로 표시될 수 있는 경우는 극히 일부입니다.
-		</li>
-	</ul>
-
-	<blockquote>
-		<p>
-			⚠️ <i><b> 경고: </b> 많은 3D 모델의 형식이 색상 공간 정보를 올바르거나 일관되게 정의하지 않습니다.three.js가 대부분의 상황을 처리하려고 시도하지만 이전 파일 형식의 문제는 흔합니다.최상의 결과를 얻으려면 glTF 2.0([page:GLTFLoader])을 사용하고 가능한 한 빨리 온라인 뷰어에서 3D 모델을 테스트하여 자산 자체가 정확한지 확인하십시오</i>
-		</p>
-	</blockquote>
-
-	<h3>작업 색상 공간</h3>
-
-	<p>
-		렌더링, 보간 및 기타 많은 작업은 RGB 컴포넌트가 실제 조명에 비례하는 열린 도메인 선형 작업 색상 공간에서 수행되어야 합니다.three.js에서 작업 색상 공간은 Linear-sRGB입니다.
-	</p>
-
-	<h3>출력 색상 공간</h3>
-
-	<p>
-		디스플레이 장치, 이미지 또는 비디오로 출력하는 것은 열린 도메인의 Linear-sRGB 작업 색상 공간에서 다른 색상 공간으로 변환하는 것과 관련될 수 있습니다.이 변환은 기본 렌더링 프로세스([page:WebGLRender.outputColorSpace]) 또는 사후 처리 프로세스에서 수행할 수 있습니다.
-	</p>
-
-	<code>
-    renderer.outputColorSpace = THREE.SRGBColorSpace; // optional with post-processing
-	</code>
-
-	<ul>
-		<li>
-			<b> 표시: </b> WebGL 캔버스에 기록된 색상은 sRGB 색상 공간에 있어야 합니다.
-		</li>
-		<li>
-			<b>Image:</b>이미지를 쓰는 색상은 형식과 용도에 맞는 색상 공간을 사용해야 합니다.PNG 또는 JPEG 텍스쳐를 쓴 전체 렌더링 이미지는 일반적으로 sRGB 색상 공간을 사용합니다.송신, 조명 맵 또는 [0,1] 범위에 국한되지 않는 다른 데이터를 포함하는 이미지는 일반적으로 OpenEXR과 같은 Open 도메인 선형 sRGB 색상 공간과 호환되는 이미지 형식을 사용합니다.
-		</li>
-	</ul>
-
-	<blockquote>
-		<p>
-			⚠️ <i><b> 경고: </b> 렌더링 대상은 sRGB 또는 선형 sRGB를 사용할 수 있습니다.sRGB는 제한된 정밀도를 더 잘 활용합니다.닫힌 도메인에서 8 비트는 일반적으로 sRGB에 충분하지만 선형 sRGB는 ≥ 12 비트 (반 부동 소수점) 가 필요할 수 있습니다.후속 라인 단계에서 선형 sRGB 입력이 필요한 경우 추가 변환으로 인해 적은 성능 비용이 발생할 수 있습니다</i>
-		</p>
-	</blockquote>
-
-	<p>
-    [page:ShaderMaterial] 및 [page:RawShaderMaterial] 기반 사용자 지정 재료는 자체 출력 색상 공간 변환을 수행해야 합니다."ShaderMaterial" 인스턴스의 경우 "colorspace_fragment" 셰이더 블록을 세그먼트 셰이더의 "main()" 함수에 추가하면 충분합니다.
-	</p>
-
-	<h2>과 협력 THREE.Color 인스턴스</h2>
-
-	<p>
-		[page:Color] 인스턴스를 읽거나 수정하는 방법은 데이터가 three.js 작업 색상 공간인 Linear sRGB에 이미 있다고 가정합니다.RGB 및 HSL 구성 요소는 Color 인스턴스에 저장된 데이터의 직접 표현으로 암시적으로 변환되지 않습니다.색상 데이터는 <i>를 사용하여 명시적으로 변환할 수 있습니다 <i>.convertLinearToSRGB()</i>
-		or <i>.convertSRGBToLinear()</i>.
-	</p>
-
-	<code>
-		// RGB components (no change).
-		color.r = color.g = color.b = 0.5;
-		console.log( color.r ); // → 0.5
-
-		// Manual conversion.
-		color.r = 0.5;
-		color.convertSRGBToLinear();
-		console.log( color.r ); // → 0.214041140
-	</code>
-
-	<p>
-		<i>ColorManagement.enabled=true</i>(권장)를 설정하면 일부 변환이 자동으로 수행됩니다.16진수와 CSS 색상은 일반적으로 sRGB이기 때문에 [page:Color] 메서드는 setter에서 이러한 입력을 sRGB에서 Linear sRGB로 자동 변환하거나 getter에서 16진수 또는 CSS 출력을 반환할 때 Linear sRG에서 sRGB로 변환합니다.
-	</p>
-
-	<code>
-		// Hexadecimal conversion.
-		color.setHex( 0x808080 );
-		console.log( color.r ); // → 0.214041140
-		console.log( color.getHex() ); // → 0x808080
-
-		// CSS conversion.
-		color.setStyle( 'rgb( 0.5, 0.5, 0.5 )' );
-		console.log( color.r ); // → 0.214041140
-
-		// Override conversion with 'colorSpace' argument.
-		color.setHex( 0x808080, LinearSRGBColorSpace );
-		console.log( color.r ); // → 0.5
-		console.log( color.getHex( LinearSRGBColorSpace ) ); // → 0x808080
-		console.log( color.getHex( SRGBColorSpace ) ); // → 0xBCBCBC
-	</code>
-
-	<h2>일반적인 오류</h2>
-
-	<p>
-		단일 색상이나 텍스쳐 구성이 잘못되면 예상보다 더 어둡거나 밝게 표시됩니다.렌더기의 출력 색상 공간 구성이 잘못되면 전체 장면이 더 어둡게 보일 수 있습니다 (예: sRGB로 변환할 수 없음). 또는 더 밝게 보일 수 있습니다 (예: 사후 처리된 sRGB 이중 변환).각 상황에서 문제가 고르지 않을 수 있으며 조명을 단순히 증가 / 감소한다고 해서 문제가 해결되지는 않습니다.
-	</p>
-
-	<p>
-		다음과 같은 상황이 발생하면 더욱 미묘한 문제가 나타난다<i> 둘 다 </i>색상 공간 입력과 출력 색상 공간이 올바르지 않습니다. 전체적인 밝기 수준은 좋을 수 있지만 다른 조명에서 색상이 예기치 않게 변경되거나 그림자가 예상보다 과장되고 부드러워 보일 수 있습니다.이 두 가지 잘못은 결코 하나의 정확성과 같지 않다. 중요한 것은 일이다 색상 공간은 선형 (장면 참조) 이고 출력 색상 공간은 비선형 (디스플레이 참조) 입니다.
-	</p>
-
-	<h2>추가 읽기</h2>
-
-	<ul>
-		<li>
-			<a href="https://developer.nvidia.com/gpugems/gpugems3/part-iv-image-effects/chapter-24-importance-being-linear" target="_blank" rel="noopener">GPU Gems 3: 선형의 중요성</a>,저자: Larry Gritz and Eugene d'Eon
-		</li>
-		<li>
-			<a href="https://blog.johnnovak.net/2016/09/21/what-every-coder-should-know-about-gamma/" target="_blank" rel="noopener">모든 프로그래머는 gamma에 대해 알아야 합니다</a>, 저자:John Novak
-		</li>
-		<li>
-			<a href="https://hg2dc.com/" target="_blank" rel="noopener">디지털 색상 보행시선 안내서</a>,저자: Troy Sobotka
-		</li>
-		<li>
-			<a href="https://docs.blender.org/manual/en/latest/render/color_management.html" target="_blank" rel="noopener">색상 관리</a>,저자: Blender
-		</li>
-	</ul>
-
-</body>
-
-</html>

docs/manual/ko/introduction/Creating-a-scene.html

@@ -1,167 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>장면 만들기([name])</h1>
-
-		<p>이 장의 목표는 three.js에 대한 간략한 설명을 하는 것입니다. spinning cube라는 장면을 설정하는 것부터 시작할 것입니다. 막히거나 도움이 필요할 때에는 아래쪽의 실습 예제를 확인해주세요.</p>
-
-		<h2>시작하기에 앞서</h2>
-
-		<p>three.js를 사용하려면, 표시할 수 있는 공간이 필요합니다. 다음 HTML을 컴퓨터의 파일에 저장하고 브라우저에서 여세요.</p>
-
-		<code>
-		&lt;!DOCTYPE html&gt;
-		&lt;html&gt;
-			&lt;head&gt;
-				&lt;meta charset="utf-8"&gt;
-				&lt;title&gt;My first three.js app&lt;/title&gt;
-				&lt;style&gt;
-					body { margin: 0; }
-					canvas { display: block; }
-				&lt;/style&gt;
-			&lt;/head&gt;
-			&lt;body&gt;
-				&lt;script type="module"&gt;
-					import * as THREE from 'https://cdn.jsdelivr.net/npm/three/build/three.module.js';
-´
-					// Our Javascript will go here.
-				&lt;/script&gt;
-			&lt;/body&gt;
-		&lt;/html&gt;
-		</code>
-
-		<p>이게 전부입니다. 모든 코드들은 비어있는 &lt;script&gt; 태그 안에 작성될 것입니다.</p>
-
-		<h2>Scene 만들기</h2>
-
-		<p>three.js로 무언가를 표현하려면 scene, camera 그리고 renderer가 필요합니다. 이를 통해 카메라로 장면을 구현할 수 있습니다.</p>
-
-		<code>
-		const scene = new THREE.Scene();
-		const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
-
-		const renderer = new THREE.WebGLRenderer();
-		renderer.setSize( window.innerWidth, window.innerHeight );
-		document.body.appendChild( renderer.domElement );
-		</code>
-
-		<p>여기에서 잠깐 어떤 일들이 일어나는지 짚고 넘어가봅시다. 우선은 scene, camera renderer를 설정했습니다.</p>
-
-		<p>three.js에는 몇가지 종류의 카메라가 있는데, 이번에는<strong>PerspectiveCamera</strong>를 사용해 봅시다.</p>
-
-		<p>첫 번째 속성은 <strong>field of view(시야각)</strong>입니다. FOV(시야각)는 해당 시점의 화면이 보여지는 정도를 나타냅니다. 값은 각도 값으로 설정합니다.</p>
-
-		<p>두 번째 속성은 <strong>aspect ratio(종횡비)</strong>입니다. 대부분의 경우 요소의 높이와 너비에 맞추어 표시하게 할텐데, 그렇지 않으면 와이드스크린에 옛날 영화를 트는 것처럼 이미지가 틀어져 보일 것입니다.</p>
-
-		<p>다음 두 속성은 <strong>near</strong> 와 <strong>far</strong> 절단면입니다. 무슨 뜻인가 하면, <strong>far</strong> 값 보다 멀리 있는 요소나 <strong>near</strong> 값보다 가까이 있는 오브젝트는 렌더링 되지 않는다는 뜻입니다. 지금 시점에서 이것까지 고려할 필요는 없지만, 앱 성능 향상을 위해 사용할 수 있습니다.</p>
-
-		<p>다음은 renderer입니다. 마법이 일어나는 곳입니다. 같이 사용하는 WebGLRenderer와 더불어, three.js는 다른 몇가지 renderer를 사용하는데, 오래된 브라우저 혹은 모종의 사유로 WebGL을 지원 안할때의 대비용으로 사용하는 것입니다.</p>
-
-		<p>renderer 인스턴스를 생성함과 동시에, 렌더링할 곳의 크기를 설정해줘야 합니다. 렌더링할 구역의 높이와 너비를 설정하는 것은 좋은 방법입니다. 이 경우, 높이와 너비는 각각 브라우저 윈도우의 크기가 됩니다. 성능 개선을 중시하는 앱의 경우, <strong>setSize</strong>를 사용하거나 <strong>window.innerWidth/2</strong>, <strong>window.innerHeight/2</strong>를 사용해서 화면 크기의 절반으로 구현할 수도 있습니다.</p>
-
-		<p>사이즈는 그대로 유지하고 싶지만 더 낮은 해상도로 렌더링하고 싶을 경우, <strong>setSize</strong>의 <strong>updateStyle</strong> (세 번째 인자)를 false로 불러오면 됩니다. <strong>setSize(window.innerWidth/2, window.innerHeight/2, false)</strong>처럼 사용하면 &lt;canvas&gt;가 100%의 높이, 너비로 되어있다는 기준 하에 절반의 해상도로 렌더링 될 것입니다.</p>
-
-		<p>마지막으로 제일 중요한 <strong>renderer</strong> 엘리먼트를 HTML 문서 안에 넣었습니다. 이는&lt;canvas&gt; 엘리먼트로, renderer가 scene을 나타내는 구역입니다.</p>
-
-		<p><em>"그건 그렇고, 아까 말했던 큐브는 어디에 있죠?"</em> 바로 추가해 봅시다.</p>
-
-		<code>
-		const geometry = new THREE.BoxGeometry( 1, 1, 1 );
-		const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
-		const cube = new THREE.Mesh( geometry, material );
-		scene.add( cube );
-
-		camera.position.z = 5;
-		</code>
-
-		<p>큐브를 만드려면, <strong>BoxGeometry</strong>가 필요합니다. 여기에는 큐브에 필요한 모든 꼭짓점 (<strong>vertices</strong>) 와 면(<strong>faces</strong>)이 포함돼 있습니다. 여기에 대해서는 나중에 더 자세히 알아봅시다.</p>
-
-		<p>geometry와 더불어, 무언가를 색칠해줄 요소가 필요합니다. Three.js에서는 여러 방법을 고려했지만, 현재로서는<strong>MeshBasicMaterial</strong>을 고수하고자 합니다. 이 속성이 적용된 오브젝트들은 모두 영향을 받을 것입니다. 가장 단순하게 알아볼 수 있도록, 여기에서는 녹색인 <strong>0x00ff00</strong>만을 속성으로 사용하겠습니다. CSS 나 Photoshop에서처럼 (<strong>hex colors</strong>)로 동일하게 작동합니다.</p>
-
-		<p>세 번째로 필요한 것은<strong>Mesh</strong>입니다. mesh는 기하학을 받아 재질을 적용하고 우리가 화면 안에 삽입하고 자유롭게 움직일 수 있게 해 줍니다.
-
-		<p>기본 설정상 <strong>scene.add()</strong>를 불러오면, 추가된 모든 것들은 <strong>(0,0,0)</strong> 속성을 가집니다. 이렇게 되면 카메라와 큐브가 동일한 위치에 겹치게 되겠죠. 이를 피하기 위해, 카메라를 약간 움직여 두었습니다.</p>
-
-		<h2>scene 렌더링</h2>
-
-		<p>맨 처음에 있던 HTML 파일을 복사해서 열어놨다면, 아무것도 보이지 않을 것입니다. 왜냐하면 아직 아무것도 렌더링하지 않았기 때문입니다. 이를 해결하려면 <strong>render or animate loop</strong>라는 것이 필요합니다.</p>
-
-		<code>
-		function animate() {
-			requestAnimationFrame( animate );
-			renderer.render( scene, camera );
-		}
-		animate();
-		</code>
-
-		<p>이 코드는 화면이 새로고침 될 때마다 계속해서 렌더링을 해 줄 것입니다. (일반적인 경우에 1초에 60번 렌더링 됩니다). 웹 브라우저에서 게임을 만들기 시작한 지 얼마 안 된 분이라면, <em>"왜 그냥 setInterval을 쓰지 않는거죠?"</em>라고 질문할 수도 있을 겁니다. 단적으로 말하면 가능은 합니다. 하지만 <strong>requestAnimationFrame</strong> 을 사용하는 것이 훨씬 이점이 많습니다. 아마 가장 큰 이점은 유저가 브라우저 창에서 이탈했을때 멈춰주는 기능일 것입니다. 이를 통해 소중한 전력과 배터리를 아낄 수 있죠.</p>
-
-		<h2>큐브 애니메이팅</h2>
-
-		<p>시작할 때 만들었던 파일에 이전까지의 코드를 모두 작성해서 넣었을 경우, 초록색 박스를 확인할 수 있을 것입니다. 이 박스를 회전시켜 보면서 조금 더 재미있게 만들어봅시다.</p>
-
-		<p>다음 코드를 <strong>animate</strong>함수 안의 <strong>renderer.render</strong> 바로 위에 넣어주세요.</p>
-
-		<code>
-		cube.rotation.x += 0.01;
-		cube.rotation.y += 0.01;
-		</code>
-
-		<p>위 코드는 모든 프레임마다 실행되면서 (일반적으로 1초에 60번), 큐브가 멋지게 돌아가도록 만들어 줄겁니다. 기본적으로 앱을 실행하는 동안 무언가를 움직이거나 변형하고 싶을때, animate loop를 사용하면 됩니다. 물론 다른 함수를 불러올 수도 있고, <strong>animate</strong> 함수 안에 수백줄을 작성할 필요도 없습니다.</p>
-
-		<h2>결과 화면</h2>
-		<p>축하합니다! 첫 three.js이 완성되었네요. 이제 본격적으로 시작해보면 됩니다.</p>
-
-		<p>전체 코드는 아래에 나와 있고 [link:https://jsfiddle.net/0c1oqf38/ live example]로도 확인해볼 수 있습니다. 잘 살펴보고 어떻게 구동되는지 확인해 보세요.</p>
-
-		<code>
-		&lt;!DOCTYPE html&gt;
-		&lt;html&gt;
-			&lt;head&gt;
-				&lt;meta charset="utf-8"&gt;
-				&lt;title&gt;My first three.js app&lt;/title&gt;
-				&lt;style&gt;
-					body { margin: 0; }
-					canvas { display: block; }
-				&lt;/style&gt;
-			&lt;/head&gt;
-			&lt;body&gt;
-				&lt;script type="module"&gt;
-					import * as THREE from 'https://cdn.jsdelivr.net/npm/three/build/three.module.js';
-
-					const scene = new THREE.Scene();
-					const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
-
-					const renderer = new THREE.WebGLRenderer();
-					renderer.setSize( window.innerWidth, window.innerHeight );
-					document.body.appendChild( renderer.domElement );
-
-					const geometry = new THREE.BoxGeometry( 1, 1, 1 );
-					const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
-					const cube = new THREE.Mesh( geometry, material );
-					scene.add( cube );
-
-					camera.position.z = 5;
-
-					function animate() {
-						requestAnimationFrame( animate );
-
-						cube.rotation.x += 0.01;
-						cube.rotation.y += 0.01;
-
-						renderer.render( scene, camera );
-					}
-
-					animate();
-				&lt;/script&gt;
-			&lt;/body&gt;
-		&lt;/html&gt;
-		</code>
-	</body>
-</html>

docs/manual/ko/introduction/Creating-text.html

@@ -1,113 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>텍스트 만들기([name])</h1>
-		<div>
-			<p>
-				three.js에서 텍스트를 활용하고 싶을 경우가 많을 것입니다. - 그 방법의 몇가지를 소개합니다.
-			</p>
-		</div>
-
-		<h2>1. DOM + CSS</h2>
-		<div>
-			<p>
-				HTML을 사용하는 것은 텍스트를 추가하는 가장 쉽고 빠른 방법입니다. 대부분의 three.js 예제에서 오버레이 설명에 사용되는 방식입니다.
-			</p>
-			<p>내용을 추가하려면 다음과 같이 입력합니다.</p>
-			<code>&lt;div id="info"&gt;Description&lt;/div&gt;</code>
-
-			<p>
-				절대 위치를 설정하려면 CSS 마크업을 사용하고, 특히 three.js를 전체화면으로 사용한다면 z-index를 활용합니다.
-			</p>
-
-			<code>
-#info {
-	position: absolute;
-	top: 10px;
-	width: 100%;
-	text-align: center;
-	z-index: 100;
-	display:block;
-}
-			</code>
-
-		</div>
-
-
-
-		<h2>2. 캔버스에 텍스트를 그리고 [page:Texture]로 사용</h2>
-		<div>
-			<p>three.js scene에 손쉽게 텍스트를 그리고싶은 경우에 이 메서드를 사용하세요.</p>
-		</div>
-
-
-		<h2>3. 본인이 가장 선호하는 3D 앱으로 만들고 three.js로 export 하세요.</h2>
-		<div>
-			<p>본인의 3d 작업 앱을 선호하는 경우 이 메서드를 사용해 three.js로 모델을 import하세요.</p>
-		</div>
-
-
-
-		<h2>4. 절차적 텍스트 geometry</h2>
-		<div>
-			<p>
-				THREE.js만을 사용해 절차적 및 동적 3D 텍스트 geometry를 사용하고 싶으면, geometry이 THREE.TextGeometry의 인스턴스인 mesh를 사용하면 됩니다.
-			</p>
-			<p>
-				<code>new THREE.TextGeometry( text, parameters );</code>
-			</p>
-			<p>
-				하지만 이 작업을 수행하려면, TextGeometry의 "font" 파라미터가 THREE.Font 인스턴스로 설정되어 있어야 합니다.
-
-				이 과정이 어떻게 작동하는지, 각각의 파라미터에 대한 설명, THREE.js가 가지고 있는 JSON 폰트 리스트를 확인하려면 [page:TextGeometry] 페이지를 참고해 주세요.
-			</p>
-
-			<h3>예시</h3>
-
-			<p>
-				[example:webgl_geometry_text WebGL / geometry / text]<br />
-				[example:webgl_shadowmap WebGL / shadowmap]
-			</p>
-
-			<p>
-				글꼴이 없거나, 다른 글꼴을 사용하고 싶으면 python 스크립트를 통해 Three.js의 JSON 포맷으로 파일을 export 하세요:
-				[link:http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html]
-			</p>
-
-		</div>
-
-
-
-		<h2>5. 비트맵 글꼴</h2>
-		<div>
-			<p>
-				BMFonts (비트맵 폰트) 는 단일 BufferGeometry에 글자들을 일괄적으로 활용할 수 있습니다. BMFont 렌더링은
-				word-wrapping, letter spacing, kerning, signed distance fields with standard
-				derivatives, multi-channel signed distance fields, multi-texture fonts 등을 지원합니다.
-				[link:https://github.com/Jam3/three-bmfont-text three-bmfont-text]를 확인해 보세요.
-			</p>
-			<p>
-				Stock 폰트는
-                [link:https://github.com/etiennepinchon/aframe-fonts A-Frame Fonts]처럼 사용 가능하고, 
-                자신만의 .TTF 폰트를 만들어서, 프로젝트에 필요한 문자들만 불러와 최적화할 수 도 있습니다.
-			</p>
-			<p>
-				참고 자료:
-			</p>
-			<ul>
-				<li>[link:http://msdf-bmfont.donmccurdy.com/ msdf-bmfont-web] <i>(웹 기반)</i></li>
-				<li>[link:https://github.com/soimy/msdf-bmfont-xml msdf-bmfont-xml] <i>(커맨드라인)</i></li>
-				<li>[link:https://github.com/libgdx/libgdx/wiki/Hiero hiero] <i>(데스크탑 앱)</i></li>
-			</ul>
-		</div>
-
-
-
-	</body>
-</html>

docs/manual/ko/introduction/Drawing-lines.html

@@ -1,67 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-
-<head>
-    <meta charset="utf-8">
-    <base href="../../../" />
-    <script src="page.js"></script>
-    <link type="text/css" rel="stylesheet" href="page.css" />
-</head>
-
-<body>
-    <h1>선 그리기([name])</h1>
-    <div>
-        <p>
-            와이어프레임 [page:Mesh]를 사용하지 않고 선이나 원을 그려봅시다.
-            먼저 [page:WebGLRenderer renderer], [page:Scene scene] camera를 설정합니다. (scene 페이지를 참고하세요).
-        </p>
-
-        <p>사용할 코드는 다음과 같습니다:</p>
-        <code>
-const renderer = new THREE.WebGLRenderer();
-renderer.setSize( window.innerWidth, window.innerHeight );
-document.body.appendChild( renderer.domElement );
-
-const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
-camera.position.set( 0, 0, 100 );
-camera.lookAt( 0, 0, 0 );
-
-const scene = new THREE.Scene();
-			</code>
-        <p>다음으로는 재질을 정의해야 합니다. 선을 그리기 위해서는 [page:LineBasicMaterial]나 [page:LineDashedMaterial]를 사용하면 됩니다.</p>
-        <code>
-//create a blue LineBasicMaterial
-const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
-			</code>
-
-        <p>
-            그 다음에는 꼭짓점에 대한 기하학을 정의해야 합니다:
-        </p>
-
-        <code>
-const points = [];
-points.push( new THREE.Vector3( - 10, 0, 0 ) );
-points.push( new THREE.Vector3( 0, 10, 0 ) );
-points.push( new THREE.Vector3( 10, 0, 0 ) );
-
-const geometry = new THREE.BufferGeometry().setFromPoints( points );
-			</code>
-
-        <p>선은 연속된 꼭짓점 쌍 사이에 그려지고 첫 번째와 마지막 꼭짓점에는 그려지지 않습니다. (선은 닫혀있지 않습니다.)</p>
-
-        <p>이제 두 선을 그리기 위한 점과 재질이 있으니, 합쳐서 선을 만들 수 있습니다.</p>
-        <code>
-const line = new THREE.Line( geometry, material );
-			</code>
-        <p>이제 남은 것은 scene에 추가하고 [page:WebGLRenderer.render render]를 하는 것입니다.</p>
-
-        <code>
-scene.add( line );
-renderer.render( scene, camera );
-			</code>
-
-        <p>위로 향하고 있는 두 개의 파란 선으로 된 화살표를 확인할 수 있습니다.</p>
-    </div>
-</body>
-
-</html>

docs/manual/ko/introduction/FAQ.html

@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>[name]</h1>
-
-		<h2>어떤 3D 모델 포맷이 가장 잘 지원되나요?</h2>
-		<div>
-			<p>
-				불러오기 및 내보내기 용으로 추천되는 포맷은 glTF (GL Transmission Format)입니다. glTF는 런타임 에셋 딜리버리에 초점이 맞추어져 있기 때문에, 전송에 적합하고 로딩이 빠릅니다.
-			</p>
-			<p>
-				three.js 널리 쓰이는 포맷인 FBX, Collada 나 OBJ 도 지원합니다. 하지만 첫 프로젝트에서는 glTF 기반의 워크플로우로 작업해야 합니다. 더 자세한 내용은, [link:#manual/introduction/Loading-3D-models loading 3D models]를 참고하세요.
-			</p>
-		</div>
-
-		<h2>예제에 왜 meta viewport 태그가 있나요?</h2>
-		<div>
-				<code>&lt;meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"&gt;</code>
-
-				<p>이 태그들은 모바일 브라우저들의 뷰포트 크기와 확대정도를 조절합니다(페이지 내용이 뷰포트 영역과 다른 사이즈로 렌더링 된 경우).</p>
-
-				<p>[link:https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html Safari: Using the Viewport]</p>
-
-				<p>[link:https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag MDN: Using the viewport meta tag]</p>
-		</div>
-
-		<h2>화면 확대 정도가 리사이징 시에 유지될 수 있나요?</h2>
-		<p>
-			모든 오브젝트들이 카메라의 거리와 상관 없이, 화면 사이즈가 변경된다고 해도, 같은 크기로 보여지고 싶다고 가정합시다.
-
-			이 공식을 풀기 위한 핵심 방정식은 가시 높이와 거리와 관련된 아래 공식입니다.
-
-			<code>
-visible_height = 2 * Math.tan( ( Math.PI / 180 ) * camera.fov / 2 ) * distance_from_camera;
-			</code>
-            화면 높이를 특정 비율로 늘리면, 모든 가시 높이와 거리가 같은 비율로 증가해야 합니다.
-
-			이는 카메라 위치를 변경하는 것으로는 불가능합니다. 대신에 카메라 field-of-view를 변경해야합니다.
-			[link:http://jsfiddle.net/Q4Jpu/ Example].
-		</p>
-
-		<h2>왜 오브젝트 일부가 안 보일까요?</h2>
-		<p>
-			이는 페이스 컬링 문제일 수 있습니다. 각 면들은 어느 방향이 어느 방향인지에 대한 정보를 가지고 있습니다. 그리고 컬링은 일반적으로 뒷편의 면을 제거해 버립니다. 이 문제가 의심된다면 재질의 면을 THREE.DoubleSide로 변경해 보세요.
-			<code>material.side = THREE.DoubleSide</code>
-		</p>
-
-		<h2>three.js가 때때로 잘못된 입력에 대해 이상한 결과를 반환하는 이유는 무엇인가요?</h2>
-		<p>
-			성능상의 이유로 three.js는 대부분의 경우 입력의 유효성을 검사하지 않습니다. 모든 입력이 유효한지 확인하는 과정은 사용자의 앱에서 책임을 가져야 합니다.
-		</p>
-	</body>
-</html>

docs/manual/ko/introduction/How-to-create-VR-content.html

@@ -1,79 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-
-<head>
-	<meta charset="utf-8">
-	<base href="../../../" />
-	<script src="page.js"></script>
-	<link type="text/css" rel="stylesheet" href="page.css" />
-</head>
-
-<body>
-	<h1>VR 컨텐츠를 만드는 방법[name]</h1>
-
-	<p>
-		이 가이드에서는 three.js를 통한 웹 기반 VR 앱의 기본 컴포넌트를 만드는 방법을 알려드리겠습니다.
-	</p>
-
-	<h2>작업 순서</h2>
-
-	<p>
-		먼저, [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/webxr/VRButton.js VRButton.js]
-		를 프로젝트에 불러옵니다.
-	</p>
-
-	<code>
-import { VRButton } from 'three/addons/webxr/VRButton.js';
-	</code>
-
-	<p>
-        *VRButton.createButton()*은 두 가지 중요한 일을 합니다: VR에서 활용이 가능한 버튼을 만듭니다. 그리고 유저가 버튼을 누르면
-        VR 세션을 실행시킵니다. 다음 코드를 삽입하기만 하면 됩니다.
-	</p>
-
-	<code>
-document.body.appendChild( VRButton.createButton( renderer ) );
-	</code>
-
-	<p>
-		다음으로, *WebGLRenderer* 인스턴스에게 XR 렌더링을 허용해줘야합니다.
-	</p>
-
-	<code>
-renderer.xr.enabled = true;
-	</code>
-
-	<p>
-        마지막으로, 자주 쓰이는 *window.requestAnimationFrame()* 기능을 활용할 수 없기 때문에, 애니메이션 루프를 수정해주어야 합니다.
-        VR 프로젝트에서는 [page:WebGLRenderer.setAnimationLoop setAnimationLoop]를 사용합니다.
-		가장 간소화된 코드는 다음과 같습니다:
-	</p>
-
-	<code>
-renderer.setAnimationLoop( function () {
-
-	renderer.render( scene, camera );
-
-} );
-	</code>
-
-	<h2>다음 절차</h2>
-
-	<p>
-		실행을 위한 작업 절차와 관련된 공식 WebVR 예제를 확인하세요.<br /><br />
-
-		[example:webxr_xr_ballshooter WebXR / XR / ballshooter]<br />
-		[example:webxr_xr_cubes WebXR / XR / cubes]<br />
-		[example:webxr_xr_dragging WebXR / XR / dragging]<br />
-		[example:webxr_xr_paint WebXR / XR / paint]<br />
-		[example:webxr_xr_sculpt WebXR / XR / sculpt]<br />
-		[example:webxr_vr_panorama_depth WebXR / VR / panorama_depth]<br />
-		[example:webxr_vr_panorama WebXR / VR / panorama]<br />
-		[example:webxr_vr_rollercoaster WebXR / VR / rollercoaster]<br />
-		[example:webxr_vr_sandbox WebXR / VR / sandbox]<br />
-		[example:webxr_vr_video WebXR / VR / video]
-	</p>
-
-</body>
-
-</html>

docs/manual/ko/introduction/How-to-dispose-of-objects.html

@@ -1,120 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-
-<head>
-	<meta charset="utf-8">
-	<base href="../../../" />
-	<script src="page.js"></script>
-	<link type="text/css" rel="stylesheet" href="page.css" />
-</head>
-
-<body>
-	<h1>오브젝트를 폐기하는 방법([name])</h1>
-
-	<p>
-        애플리케이션에서 성능을 개선하고 메모리 누수를 방지하기 위한 중요한 한 가지는 사용되지 않는 라이브러리 개체를 폐기하는 것입니다.
-        *three.js* 유형의 인스턴스는 생성될 때마다 일정량의 메모리를 할당하게 됩니다. 하지만 *three.js*는 특정 개체에 대해 기하학적 구조나 WebGL 관련 재질(예: 버퍼 또는 쉐이더 프로그램) 개체의 렌더링에 필요한 것입니다.
-        이러한 오브젝트들은 자동으로 폐기되지 않는다는 점을 주의하세요. 대신, 애플리케이션에서는 메모리 자원을 확보하기 위해 특별한 API를 사용해야 합니다.
-        이 가이드에서는 이 API의 사용 방법과 이와 관련해서 어떤 오브젝트가 있는지에 대한 간략한 설명을 제공해 드립니다.
-	</p>
-
-	<h2>기하학</h2>
-
-	<p>
-        기하학은 속성 집합으로 정의된 꼭짓점 정보를 표시하는데, *three.js*는 속성마다 하나의 [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLBuffer WebGLBuffer] 유형의 대상을 만들어 내부에 저장합니다.
-        이러한 개체는 [page:BufferGeometry.dispose]를 호출할 때만 폐기됩니다.
-        만약 애플리케이션에서 기하학을 더이상 사용하지 않는다면, 이 방법을 실행하여 모든 관련 자원을 폐기하세요.
-	</p>
-
-	<h2>재질</h2>
-
-	<p>
-        재질은 오브젝트가 어떻게 렌더링되는지를 정의합니다. *three.js*는 재질에 정의된 정보를 사용하여 렌더링을 위한 하나의 셰이더 프로그램을 구축합니다.
-        셰이더 프로그램은 해당 재질이 폐기된 후에만 삭제할 수 있습니다. 성능상의 이유로 *three.js*는 가능하다면 활용 가능한 셰이더 프로그램을 재사용하게 되어 있습니다. 따라서 셰이더 프로그램은 모든 관련된 재질들이 사라진 후에야 삭제됩니다.
-        [page:Material.dispose]() 를 실행함으로써 재질을 폐기할 수 있습니다.
-	</p>
-
-	<h2>텍스쳐</h2>
-
-	<p>
-        재질의 폐기는 텍스쳐에 영향을 미치지 않습니다. 이들은 분리되어 있어 하나의 텍스쳐를 여러 재질로 동시에 사용할 수 있습니다.
-        [page:Texture] 인스턴스를 만들 때마다 three.js는 내부에서 [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture WebGLTexture] 인스턴스를 만듭니다.
-        buffer와 비슷하게, 이 오브젝트는 [page:Texture.dispose]() 호출로만 삭제가 가능합니다.
-	</p>
-
-	<p>
-	만약 *ImageBitmap*을 텍스처의 데이터 소스로 사용할 경우, 애플리케이션 레벨에서 [link:https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap/close ImageBitmap.close]()를 호출하여 CPU 측 리소스를 모두 해제해야 합니다.
-	[page:Texture.dispose]()에서 *ImageBitmap.close()*를 자동으로 호출하는 것은 불가능한데, 이는 이미지 비트맵이 사용 불가능하게 되기 때문이며, 엔진은 해당 이미지 비트맵이 다른 곳에서 사용되고 있는지 여부를 알 수 없기 때문입니다.
-	</p>
-
-	<h2>렌더링 대상</h2>
-
-	<p>
-        [page:WebGLRenderTarget] 타입의 오브젝트는 [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture WebGLTexture]의 인스턴스가 할당되어 있을 뿐만 아니라,
-        [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLFramebuffer WebGLFramebuffer]와 [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderbuffer WebGLRenderbuffer] 도 할당되어,
-        커스텀 렌더링 목표를 실체화합니다. 이러한 오브젝트는 [page:WebGLRenderTarget.dispose]()를 실행해야만 폐기할 수 있습니다.
-	</p>
-
-	<h2>그밖의 것들</h2>
-
-	<p>
-        컨트롤러나 후기 처리 프로세스처럼 *dispose()* 메서드가 제공되어 내부 이벤트리스너나 렌더링 대상을 폐기하는 examples 폴더에서 가져온 것들이 있습니다.
-        일반적으로 API나 파일을 열람하고 *dispose()* 를 확인하는 것이 좋습니다. 만약 이 메서드가 존재한다면 당연히 그 메서드를 폐기 시에 사용해야 합니다.
-	</p>
-
-	<h2>FAQ</h2>
-
-	<h3>*three.js*는 왜 자동으로 오브젝트를 폐기 못하나요?</h3>
-
-	<p>
-        이 문제가 커뮤니티에서 여러 차례 제기돼 온 만큼 확실한 대답을 해 드려야겠습니다. 사실, *three.js*는 사용자가 만든 개체(예를 들어 기하체 또는 재질)의 라이프사이클이나 역할 범위를 알지 못하며, 이는 애플리케이션의 책임입니다.
-        예를 들어, 만약 하나의 재질이 현재 렌더링에 사용되고 있지 않더라도, 바로 다음 프레임에 필수적인 재질일 수 있을 것입니다. 그래서 만약 애플리케이션에서 특정 오브젝트가 삭제되어도 된다고 하면,
-        해당하는 *dispose()* 메서드를 통해 엔진에 알려줘야 합니다.
-	</p>
-
-	<h3>화면에서 mesh를 지우는 것도 geometry와 material을 폐기시키나요?</h3>
-
-	<p>
-		아니요, *dispose()*를 통해 명시적으로 geometry와 material을 폐기해야합니다. geometry와 material은 mesh와 마찬가지로 3D 오브젝트에서 활용할 수 있다는 점을 명심하세요.
-	</p>
-
-	<h3>*three.js*에서 캐시화된 오브젝트의 수를 알 수 있나요?</h3>
-
-	<p>
-        네, 렌더러의 그래빅 보드와 렌더링 프로세스의 통계 정보를 담고 있는 특수 속성인 [page:WebGLRenderer.info]를 통해 확인할 수 있습니다.
-        다른 것 보다도, 이를 통해 내부적으로 많은 텍스쳐와 기하학, 셰이더 프로그램이 저장되어 있다는 것을 알 수 있습니다.
-        만약 애플리케이션에서 성능 문제를 발견했다면, 바로 이 속성을 조절하여 쉽게 메모리 누출을 확인할 수 있습니다.
-	</p>
-
-	<h3>이미지가 아직 로딩이 안 됐는데 텍스쳐에서 *dispose()*를 해버리면 어떻게 되나요?</h3>
-
-	<p>
-		텍스쳐와 관련된 내부 자원은 이미지가 완전히 로딩됐을때밖에 할당이 되지 않습니다. 만약 이미지 로딩 전에 텍스쳐를 폐기해버렸다면,
-		아무 일도 일어나지 않을 것입니다. 아무런 자원도 할당되지 않았고 지울 것도 없기 때문입니다.
-	</p>
-
-	<h3>*dispose()*를 하고 나서 나중에 다시 각각의 오브젝트를 사용하면 어떻게 되나요?</h3>
-
-	<p>
-        삭제된 내부 자원이 엔진에서 다시 생성될 것입니다. 런타임 에러는 발생하지 않겠지만 프레임에 부정적인 영향을 미치는 것을 확인할 수 있을 것이고
-        특히 셰이더 프로그램을 컴파일할 때 더 두드러질 것입니다.
-	</p>
-
-	<h3>*three.js* 오브젝트를 앱에서 어떻게 관리해야 할까요? 언제 폐기해야되는지 어떻게 알죠?</h3>
-
-	<p>
-        일반적으로 이 점에 대한 명확한 해답은 없습니다. *dispose()*는 구체적인 사용 방법에 따라 적절히 활용하는 방법이 좌우됩니다. 굳이 오브젝트를 자꾸 폐기할 필요는 없다는 것을 기억해 두세요.
-        다양한 레벨로 구성된 게임이 좋은 예가 될 수 있을 것입니다. 레벨이 바뀌면, 폐기를 할 때입니다. 애플리케이션은 오래된 화면을 지나가면서 오래된 재질, 기하학, 텍스쳐를 모두 폐기할 수 있습니다.
-        앞의 장에서 언급한 바와 같이 만약 여전히 사용하고 있는 오브젝트를 폐기해도 런타임 에러를 만들지는 않을 것입니다. 단일 프레임에서 퍼포먼스가 떨어지는 정도가 가장 안 좋은 정도일 것입니다.
-	</p>
-
-	<h2>dispose() 사용법 예제</h2>
-
-	<p>
-		[example:webgl_test_memory WebGL / test / memory]<br />
-		[example:webgl_test_memory2 WebGL / test / memory2]<br />
-	</p>
-
-</body>
-
-</html>

docs/manual/ko/introduction/How-to-update-things.html

@@ -1,216 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>오브젝트를 업데이트하는 방법([name])</h1>
-		<div>
-			<p>모든 오브젝트들은 기본적으로 자동으로 장면에 추가됐을 때 자신들의 행렬구조를 업데이트합니다.</p>
-			<code>
-const object = new THREE.Object3D();
-scene.add( object );
-			</code>
-			혹은 다른 오브젝트의 자식으로 장면에 추가될 때도 마찬가지입니다.
-			<code>
-const object1 = new THREE.Object3D();
-const object2 = new THREE.Object3D();
-
-object1.add( object2 );
-scene.add( object1 ); //object1과 object2는 자동으로 자신들의 행렬구조를 업데이트할 것입니다.
-			</code>
-		</div>
-
-		<p>하지만 오브젝트가 고정되어야 한다면, 이 설정을 풀고 수동으로 행렬구조를 갱신할 수 있습니다.</p>
-
-		<code>
-object.matrixAutoUpdate = false;
-object.updateMatrix();
-		</code>
-
-		<h2>BufferGeometry</h2>
-		<div>
-			<p>
-				BufferGeometries는 [page:BufferAttribute buffers]에 다양한 정보(꼭짓점 위치, 면 순서, 법선, 색깔,
-				UV, 모든 커스텀 속성들)를 저장합니다. - 이는
-				[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays typed arrays]라는 의미입니다.
-				이는 기본 Geometries보다 빠르게 작동하지만, 그 대신 작업하기가 더 어렵습니다.
-			</p>
-			<p>
-                BufferGeometries를 업데이트 하는 것과 관련해서, buffers의 크기를 조절할 수 없다는 것을 이해하는 것이 가장 중요합니다.
-                (작업이 아주 어렵기 때문에, 새 geometry를 만드는 수준입니다).
-				그 대신에 buffers의 내용을 변경할 수 있습니다.
-			</p>
-			<p>
-				이는 곧 만약 BufferGeometry의 속성이 증가할 것이라고 예측이 된다면, 예를 들어 꼭짓점의 갯수라면,
-				만들어질 수 있는 새로운 꼭짓점들을 담을 수 있는 충분한 buffer를 미리 준비해 놓아야 합니다.
-				물론 이는 당신이 사용할 BufferGeometry의 상한치가 있을 것이라는 뜻이기도 합니다 - 효율적으로 무한대로 확장되는 BufferGeometry를 만드는 방법은 없습니다.
-			</p>
-			<p>
-				렌더링 시점에 확장되는 선을 예로 들어보겠습니다. buffer에는 500 개의 꼭짓점을 할당하겠지만 처음에는 [page:BufferGeometry.drawRange]를 이용해 두 개만 그릴 것입니다..
-			</p>
-			<code>
-const MAX_POINTS = 500;
-
-// geometry
-const geometry = new THREE.BufferGeometry();
-
-// attributes
-const positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
-geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
-
-// draw range
-const drawCount = 2; // draw the first 2 points, only
-geometry.setDrawRange( 0, drawCount );
-
-// material
-const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
-
-// line
-const line = new THREE.Line( geometry, material );
-scene.add( line );
-			</code>
-		 	<p>
-				그 다음, 아래와 같은 패턴으로 무작위로 선에 점을 생성해 줄 것입니다:
-			</p>
-			<code>
-const positionAttribute = line.geometry.getAttribute( 'position' );
-
-let x = 0, y = 0, z = 0;
-
-for ( let i = 0; i < positionAttribute.count; i ++ ) {
-
-	positionAttribute.setXYZ( i, x, y, z );
-
-	x += ( Math.random() - 0.5 ) * 30;
-	y += ( Math.random() - 0.5 ) * 30;
-	z += ( Math.random() - 0.5 ) * 30;
-
-}
-			</code>
-			<p>
-				첫 렌더링 이후에 <em>점의 갯수</em>를 변경하고 싶다면, 다음과 같이 실행하세요:
-			</p>
-			<code>
-line.geometry.setDrawRange( 0, newValue );
-			</code>
-			<p>
-				첫 렌더링 이후에 position 데이터 수치를 변경하고 싶다면, needsUpdate 플래그를 다음과 같이 설정해야 합니다:
-			</p>
-			<code>
-positionAttribute.needsUpdate = true; // required after the first render
-			</code>
-
-			<p>
-				첫 렌더링 이후에 position 데이터 수치를 변경한다면, bounding volumes를 재계산해서
-				다른 엔진의 절두체 컬링 혹은 헬퍼같은 특성들이 적절히 작동하도록 해야합니다.
-			</p>
-			<code>
-line.geometry.computeBoundingBox();
-line.geometry.computeBoundingSphere();
-			</code>
-
-			<p>
-				[link:https://jsfiddle.net/t4m85pLr/1/ 다음 코드]는 사용 사례에 맞게 조정할 수 있는 애니메이션 라인을 보여줍니다.
-			</p>
-
-			<h3>Examples</h3>
-
-			<p>
-				[example:webgl_custom_attributes WebGL / custom / attributes]<br />
-				[example:webgl_buffergeometry_custom_attributes_particles WebGL / buffergeometry / custom / attributes / particles]
-			</p>
-
-		</div>
-
-		<h2>재질(Materials)</h2>
-		<div>
-			<p>모든 uniforms 값들은 자유롭게 변경이 가능합니다. (예를 들면 colors, textures, opacity, etc), 값들은 shader에 매 프레임 전송됩니다.</p>
-
-			<p>GLstate와 관련된 파라미터들 또한 언제나 변경 가능합니다.(depthTest, blending, polygonOffset, 등).</p>
-
-			<p>아래 속성들은 런타임에서 쉽게 변경할 수 없습니다. (적어도 재질이 한 번 렌더링 된 이후):</p>
-			<ul>
-				<li>uniforms의 갯수와 타입</li>
-				<li>아래 항목들의 사용 혹은 비사용 여부
-					<ul>
-						<li>texture</li>
-						<li>fog</li>
-						<li>vertex colors</li>
-						<li>morphing</li>
-						<li>shadow map</li>
-						<li>alpha test</li>
-						<li>transparent</li>
-					</ul>
-				</li>
-			</ul>
-
-			<p>이러한 것들은 새로운 shader 프로그램 생성이 필요합니다. 다음과 같이 설정합니다.</p>
-			<code>material.needsUpdate = true</code>
-
-			<p>이 기능은 매우 느리고 프레임이 끊겨보일 수 있다는 점(특히 Windows처럼, shader 편집이 DirectX에서 OpenGL보다 느린 경우)을 명심해주세요.</p>
-
-			<p>좀 더 부드럽게 하기 위해서는, 값이 0인 빛, 흰색 텍스쳐, 밀도가 0인 안개 등의 "가상" 값을 가지도록 특성들을 변경해 시뮬레이션해 볼 수 있습니다.</p>
-
-			<p>기하학 블록에 사용되는 재질을 자유롭게 바꿀 수 있지만, 오브젝트를 어떻게 블록으로 나눌 지에 대한 점은 변경할 수 없습니다(재질의 면에 따라). </p>
-
-			<h3>런타임 중에 재질의 서로 다른 설정을 해야 할 때:</h3>
-			<p>재질과 블록의 수가 적다면, 오브젝트를 미리 분리해놓을 수 있습니다. (예를 들면 사람에 있어서 머리/얼굴/상의/바지, 자동차에 있어서 앞부분/옆부분/윗부분/유리/타이어/내부). </p>
-
-			<p>수가 많다면 (예를 들어 모든 얼굴들이 조금씩 다른 경우), 다른 해결 방법을 생각해봐야 하는데, 속성/텍스쳐를 사용하여 얼굴마다 다른 형태를 입히는 방법 등이 있을 것입니다..</p>
-
-			<h3>예제</h3>
-			<p>
-				[example:webgl_materials_car WebGL / materials / car]<br />
-				[example:webgl_postprocessing_dof WebGL / webgl_postprocessing / dof]
-			</p>
-		</div>
-
-
-		<h2>텍스쳐</h2>
-		<div>
-			<p>사진, 그림, 영상 및 데이터 텍스쳐를 변경했다면 다음과 같은 플래스 설정이 필요합니다:</p>
-			<code>
-				texture.needsUpdate = true;
-			</code>
-			<p>대상이 자동으로 렌더링되도록 업데이트하기.</p>
-
-			<h3>예제</h3>
-			<p>
-				[example:webgl_materials_video WebGL / materials / video]<br />
-				[example:webgl_rtt WebGL / rtt]
-			</p>
-
-		</div>
-
-
-		<h2>카메라</h2>
-		<div>
-			<p>카메리 위치와 대상은 자동으로 업데이트됩니다. 만약 변경을 원한다면</p>
-			<ul>
-				<li>
-					fov
-				</li>
-				<li>
-					aspect
-				</li>
-				<li>
-					near
-				</li>
-				<li>
-					far
-				</li>
-			</ul>
-			<p>
-				이후에 투영되는 행렬구조를 다시 계산하면 됩니다.
-			</p>
-			<code>
-camera.aspect = window.innerWidth / window.innerHeight;
-camera.updateProjectionMatrix();
-			</code>
-		</div>
-	</body>
-</html>

docs/manual/ko/introduction/How-to-use-post-processing.html

@@ -1,115 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>후처리 사용 방법(How to use post-processing)</h1>
-
-		<p>
-            여러 three.js 애플리케이션들에서는 3차원 오브젝트를 직접 화면에 렌더링하고 있습니다. 하지만 가끔, DOF, 블룸 필름 그레인 등의
-            다양한 그래픽 효과나 다양한 안티 얼레이징 타입을 사용하고 싶을 수도 있습니다. 후처리 방식은 이런 효과를 위해 널리 쓰이는 방법입니다.
-            먼저, 비디오 카드의 메모리 버퍼에 해당되는 대상을 렌더링하기 위해 장면이 그려집니다. 그 다음 혹은 화면이 최종적으로 렌더링되기 전에
-            하나 또는 여러 개의 후처리를 통해 필터와 효과를 이미지 버퍼에 적용합니다.
-		</p>
-		<p>
-			three.js는 완벽한 후처리 솔루션인 [page:EffectComposer]를 통해 작업 환경을 구현합니다.
-		</p>
-
-		<h2>작업 절차</h2>
-
-		<p>
-            먼저 해야 할 일은 examples 디렉토리의 모든 필요한 파일들을 불러오는 것입니다. three.js의 공식 가이드
-            [link:https://www.npmjs.com/package/three npm package]를 따르고 있다고 가정합니다.
-            기본 데모 활용에는 아래와 같은 파일들이 필요합니다.
-		</p>
-
-		<code>
-		import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
-		import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
-		import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
-		import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
-		</code>
-
-		<p>
-			모든 파일들을 잘 불러왓다면, composer를 만들어 [page:WebGLRenderer]인스턴스를 넘겨줍니다.
-		</p>
-
-		<code>
-		const composer = new EffectComposer( renderer );
-		</code>
-
-		<p>
-            composer를 사용할 때, 앱의 애니메이션 루프를 변경해주는 것이 중요합니다. [page:WebGLRenderer]의 render 메서드를 호출하지 말고,
-            이제부터는 각각의 [page:EffectComposer]에 대응되는 렌더링 방법을 사용합니다..
-		</p>
-
-		<code>
-		function animate() {
-
-			requestAnimationFrame( animate );
-
-			composer.render();
-
-		}
-		</code>
-
-		<p>
-            composer는 이제 준비가 다 되었으니, 후처리 과정 연결을 설정할 수 있습니다.
-            이러한 과정은 앱을 만드는 최종 화면 출력을 담당하며, 첨부/삽입한 순서대로 처리합니다.
-            In our example, the instance of `RenderPass` is executed first, then the instance of `GlitchPass` and finally `OutputPass`.
-            마지막 과정이 끝나면 자동으로 화면에 렌더링됩니다. 패스 설정은 아래와 같습니다.
-		</p>
-
-		<code>
-		const renderPass = new RenderPass( scene, camera );
-		composer.addPass( renderPass );
-
-		const glitchPass = new GlitchPass();
-		composer.addPass( glitchPass );
-
-		const outputPass = new OutputPass();
-		composer.addPass( outputPass );
-		</code>
-
-		<p>
-            *RenderPass*는 일반적으로 맨 위에 위치해서 렌더링된 장면을 후처리의 기본 입력 장면으로 활용합니다. 예제의 경우,
-            *GlitchPass*는 이 이미지 데이터에 거친 글리치 효과를 넣어줍니다. 
-             `OutputPass` is usually the last pass in the chain which performs sRGB color space conversion and optional tone mapping.
-            [link:https://threejs.org/examples/webgl_postprocessing_glitch live example]에서 작동을 확인해보세요.
-		</p>
-
-		<h2>기본 내장 후처리방식</h2>
-
-		<p>
-			엔진에서 제공하는 여러 내장 후처리 방식을 활용할 수 있습니다. 이 방식들은
-			[link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing postprocessing] 디렉토리에 있습니다.
-		</p>
-
-		<h2>커스텀 방식</h2>
-
-		<p>
-            본인만의 후처리 셰이더를 작성하고 후처리 절차 안에 넣고 싶을 때가 있습니다. 이 때에는,
-            *ShaderPass*를 활용합니다. 파일과 커스텀 셰이더를 불러오고 다음 코드를 통해 설정합니다.
-		</p>
-
-		<code>
-		import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
-		import { LuminosityShader } from 'three/addons/shaders/LuminosityShader.js';
-
-		// later in your init routine
-
-		const luminosityPass = new ShaderPass( LuminosityShader );
-		composer.addPass( luminosityPass );
-		</code>
-
-		<p>
-            [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/shaders/CopyShader.js CopyShader]에서 처음 자신만의 셰이더를 만들기에 적합한 파일을 제공하고 있습니다.
-            *CopyShader*는 [page:EffectComposer]의 쓰기 리드 버퍼에 아무 효과를 적용하지 않은 채 이미지 컨텐츠를 복사하기만 합니다.
-		</p>
-
-	</body>
-</html>

docs/manual/ko/introduction/Installation.html

@@ -1,184 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-
-<head>
-    <meta charset="utf-8">
-    <base href="../../../" />
-    <script src="page.js"></script>
-    <link type="text/css" rel="stylesheet" href="page.css" />
-</head>
-
-<body>
-    <h1>설치([name])</h1>
-
-    <p>
-        three.js는 [link:https://www.npmjs.com/ npm]을 포함한 빌드 툴에서 설치가 가능하고, CDN이나 static 호스팅으로 빠르게 사용이 가능합니다. 대부분의 경우 npm을
-        통한 설치가 가장 좋은 선택입니다.
-    </p>
-
-    <p>
-        어떤 방식을 선택하든, 같은 버전의 라이브러리에서 모든 파일을 동일하게 불러와야 합니다. 여러 소스에서 파일을 혼합해 가져오면 코드 중복이 일어나거나 비정상적으로 앱이 종료될 수 있습니다.
-    </p>
-
-    <p>
-        three.js의 모든 메서드들은 ES modules (see [link:https://eloquentjavascript.net/10_modules.html#h_hF2FmOVxw7 Eloquent
-        JavaScript: ECMAScript Modules])에 기반하고 있으며, 마지막 프로젝트에 필요한 부분만 불러오도록 할 것입니다.
-    </p>
-
-    <h2>npm으로 설치하기</h2>
-
-    <p>
-        [link:https://www.npmjs.com/package/three three] npm 모듈을 설치하려면, 프로젝트 폴더의 터미널을 열고 다음을 실행합니다.
-    </p>
-
-    <code>
-		npm install three
-		</code>
-
-    <p>
-        패키지가 다운로드 및 설치 될 것이며, 다음과 같이 코드에서 불러올 수 있을 것입니다.
-    </p>
-
-    <code>
-		///////////////////////////////////////////////////////
-		// Option 1: Import the entire three.js core library.
-		import * as THREE from 'three';
-
-		const scene = new THREE.Scene();
-
-
-		///////////////////////////////////////////////////////
-		// Option 2: Import just the parts you need.
-		import { Scene } from 'three';
-
-		const scene = new Scene();
-		</code>
-
-    <p>
-        npm을 통해 설치할 때, 아마 대부분의 경우 모든 패키지를 한 자바스크립트 파일에 결합시켜주는
-        [link:https://eloquentjavascript.net/10_modules.html#h_zWTXAU93DC bundling tool]을 사용할텐데, three.js는 모든 자바스크립트
-        번들러에 호환되지만, 가장 널리 쓰이는 것은 [link:https://webpack.js.org/ webpack]일 것입니다.
-    </p>
-
-    <p>
-        모든 속성들이 <em>three</em> 모듈에서 바로 불러와지는 것은 아닙니다. ("bare import"라고도 불리는). 다른 자주 쓰이는 라이브러리들, controls, loaders, post-processing effects 같은 것들은
-[link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm] 의 하위폴더에서 불러와야 합니다. 더 자세한 내용을 알아보려면, 아래 <em>내용</em>을 참고하세요.
-    </p>
-
-    <p>
-    npm 모듈 [link:https://eloquentjavascript.net/20_node.html#h_J6hW/SmL/a Eloquent
-        JavaScript: Installing with npm]에 대해 더 알아보기.
-    </p>
-
-    <h2>static hosting 및 CDN을 통한 설치</h2>
-
-    <p>
-        three.js 라이브러리는 빌드 시스템 없이도, 본인의 웹서버나 기존의 CDN에 파일을 올리지 않고도 사용할 수 있습니다. three.js 라이브러리는 ES 모듈에 기반하고있기 때문에, 모든 스크립트는 참조할 때 아래처럼 <em>type="module"</em>을 사용해야합니다.
-    </p>
-
-    <code>
-&lt;script type="importmap">
-    {
-    "imports": {
-        "three": "https://cdn.jsdelivr.net/npm/three@&lt;version&gt;/build/three.module.js"
-    }
-    }
-&lt;/script>
-
-&lt;script type="module">
-
-    import * as THREE from 'three';
-
-    const scene = new THREE.Scene();
-
-&lt;/script>
-</code>
-
-    <h2>Addons</h2>
-
-    <p>
-        three.js는 3D 엔진의 주요 컴포넌트들에 초점을 두고 있습니다. 다른 여러 유용한 컴포넌트들 —
-        controls, loaders, post-processing effects — 은
-        [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm] 폴더에 있습니다. 이들은 "예제"로 불리는데, 그대로 사용할 수도 있고,
-        재조합 및 커스터마이징이 가능하기 때문입니다. 이 컴포넌트들은 언제나 코어 라이브러리와 상응하게 이루어져있으며, 이는 다른 비슷한 서드파티 패키지들이 다양한 사람들에 의해 유지보수되고, 최신버전 반영이 안되는 점과는 대비되는 점입니다.
-    </p>
-
-    <p>
-        예제들은 각각 따로 <em>설치할</em> 필요는 없지만, 각각 <em>import</em>를 해 주어야 합니다.
-        three.js가 npm을 통해 설치되었다면, [page:OrbitControls] 컴포넌트를 다음과 같이 불러올 수 있습니다.
-    </p>
-
-
-    <code>
-		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-
-		const controls = new OrbitControls( camera, renderer.domElement );
-		</code>
-
-    <p>
-        three.js를 CDN으로 설치했다면, 다른 컴포넌트들도 동일한 CDN에서 설치 가능합니다.
-    </p>
-
-    <code>
-&lt;script type="importmap">
-    {
-    "imports": {
-        "three": "https://cdn.jsdelivr.net/npm/three@&lt;version&gt;/build/three.module.js",
-        "three/addons/": "https://cdn.jsdelivr.net/npm/three@&lt;version&gt;/examples/jsm/"
-    }
-    }
-&lt;/script>
-
-&lt;script type="module">
-
-    import * as THREE from 'three';
-    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-
-    const controls = new OrbitControls( camera, renderer.domElement );
-
-&lt;/script>
-</code>
-
-    <p>
-        모든 파일들의 버전을 동일하게 맞추는것이 무엇보다 중요합니다. 서로 다른 버전에서 import를 하거나, three.js 라이브러리 자체가 아닌 다른 버전의 예제를 사용하지 마세요.
-    </p>
-
-    <h2>양립성</h2>
-
-    <h3>CommonJS 불러오기</h3>
-
-    <p>
-        대부분의 자바스크립트 번들러는 이제 ES 모듈을 기본적으로 지원하지만, 오래된 빌드 도구들은 그렇지 않을 수 있습니다.
-        이 경우에, 번들러에 ES 모듈을 인식할 수 있도록 설정해줄 수 있습니다. 예를들어 [link:http://browserify.org/ Browserify] 는 [link:https://github.com/babel/babelify babelify] 플러그인을 불러오기만 하면 됩니다.
-    </p>
-
-    <h3>maps 불러오기</h3>
-
-    <p>
-        npm을 통해 설치하는 경우, 호스팅 및 CDN으로 설치했을 때와 import 경로가 다릅니다. 이 점은 양쪽의 사용자 모두에게 불편한 문제가 될 것이라는 점을 알고 있습니다.
-        빌드 도구나 번들러를 사용하는 개발자들은 상대경로보다 단순한 패키지 구분자(ex: 'three')로 사용하기를 선호하지만 <em>examples/</em> 폴더의 파일들은
-        <em>three.module.js</em>에 상대 경로를 사용하기 때문에 예상을 빗나가게 됩니다. 빌드 도구를 사용하지 않는 사람들 — 빠른 프로토타입 제작, 학습용도, 개인적 취향 — 도 마찬가지로 이러한 상대 경로를 싫어할 텐데,
-        특정 폴더 구조가 필요하고, 전역 <em>THREE.*</em>를 사용하는 것보다 엄격하기 때문입니다.
-    </p>
-
-    <p>
-        [link:https://github.com/WICG/import-maps import maps] 이 후에 활발하게 지원된다면 이러한 상대 경로들을 npm 패키지 이름, 'three'처럼 단순한 패키지 식별자로 변경할 예정입니다.
-        이는 npm 패키지에서 주로 쓰이는 경로 작성법과 일치하고, 두 사용자군 모두에게 파일을 불러오는 데에 동일한 코드를 사용할 수 있게 해 줄 것입니다.
-        빌드 도구를 사용하지 않는 것을 선호하는 사용자들에게도, 간단한 JSON 맵핑을 통해 CDN이나 직접 파일 폴더에서 불러오는 것을 가능하게 해 줄 것입니다.
-        실험적 방법으로, [link:https://glitch.com/edit/#!/three-import-map?path=index.html import map
-        example]처럼 map polyfill과 함께 import 해서 더 간단하게 사용해볼 수도 있습니다.
-    </p>
-
-    <h3>Node.js</h3>
-
-    <p>
-        Three.js는 웹 환경을 위해 만들어졌기 때문에, Node.js환경에서는 존재하지 않는 browser 객체와 DOM API에 의존적입니다. Node.js환경에서 사용한다면, 일부 문제는 [link:https://github.com/stackgl/headless-gl headless-gl]과 같은 심을 사용해서 해결하거나 [page:TextureLoader]와 같은 컴포넌트로 대안으로 사용하여 해결할 수 있습니다. 다른 DOM API는 이를 사용하는 코드와 깊게 얽혀있을 수 있으며, 해결하기가 더 어려울 수 있습니다. 우리는 Node.js환경을 지원하기 위한 간단하고 유지보수 가능한 풀리퀘스트를 환영합니다만 이슈를 먼저 열어 당신이 요청하려고하는 개선 코드에 대해 토론하는 것을 추천드립니다.
-    </p>
-
-    <p>
-        `package.json`에 `{ “type”: “module” }` 을 추가해서 노드 프로젝트에서도 ES6 모듈을 사용할 수 있도록 활성화하세요.
-    </p>
-
-</body>
-
-</html>

docs/manual/ko/introduction/Libraries-and-Plugins.html

@@ -1,118 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-	<head>
-		<meta charset="utf-8" />
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>라이브러리 및 플러그인[name]</h1>
-
-		<p class="desc">
-			three.js를 위해 외부에서 개발된 호환 라이브러리와 플러그인을 나열합니다.이것목록 및 관련 패키지는 커뮤니티에서 유지 관리되며 보장되지 않음최신 상태를 유지합니다.이 목록을 업데이트하려면 PR을 수행하십시오!
-		</p>
-
-		<h3>물리적</h3>
-
-		<ul>
-			<li>[link:https://github.com/lo-th/Oimo.js/ Oimo.js]</li>
-			<li>[link:https://enable3d.io/ enable3d]</li>
-			<li>[link:https://github.com/kripken/ammo.js/ ammo.js]</li>
-			<li>[link:https://github.com/pmndrs/cannon-es cannon-es]</li>
-			<li>[link:https://rapier.rs/ rapier]</li>
-			<li>[link:https://github.com/jrouwe/JoltPhysics.js Jolt]</li>
-			
-		</ul>
-
-		<h3>후처리</h3>
-
-		<p>
-			In addition to the [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing official three.js postprocessing effects],
-			support for some additional effects and frameworks are available through external libraries.
-		</p>
-
-		<ul>
-			<li>[link:https://github.com/vanruesc/postprocessing postprocessing]</li>
-		</ul>
-
-		<h3>교차점 및 광선 투사 성능</h3>
-
-		<ul>
-			<li>[link:https://github.com/gkjohnson/three-mesh-bvh three-mesh-bvh]</li>
-		</ul>
-
-		<h3>경로 추적</h3>
-		
-		<ul>
-			<li>[link:https://github.com/gkjohnson/three-gpu-pathtracer three-gpu-pathtracer]</li>
-		</ul>
-		
-		<h3>파일 형식</h3>
-
-		<p>
-			In addition to the [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders official three.js loaders],
-			support for some additional formats is available through external libraries.
-			[link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders공식 three.js 로더]외에도,일부 추가 형식에 대한 지원은 외부 라이브러리를 통해 가능합니다
-		</p>
-
-		<ul>
-			<li>[link:https://github.com/gkjohnson/urdf-loaders/tree/master/javascript urdf-loader]</li>
-			<li>[link:https://github.com/NASA-AMMOS/3DTilesRendererJS 3d-tiles-renderer-js]</li>
-			<li>[link:https://github.com/kaisalmen/WWOBJLoader WebWorker OBJLoader]</li>
-			<li>[link:https://github.com/IFCjs/web-ifc-three IFC.js]</li>
-		</ul>
-
-		<h3>기하학</h3>
-
-		<ul>
-			<li>[link:https://github.com/spite/THREE.MeshLine THREE.MeshLine]</li>
-		</ul>
-
-		<h3>3D 텍스트 및 레이아웃</h3>
-
-		<ul>
-			<li>[link:https://github.com/protectwise/troika/tree/master/packages/troika-three-text troika-three-text]</li>
-			<li>[link:https://github.com/felixmariotto/three-mesh-ui three-mesh-ui]</li>
-		</ul>
-
-		<h3>입자계</h3>
-
-		<ul>
-			<li>[link:https://github.com/Alchemist0823/three.quarks three.quarks]</li>
-			<li>[link:https://github.com/creativelifeform/three-nebula three-nebula]</li>
-		</ul>
-
-		<h3>역기구학</h3>
-
-		<ul>
-			<li>[link:https://github.com/jsantell/THREE.IK THREE.IK]</li>
-			<li>[link:https://github.com/lo-th/fullik fullik]</li>
-			<li>[link:https://github.com/gkjohnson/closed-chain-ik-js closed-chain-ik]</li>
-		</ul>
-
-		<h3>게임 AI</h3>
-
-		<ul>
-			<li>[link:https://mugen87.github.io/yuka/ yuka]</li>
-			<li>[link:https://github.com/donmccurdy/three-pathfinding three-pathfinding]</li>
-			<li>[link:https://github.com/isaac-mason/recast-navigation-js recast-navigation-js]</li>
-		</ul>
-
-		<h3>포장 및 프레임</h3>
-
-		<ul>
-			<li>[link:https://aframe.io/ A-Frame]</li>
-			<li>[link:https://lume.io/ Lume] - Three 기반 3D 그래픽 HTML 요소.</li>
-			<li>[link:https://github.com/pmndrs/react-three-fiber react-three-fiber] - Three 기반 3D 그래픽 React 구성 요소.</li>
-			<li>[link:https://threepipe.org/ threepipe] - three.js를 사용하여 렌더링하는 다기능 3D 뷰어 프레임워크.</li>
-			<li>[link:https://github.com/ecsyjs/ecsy-three ECSY]</li>
-			<li>[link:https://threlte.xyz/ Threlte] - Three 기반 3D 그래픽 Svelte 구성 요소.</li>
-			<li>[link:https://needle.tools/ Needle Engine]</li>
-			<li>[link:https://tresjs.org/ tresjs] - Three 기반 3D 그래픽 Vue 어셈블리.</li>
-			<li>[link:https://giro3d.org Giro3D] - 지리 공간 2D, 2.5D 및 3D 데이터와의 시각화 및 상호 작용을 위한 Three 기반 다기능 프레임워크.</li>
-			<li>[link:https://zap.works/mattercraft/ Mattercraft] - Browser-based visual editor for AR, WebXR and 3D web content, built on three.js with real-time preview and physics engine.</li>
-		</ul>
-
-	</body>
-</html>

docs/manual/ko/introduction/Loading-3D-models.html

@@ -1,151 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-
-<head>
-	<meta charset="utf-8">
-	<base href="../../../" />
-	<script src="page.js"></script>
-	<link type="text/css" rel="stylesheet" href="page.css" />
-</head>
-
-<body>
-	<h1>3D 모델 불러오기([name])</h1>
-
-	<p>
-		3D 모델들은 각자 다양한 목적, 적합한 특성, 다양한 복잡성을 가지고 있는 수백개의 파일 포맷으로 존재할 수 있습니다.
-
-		<a href="https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders" target="_blank" rel="noopener">
-		three.js는 다양한 로더를 지원하지만</a>, 알맞는 포맷과 워크플로우를 선택하는 것이 시간을 아끼고 이후에 생길 문제를 방지할 수 있는 방법입니다.
-		몇몇 포맷들은 작업하기 어렵거나, 실시간으로 반영하기 어렵거나, 단순히 지금 시점에 전부 지원을 안하기도 합니다.
-	</p>
-
-	<p>
-		여기에서는 대부분의 사용자들에게 추천할만 한 워크플로우와, 막혔을때의 해결법을 알려드리고자 합니다.
-	</p>
-
-	<h2>시작하기에 앞서</h2>
-
-	<p>
-		로컬 서버를 돌리는 것이 처음이라면,
-		[link:#manual/introduction/Installation installation]
-		를 먼저 확인하세요. 3D 모델의 대부분의 에러는 파일을 알맞게 호이스팅하는 것으로 해결할 수 있습니다.
-	</p>
-
-	<h2>추천 워크플로우</h2>
-
-	<p>
-		가능하다면, glTF(GL Transmission Format)를 사용하는 것을 추천드립니다.
-		<small>.GLB</small> 와 <small>.GLTF</small> 버전 포맷 모두 잘 지원될 것입니다.
-		glTF는 런타임 자원 효율에 초점을 맞추고 있기 때문에 로딩을 빠르고 정확하게 할 수 있습니다.
-		속성으로는 meshes, materials, textures, skins, skeletons, morph targets, animations, lights, 그리고
-		cameras 가 있습니다.
-	</p>
-
-	<p>
-		퍼블릭 도메인 glTF 파일은
-		<a href="https://sketchfab.com/models?features=downloadable&sort_by=-likeCount&type=models" target="_blank" rel="noopener">
-		Sketchfab</a> 사이트처럼 사용할 수 있고, 다양한 툴들에서 glTF로 출력해 사용할 수 있습니다.
-	</p>
-
-	<ul>
-		<li><a href="https://www.blender.org/" target="_blank" rel="noopener">Blender</a> by the Blender Foundation</li>
-		<li><a href="https://www.allegorithmic.com/products/substance-painter" target="_blank" rel="noopener">Substance Painter</a> by Allegorithmic</li>
-		<li><a href="https://www.foundry.com/products/modo" target="_blank" rel="noopener">Modo</a> by Foundry</li>
-		<li><a href="https://www.marmoset.co/toolbag/" target="_blank" rel="noopener">Toolbag</a> by Marmoset</li>
-		<li><a href="https://www.sidefx.com/products/houdini/" target="_blank" rel="noopener">Houdini</a> by SideFX</li>
-		<li><a href="https://labs.maxon.net/?p=3360" target="_blank" rel="noopener">Cinema 4D</a> by MAXON</li>
-		<li><a href="https://github.com/KhronosGroup/COLLADA2GLTF" target="_blank" rel="noopener">COLLADA2GLTF</a> by the Khronos Group</li>
-		<li><a href="https://github.com/facebookincubator/FBX2glTF" target="_blank" rel="noopener">FBX2GLTF</a> by Facebook</li>
-		<li><a href="https://github.com/AnalyticalGraphicsInc/obj2gltf" target="_blank" rel="noopener">OBJ2GLTF</a> by Analytical Graphics Inc</li>
-		<li>&hellip;and <a href="http://github.khronos.org/glTF-Project-Explorer/" target="_blank" rel="noopener">many more</a></li>
-	</ul>
-
-	<p>
-		선호하는 툴이 glTF를 지원하지 않는다면, glTF로 출력하는 것을 개발자에게 문의해보거나,
-		<a href="https://github.com/KhronosGroup/glTF/issues/1051" target="_blank" rel="noopener">the glTF roadmap thread</a>에 포스팅 해 보세요.
-	</p>
-
-	<p>
-		glTF 이외에도, FBX, OBJ, COLLADA 같은 유명한 포맷들도 잘 지원됩니다.
-	</p>
-
-	<h2>로딩</h2>
-
-	<p>
-		three.js에는 몇몇 로더들을 제외하고는(ex: [page:ObjectLoader]) 기본적으로 include되어 있지 않습니다. 다른 로더들은 개별적으로 앱에 추가해줘야 합니다.
-	</p>
-
-	<code>
-		import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-	</code>
-
-	<p>
-		로더를 import한 후에, scene에 모델을 로드하면 됩니다. 구문은 로더에 따라 다릅니다. — 다른 포맷을 사용할 경우에는, 해당 로더에 대한 예제와 문서를 참고하세요.
-		glTF의 경우 글로벌 스크립트는 다음과 같이 사용합니다.
-	</p>
-
-	<code>
-		const loader = new GLTFLoader();
-
-		loader.load( 'path/to/model.glb', function ( gltf ) {
-
-			scene.add( gltf.scene );
-
-		}, undefined, function ( error ) {
-
-			console.error( error );
-
-		} );
-	</code>
-
-	<p>
-		[page:GLTFLoader GLTFLoader 문서]를 참고하세요.
-	</p>
-
-	<h2>문제 해결</h2>
-
-	<p>
-		많은 시간을 공 들여 걸작을 모델링하고 나서, 웹 페이지에
-		업로드 했더닝, 이런! 😭 왜곡돼있거나 색이 안 칠해져있거나 아예 나오지 않을 때가 있습니다.
-		다음 순서대로 문제 해결을 해 봅시다:
-	</p>
-
-	<ol>
-		<li>
-			자바스크립트 콘솔 에러를 체크합니다.
-			<em>.load()</em>를 사용할 때 로그 결과에 <em>onError</em> 콜백을 사용했는지를 확인합니다.
-		</li>
-		<li>
-			다른 애플리케이션에서 모델을 확인합니다. glTF에서는, 드래그-앤-드롭 뷰어가
-			<a href="https://gltf-viewer.donmccurdy.com/" target="_blank" rel="noopener">three.js</a>와
-			<a href="https://sandbox.babylonjs.com/" target="_blank" rel="noopener">babylon.js</a>에서 사용 가능합니다. 만약 모델이
-			하나 이상의 어플리케이션에서 정상적으로 나타난다면,
-			<a href="https://github.com/mrdoob/three.js/issues/new" target="_blank" rel="noopener">three.js와 관련된 버그를 알려주세요</a>.
-			어느 애플리케이션에서도 모델이 나타나지 않는다면, 모델을 만든 어플리케이션의 버그를 확인해 보는 것을 강력하게 추천드립니다.
-		</li>
-		<li>
-			모델을 1000배 확대 혹은 축소해 보세요. 여러 모델들은 다양하게 확대 및 축소되어 보여질 수 있으며
-			너무 큰 모델은 카메라가 모델 안에 있어 제대로 안 보일 수 있습니다.
-		</li>
-		<li>
-			밝은 모델을 사용하거나 위치를 바꿔보세요. 모델이 가려져 있을 수 있습니다.
-		</li>
-		<li>
-			네트워크 탭에서 failed texture requests를 확인합니다. 예를 들면,
-			<em>C:\\Path\To\Model\texture.jpg</em>. 이러한 주소 대신 상대 주소를 사용해, <em>images/texture.jpg</em>처럼 사용해 보세요
-			— 이 작업은 텍스트 에디터에서 모델 파일을 수정해야 할 수도 있습니다.
-		</li>
-	</ol>
-
-	<h2>지원 요청</h2>
-
-	<p>
-		위의 문제 해결 절차를 거치고도 모델이 제대로 나오지 않는다면, 적절한 질문을 통해 도움을 구하는 것이 가장 빠른 해결책일 것입니다.
-		<a href="https://discourse.threejs.org/" target="_blank" rel="noopener">three.js 포럼</a>에 문제제기를 하고 가능하다면,
-		아무 포맷으로 자신의 모델을 첨부(혹은 같은 문제가 있는 더 단순한 모델)을 첨부해 주세요.
-		다른 사람에게 충분한 정보를 제공해 주는 것이 문제를 해결할 수 있는 빠를 방법입니다. — live demo를 사용하면 이상적입니다.
-	</p>
-
-</body>
-
-</html>

docs/manual/ko/introduction/Matrix-transformations.html

@@ -1,72 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>행렬 변환([name])</h1>
-
-		<p>
-        Three.js는 *matrices*를 사용해 3D 변형---변환(위치), 회전, 확대 인코딩합니다.
-        [page:Object3D]의 모든 인스턴스는 [page:Object3D.matrix matrix]를 가지고 있어 오브젝트의 위치, 회전, 확대 정보를 담고 있습니다.
-        이 페이지에서는 오브젝트의 변형과 관련해 설명합니다.
-		</p>
-
-		<h2>편리한 속성 및 *matrixAutoUpdate*</h2>
-
-		<p>
-			오브젝트의 변형 방법에는 두 가지가 있습니다.
-		</p>
-		<ol>
-			<li>
-				오브젝트의 *position*, *quaternion*, 그리고 *scale* 속성을 조절합니다, 그 후에 three.js가 오브젝트의 행렬을 이에 맞추어 재 계산합니다:
-				<code>
-object.position.copy( start_position );
-object.quaternion.copy( quaternion );
-				</code>
-				기본적으로 *matrixAutoUpdate* 속성은 true로 되어 있으며, 행렬정보는 자동으로 재 계산 될 것입니다.
-				오브젝트를 고정하고 싶거나 직접 재계산을 하고 싶다면, false로 해서 성능을 향상시킬 수 있습니다:
-				<code>
-object.matrixAutoUpdate = false;
-				</code>
-				속성을 변경한 다음에 수동으로 행렬을 업데이트해줍니다.:
-				<code>
-object.updateMatrix();
-				</code>
-			</li>
-			<li>
-				오브젝트의 행렬을 직접 수정합니다. [page:Matrix4] 클래스에는 행렬 수정을 위한 여러 메서드가 있습니다.
-				<code>
-object.matrix.setRotationFromQuaternion( quaternion );
-object.matrix.setPosition( start_position );
-object.matrixAutoUpdate = false;
-				</code>
-				이 경우에 *matrixAutoUpdate*는 <em>무조건</em> *false*가 되어야 하는 점을 명심하세요. 그리고 *updateMatrix* 를 사용하지 <em>마세요</em>. *updateMatrix*를 호출하면 수동으로 변경한 행렬을 덮어버리고*position*, *scale* 등의 행렬을 재계산 할 것입니다.
-			</li>
-		</ol>
-
-		<h2>오브젝트와 world 행렬</h2>
-		<p>
-        오브젝트의 [page:Object3D.matrix matrix]는 오브젝트의 변형을 <em>관련된</em> 오브젝트의 [page:Object3D.parent parent]에 저장합니다; 오브젝트의 변형 정보를
-        <em>world</em> 좌표에서 가져오려면, 오브젝트의 [page:Object3D.matrixWorld]에 접근해야 합니다.
-		</p>
-		<p>
-		부모 혹은 자식 오브젝트의 변형이 생기면, 자식 오브젝트의 [page:Object3D.matrixWorld matrixWorld]를 [page:Object3D.updateMatrixWorld updateMatrixWorld]()를 호출해 업데이트 합니다.
-		</p>
-
-		<h2>회전 및 사원수(Rotation and Quaternion)</h2>
-		<p>
-        Three.js는 3D 회전을 두 가지 방법으로 나타냅니다: [page:Euler Euler angles] 와 [page:Quaternion Quaternions]이며 둘 사이의 변한 메서드도 포함입니다.
-        Euler angles는 "gimbal lock" 이라는 문제와 관련이 있어서, 특정 설정은 자유도가 제한됩니다(한 축에서만 오브젝트가 회전하는 것을 방지).
-        이 때문에, 오브젝트 회전은 <em>언제나</em> 오브젝트의 [page:Object3D.quaternion quaternion]에 저장됩니다.
-		</p>
-		<p>
-        이전 버전의 라이브러리는 *useQuaternion* 속성을 불러와서 false로 설정하면 [page:Object3D.matrix matrix]를 Euler angle로 계산하게 합니다.
-        이 예제는 삭제되었습니다. 대신 [page:Object3D.setRotationFromEuler setRotationFromEuler] 메서드를 사용해 사원수를 업데이트 합니다.
-		</p>
-
-	</body>
-</html>

docs/manual/ko/introduction/Useful-links.html

@@ -1,173 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>참고 링크([name])</h1>
-
-		<p class="desc">
-            다음 링크들은 three.js를 배울때 유용한 링크들 모음입니다.<br />
-            여기에 추가하고 싶은 링크가 있거나 더 이상 작동하지 않거나 관련되지 않은 링크가 있다면
-            아래 '수정' 버튼을 클릭해 변경해주세요!<br /><br />
-
-			three.js는 자주 업데이트 되고 있기 때문에, 많은 링크들이 지난 버전의 내용을 담고 있을 수도 있습니다.
-			- 만약 링크에서 나온 내용이 제대로 동작하지 않는다면 브라우저 콘솔의 경고나 에러를 확인해 보세요. 관련 문서 페에지도 확인해 보세요.
-		</p>
-
-		<h2>도움이 되는 포럼</h2>
-		<p>
-			Three.js는 공식적으로 [link:https://discourse.threejs.org/ forum]과 [link:http://stackoverflow.com/tags/three.js/info Stack Overflow]에서 지원 요청을 받고 있습니다.
-			도움이 필요하다면, 저기로 가면 됩니다. 깃허브에서 도움 요청 이슈를 생성하지 마세요.
-		</p>
-
-		<h2>예제 및 수업</h2>
-
-		<h3>three.js 입문</h3>
-		<ul>
-			<li>
-				[link:https://threejs.org/manual/#en/fundamentals Three.js Fundamentals starting lesson]
-			</li>
-			<li>
-				[link:https://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-1-the-scene Beginning with 3D WebGL] - [link:https://codepen.io/rachsmith/ Rachel Smith].
-			</li>
-			<li>
-				[link:https://www.august.com.au/blog/animating-scenes-with-webgl-three-js/ Animating scenes with WebGL and three.js]
-			</li>
-		</ul>
-
-		<h3>심화 확장 기사 및 강의</h3>
-		<ul>
-			<li>
-				[link:https://discoverthreejs.com/ Discover three.js]
-			</li>
-			<li>
-				[link:http://blog.cjgammon.com/ Collection of tutorials] by [link:http://www.cjgammon.com/ CJ Gammon].
-			</li>
-			<li>
-				[link:https://medium.com/soffritti.pierfrancesco/glossy-spheres-in-three-js-bfd2785d4857 Glossy spheres in three.js].
-			</li>
-		 <li>
-			 [link:https://www.udacity.com/course/interactive-3d-graphics--cs291 Interactive 3D Graphics] - a free course on Udacity that teaches the fundamentals of 3D Graphics,
-			 and uses three.js as its coding tool.
-		 </li>
-		 <li>
-			[Link:https://aerotwist.com/tutorials/ Aerotwist] tutorials by [link:https://github.com/paullewis/ Paul Lewis].
-		 </li>
-		 <li>
-			 [link:https://discourse.threejs.org/t/three-js-bookshelf/2468 Three.js Bookshelf] - Looking for more resources about three.js or computer graphics in general?
-			 Check out the selection of literature recommended by the community.
-		 </li>
-		</ul>
-
-		<h2>뉴스 및 업데이트</h2>
-		<ul>
-			<li>
-				[link:https://twitter.com/hashtag/threejs Three.js on Twitter]
-			</li>
-			<li>
-				[link:http://www.reddit.com/r/threejs/ Three.js on reddit]
-			</li>
-			<li>
-				[link:http://www.reddit.com/r/webgl/ WebGL on reddit]
-			</li>
-		</ul>
-
-		<h2>예제</h2>
-		<ul>
-			<li>
-				[link:https://github.com/edwinwebb/three-seed/ three-seed] - three.js starter project with ES6 and Webpack
-			</li>
-			<li>
-				[link:http://stemkoski.github.io/Three.js/index.html Professor Stemkoskis Examples] - a collection of beginner friendly
-				examples built using three.js r60.
-			</li>
-			<li>
-				[link:https://threejs.org/examples/ Official three.js examples] - these examples are
-				maintained as part of the three.js repository, and always use the latest version of three.js.
-			</li>
-			<li>
-				[link:https://raw.githack.com/mrdoob/three.js/dev/examples/ Official three.js dev branch examples]  -
-				Same as the above, except these use the dev branch of three.js,	and are used to check that
-				everything is working as three.js being is developed.
-			</li>
-		</ul>
-
-	 <h2>도구</h2>
-	 <ul>
-		 <li>
-			[link:https://github.com/tbensky/physgl physgl.org] - JavaScript front-end with wrappers to three.js, to bring WebGL
- 			graphics to students learning physics and math.
-		 </li>
-		 <li>
-			 [link:https://whsjs.readme.io/ Whitestorm.js] – Modular three.js framework with AmmoNext physics plugin.
-		 </li>
-
-		<li>
-			[link:http://zz85.github.io/zz85-bookmarklets/threelabs.html Three.js Inspector]
-		</li>
-		<li>
-			[link:http://idflood.github.io/ThreeNodes.js/ ThreeNodes.js].
-		</li>
-		<li>
-			[link:https://marketplace.visualstudio.com/items?itemName=slevesque.shader vscode shader] - Syntax highlighter for shader language.
-			<br />
-			[link:https://marketplace.visualstudio.com/items?itemName=bierner.comment-tagged-templates vscode comment-tagged-templates] - Syntax highlighting for tagged template strings using comments to shader language, like: glsl.js.
-		</li>
-		<li>
-			[link:https://github.com/MozillaReality/WebXR-emulator-extension WebXR-emulator-extension]
-		</li>
-	 </ul>
-
-	<h2>WebGL 참고</h2>
-	 <ul>
-		 <li>
-			[link:https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf webgl-reference-card.pdf] - Reference of all WebGL and GLSL keywords, terminology, syntax and definitions.
-		 </li>
-	 </ul>
-
-	 <h2>이전 링크들</h2>
-	 <p>
-		이 링크들은 기록 목적으로 남겨두었습니다. - 아직 도움이 되는 링크도 있겠지만, 해당 내용들은 아주 옛날 버전의 three.js를 사용하고 있다는 점을 주의하세요.
-	 </p>
-
-	 <ul>
-		<li>
-			[link:https://www.youtube.com/watch?v=Dir4KO9RdhM AlterQualia at WebGL Camp 3]
-		</li>
-		<li>
-			[link:http://yomotsu.github.io/threejs-examples/ Yomotsus Examples] - a collection of examples using three.js r45.
-		</li>
-		<li>
-			[link:http://fhtr.org/BasicsOfThreeJS/#1 Introduction to Three.js] by [link:http://github.com/kig/ Ilmari Heikkinen] (slideshow).
-		</li>
-		<li>
-			[link:http://www.slideshare.net/yomotsu/webgl-and-threejs WebGL and Three.js] by [link:http://github.com/yomotsu Akihiro Oyamada] (slideshow).
-		</li>
-		<li>
-			[link:https://www.youtube.com/watch?v=VdQnOaolrPA Trigger Rally]  by [link:https://github.com/jareiko jareiko] (video).
-		</li>
-		<li>
-			[link:http://blackjk3.github.io/threefab/ ThreeFab] - scene editor, maintained up until around three.js r50.
-		</li>
-		<li>
-			[link:http://bkcore.com/blog/3d/webgl-three-js-workflow-tips.html Max to Three.js workflow tips and tricks] by [link:https://github.com/BKcore BKcore]
-		</li>
-		<li>
-			[link:http://12devsofxmas.co.uk/2012/01/webgl-and-three-js/ A whirlwind look at Three.js]
-			by [link:http://github.com/nrocy Paul King]
-		</li>
-		<li>
-			[link:http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html Animated selective glow in Three.js]
-			by [link:https://github.com/BKcore BKcore]
-		</li>
-		<li>
-			[link:http://www.natural-science.or.jp/article/20120220155529.php Building A Physics Simulation Environment] - three.js tutorial in Japanese
-		</li>
-	 </ul>
-
-	</body>
-</html>

docs/manual/ko/introduction/WebGL-compatibility-check.html

@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>WebGL 호환성 검사([name])</h1>
-		<p>
-			아마 거의 문제가 되지 않을테지만, 몇몇 디바이스나 브라우저는 아직 WebGL 2을 지원하지 않습니다.
-			아래 메서드는 지원 여부를 체크해 가능한지 아닌지 메세지를 띄워줄 것입니다.
-			WebGL 지원 감지 모듈을 가져오고 렌더링을 시도하기 전에 다음을 실행하십시오.
-		</p>
-
-		<code>
-		import WebGL from 'three/addons/capabilities/WebGL.js';
-
-		if ( WebGL.isWebGL2Available() ) {
-
-			// Initiate function or other initializations here
-			animate();
-
-		} else {
-
-			const warning = WebGL.getWebGL2ErrorMessage();
-			document.getElementById( 'container' ).appendChild( warning );
-
-		}
-		</code>
-	</body>
-</html>

docs/manual/pt-br/introduction/Animation-system.html

@@ -1,148 +0,0 @@
-<!DOCTYPE html>
-<html lang="pt-br">
-	<head>
-		<meta charset="utf-8" />
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>Sistema de animação</h1>
-
-		<h2>Visão geral</h2>
-
-		<p class="desc">
-
-			No sistema de animação three.js, você pode animar várias propriedades de seus modelos:
-			os ossos (bones) de um [page:SkinnedMesh skinned e rigged model], morph targets, 
-            diferentes propriedades de material
-			(cores, opacidade, booleanos), visibilidade e transformações. As propriedades animadas podem ser utilizadas com fade in,
-			fade out, crossfaded e warped. As escalas de peso e tempo de diferentes
-			animações no mesmo objeto, bem como em objetos diferentes, podem ser alteradas
-			independentemente. Várias animações no mesmo objeto e em objetos diferentes podem ser
-			sincronizadas.<br /><br />
-
-			Para conseguir tudo isso em um sistema homogêneo, o sistema de animação three.js
-			[link:https://github.com/mrdoob/three.js/issues/6881 mudou completamente em 2015]
-			(cuidado com informações desatualizadas!), e agora tem uma arquitetura semelhante à
-			Unity/Unreal Engine 4. Esta página fornece uma breve visão geral dos principais componentes do
-			sistema e como eles trabalham juntos.
-		
-		</p>
-
-		<h3>Clipes de animação (Animation Clips)</h3>
-
-		<p class="desc">
-
-			Se você importou com sucesso um objeto 3D animado (não importa se
-			bones ou morph targets ou ambos) — por exemplo, exportando-o do Blender com o
-			[link:https://github.com/KhronosGroup/glTF-Blender-IO glTF Blender] e
-			carregando-o em uma cena three.js usando [page:GLTFLoader] — um dos campos da resposta
-			deve ser um array chamado "animations", contendo o [page:AnimationClip AnimationClips]
-			para este modelo (veja uma lista de carregadores possíveis abaixo).<br /><br />
-
-			Cada `AnimationClip` geralmente contém os dados de uma determinada atividade do objeto. Se o
-			mesh é um personagem, por exemplo, pode haver um AnimationClip para caminhar, um segundo
-			para salto, um terceiro para contornar e assim por diante.
-		
-		</p>
-
-		<h3>Keyframe Tracks</h3>
-
-		<p class="desc">
-
-			Dentro de tal 'AnimationClip' os dados para cada propriedade animada são armazenados em um
-			[page:KeyframeTrack] separado. Supondo que um objeto de personagem tenha um [page:Skeleton esqueleto] (skeleton),
-			uma keyframe track pode armazenar os dados para as mudanças de posição do osso do antebraço
-			ao longo do tempo, uma faixa diferente dos dados para as mudanças de rotação do mesmo osso, uma terceira
-			a posição da pista, rotação ou dimensionamento de outro osso, e assim por diante. Deve ficar claro,
-			que um AnimationClip pode ser composto de muitas dessas tracks.<br /><br />
-
-			Supondo que o modelo tenha morph targets (por exemplo, um
-			morph target mostrando um rosto amigável e outro mostrando um rosto irritado), cada track contém as
-			informações sobre como a [page:Mesh.morphTargetInfluences influence] de um certo morph target
-			muda durante a execução do clipe.
-
-		</p>
-
-		<h3>Animation Mixer</h3>
-
-		<p class="desc">
-
-			Os dados armazenados formam apenas a base para as animações - a reprodução real é controlada pelo 
-			[page:AnimationMixer]. Você pode imaginar isso não apenas como um player de animações, mas
-			como uma simulação de um hardware como um mixer real, que pode controlar várias animações
-			simultaneamente, misturando-os e fundindo-os.
-
-		</p>
-
-		<h3>Ações de animação (Animation Actions)</h3>
-
-		<p class="desc">
-
-			O próprio `AnimationMixer` tem muito poucas propriedades e métodos (gerais), porque
-			pode ser controlado por [page:AnimationAction AnimationActions]. Ao configurar um
-			`AnimationAction` você pode determinar quando um certo `AnimationClip` deve ser reproduzido, pausado
-			ou parado em um dos mixers, se e com que frequência o clipe deve ser repetido, seja
-			executado com um fade ou uma escala de tempo, e algumas coisas adicionais, como crossfading
-			ou sincronização.
-
-		</p>
-
-		<h3>Animação de Grupos de Objetos</h3>
-
-		<p class="desc">
-
-			Se você quiser que um grupo de objetos receba um estado de animação compartilhado, você pode usar um
-			[page:AnimationObjectGroup].
-
-		</p>
-
-		<h3>Formatos e Loaders suportados</h3>
-
-		<p class="desc">
-			Observe que nem todos os formatos de modelo incluem animação (notadamente o OBJ não inclui), e que apenas alguns
-			loaders do three.js suportam sequências [page:AnimationClip AnimationClip]. Vários que <i>tem</i>
-			suporte para este tipo de animação:
-		</p>
-
-			<ul>
-				<li>[page:ObjectLoader THREE.ObjectLoader]</li>
-				<li>THREE.BVHLoader</li>
-				<li>THREE.ColladaLoader</li>
-				<li>THREE.FBXLoader</li>
-				<li>[page:GLTFLoader THREE.GLTFLoader]</li>
-			</ul>
-
-		<p class="desc">
-			Observe que o 3ds max e o Maya atualmente não podem exportar várias animações (ou seja, animações que não estão
-			na mesma linha do tempo) diretamente para um único arquivo.
-		</p>
-
-		<h2>Exemplo</h2>
-
-		<code>
-		let mesh;
-
-		// Create an AnimationMixer, and get the list of AnimationClip instances
-		const mixer = new THREE.AnimationMixer( mesh );
-		const clips = mesh.animations;
-
-		// Update the mixer on each frame
-		function update () {
-			mixer.update( deltaSeconds );
-		}
-
-		// Play a specific animation
-		const clip = THREE.AnimationClip.findByName( clips, 'dance' );
-		const action = mixer.clipAction( clip );
-		action.play();
-
-		// Play all animations
-		clips.forEach( function ( clip ) {
-			mixer.clipAction( clip ).play();
-		} );
-		</code>
-
-	</body>
-</html>

docs/manual/pt-br/introduction/Color-management.html

@@ -1,334 +0,0 @@
-<!DOCTYPE html>
-<html lang="pt-br">
-
-<head>
-	<meta charset="utf-8">
-	<base href="../../../" />
-	<script src="page.js"></script>
-	<link type="text/css" rel="stylesheet" href="page.css" />
-	<style>
-		blockquote {
-			font-size: 0.8em;
-			line-height: 1.5em;
-			margin-left: 0;
-			border-left: 4px solid #cccccc;
-			padding: 1em 2em 1em 2em;
-		}
-
-		blockquote p:first-child {
-			margin-top: 0;
-		}
-
-		blockquote p:last-child {
-			margin-bottom: 0;
-		}
-
-		figure {
-			width: 100%;
-			margin: 1em 0;
-			font-style: italic;
-		}
-
-		figure img {
-			width: 100%;
-		}
-
-		figure.float {
-			float: right;
-			max-width: 30%;
-			margin: 1em;
-		}
-
-		@media all and ( max-width: 640px ) {
-
-			figure.float {
-				float: none;
-				max-width: 100%;
-			}
-
-		}
-	</style>
-</head>
-
-<body>
-	<h1>Gerenciamento de cor</h1>
-
-	<h2>O que é um espaço de cor?</h2>
-
-	<p>
-		Cada espaço de cor é uma coleção de várias decisões de design, escolhidas em conjunto para dar suporte a uma
-		grande variedade de cores, satisfazendo as restrições técnicas relacionadas à precisão e a tecnologia das telas. Ao criar um recurso 3D ou ao montar recursos 3D em uma cena, é
-		importante saber quais são essas propriedades e como as propriedades de um espaço de cores se relacionam
-		com outros espaços de cor na cena.
-	</p>
-
-	<figure class="float">
-		<img src="resources/srgb_gamut.png" alt="">
-		<figcaption>
-			Cores sRGB e ponto branco (D65) exibidos no diagrama de referência cromaticidade CIE 1931.
-			A região colorida representa uma projeção 2D da gama sRGB, que é um volume 3D.
-			Fonte: <a href="https://en.wikipedia.org/wiki/SRGB" target="_blank" rel="noopener">Wikipedia</a>
-		</figcaption>
-	</figure>
-
-	<ul>
-		<li>
-			<b>
-				Cores primárias:</b> As cores primárias (por exemplo, vermelho, verde, azul) não são absolutas; elas são
-				selecionadas a partir do espectro visível com base em restrições de precisão limitada e
-				capacidades dos dispositivos de exibição disponíveis. As cores são expressas como uma proporção das cores primárias.
-		</li>
-		<li>
-			<b>Ponto branco:</b> a maioria dos espaços de cores é projetada de forma que uma soma igualmente ponderada das
-			primárias <i>R = G = B</i> parecerão sem cor, ou "acromáticas". A aparência
-			de valores acromáticos (como branco ou cinza) dependem da percepção humana, que por sua vez depende
-			fortemente no contexto do observador. Um espaço de cor especifica seu "ponto branco" para equilibrar
-			essas necessidades. O ponto branco definido pelo espaço de cores sRGB é
-			[link:https://en.wikipedia.org/wiki/Illuminant_D65 D65].
-		</li>
-		<li>
-			<b>Transfer functions:</b> depois de escolher a gama de cores e um modelo de cores, ainda precisamos
-			definir mapeamentos ("transfer functions") de valores numéricos para o espaço de cores. <i>r = 0,5</i>
-			representa 50% menos iluminação física do que <i>r = 1.0</i>? Ou 50% menos brilhante, conforme percebido
-			por um olho humano médio? São coisas diferentes, e essa diferença pode ser representada como
-			uma função matemática. As transfer functions podem ser <i>lineares</i> ou <i>não lineares</i>, dependendo
-			dos objetivos do espaço de cores. sRGB define transfer functions não lineares. Aquelas
-			funções são às vezes aproximadas como <i>funções gamma</i>, mas o termo "gamma" é
-			ambíguo e deve ser evitado neste contexto.
-		</li>
-	</ul>
-
-	Esses três parâmetros — cores primárias, ponto branco e transfer functions — definem um espaço de cores,
-	cada um escolhido para objetivos particulares. Tendo definido os parâmetros, alguns termos adicionais
-	são úteis:
-
-	<ul>
-		<li>
-			<b>Modelo de cores:</b> Sintaxe para identificar numericamente as cores dentro da gama de cores escolhida —
-			um sistema de coordenadas para cores. No three.js estamos preocupados principalmente com o modelo de cor RGB,
-			tendo três coordenadas <i>r, g, b ∈ [0,1]</i> ("domínio fechado") ou
-			<i>r, g, b ∈ [0,∞]</i> ("domínio aberto"), cada um representando uma fração de uma cor primária.
-			Outros modelos de cores (HSL, Lab, LCH) são comumente usados ​​para controle artístico.
-		</li>
-		<li>
-			<b>Gama de cores:</b> uma vez que as cores primárias e um ponto branco tenham sido escolhidos, eles representam
-			um volume dentro do espectro visível (uma "gama"). Cores fora deste volume ("fora da gama")
-			não podem ser expressas por valores RGB de domínio fechado [0,1]. No domínio aberto [0,∞], a gama é
-			tecnicamente infinita.
-		</li>
-	</ul>
-
-	<p>
-		Considere dois espaços de cores muito comuns: [page:SRGBColorSpace] ("sRGB") e
-		[page:LinearSRGBColorSpace] ("Linear-sRGB"). Ambos usam as mesmas cores primárias e ponto branco,
-		e, portanto, têm a mesma gama de cores. Ambos usam o modelo de cores RGB. Eles diferem apenas
-		nas transfer functions — Linear-sRGB é linear em relação à intensidade da luz física.
-		sRGB usa as transfer functions sRGB não lineares e se assemelha mais à maneira que
-		o olho humano percebe a luz e a capacidade de resposta de dispositivos de exibição comuns.
-	</p>
-
-	<p>
-		Essa diferença é importante. Cálculos de iluminação e outras operações de renderização devem
-		geralmente ocorrem em um espaço de cores linear. No entanto, cores lineares são menos eficientes para
-		armazenar em uma imagem ou framebuffer e não parecem corretas quando vistas por um observador humano.
-		Como resultado, as texturas de entrada e a imagem final renderizada geralmente usarão o método não linear
-		do espaço de cores sRGB.
-	</p>
-
-	<blockquote>
-		<p>
-			ℹ️ <i><b>AVISO:</b> Embora alguns monitores modernos sejam compatíveis com gamas mais amplas, como Display-P3,
-				as APIs gráficas da plataforma web dependem em grande parte do sRGB. Aplicativos que usam three.js
-				hoje normalmente usarão apenas os espaços de cores sRGB e Linear-sRGB.</i>
-		</p>
-	</blockquote>
-
-	<h2>Atribuições dos espaços de cores</h2>
-
-	<p>
-		Fluxos de trabalho lineares - necessários para métodos modernos de renderização - geralmente envolvem mais de
-		um espaço de cores, cada um atribuído a uma função específica. Espaços de cores lineares e não lineares são
-		apropriados para diferentes funções, como explicado abaixo.
-	</p>
-
-	<h3>Input do espaço de cores</h3>
-
-	<p>
-		Cores fornecidas ao three.js — de seletores de cores, texturas, modelos 3D e outras fontes —
-		cada um tem um espaço de cor associado. Aqueles que ainda não estão na cor de trabalho Linear-sRGB,
-        devem ser convertidos e as texturas devem receber a atribuição <i>texture.colorSpace</i> correta.
-		Certas conversões (para cores hexadecimais e CSS em sRGB) podem ser feitas automaticamente se
-		o modo de gerenciamento de cores herdado é desabilitado antes de inicializar as cores:
-	</p>
-
-	<code>
-THREE.ColorManagement.enabled = true;
-	</code>
-
-	<ul>
-		<li>
-			<b>Materiais, luzes e shaders:</b> cores nos materiais, luzes e shaders armazenam
-			componentes RGB no espaço de cores de trabalho Linear-sRGB.
-		</li>
-		<li>
-			<b>Cores de vértices:</b> [page:BufferAttribute BufferAttributes] armazena componentes RGB no
-			Espaço de cores de trabalho linear-sRGB.
-		</li>
-		<li>
-			<b>Texturas de cores:</b> PNG ou JPEG [page:Texture Textures] contendo informações de cores
-			(como .map ou .emissiveMap) usam o espaço de cores sRGB de domínio fechado e devem ser anotados com
-			<i>texture.colorSpace = SRGBColorSpace</i>. Formatos como OpenEXR (às vezes usado para .envMap ou
-			.lightMap) usam o espaço de cores Linear-sRGB indicado com <i>texture.colorSpace = LinearSRGBColorSpace</i>,
-			e podem conter valores no domínio aberto [0,∞].
-		</li>
-		<li>
-			<b>Texturas não coloridas:</b> Texturas que não armazenam informações de cores (como .normalMap
-			ou .roughnessMap) não têm um espaço de cores associado e geralmente usam a textura (padrão)
-			como <i>texture.colorSpace = NoColorSpace</i>. Em casos raros, dados sem cor
-			podem ser representados com outras codificações não lineares por motivos técnicos.
-		</li>
-	</ul>
-
-	<blockquote>
-		<p>
-			⚠️ <i><b>AVISO:</b> Muitos formatos para modelos 3D não funcionam de forma correta ou consistente
-			na definição das informações do espaço de cores. Enquanto o three.js tenta lidar com a maioria dos casos, problemas
-			são comuns com formatos de arquivo mais antigos. Para melhores resultados, use glTF 2.0 ([page:GLTFLoader])
-			e teste modelos 3D em visualizadores on-line antecipadamente para confirmar que o recurso em si está correto.</i>
-		</p>
-	</blockquote>
-
-	<h3>Espaço de cores de trabalho</h3>
-
-	<p>
-		Renderização, interpolação e muitas outras operações devem ser executadas em um domínio aberto
-		do espaço de cores de trabalho linear, no qual os componentes RGB são proporcionais a iluminação
-		física. No three.js, o espaço de cores de trabalho é Linear-sRGB.
-	</p>
-
-	<h3>Output do espaço de cores</h3>
-
-	<p>
-		A saída para um dispositivo de exibição, imagem ou vídeo pode envolver a conversão do domínio aberto
-		do espaço de cores de trabalho linear-sRGB para outro espaço de cores. Essa conversão pode ser feita em
-		uma passagem de renderização principal ([page:WebGLRenderer.outputColorSpace]), ou durante o pós-processamento.
-	</p>
-
-	<code>
-renderer.outputColorSpace = THREE.SRGBColorSpace; // optional with post-processing
-	</code>
-
-	<ul>
-		<li>
-			<b>Tela:</b> as cores gravadas em um canvas WebGL para exibição devem estar no espaço sRGB
-			colorido.
-		</li>
-		<li>
-			<b>Imagem:</b> as cores gravadas em uma imagem devem usar o espaço de cores apropriado para
-			o formato e o uso. Imagens totalmente renderizadas gravadas em texturas PNG ou JPEG geralmente
-			usam o espaço de cores sRGB. Imagens contendo emissão, mapas de luz ou outros dados não
-			confinados ao intervalo [0,1] geralmente usarão o espaço de cores Linear-sRGB de domínio aberto,
-			e um formato de imagem compatível como OpenEXR.
-		</li>
-	</ul>
-
-	<blockquote>
-		<p>
-			⚠️ <i><b>AVISO:</b>
-			Os render targets podem usar sRGB ou Linear-sRGB. sRGB faz
-			melhor uso de precisão limitada. No domínio fechado, 8 bits geralmente são suficientes para sRGB
-			enquanto que ≥12 bits (meio flutuante) podem ser necessários para Linear-sRGB. Se mais tarde
-			os estágios pipeline precisarem de entrada Linear-sRGB, as conversões adicionais podem ter um pequeno
-			custo de desempenho.</i>
-		</p>
-	</blockquote>
-
-	<p>
-		Custom materials based on [page:ShaderMaterial] and [page:RawShaderMaterial] have to implement their own output color space conversion.
-		For instances of `ShaderMaterial`, adding the `colorspace_fragment` shader chunk to the fragment shader's `main()` function should be sufficient.
-	</p>
-
-	<h2>Trabalhando com instâncias THREE.Color</h2>
-
-	<p>
-		Métodos de leitura ou modificação de instâncias [page:Color] assumem que os dados já estão no
-		espaço de cores de trabalho three.js, Linear-sRGB. Os componentes RGB e HSL são
-		representações diretas de dados armazenados pela instância Color e nunca são convertidos
-		implicitamente. Os dados de cores podem ser convertidos explicitamente com <i>.convertLinearToSRGB()</i>
-		ou <i>.convertSRGBToLinear()</i>.
-	</p>
-
-	<code>
-		// RGB components (no change).
-		color.r = color.g = color.b = 0.5;
-		console.log( color.r ); // → 0.5
-
-		// Manual conversion.
-		color.r = 0.5;
-		color.convertSRGBToLinear();
-		console.log( color.r ); // → 0.214041140
-	</code>
-
-	<p>
-		Com <i>ColorManagement.enabled = true</i> definido (recomendado), determinadas conversões
-		são feitas automaticamente. Como as cores hexadecimais e CSS geralmente são sRGB, métodos [page:Color]
-		irão converter automaticamente essas entradas de sRGB para Linear-sRGB em setters, ou
-		converter de Linear-sRGB para sRGB ao retornar hexadecimal ou CSS de getters.
-	</p>
-
-	<code>
-		// Hexadecimal conversion.
-		color.setHex( 0x808080 );
-		console.log( color.r ); // → 0.214041140
-		console.log( color.getHex() ); // → 0x808080
-
-		// CSS conversion.
-		color.setStyle( 'rgb( 0.5, 0.5, 0.5 )' );
-		console.log( color.r ); // → 0.214041140
-
-		// Override conversion with 'colorSpace' argument.
-		color.setHex( 0x808080, LinearSRGBColorSpace );
-		console.log( color.r ); // → 0.5
-		console.log( color.getHex( LinearSRGBColorSpace ) ); // → 0x808080
-		console.log( color.getHex( SRGBColorSpace ) ); // → 0xBCBCBC
-	</code>
-
-	<h2>Erros comuns</h2>
-
-	<p>
-		Quando uma cor ou textura individual é configurada incorretamente, ela aparecerá mais escura ou mais clara do que
-		esperado. Quando o espaço de cores de saída do renderizador está mal configurado, a cena inteira pode aparecer
-		mais escura (por exemplo, conversão ausente para sRGB) ou mais clara (por exemplo, uma conversão dupla para sRGB com
-		pós-processamento). Em cada caso, o problema pode não ser uniforme e simplesmente aumentar/diminuir
-		a iluminação não resolve.
-	</p>
-
-	<p>
-		Um problema mais sutil aparece quando <i>ambos</i> os espaços de cores de entrada e saída
-		estão incorretos — os níveis gerais de brilho podem ser bons, mas as cores podem mudar
-		inesperadamente sob iluminação diferente, ou o sombreamento pode parecer mais estourado e menos suave
-		do que o pretendido. Esses dois erros não fazem um acerto, e é importante que o trabalho
-		espaço de cores funcional seja linear ("cena referida") e o espaço de cores de saída seja não linear
-		("exibição referida").
-	</p>
-
-	<h2>Leitura adicional</h2>
-
-	<ul>
-		<li>
-			<a href="https://developer.nvidia.com/gpugems/gpugems3/part-iv-image-effects/chapter-24-importance-being-linear" target="_blank" rel="noopener">GPU Gems 3: The Importance of Being Linear</a>, de Larry Gritz and Eugene d'Eon
-		</li>
-		<li>
-			<a href="https://blog.johnnovak.net/2016/09/21/what-every-coder-should-know-about-gamma/" target="_blank" rel="noopener">What every coder should know about gamma</a>, de John Novak
-		</li>
-		<li>
-			<a href="https://hg2dc.com/" target="_blank" rel="noopener">The Hitchhiker's Guide to Digital Color</a>, de Troy Sobotka
-		</li>
-		<li>
-			<a href="https://docs.blender.org/manual/en/latest/render/color_management.html" target="_blank" rel="noopener">Color Management</a>, Blender
-		</li>
-	</ul>
-
-</body>
-
-</html>

docs/manual/pt-br/introduction/Creating-a-scene.html

@@ -1,165 +0,0 @@
-<!DOCTYPE html>
-<html lang="pt-br">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>Criando uma cena</h1>
-
-		<p>O objetivo dessa seção é dar uma breve introdução ao three.js. Nós iremos começar configurando uma cena (scene) com um cubo giratório. Um exemplo é apresentado no final dessa página, caso você precise de ajuda.</p>
-
-		<h2>Antes de começar</h2>
-
-		<p>Antes de começar usar o three.js, você precisa de algum lugar para mostrá-lo. Salve o HTML abaixo em um arquivo no seu computador e abra o arquivo no navegador.</p>
-
-		<code>
-		&lt;!DOCTYPE html&gt;
-		&lt;html&gt;
-			&lt;head&gt;
-				&lt;meta charset="utf-8"&gt;
-				&lt;title&gt;My first three.js app&lt;/title&gt;
-				&lt;style&gt;
-					body { margin: 0; }
-				&lt;/style&gt;
-			&lt;/head&gt;
-			&lt;body&gt;
-				&lt;script type="module"&gt;
-					import * as THREE from 'https://cdn.jsdelivr.net/npm/three/build/three.module.js';
-
-					// Our Javascript will go here.
-				&lt;/script&gt;
-			&lt;/body&gt;
-		&lt;/html&gt;
-		</code>
-
-		<p>Isso é tudo. Todo o código abaixo vai dentro da tag &lt;script&gt; vazia.</p>
-
-		<h2>Criando a cena</h2>
-
-		<p>Para realmente ser capaz de exibir algum conteúdo com o three.js, nós precisamos de três coisas: cena (scene), câmera (camera) e renderizador (renderer), para que possamos então renderizar a cena com a câmera.
-		</p>
-
-		<code>
-		const scene = new THREE.Scene();
-		const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
-
-		const renderer = new THREE.WebGLRenderer();
-		renderer.setSize( window.innerWidth, window.innerHeight );
-		document.body.appendChild( renderer.domElement );
-		</code>
-
-		<p>Vamos tirar um momento para explicar o que está acontecendo aqui. Nós temos agora configurados a cena, nossa câmera e o renderizador.</p>
-
-		<p>Existem alguns diferentes tipos de câmera no three.js. Por enquanto usaremos a `PerspectiveCamera`.</p>
-
-		<p>O primeiro atributo é o `field of view`. FOV é a extensão da cena que é vista na tela em um dado momento. O valor está em graus.</p>
-
-		<p>O segundo atributo é o `aspect ratio`. Você quase sempre irá usar o comprimento do elemento dividido pela sua altura, ou você terá o mesmo resultado de quando reproduz filmes antigos em uma TV widescreen - a imagem parece esmagada.</p>
-
-		<p>Os próximos dois atributos são os planos de corte `near` e `far`. Isso significa que os objetos mais distantes da câmera do que o valor `far` ou mais próximos que o valor `near` não serão renderizados. Você não precisa se preocupar com isso agora, mas pode ser necessário usar outros valores em seus apps para obter uma melhor performance.</p>
-
-		<p>Em seguida temos o renderizador. É aqui que a mágica acontece. Além da criação da instância do renderizador, nós também precisamos configurar o tamanho em que queremos renderizar nossa aplicação. É uma boa ideia usar o comprimento e a altura da área que queremos preencher com nossa aplicação - no nosso caso, o comprimento e altura da janela do navegador. Para aplicativos de alto desempenho, você pode fornecer valores menores para o `setSize`, como `window.innerWidth/2` e `window.innerHeight/2`, o que fará com que a aplicação seja renderizada no tamanho de um quarto do original.</p>
-
-		<p>Se você deseja manter o tamanho do seu aplicativo mas renderizá-lo em uma resolução mais baixa, você pode chamar o `setSize` passando false como `updateStyle` (o terceiro argumento). Por exemplo, `setSize(window.innerWidth/2, window.innerHeight/2, false)` irá renderizar sua aplicação na metade da resolução, já que seu elemento &lt;canvas&gt; tem 100% de comprimento e altura.</p>
-
-		<p>Por último mas não menos importante, nós adicionamos o elemento `renderer` ao nosso HTML. Este é o elemento &lt;canvas&gt; que o renderizador usa para exibir a cena para nós.</p>
-
-		<p><em>"Tudo bem, mas onde está aquele cubo que você prometeu?"</em>. Vamos adicioná-lo agora.</p>
-
-		<code>
-		const geometry = new THREE.BoxGeometry( 1, 1, 1 );
-		const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
-		const cube = new THREE.Mesh( geometry, material );
-		scene.add( cube );
-
-		camera.position.z = 5;
-		</code>
-
-		<p>Para criar um cubo, nós precisamos de um `BoxGeometry`. Este é um objeto que contém todos os pontos (`vertices`) e preenchimento (`faces`) do cubo. Nós vamos explorar mais sobre isso no futuro.</p>
-
-		<p>Além da geometria, nós precisamos de um material para colorir. Three.js vem com vários materiais, mas vamos nos ater ao `MeshBasicMaterial` por enquanto. Todos os materiais têm um objeto de propriedades que serão aplicadas a eles. Para manter as coisas simples, forneceremos apenas um atributo de cor `0x00ff00`, que é verde. Isso funciona da mesma maneira que as cores no CSS ou no Photoshop (`hex colors`).</p>
-
-		<p>A terceira coisa que precisamos é de um `Mesh`. Um mesh é um objeto que pega a geometria e aplica um material a ela, para que então possamos inseri-lo em nossa cena e move-lo livremente.</p>
-
-		<p>Por padrão, quando nós chamamos `scene.add()`, o elemento que queremos adicionar será inserido nas coordenadas `(0,0,0)`. Isso faz com que a câmera e o cubo fiquem um dentro do outro. Para evitar isso, simplesmente movemos a câmera um pouco para fora.</p>
-
-		<h2>Renderizando a cena</h2>
-
-		<p>Se você copiou o código acima para o arquivo HTML criado anteriormente, você não será capaz de ver nada. Isso acontece porque ainda não estamos renderizando nada. Para isso, precisamos chamar um `render ou animate loop`.</p>
-
-		<code>
-		function animate() {
-			requestAnimationFrame( animate );
-			renderer.render( scene, camera );
-		}
-		animate();
-		</code>
-
-		<p>Isso criará um loop que fará com que o renderizador desenhe a cena novamente toda vez que a tela for atualizada (em uma tela típica, isso significa 60 vezes por segundo). Se você é novato em escrever jogos no navegador, pode perguntar <em>"por que não criamos um setInterval?"</em>. A questão é - nós poderíamos, mas `requestAnimationFrame` tem várias vantagens. Talvez a mais importante seja que ele pausa quando o usuário navega para outra aba do navegador, portanto, não desperdiçando seu precioso poder de processamento e vida útil da bateria.</p>
-
-		<h2>Animando o cubo</h2>
-
-		<p>Se você inseriu todo o código acima no arquivo que criamos no início, deve visualizar uma caixa verde. Vamos deixar isso tudo um pouco mais interessante rotacionando o cubo.
-		</p>
-
-		<p>Adicione o seguinte trecho logo acima da chamada `renderer.render` na função `animate`:</p>
-
-		<code>
-		cube.rotation.x += 0.01;
-		cube.rotation.y += 0.01;
-		</code>
-
-		<p>Isso será executado a cada quadro (normalmento 60 vezes por segundo), e dará ao cubo uma boa animação de rotação. Basicamente, quaquer coisa que você queira mover ou alterar enquanto a aplicação está sendo executada tem que passar pelo loop de animação. É claro que você pode chamar outras funções de lá para que não acabe com uma função `animate` com centenas de linhas.</p>
-
-		<h2>O resultado</h2>
-		<p>Parabéns! Agora você concluiu seu primeiro aplicativo three.js. É simples, mas você tem que começar de algum lugar.</p>
-
-		<p>O código completo está disponível abaixo e como um [link:https://jsfiddle.net/0c1oqf38/ exemplo] editável. Brinque com ele para entender melhor como funciona.</p>
-
-		<code>
-		&lt;!DOCTYPE html&gt;
-		&lt;html&gt;
-			&lt;head&gt;
-				&lt;meta charset="utf-8"&gt;
-				&lt;title&gt;My first three.js app&lt;/title&gt;
-				&lt;style&gt;
-					body { margin: 0; }
-				&lt;/style&gt;
-			&lt;/head&gt;
-			&lt;body&gt;
-				&lt;script type="module"&gt;
-					import * as THREE from 'https://cdn.jsdelivr.net/npm/three/build/three.module.js';
-
-					const scene = new THREE.Scene();
-					const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
-
-					const renderer = new THREE.WebGLRenderer();
-					renderer.setSize( window.innerWidth, window.innerHeight );
-					document.body.appendChild( renderer.domElement );
-
-					const geometry = new THREE.BoxGeometry( 1, 1, 1 );
-					const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
-					const cube = new THREE.Mesh( geometry, material );
-					scene.add( cube );
-
-					camera.position.z = 5;
-
-					function animate() {
-						requestAnimationFrame( animate );
-
-						cube.rotation.x += 0.01;
-						cube.rotation.y += 0.01;
-
-						renderer.render( scene, camera );
-					}
-
-					animate();
-				&lt;/script&gt;
-			&lt;/body&gt;
-		&lt;/html&gt;
-		</code>
-	</body>
-</html>

docs/manual/pt-br/introduction/Creating-text.html

@@ -1,144 +0,0 @@
-<!DOCTYPE html>
-<html lang="pt-br">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>Criando texto</h1>
-		<div>
-			<p>
-				Muitas vezes, você pode precisar usar texto em sua aplicação three.js - aqui estão algumas maneiras de fazer isso.
-			</p>
-		</div>
-
-		<h2>1. DOM + CSS</h2>
-		<div>
-			<p>
-				Usar HTML geralmente é a maneira mais fácil e rápida de adicionar texto. Este é o método
-   				usado para sobreposições descritivas na maioria dos exemplos three.js.
-			</p>
-			<p>Você pode adicionar conteúdo para uma</p>
-			<code>&lt;div id="info"&gt;Description&lt;/div&gt;</code>
-
-			<p>
-				e usar marcação CSS para posicionar absolutamente em uma posição acima de todas as outras com um
-				z-index, especialmente se você estiver executando o three.js em tela cheia.
-			</p>
-
-			<code>
-#info {
-	position: absolute;
-	top: 10px;
-	width: 100%;
-	text-align: center;
-	z-index: 100;
-	display:block;
-}
-			</code>
-
-		</div>
-
-		
-		<h2>2. Usar [page:CSS2DRenderer] ou [page:CSS3DRenderer]</h2>
-		<div>
-			<p>
-				Use esses renderizadores para desenhar texto de alta qualidade contido em elementos DOM para sua cena three.js.
-				Isso é semelhante ao item 1. exceto que esses elementos de renderização podem ser integrados
-				mais firmemente e dinamicamente na cena.
-			</p>
-		</div>
-		
-
-		<h2>3. Desenhe texto na tela e use como [page:Texture]</h2>
-		<div>
-			<p>
-				Use este método se deseja desenhar texto facilmente em um plano na sua cena three.js.
-			</p>
-		</div>
-
-
-		<h2>4. Crie um modelo em seu aplicativo 3D favorito e exporte para three.js</h2>
-		<div>
-			<p>Use este método se preferir trabalhar com seus aplicativos 3D e importar os modelos para o three.js.</p>
-		</div>
-
-
-		<h2>5. Geometria de Texto Procedural</h2>
-		<div>
-			<p>
-				Se você preferir trabalhar puramente em THREE.js ou criar geometrias de texto 3D 
-				procedurais e dinâmicas, você pode criar um mesh cuja geometria é uma instância de THREE.TextGeometry:
-			</p>
-			<p>
-				<code>new THREE.TextGeometry( text, parameters );</code>
-			</p>
-			<p>
-				Para que isso funcione, no entanto, seu TextGeometry precisará de uma instância de THREE.Font
-				para ser definido em seu parâmetro "fonte".
-
-				Veja a página [page:TextGeometry] para mais informações sobre como isso pode ser feito, descrição de cada
-				um dos parâmetros aceitos e uma lista das fontes JSON que vêm com a própria distribuição THREE.js.
-			</p>
-
-			<h3>Exemplos</h3>
-
-			<p>
-				[example:webgl_geometry_text WebGL / geometry / text]<br />
-				[example:webgl_shadowmap WebGL / shadowmap]
-			</p>
-
-			<p>
-				Se o Typeface estiver desativado ou você quiser usar uma fonte que não está lá, há um tutorial
-				com um script python para blender que permite exportar texto para o formato JSON do Three.js:
-				[link:http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html]
-			</p>
-
-		</div>
-
-
-		<h2>6. Fontes Bitmap</h2>
-		<div>
-			<p>
-				BMFonts (fontes Bitmap) permitem agrupar glifos em um único BufferGeometry. A renderização do 
-				BMFont suporta quebra de palavras, espaçamento entre letras, kerning, campos de distância assinados com padrão
-				derivados, campos de distância com sinal multicanal, fontes com várias texturas e muito mais.
-				Veja [link:https://github.com/felixmariotto/three-mesh-ui three-mesh-ui] ou [link:https://github.com/Jam3/three-bmfont-text three-bmfont-text].
-			</p>
-			<p>
-				As Stock Fonts estão disponíveis em projetos como
-				[link:https://github.com/etiennepinchon/aframe-fonts A-Frame Fonts], ou você pode criar o seu próprio
-				de qualquer fonte .TTF, otimizando para incluir apenas os caracteres necessários para um projeto.
-			</p>
-			<p>
-				Algumas ferramentas úteis:
-			</p>
-			<ul>
-				<li>[link:http://msdf-bmfont.donmccurdy.com/ msdf-bmfont-web] <i>(web)</i></li>
-				<li>[link:https://github.com/soimy/msdf-bmfont-xml msdf-bmfont-xml] <i>(linha de comando)</i></li>
-				<li>[link:https://github.com/libgdx/libgdx/wiki/Hiero hiero] <i>(desktop)</i></li>
-			</ul>
-		</div>
-
-
-		<h2>7. Troika Text</h2>
-		<div>
-			<p>
-				O pacote [link:https://www.npmjs.com/package/troika-three-text troika-three-text] renderiza
-				texto com suavização de qualidade usando uma técnica semelhante ao BMFonts, mas funciona diretamente com qualquer
-				arquivo de fonte .TTF ou .WOFF, para que você não precise pré-gerar uma textura de glifo offline. Também adiciona
-				capacidades incluindo:
-			</p>
-			<ul>
-				<li>Efeitos como traços, sombras e curvatura</li>
-				<li>A capacidade de aplicar qualquer material three.js, até mesmo um ShaderMaterial personalizado</li>
-				<li>Suporte para ligaduras de fonte, scripts com letras unidas e layout da direita para a esquerda/bidirecional</li>
-				<li>Otimização para grandes quantidades de texto dinâmico, realizando a maior parte do trabalho fora da thread principal em um web worker</li>
-			</ul>
-		</div>
-
-
-	</body>
-</html>

docs/manual/pt-br/introduction/Drawing-lines.html

@@ -1,83 +0,0 @@
-<!DOCTYPE html>
-<html lang="pt-br">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>Desenhando linhas</h1>
-		<div>
-			<p>
-				Digamos que você queira desenhar uma linha ou um círculo, não um wireframe [page:Mesh].
-				Primeiro precisamos configurar o [page:WebGLRenderer renderizador] (renderer), a [page:Scene cena] (scene) e 
-				a câmera (camera) (veja a página Criando uma cena).
-			</p>
-
-			<p>
-				Aqui está o código que vamos usar:
-			</p>
-			<code>
-const renderer = new THREE.WebGLRenderer();
-renderer.setSize( window.innerWidth, window.innerHeight );
-document.body.appendChild( renderer.domElement );
-
-const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
-camera.position.set( 0, 0, 100 );
-camera.lookAt( 0, 0, 0 );
-
-const scene = new THREE.Scene();
-			</code>
-
-			<p>
-				A próxima coisa que vamos fazer é definir um material. 
-				Para linhas nós temos que usar [page:LineBasicMaterial] ou [page:LineDashedMaterial].
-			</p>
-			
-			<code>
-//create a blue LineBasicMaterial
-const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
-			</code>
-
-			<p>
-				Depois do material, nós vamos precisar de uma geometria com alguns vértices:
-			</p>
-
-			<code>
-const points = [];
-points.push( new THREE.Vector3( - 10, 0, 0 ) );
-points.push( new THREE.Vector3( 0, 10, 0 ) );
-points.push( new THREE.Vector3( 10, 0, 0 ) );
-
-const geometry = new THREE.BufferGeometry().setFromPoints( points );
-			</code>
-
-			<p>
-				Note que linhas são desenhadas entre cada par consecutivo de vértices, 
-				mas não entre o primeiro e o último (a linha não é fechada).
-			</p>
-
-			<p>
-				Agora que nós temos os pontos para duas linhas e um material,
-				podemos juntar tudo e formar uma linha
-			</p>
-			<code>
-const line = new THREE.Line( geometry, material );
-			</code>
-
-			<p>
-				Tudo o que falta é adicioná-la na cena e chamar o [page:WebGLRenderer.render renderizador].
-			</p>
-
-			<code>
-scene.add( line );
-renderer.render( scene, camera );
-			</code>
-
-			<p>
-			Agora você deve estar vendo uma seta apontando para cima, feita de duas linhas azuis.
-			</p>
-		</div>
-	</body>
-</html>

docs/manual/pt-br/introduction/FAQ.html

@@ -1,75 +0,0 @@
-<!DOCTYPE html>
-<html lang="pt-br">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>FAQ</h1>
-
-		<h2>Qual formato de modelo 3D é melhor suportado?</h2>
-		<div>
-			<p>
-				O formato recomendado para importar e exportar recursos é
-				o glTF (GL Transmission Format). Isso porque o glTF é focado na entrega de recursos em 
-				tempo de execução, é compacto para transmitir e rápido para carregar.
-			</p>
-			<p>
-				O three.js também fornece loaders para muitos outros formatos populares como FBX, Collada ou OBJ.
-				No entanto, primeiro você deve sempre tentar estabelecer um fluxo de trabalho baseado em glTF em seus projetos.
-				Para obter mais informações, consulte [link:#manual/introduction/Loading-3D-models Carregando modelos 3D].
-			</p>
-		</div>
-
-		<h2>Por que existem meta tags de viewport nos exemplos?</h2>
-		<div>
-				<code>&lt;meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"&gt;</code>
-
-				<p>
-					Essas tags controlam o tamanho e a escala da janela de visualização para navegadores móveis
-					(onde o conteúdo da página pode ser renderizado em tamanho diferente da janela de visualização visível).
-				</p>
-
-				<p>[link:https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html Safari: Using the Viewport]</p>
-
-				<p>[link:https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag MDN: Using the viewport meta tag]</p>
-		</div>
-
-		<h2>Como a escala da cena pode ser preservada no redimensionamento?</h2>
-		<p>
-			Queremos que todos os objetos, independentemente da sua distância da câmera, apareçam do mesmo tamanho,
-			mesmo que a janela seja redimensionada.
-
-			A equação chave para resolver isso é esta fórmula para a altura visível dada uma determinada distância da câmera:
-
-			<code>
-visible_height = 2 * Math.tan( ( Math.PI / 180 ) * camera.fov / 2 ) * distance_from_camera;
-			</code>
-			Se aumentarmos a altura da janela por uma certa porcentagem, o que queremos é que a altura visível em todas as distâncias
-			aumentem na mesma porcentagem.
-
-			Isso não pode ser feito alterando a posição da câmera. Em vez disso, você tem que mudar 
-			o campo de visão da câmera (FOV).
-			[link:http://jsfiddle.net/Q4Jpu/ Exemplo].
-		</p>
-
-		<h2>Por que parte do meu objeto está invisível?</h2>
-		<p>
-			Isso pode acontecer por causa do corte de faces. As faces têm uma orientação que decide qual lado
-			é qual. E o corte remove a parte traseira em circunstâncias normais.
-			Para verificar se este é o seu problema, altere o lado do material para THREE.DoubleSide.
-
-			<code>material.side = THREE.DoubleSide</code>
-		</p>
-
-		<h2>
-			Por que o three.js às vezes retorna resultados estranhos para entradas inválidas?
-		</h2>
-		<p>
-			Por motivos de desempenho, o three.js não valida entradas na maioria dos casos. 
-			É responsabilidade do seu aplicativo garantir que todas as entradas sejam válidas.
-		</p>
-	</body>
-</html>