From 7686a1295a0f8efa796847c1a7cea88c0abe7a48 Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Fri, 29 Sep 2023 21:37:07 -0400 Subject: [PATCH] Add loader examples to testing (#622) * Add examples * Updates * Remove example * Remove example * Remove example * Remove example * Add controls types * Remove examples * Remove example * Updates * Updates * Update patch * Delete examples * Add back * Remove obsolete * OTHER_FILES * OTHER_FILES * OTHER_FILES * OTHER_FILES * OTHER_FILES * OTHER_FILES --- examples-testing/changes.patch | 1125 +++++++++++++++++ examples-testing/index.js | 90 +- types/three/OTHER_FILES.txt | 6 + .../examples/jsm/libs/lil-gui.module.min.d.ts | 10 +- .../examples/jsm/loaders/LogLuvLoader.d.ts | 2 +- .../three/examples/jsm/loaders/PCDLoader.d.ts | 6 +- .../jsm/misc/MD2CharacterComplex.d.ts | 10 +- .../three-examples/webgl_loader_gltf.ts | 72 -- .../three-examples/webgl_loader_obj_mtl.ts | 115 -- .../three-examples/webgl_loader_pcd.ts | 100 -- .../three-examples/webgl_loader_svg.ts | 149 --- .../webgl_loader_texture_tga.ts | 88 -- .../three-examples/webgl_loader_ttf.ts | 203 --- .../three-examples/webgl_loader_usdz.ts | 56 - types/three/tsconfig.json | 7 - 15 files changed, 1194 insertions(+), 845 deletions(-) delete mode 100644 types/three/test/integration/three-examples/webgl_loader_gltf.ts delete mode 100644 types/three/test/integration/three-examples/webgl_loader_obj_mtl.ts delete mode 100644 types/three/test/integration/three-examples/webgl_loader_pcd.ts delete mode 100644 types/three/test/integration/three-examples/webgl_loader_svg.ts delete mode 100644 types/three/test/integration/three-examples/webgl_loader_texture_tga.ts delete mode 100644 types/three/test/integration/three-examples/webgl_loader_ttf.ts delete mode 100644 types/three/test/integration/three-examples/webgl_loader_usdz.ts diff --git a/examples-testing/changes.patch b/examples-testing/changes.patch index 3ea09c095..6c7ff5e82 100644 --- a/examples-testing/changes.patch +++ b/examples-testing/changes.patch @@ -6504,6 +6504,1131 @@ index b3ca12c..47dca0a 100644 const geometry = new WireframeGeometry2(geo); +diff --git a/examples-testing/examples/webgl_loader_3dm.ts b/examples-testing/examples/webgl_loader_3dm.ts +index c0ff73f..d910753 100644 +--- a/examples-testing/examples/webgl_loader_3dm.ts ++++ b/examples-testing/examples/webgl_loader_3dm.ts +@@ -5,8 +5,8 @@ import { Rhino3dmLoader } from 'three/addons/loaders/3DMLoader.js'; + + import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; + +-let camera, scene, renderer; +-let controls, gui; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer; ++let controls: OrbitControls, gui: GUI; + + init(); + animate(); +@@ -36,7 +36,7 @@ function init() { + initGUI(object.userData.layers); + + // hide spinner +- document.getElementById('loader').style.display = 'none'; ++ document.getElementById('loader')!.style.display = 'none'; + }); + + controls = new OrbitControls(camera, renderer.domElement); +@@ -61,7 +61,7 @@ function animate() { + requestAnimationFrame(animate); + } + +-function initGUI(layers) { ++function initGUI(layers: { name: string; visible: boolean }[]) { + gui = new GUI({ title: 'layers' }); + + for (let i = 0; i < layers.length; i++) { +diff --git a/examples-testing/examples/webgl_loader_3ds.ts b/examples-testing/examples/webgl_loader_3ds.ts +index b0bcebe..a0ae9d6 100644 +--- a/examples-testing/examples/webgl_loader_3ds.ts ++++ b/examples-testing/examples/webgl_loader_3ds.ts +@@ -3,8 +3,8 @@ import * as THREE from 'three'; + import { TrackballControls } from 'three/addons/controls/TrackballControls.js'; + import { TDSLoader } from 'three/addons/loaders/TDSLoader.js'; + +-let container, controls; +-let camera, scene, renderer; ++let container: HTMLDivElement, controls: TrackballControls; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer; + + init(); + animate(); +@@ -30,9 +30,9 @@ function init() { + loader.setResourcePath('models/3ds/portalgun/textures/'); + loader.load('models/3ds/portalgun/portalgun.3ds', function (object) { + object.traverse(function (child) { +- if (child.isMesh) { +- child.material.specular.setScalar(0.1); +- child.material.normalMap = normal; ++ if ((child as THREE.Mesh).isMesh) { ++ (child as THREE.Mesh).material.specular.setScalar(0.1); ++ (child as THREE.Mesh).material.normalMap = normal; + } + }); + +diff --git a/examples-testing/examples/webgl_loader_3mf.ts b/examples-testing/examples/webgl_loader_3mf.ts +index c31e321..eecda51 100644 +--- a/examples-testing/examples/webgl_loader_3mf.ts ++++ b/examples-testing/examples/webgl_loader_3mf.ts +@@ -4,7 +4,12 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + import { ThreeMFLoader } from 'three/addons/loaders/3MFLoader.js'; + import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; + +-let camera, scene, renderer, object, loader, controls; ++let camera: THREE.PerspectiveCamera, ++ scene: THREE.Scene, ++ renderer: THREE.WebGLRenderer, ++ object: THREE.Group, ++ loader: ThreeMFLoader, ++ controls: OrbitControls; + + const params = { + asset: 'cube_gears', +@@ -73,13 +78,18 @@ function init() { + }); + } + +-function loadAsset(asset) { ++function loadAsset(asset: string) { + loader.load('models/3mf/' + asset + '.3mf', function (group) { + if (object) { + object.traverse(function (child) { +- if (child.material) child.material.dispose(); +- if (child.material && child.material.map) child.material.map.dispose(); +- if (child.geometry) child.geometry.dispose(); ++ if ((child as THREE.Mesh).material) ++ (child as THREE.Mesh).material.dispose(); ++ if ( ++ (child as THREE.Mesh).material && ++ (child as THREE.Mesh).material.map ++ ) ++ (child as THREE.Mesh).material.map!.dispose(); ++ if ((child as THREE.Mesh).geometry) (child as THREE.Mesh).geometry.dispose(); + }); + + scene.remove(object); +diff --git a/examples-testing/examples/webgl_loader_3mf_materials.ts b/examples-testing/examples/webgl_loader_3mf_materials.ts +index fcdd730..3cfb49b 100644 +--- a/examples-testing/examples/webgl_loader_3mf_materials.ts ++++ b/examples-testing/examples/webgl_loader_3mf_materials.ts +@@ -3,7 +3,7 @@ import * as THREE from 'three'; + import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + import { ThreeMFLoader } from 'three/addons/loaders/3MFLoader.js'; + +-let camera, scene, renderer; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer; + + init(); + +diff --git a/examples-testing/examples/webgl_loader_amf.ts b/examples-testing/examples/webgl_loader_amf.ts +index ee576e0..7569a04 100644 +--- a/examples-testing/examples/webgl_loader_amf.ts ++++ b/examples-testing/examples/webgl_loader_amf.ts +@@ -3,7 +3,7 @@ import * as THREE from 'three'; + import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + import { AMFLoader } from 'three/addons/loaders/AMFLoader.js'; + +-let camera, scene, renderer; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer; + + init(); + +diff --git a/examples-testing/examples/webgl_loader_bvh.ts b/examples-testing/examples/webgl_loader_bvh.ts +index 22eddd6..ba5f08e 100644 +--- a/examples-testing/examples/webgl_loader_bvh.ts ++++ b/examples-testing/examples/webgl_loader_bvh.ts +@@ -5,8 +5,8 @@ import { BVHLoader } from 'three/addons/loaders/BVHLoader.js'; + + const clock = new THREE.Clock(); + +-let camera, controls, scene, renderer; +-let mixer; ++let camera: THREE.PerspectiveCamera, controls: OrbitControls, scene: THREE.Scene, renderer: THREE.WebGLRenderer; ++let mixer: THREE.AnimationMixer; + + init(); + animate(); +diff --git a/examples-testing/examples/webgl_loader_collada.ts b/examples-testing/examples/webgl_loader_collada.ts +index 589217f..ee2f586 100644 +--- a/examples-testing/examples/webgl_loader_collada.ts ++++ b/examples-testing/examples/webgl_loader_collada.ts +@@ -4,14 +4,14 @@ import Stats from 'three/addons/libs/stats.module.js'; + + import { ColladaLoader } from 'three/addons/loaders/ColladaLoader.js'; + +-let container, stats, clock; +-let camera, scene, renderer, elf; ++let container: HTMLElement, stats: Stats, clock: THREE.Clock; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer, elf: THREE.Scene; + + init(); + animate(); + + function init() { +- container = document.getElementById('container'); ++ container = document.getElementById('container')!; + + camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000); + camera.position.set(8, 10, 8); +diff --git a/examples-testing/examples/webgl_loader_collada_skinning.ts b/examples-testing/examples/webgl_loader_collada_skinning.ts +index 4d3f393..a3f95c7 100644 +--- a/examples-testing/examples/webgl_loader_collada_skinning.ts ++++ b/examples-testing/examples/webgl_loader_collada_skinning.ts +@@ -5,14 +5,14 @@ import Stats from 'three/addons/libs/stats.module.js'; + import { ColladaLoader } from 'three/addons/loaders/ColladaLoader.js'; + import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + +-let container, stats, clock, controls; +-let camera, scene, renderer, mixer; ++let container: HTMLElement, stats: Stats, clock: THREE.Clock, controls: OrbitControls; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer, mixer: THREE.AnimationMixer; + + init(); + animate(); + + function init() { +- container = document.getElementById('container'); ++ container = document.getElementById('container')!; + + camera = new THREE.PerspectiveCamera(25, window.innerWidth / window.innerHeight, 1, 1000); + camera.position.set(15, 10, -15); +diff --git a/examples-testing/examples/webgl_loader_draco.ts b/examples-testing/examples/webgl_loader_draco.ts +index 4e7d17b..32018ae 100644 +--- a/examples-testing/examples/webgl_loader_draco.ts ++++ b/examples-testing/examples/webgl_loader_draco.ts +@@ -2,9 +2,9 @@ import * as THREE from 'three'; + + import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js'; + +-let camera, scene, renderer; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer; + +-const container = document.querySelector('#container'); ++const container = document.querySelector('#container')!; + + // Configure and create Draco decoder. + const dracoLoader = new DRACOLoader(); +diff --git a/examples-testing/examples/webgl_loader_fbx.ts b/examples-testing/examples/webgl_loader_fbx.ts +index eda3079..5a5a6be 100644 +--- a/examples-testing/examples/webgl_loader_fbx.ts ++++ b/examples-testing/examples/webgl_loader_fbx.ts +@@ -5,11 +5,11 @@ import Stats from 'three/addons/libs/stats.module.js'; + import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + import { FBXLoader } from 'three/addons/loaders/FBXLoader.js'; + +-let camera, scene, renderer, stats; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer, stats: Stats; + + const clock = new THREE.Clock(); + +-let mixer; ++let mixer: THREE.AnimationMixer; + + init(); + animate(); +@@ -63,7 +63,7 @@ function init() { + action.play(); + + object.traverse(function (child) { +- if (child.isMesh) { ++ if ((child as THREE.Mesh).isMesh) { + child.castShadow = true; + child.receiveShadow = true; + } +diff --git a/examples-testing/examples/webgl_loader_fbx_nurbs.ts b/examples-testing/examples/webgl_loader_fbx_nurbs.ts +index 919a96d..7af5eb7 100644 +--- a/examples-testing/examples/webgl_loader_fbx_nurbs.ts ++++ b/examples-testing/examples/webgl_loader_fbx_nurbs.ts +@@ -5,7 +5,7 @@ import Stats from 'three/addons/libs/stats.module.js'; + import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + import { FBXLoader } from 'three/addons/loaders/FBXLoader.js'; + +-let camera, scene, renderer, stats; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer, stats: Stats; + + init(); + animate(); +diff --git a/examples-testing/examples/webgl_loader_gcode.ts b/examples-testing/examples/webgl_loader_gcode.ts +index 6fd3e14..79c6423 100644 +--- a/examples-testing/examples/webgl_loader_gcode.ts ++++ b/examples-testing/examples/webgl_loader_gcode.ts +@@ -3,7 +3,7 @@ import * as THREE from 'three'; + import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + import { GCodeLoader } from 'three/addons/loaders/GCodeLoader.js'; + +-let camera, scene, renderer; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer; + + init(); + render(); +diff --git a/examples-testing/examples/webgl_loader_gltf.ts b/examples-testing/examples/webgl_loader_gltf.ts +index 944cee3..3ac9f2b 100644 +--- a/examples-testing/examples/webgl_loader_gltf.ts ++++ b/examples-testing/examples/webgl_loader_gltf.ts +@@ -4,7 +4,7 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; + import { RGBELoader } from 'three/addons/loaders/RGBELoader.js'; + +-let camera, scene, renderer; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer; + + init(); + render(); +diff --git a/examples-testing/examples/webgl_loader_gltf_anisotropy.ts b/examples-testing/examples/webgl_loader_gltf_anisotropy.ts +index 6e240a2..96a3939 100644 +--- a/examples-testing/examples/webgl_loader_gltf_anisotropy.ts ++++ b/examples-testing/examples/webgl_loader_gltf_anisotropy.ts +@@ -4,7 +4,7 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; + import { RGBELoader } from 'three/addons/loaders/RGBELoader.js'; + +-let renderer, scene, camera, controls; ++let renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.PerspectiveCamera, controls: OrbitControls; + + init(); + +diff --git a/examples-testing/examples/webgl_loader_gltf_avif.ts b/examples-testing/examples/webgl_loader_gltf_avif.ts +index 37d6385..68dff97 100644 +--- a/examples-testing/examples/webgl_loader_gltf_avif.ts ++++ b/examples-testing/examples/webgl_loader_gltf_avif.ts +@@ -4,7 +4,7 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; + import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js'; + +-let camera, scene, renderer; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer; + + init(); + render(); +diff --git a/examples-testing/examples/webgl_loader_gltf_compressed.ts b/examples-testing/examples/webgl_loader_gltf_compressed.ts +index 8202430..0926a59 100644 +--- a/examples-testing/examples/webgl_loader_gltf_compressed.ts ++++ b/examples-testing/examples/webgl_loader_gltf_compressed.ts +@@ -7,7 +7,7 @@ import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; + import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js'; + import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js'; + +-let camera, scene, renderer; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer; + + init(); + render(); +diff --git a/examples-testing/examples/webgl_loader_gltf_instancing.ts b/examples-testing/examples/webgl_loader_gltf_instancing.ts +index 5d23e77..b8a6814 100644 +--- a/examples-testing/examples/webgl_loader_gltf_instancing.ts ++++ b/examples-testing/examples/webgl_loader_gltf_instancing.ts +@@ -4,7 +4,7 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; + import { RGBELoader } from 'three/addons/loaders/RGBELoader.js'; + +-let camera, scene, renderer; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer; + + init(); + render(); +diff --git a/examples-testing/examples/webgl_loader_gltf_iridescence.ts b/examples-testing/examples/webgl_loader_gltf_iridescence.ts +index 366ee49..1f10a04 100644 +--- a/examples-testing/examples/webgl_loader_gltf_iridescence.ts ++++ b/examples-testing/examples/webgl_loader_gltf_iridescence.ts +@@ -4,7 +4,7 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; + import { RGBELoader } from 'three/addons/loaders/RGBELoader.js'; + +-let renderer, scene, camera, controls; ++let renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.PerspectiveCamera, controls: OrbitControls; + + init().catch(function (err) { + console.error(err); +diff --git a/examples-testing/examples/webgl_loader_gltf_lights.ts b/examples-testing/examples/webgl_loader_gltf_lights.ts +index f2bd5b1..7efbb03 100644 +--- a/examples-testing/examples/webgl_loader_gltf_lights.ts ++++ b/examples-testing/examples/webgl_loader_gltf_lights.ts +@@ -6,7 +6,7 @@ import { RGBELoader } from 'three/addons/loaders/RGBELoader.js'; + + import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; + +-let camera, scene, renderer; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer; + + const params = { + punctualLightsEnabled: true, +@@ -66,9 +66,9 @@ function onWindowResize() { + render(); + } + +-function toggleLights(visible) { ++function toggleLights(visible: boolean) { + scene.traverse(function (object) { +- if (object.isLight) { ++ if ((object as THREE.Light).isLight) { + object.visible = visible; + } + }); +diff --git a/examples-testing/examples/webgl_loader_gltf_sheen.ts b/examples-testing/examples/webgl_loader_gltf_sheen.ts +index 39072e9..a336dc5 100644 +--- a/examples-testing/examples/webgl_loader_gltf_sheen.ts ++++ b/examples-testing/examples/webgl_loader_gltf_sheen.ts +@@ -6,7 +6,7 @@ import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js'; + + import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; + +-let camera, scene, renderer, controls; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer, controls: OrbitControls; + + init(); + animate(); +@@ -25,7 +25,10 @@ function init() { + new GLTFLoader().setPath('models/gltf/').load('SheenChair.glb', function (gltf) { + scene.add(gltf.scene); + +- const object = gltf.scene.getObjectByName('SheenChair_fabric'); ++ const object = gltf.scene.getObjectByName('SheenChair_fabric') as THREE.Mesh< ++ THREE.BufferGeometry, ++ THREE.MeshPhysicalMaterial ++ >; + + const gui = new GUI(); + +diff --git a/examples-testing/examples/webgl_loader_gltf_transmission.ts b/examples-testing/examples/webgl_loader_gltf_transmission.ts +index 2d7f5c6..d14e88f 100644 +--- a/examples-testing/examples/webgl_loader_gltf_transmission.ts ++++ b/examples-testing/examples/webgl_loader_gltf_transmission.ts +@@ -6,7 +6,12 @@ import { RGBELoader } from 'three/addons/loaders/RGBELoader.js'; + + import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js'; + +-let camera, scene, renderer, controls, clock, mixer; ++let camera: THREE.PerspectiveCamera, ++ scene: THREE.Scene, ++ renderer: THREE.WebGLRenderer, ++ controls: OrbitControls, ++ clock: THREE.Clock, ++ mixer: THREE.AnimationMixer; + + init(); + +diff --git a/examples-testing/examples/webgl_loader_imagebitmap.ts b/examples-testing/examples/webgl_loader_imagebitmap.ts +index 4f2900f..ef1da2b 100644 +--- a/examples-testing/examples/webgl_loader_imagebitmap.ts ++++ b/examples-testing/examples/webgl_loader_imagebitmap.ts +@@ -1,7 +1,7 @@ + import * as THREE from 'three'; + +-let camera, scene, renderer; +-let group, cubes; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer; ++let group: THREE.Group, cubes: THREE.Group; + + init(); + animate(); +@@ -43,7 +43,7 @@ function addImage() { + + const geometry = new THREE.BoxGeometry(); + +-function addCube(material) { ++function addCube(material: THREE.MeshBasicMaterial) { + const cube = new THREE.Mesh(geometry, material); + cube.position.set(Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1); + cube.rotation.set(Math.random() * 2 * Math.PI, Math.random() * 2 * Math.PI, Math.random() * 2 * Math.PI); +diff --git a/examples-testing/examples/webgl_loader_kmz.ts b/examples-testing/examples/webgl_loader_kmz.ts +index f93555e..8793a35 100644 +--- a/examples-testing/examples/webgl_loader_kmz.ts ++++ b/examples-testing/examples/webgl_loader_kmz.ts +@@ -3,7 +3,7 @@ import * as THREE from 'three'; + import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + import { KMZLoader } from 'three/addons/loaders/KMZLoader.js'; + +-let camera, scene, renderer; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer; + + init(); + +diff --git a/examples-testing/examples/webgl_loader_lwo.ts b/examples-testing/examples/webgl_loader_lwo.ts +index d505621..6b1d95a 100644 +--- a/examples-testing/examples/webgl_loader_lwo.ts ++++ b/examples-testing/examples/webgl_loader_lwo.ts +@@ -3,7 +3,7 @@ import * as THREE from 'three'; + import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + import { LWOLoader } from 'three/addons/loaders/LWOLoader.js'; + +-let camera, scene, renderer; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer; + + init(); + +diff --git a/examples-testing/examples/webgl_loader_md2_control.ts b/examples-testing/examples/webgl_loader_md2_control.ts +index 0ce644a..e0ada97 100644 +--- a/examples-testing/examples/webgl_loader_md2_control.ts ++++ b/examples-testing/examples/webgl_loader_md2_control.ts +@@ -9,10 +9,10 @@ import { Gyroscope } from 'three/addons/misc/Gyroscope.js'; + let SCREEN_WIDTH = window.innerWidth; + let SCREEN_HEIGHT = window.innerHeight; + +-let container, stats; +-let camera, scene, renderer; ++let container: HTMLDivElement, stats: Stats; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer; + +-const characters = []; ++const characters: MD2CharacterComplex[] = []; + let nCharacters = 0; + + let cameraControls; +@@ -77,10 +77,10 @@ function init() { + + const ground = new THREE.Mesh(gg, gm); + ground.rotation.x = -Math.PI / 2; +- ground.material.map.repeat.set(64, 64); +- ground.material.map.wrapS = THREE.RepeatWrapping; +- ground.material.map.wrapT = THREE.RepeatWrapping; +- ground.material.map.colorSpace = THREE.SRGBColorSpace; ++ ground.material.map!.repeat.set(64, 64); ++ ground.material.map!.wrapS = THREE.RepeatWrapping; ++ ground.material.map!.wrapT = THREE.RepeatWrapping; ++ ground.material.map!.colorSpace = THREE.SRGBColorSpace; + // note that because the ground does not cast a shadow, .castShadow is left false + ground.receiveShadow = true; + +@@ -212,7 +212,7 @@ function onWindowResize() { + camera.updateProjectionMatrix(); + } + +-function onKeyDown(event) { ++function onKeyDown(event: KeyboardEvent) { + switch (event.code) { + case 'ArrowUp': + case 'KeyW': +@@ -241,7 +241,7 @@ function onKeyDown(event) { + } + } + +-function onKeyUp(event) { ++function onKeyUp(event: KeyboardEvent) { + switch (event.code) { + case 'ArrowUp': + case 'KeyW': +diff --git a/examples-testing/examples/webgl_loader_mdd.ts b/examples-testing/examples/webgl_loader_mdd.ts +index a1e76f0..4d3edb9 100644 +--- a/examples-testing/examples/webgl_loader_mdd.ts ++++ b/examples-testing/examples/webgl_loader_mdd.ts +@@ -2,7 +2,11 @@ import * as THREE from 'three'; + + import { MDDLoader } from 'three/addons/loaders/MDDLoader.js'; + +-let camera, scene, renderer, mixer, clock; ++let camera: THREE.PerspectiveCamera, ++ scene: THREE.Scene, ++ renderer: THREE.WebGLRenderer, ++ mixer: THREE.AnimationMixer, ++ clock: THREE.Clock; + + init(); + +diff --git a/examples-testing/examples/webgl_loader_obj.ts b/examples-testing/examples/webgl_loader_obj.ts +index 7307f84..44b29b6 100644 +--- a/examples-testing/examples/webgl_loader_obj.ts ++++ b/examples-testing/examples/webgl_loader_obj.ts +@@ -3,9 +3,9 @@ import * as THREE from 'three'; + import { OBJLoader } from 'three/addons/loaders/OBJLoader.js'; + import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + +-let camera, scene, renderer; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer; + +-let object; ++let object: THREE.Group; + + init(); + +@@ -28,7 +28,8 @@ function init() { + + function loadModel() { + object.traverse(function (child) { +- if (child.isMesh) child.material.map = texture; ++ if ((child as THREE.Mesh).isMesh) ++ (child as THREE.Mesh).material.map = texture; + }); + + object.position.y = -0.95; +@@ -48,10 +49,10 @@ function init() { + + // model + +- function onProgress(xhr) { ++ function onProgress(xhr: ProgressEvent) { + if (xhr.lengthComputable) { + const percentComplete = (xhr.loaded / xhr.total) * 100; +- console.log('model ' + Math.round(percentComplete, 2) + '% downloaded'); ++ console.log('model ' + percentComplete.toFixed(2) + '% downloaded'); + } + } + +diff --git a/examples-testing/examples/webgl_loader_obj_mtl.ts b/examples-testing/examples/webgl_loader_obj_mtl.ts +index 4dafab3..00b2416 100644 +--- a/examples-testing/examples/webgl_loader_obj_mtl.ts ++++ b/examples-testing/examples/webgl_loader_obj_mtl.ts +@@ -4,7 +4,7 @@ import { MTLLoader } from 'three/addons/loaders/MTLLoader.js'; + import { OBJLoader } from 'three/addons/loaders/OBJLoader.js'; + import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + +-let camera, scene, renderer; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer; + + init(); + animate(); +@@ -26,10 +26,10 @@ function init() { + + // model + +- const onProgress = function (xhr) { ++ const onProgress = function (xhr: ProgressEvent) { + if (xhr.lengthComputable) { + const percentComplete = (xhr.loaded / xhr.total) * 100; +- console.log(Math.round(percentComplete, 2) + '% downloaded'); ++ console.log(percentComplete.toFixed(2) + '% downloaded'); + } + }; + +diff --git a/examples-testing/examples/webgl_loader_pcd.ts b/examples-testing/examples/webgl_loader_pcd.ts +index d69e3fa..312ad67 100644 +--- a/examples-testing/examples/webgl_loader_pcd.ts ++++ b/examples-testing/examples/webgl_loader_pcd.ts +@@ -4,7 +4,7 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + import { PCDLoader } from 'three/addons/loaders/PCDLoader.js'; + import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; + +-let camera, scene, renderer; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer; + + init(); + render(); +diff --git a/examples-testing/examples/webgl_loader_pdb.ts b/examples-testing/examples/webgl_loader_pdb.ts +index 5514f50..c95d5c3 100644 +--- a/examples-testing/examples/webgl_loader_pdb.ts ++++ b/examples-testing/examples/webgl_loader_pdb.ts +@@ -5,10 +5,10 @@ import { PDBLoader } from 'three/addons/loaders/PDBLoader.js'; + import { CSS2DRenderer, CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js'; + import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; + +-let camera, scene, renderer, labelRenderer; +-let controls; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer, labelRenderer: CSS2DRenderer; ++let controls: TrackballControls; + +-let root; ++let root: THREE.Group; + + const MOLECULES = { + Ethanol: 'ethanol.pdb', +@@ -64,14 +64,14 @@ function init() { + renderer = new THREE.WebGLRenderer({ antialias: true }); + renderer.setPixelRatio(window.devicePixelRatio); + renderer.setSize(window.innerWidth, window.innerHeight); +- document.getElementById('container').appendChild(renderer.domElement); ++ document.getElementById('container')!.appendChild(renderer.domElement); + + labelRenderer = new CSS2DRenderer(); + labelRenderer.setSize(window.innerWidth, window.innerHeight); + labelRenderer.domElement.style.position = 'absolute'; + labelRenderer.domElement.style.top = '0px'; + labelRenderer.domElement.style.pointerEvents = 'none'; +- document.getElementById('container').appendChild(labelRenderer.domElement); ++ document.getElementById('container')!.appendChild(labelRenderer.domElement); + + // + +@@ -97,12 +97,12 @@ function init() { + + // + +-function loadMolecule(model) { ++function loadMolecule(model: string) { + const url = 'models/pdb/' + model; + + while (root.children.length > 0) { + const object = root.children[0]; +- object.parent.remove(object); ++ object.parent!.remove(object); + } + + loader.load(url, function (pdb) { +@@ -114,7 +114,7 @@ function loadMolecule(model) { + const sphereGeometry = new THREE.IcosahedronGeometry(1, 3); + + geometryAtoms.computeBoundingBox(); +- geometryAtoms.boundingBox.getCenter(offset).negate(); ++ geometryAtoms.boundingBox!.getCenter(offset).negate(); + + geometryAtoms.translate(offset.x, offset.y, offset.z); + geometryBonds.translate(offset.x, offset.y, offset.z); +@@ -171,7 +171,7 @@ function loadMolecule(model) { + start.multiplyScalar(75); + end.multiplyScalar(75); + +- const object = new THREE.Mesh(boxGeometry, new THREE.MeshPhongMaterial(0xffffff)); ++ const object = new THREE.Mesh(boxGeometry, new THREE.MeshPhongMaterial({ color: 0xffffff })); + object.position.copy(start); + object.position.lerp(end, 0.5); + object.scale.set(5, 5, start.distanceTo(end)); +diff --git a/examples-testing/examples/webgl_loader_ply.ts b/examples-testing/examples/webgl_loader_ply.ts +index f3cb460..7b8a122 100644 +--- a/examples-testing/examples/webgl_loader_ply.ts ++++ b/examples-testing/examples/webgl_loader_ply.ts +@@ -4,9 +4,9 @@ import Stats from 'three/addons/libs/stats.module.js'; + + import { PLYLoader } from 'three/addons/loaders/PLYLoader.js'; + +-let container, stats; ++let container: HTMLDivElement, stats: Stats; + +-let camera, cameraTarget, scene, renderer; ++let camera: THREE.PerspectiveCamera, cameraTarget: THREE.Vector3, scene: THREE.Scene, renderer: THREE.WebGLRenderer; + + init(); + animate(); +@@ -100,7 +100,7 @@ function init() { + window.addEventListener('resize', onWindowResize); + } + +-function addShadowedLight(x, y, z, color, intensity) { ++function addShadowedLight(x: number, y: number, z: number, color: number, intensity: number) { + const directionalLight = new THREE.DirectionalLight(color, intensity); + directionalLight.position.set(x, y, z); + scene.add(directionalLight); +diff --git a/examples-testing/examples/webgl_loader_svg.ts b/examples-testing/examples/webgl_loader_svg.ts +index 45361b9..f5d72d3 100644 +--- a/examples-testing/examples/webgl_loader_svg.ts ++++ b/examples-testing/examples/webgl_loader_svg.ts +@@ -3,14 +3,24 @@ import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; + import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + import { SVGLoader } from 'three/addons/loaders/SVGLoader.js'; + +-let renderer, scene, camera, gui, guiData; ++let renderer: THREE.WebGLRenderer, ++ scene: THREE.Scene, ++ camera: THREE.PerspectiveCamera, ++ gui: GUI, ++ guiData: { ++ currentURL: string; ++ drawFillShapes: boolean; ++ drawStrokes: boolean; ++ fillShapesWireframe: boolean; ++ strokesWireframe: boolean; ++ }; + + init(); + + // + + function init() { +- const container = document.getElementById('container'); ++ const container = document.getElementById('container')!; + + // + +@@ -100,7 +110,7 @@ function createGUI() { + } + } + +-function loadSVG(url) { ++function loadSVG(url: string) { + // + + scene = new THREE.Scene(); +@@ -126,12 +136,12 @@ function loadSVG(url) { + let renderOrder = 0; + + for (const path of data.paths) { +- const fillColor = path.userData.style.fill; ++ const fillColor = path.userData!.style.fill; + + if (guiData.drawFillShapes && fillColor !== undefined && fillColor !== 'none') { + const material = new THREE.MeshBasicMaterial({ + color: new THREE.Color().setStyle(fillColor), +- opacity: path.userData.style.fillOpacity, ++ opacity: path.userData!.style.fillOpacity, + transparent: true, + side: THREE.DoubleSide, + depthWrite: false, +@@ -149,12 +159,12 @@ function loadSVG(url) { + } + } + +- const strokeColor = path.userData.style.stroke; ++ const strokeColor = path.userData!.style.stroke; + + if (guiData.drawStrokes && strokeColor !== undefined && strokeColor !== 'none') { + const material = new THREE.MeshBasicMaterial({ + color: new THREE.Color().setStyle(strokeColor), +- opacity: path.userData.style.strokeOpacity, ++ opacity: path.userData!.style.strokeOpacity, + transparent: true, + side: THREE.DoubleSide, + depthWrite: false, +@@ -162,7 +172,7 @@ function loadSVG(url) { + }); + + for (const subPath of path.subPaths) { +- const geometry = SVGLoader.pointsToStroke(subPath.getPoints(), path.userData.style); ++ const geometry = SVGLoader.pointsToStroke(subPath.getPoints(), path.userData!.style); + + if (geometry) { + const mesh = new THREE.Mesh(geometry, material); +diff --git a/examples-testing/examples/webgl_loader_texture_dds.ts b/examples-testing/examples/webgl_loader_texture_dds.ts +index cac02b8..9f00f89 100644 +--- a/examples-testing/examples/webgl_loader_texture_dds.ts ++++ b/examples-testing/examples/webgl_loader_texture_dds.ts +@@ -2,8 +2,8 @@ import * as THREE from 'three'; + + import { DDSLoader } from 'three/addons/loaders/DDSLoader.js'; + +-let camera, scene, renderer; +-const meshes = []; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer; ++const meshes: THREE.Mesh[] = []; + + init(); + animate(); +@@ -107,7 +107,7 @@ function init() { + const material11 = new THREE.MeshBasicMaterial({ map: map9 }); + const material12 = new THREE.MeshBasicMaterial({ map: map10 }); + +- let mesh = new THREE.Mesh(new THREE.TorusGeometry(), material1); ++ let mesh: THREE.Mesh = new THREE.Mesh(new THREE.TorusGeometry(), material1); + mesh.position.x = -10; + mesh.position.y = -2; + scene.add(mesh); +diff --git a/examples-testing/examples/webgl_loader_texture_ktx.ts b/examples-testing/examples/webgl_loader_texture_ktx.ts +index 1bb33e0..6e66f98 100644 +--- a/examples-testing/examples/webgl_loader_texture_ktx.ts ++++ b/examples-testing/examples/webgl_loader_texture_ktx.ts +@@ -17,8 +17,8 @@ import { KTXLoader } from 'three/addons/loaders/KTXLoader.js'; + ASTC_4x4, ASTC8x8 - transparent textures with full alpha range + */ + +-let camera, scene, renderer; +-const meshes = []; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer; ++const meshes: THREE.Mesh[] = []; + + init(); + animate(); +@@ -51,14 +51,14 @@ function init() { + material1 = new THREE.MeshBasicMaterial({ + map: loader.load('textures/compressed/disturb_PVR2bpp.ktx'), + }); +- material1.map.colorSpace = THREE.SRGBColorSpace; ++ material1.map!.colorSpace = THREE.SRGBColorSpace; + material2 = new THREE.MeshBasicMaterial({ + map: loader.load('textures/compressed/lensflare_PVR4bpp.ktx'), + depthTest: false, + transparent: true, + side: THREE.DoubleSide, + }); +- material2.map.colorSpace = THREE.SRGBColorSpace; ++ material2.map!.colorSpace = THREE.SRGBColorSpace; + + meshes.push(new THREE.Mesh(geometry, material1)); + meshes.push(new THREE.Mesh(geometry, material2)); +@@ -68,14 +68,14 @@ function init() { + material1 = new THREE.MeshBasicMaterial({ + map: loader.load('textures/compressed/disturb_BC1.ktx'), + }); +- material1.map.colorSpace = THREE.SRGBColorSpace; ++ material1.map!.colorSpace = THREE.SRGBColorSpace; + material2 = new THREE.MeshBasicMaterial({ + map: loader.load('textures/compressed/lensflare_BC3.ktx'), + depthTest: false, + transparent: true, + side: THREE.DoubleSide, + }); +- material2.map.colorSpace = THREE.SRGBColorSpace; ++ material2.map!.colorSpace = THREE.SRGBColorSpace; + + meshes.push(new THREE.Mesh(geometry, material1)); + meshes.push(new THREE.Mesh(geometry, material2)); +@@ -93,14 +93,14 @@ function init() { + material1 = new THREE.MeshBasicMaterial({ + map: loader.load('textures/compressed/disturb_ASTC4x4.ktx'), + }); +- material1.map.colorSpace = THREE.SRGBColorSpace; ++ material1.map!.colorSpace = THREE.SRGBColorSpace; + material2 = new THREE.MeshBasicMaterial({ + map: loader.load('textures/compressed/lensflare_ASTC8x8.ktx'), + depthTest: false, + transparent: true, + side: THREE.DoubleSide, + }); +- material2.map.colorSpace = THREE.SRGBColorSpace; ++ material2.map!.colorSpace = THREE.SRGBColorSpace; + + meshes.push(new THREE.Mesh(geometry, material1)); + meshes.push(new THREE.Mesh(geometry, material2)); +diff --git a/examples-testing/examples/webgl_loader_texture_logluv.ts b/examples-testing/examples/webgl_loader_texture_logluv.ts +index 7f3fbd4..181e003 100644 +--- a/examples-testing/examples/webgl_loader_texture_logluv.ts ++++ b/examples-testing/examples/webgl_loader_texture_logluv.ts +@@ -8,7 +8,7 @@ const params = { + exposure: 2.0, + }; + +-let renderer, scene, camera; ++let renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.OrthographicCamera; + + init(); + +diff --git a/examples-testing/examples/webgl_loader_texture_rgbm.ts b/examples-testing/examples/webgl_loader_texture_rgbm.ts +index a882cdb..a7cbf3e 100644 +--- a/examples-testing/examples/webgl_loader_texture_rgbm.ts ++++ b/examples-testing/examples/webgl_loader_texture_rgbm.ts +@@ -8,7 +8,7 @@ const params = { + exposure: 2.0, + }; + +-let renderer, scene, camera; ++let renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.OrthographicCamera; + + init(); + +diff --git a/examples-testing/examples/webgl_loader_texture_tga.ts b/examples-testing/examples/webgl_loader_texture_tga.ts +index 0a78b0f..a8e16b1 100644 +--- a/examples-testing/examples/webgl_loader_texture_tga.ts ++++ b/examples-testing/examples/webgl_loader_texture_tga.ts +@@ -5,7 +5,7 @@ import Stats from 'three/addons/libs/stats.module.js'; + import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + import { TGALoader } from 'three/addons/loaders/TGALoader.js'; + +-let camera, scene, renderer, stats; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer, stats: Stats; + + init(); + animate(); +diff --git a/examples-testing/examples/webgl_loader_texture_tiff.ts b/examples-testing/examples/webgl_loader_texture_tiff.ts +index f097774..bb5b9d9 100644 +--- a/examples-testing/examples/webgl_loader_texture_tiff.ts ++++ b/examples-testing/examples/webgl_loader_texture_tiff.ts +@@ -2,7 +2,7 @@ import * as THREE from 'three'; + + import { TIFFLoader } from 'three/addons/loaders/TIFFLoader.js'; + +-let renderer, scene, camera; ++let renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.PerspectiveCamera; + + init(); + +diff --git a/examples-testing/examples/webgl_loader_tilt.ts b/examples-testing/examples/webgl_loader_tilt.ts +index 2a583c2..8e3e976 100644 +--- a/examples-testing/examples/webgl_loader_tilt.ts ++++ b/examples-testing/examples/webgl_loader_tilt.ts +@@ -3,7 +3,7 @@ import * as THREE from 'three'; + import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + import { TiltLoader } from 'three/addons/loaders/TiltLoader.js'; + +-let camera, scene, renderer; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer; + + init(); + +diff --git a/examples-testing/examples/webgl_loader_ttf.ts b/examples-testing/examples/webgl_loader_ttf.ts +index 0dd7f41..4d6cd14 100644 +--- a/examples-testing/examples/webgl_loader_ttf.ts ++++ b/examples-testing/examples/webgl_loader_ttf.ts +@@ -4,9 +4,9 @@ import { TTFLoader } from 'three/addons/loaders/TTFLoader.js'; + import { Font } from 'three/addons/loaders/FontLoader.js'; + import { TextGeometry } from 'three/addons/geometries/TextGeometry.js'; + +-let container; +-let camera, cameraTarget, scene, renderer; +-let group, textMesh1, textMesh2, textGeo, material; ++let container: HTMLDivElement; ++let camera: THREE.PerspectiveCamera, cameraTarget: THREE.Vector3, scene: THREE.Scene, renderer: THREE.WebGLRenderer; ++let group: THREE.Group, textMesh1: THREE.Mesh, textMesh2: THREE.Mesh, textGeo, material: THREE.MeshPhongMaterial; + let firstLetter = true; + + let text = 'three.js'; +@@ -17,7 +17,7 @@ const height = 20, + bevelThickness = 2, + bevelSize = 1.5; + +-let font = null; ++let font: Font | null = null; + const mirror = true; + + let targetRotation = 0; +@@ -108,7 +108,7 @@ function onWindowResize() { + renderer.setSize(window.innerWidth, window.innerHeight); + } + +-function onDocumentKeyDown(event) { ++function onDocumentKeyDown(event: KeyboardEvent) { + if (firstLetter) { + firstLetter = false; + text = ''; +@@ -128,7 +128,7 @@ function onDocumentKeyDown(event) { + } + } + +-function onDocumentKeyPress(event) { ++function onDocumentKeyPress(event: KeyboardEvent) { + const keyCode = event.which; + + // backspace +@@ -145,7 +145,7 @@ function onDocumentKeyPress(event) { + + function createText() { + textGeo = new TextGeometry(text, { +- font: font, ++ font: font!, + + size: size, + height: height, +@@ -159,7 +159,7 @@ function createText() { + textGeo.computeBoundingBox(); + textGeo.computeVertexNormals(); + +- const centerOffset = -0.5 * (textGeo.boundingBox.max.x - textGeo.boundingBox.min.x); ++ const centerOffset = -0.5 * (textGeo.boundingBox!.max.x - textGeo.boundingBox!.min.x); + + textMesh1 = new THREE.Mesh(textGeo, material); + +@@ -195,7 +195,7 @@ function refreshText() { + createText(); + } + +-function onPointerDown(event) { ++function onPointerDown(event: PointerEvent) { + if (event.isPrimary === false) return; + + pointerXOnPointerDown = event.clientX - windowHalfX; +@@ -205,7 +205,7 @@ function onPointerDown(event) { + document.addEventListener('pointerup', onPointerUp); + } + +-function onPointerMove(event) { ++function onPointerMove(event: PointerEvent) { + if (event.isPrimary === false) return; + + pointerX = event.clientX - windowHalfX; +@@ -214,7 +214,7 @@ function onPointerMove(event) { + } + + function onPointerUp() { +- if (event.isPrimary === false) return; ++ if ((event as PointerEvent).isPrimary === false) return; + + document.removeEventListener('pointermove', onPointerMove); + document.removeEventListener('pointerup', onPointerUp); +diff --git a/examples-testing/examples/webgl_loader_usdz.ts b/examples-testing/examples/webgl_loader_usdz.ts +index 63bebdb..3094cab 100644 +--- a/examples-testing/examples/webgl_loader_usdz.ts ++++ b/examples-testing/examples/webgl_loader_usdz.ts +@@ -4,7 +4,7 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + import { RGBELoader } from 'three/addons/loaders/RGBELoader.js'; + import { USDZLoader } from 'three/addons/loaders/USDZLoader.js'; + +-let camera, scene, renderer; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer; + + init(); + animate(); +diff --git a/examples-testing/examples/webgl_loader_vox.ts b/examples-testing/examples/webgl_loader_vox.ts +index b536ebd..1ec3b80 100644 +--- a/examples-testing/examples/webgl_loader_vox.ts ++++ b/examples-testing/examples/webgl_loader_vox.ts +@@ -3,7 +3,7 @@ import * as THREE from 'three'; + import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + import { VOXLoader, VOXMesh } from 'three/addons/loaders/VOXLoader.js'; + +-let camera, controls, scene, renderer; ++let camera: THREE.PerspectiveCamera, controls: OrbitControls, scene: THREE.Scene, renderer: THREE.WebGLRenderer; + + init(); + animate(); +diff --git a/examples-testing/examples/webgl_loader_vrml.ts b/examples-testing/examples/webgl_loader_vrml.ts +index e7a7914..0ec3170 100644 +--- a/examples-testing/examples/webgl_loader_vrml.ts ++++ b/examples-testing/examples/webgl_loader_vrml.ts +@@ -6,7 +6,12 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + import { VRMLLoader } from 'three/addons/loaders/VRMLLoader.js'; + import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; + +-let camera, scene, renderer, stats, controls, loader; ++let camera: THREE.PerspectiveCamera, ++ scene: THREE.Scene, ++ renderer: THREE.WebGLRenderer, ++ stats: Stats, ++ controls: OrbitControls, ++ loader: VRMLLoader; + + const params = { + asset: 'house', +@@ -28,7 +33,7 @@ const assets = [ + 'points', + ]; + +-let vrmlScene; ++let vrmlScene: THREE.Scene; + + init(); + animate(); +@@ -81,9 +86,14 @@ function init() { + gui.add(params, 'asset', assets).onChange(function (value) { + if (vrmlScene) { + vrmlScene.traverse(function (object) { +- if (object.material) object.material.dispose(); +- if (object.material && object.material.map) object.material.map.dispose(); +- if (object.geometry) object.geometry.dispose(); ++ if ((object as THREE.Mesh).material) ++ (object as THREE.Mesh).material.dispose(); ++ if ( ++ (object as THREE.Mesh).material && ++ (object as THREE.Mesh).material.map ++ ) ++ (object as THREE.Mesh).material.map!.dispose(); ++ if ((object as THREE.Mesh).geometry) (object as THREE.Mesh).geometry.dispose(); + }); + + scene.remove(vrmlScene); +@@ -93,7 +103,7 @@ function init() { + }); + } + +-function loadAsset(asset) { ++function loadAsset(asset: string) { + loader.load('models/vrml/' + asset + '.wrl', function (object) { + vrmlScene = object; + scene.add(object); +diff --git a/examples-testing/examples/webgl_loader_vtk.ts b/examples-testing/examples/webgl_loader_vtk.ts +index 503dd76..b7fa273 100644 +--- a/examples-testing/examples/webgl_loader_vtk.ts ++++ b/examples-testing/examples/webgl_loader_vtk.ts +@@ -5,9 +5,9 @@ import Stats from 'three/addons/libs/stats.module.js'; + import { TrackballControls } from 'three/addons/controls/TrackballControls.js'; + import { VTKLoader } from 'three/addons/loaders/VTKLoader.js'; + +-let stats; ++let stats: Stats; + +-let camera, controls, scene, renderer; ++let camera: THREE.PerspectiveCamera, controls: TrackballControls, scene: THREE.Scene, renderer: THREE.WebGLRenderer; + + init(); + animate(); +diff --git a/examples-testing/examples/webgl_loader_xyz.ts b/examples-testing/examples/webgl_loader_xyz.ts +index 28dd174..431c3de 100644 +--- a/examples-testing/examples/webgl_loader_xyz.ts ++++ b/examples-testing/examples/webgl_loader_xyz.ts +@@ -2,9 +2,9 @@ import * as THREE from 'three'; + + import { XYZLoader } from 'three/addons/loaders/XYZLoader.js'; + +-let camera, scene, renderer, clock; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer, clock: THREE.Clock; + +-let points; ++let points: THREE.Points; + + init(); + animate(); diff --git a/examples-testing/examples/webgl_materials_modified.ts b/examples-testing/examples/webgl_materials_modified.ts index 3708f65..4c1f793 100644 --- a/examples-testing/examples/webgl_materials_modified.ts diff --git a/examples-testing/index.js b/examples-testing/index.js index c0a7e35bb..be55c4626 100644 --- a/examples-testing/index.js +++ b/examples-testing/index.js @@ -75,66 +75,66 @@ const files = { 'webgl_lines_fat', 'webgl_lines_fat_raycasting', 'webgl_lines_fat_wireframe', - // 'webgl_loader_3dm', - // 'webgl_loader_3ds', - // 'webgl_loader_3mf', - // 'webgl_loader_3mf_materials', - // 'webgl_loader_amf', - // 'webgl_loader_bvh', - // 'webgl_loader_collada', + 'webgl_loader_3dm', + 'webgl_loader_3ds', + 'webgl_loader_3mf', + 'webgl_loader_3mf_materials', + 'webgl_loader_amf', + 'webgl_loader_bvh', + 'webgl_loader_collada', // 'webgl_loader_collada_kinematics', - // 'webgl_loader_collada_skinning', - // 'webgl_loader_draco', - // 'webgl_loader_fbx', - // 'webgl_loader_fbx_nurbs', - // 'webgl_loader_gcode', - // 'webgl_loader_gltf', - // 'webgl_loader_gltf_avif', - // 'webgl_loader_gltf_compressed', - // 'webgl_loader_gltf_instancing', - // 'webgl_loader_gltf_iridescence', - // 'webgl_loader_gltf_lights', - // 'webgl_loader_gltf_sheen', - // 'webgl_loader_gltf_transmission', + 'webgl_loader_collada_skinning', + 'webgl_loader_draco', + 'webgl_loader_fbx', + 'webgl_loader_fbx_nurbs', + 'webgl_loader_gcode', + 'webgl_loader_gltf', + 'webgl_loader_gltf_avif', + 'webgl_loader_gltf_compressed', + 'webgl_loader_gltf_instancing', + 'webgl_loader_gltf_iridescence', + 'webgl_loader_gltf_lights', + 'webgl_loader_gltf_sheen', + 'webgl_loader_gltf_transmission', // 'webgl_loader_gltf_variants', - // 'webgl_loader_gltf_anisotropy', + 'webgl_loader_gltf_anisotropy', // 'webgl_loader_ifc', - // 'webgl_loader_imagebitmap', - // 'webgl_loader_kmz', + 'webgl_loader_imagebitmap', + 'webgl_loader_kmz', // 'webgl_loader_ldraw', - // 'webgl_loader_lwo', + 'webgl_loader_lwo', // 'webgl_loader_md2', - // 'webgl_loader_md2_control', - // 'webgl_loader_mdd', + 'webgl_loader_md2_control', + 'webgl_loader_mdd', // 'webgl_loader_mmd', // 'webgl_loader_mmd_pose', // 'webgl_loader_mmd_audio', // 'webgl_loader_nrrd', - // 'webgl_loader_obj', - // 'webgl_loader_obj_mtl', - // 'webgl_loader_pcd', - // 'webgl_loader_pdb', - // 'webgl_loader_ply', + 'webgl_loader_obj', + 'webgl_loader_obj_mtl', + 'webgl_loader_pcd', + 'webgl_loader_pdb', + 'webgl_loader_ply', // 'webgl_loader_stl', - // 'webgl_loader_svg', - // 'webgl_loader_tilt', - // 'webgl_loader_texture_dds', + 'webgl_loader_svg', + 'webgl_loader_tilt', + 'webgl_loader_texture_dds', // 'webgl_loader_texture_exr', // 'webgl_loader_texture_hdr', - // 'webgl_loader_texture_ktx', + 'webgl_loader_texture_ktx', // 'webgl_loader_texture_ktx2', - // 'webgl_loader_texture_logluv', + 'webgl_loader_texture_logluv', // 'webgl_loader_texture_lottie', // 'webgl_loader_texture_pvrtc', - // 'webgl_loader_texture_rgbm', - // 'webgl_loader_texture_tga', - // 'webgl_loader_texture_tiff', - // 'webgl_loader_ttf', - // 'webgl_loader_usdz', - // 'webgl_loader_vox', - // 'webgl_loader_vrml', - // 'webgl_loader_vtk', - // 'webgl_loader_xyz', + 'webgl_loader_texture_rgbm', + 'webgl_loader_texture_tga', + 'webgl_loader_texture_tiff', + 'webgl_loader_ttf', + 'webgl_loader_usdz', + 'webgl_loader_vox', + 'webgl_loader_vrml', + 'webgl_loader_vtk', + 'webgl_loader_xyz', // 'webgl_lod', // 'webgl_marchingcubes', // 'webgl_materials_alphahash', diff --git a/types/three/OTHER_FILES.txt b/types/three/OTHER_FILES.txt index 071b15549..e31c4e456 100644 --- a/types/three/OTHER_FILES.txt +++ b/types/three/OTHER_FILES.txt @@ -65,6 +65,7 @@ examples/jsm/loaders/3MFLoader.d.ts examples/jsm/loaders/AMFLoader.d.ts examples/jsm/loaders/BVHLoader.d.ts examples/jsm/loaders/ColladaLoader.d.ts +examples/jsm/loaders/DDSLoader.d.ts examples/jsm/loaders/EXRLoader.d.ts examples/jsm/loaders/FBXLoader.d.ts examples/jsm/loaders/GCodeLoader.d.ts @@ -78,13 +79,18 @@ examples/jsm/loaders/LWOLoader.d.ts examples/jsm/loaders/MD2Loader.d.ts examples/jsm/loaders/MDDLoader.d.ts examples/jsm/loaders/NRRDLoader.d.ts +examples/jsm/loaders/PCDLoader.d.ts examples/jsm/loaders/PDBLoader.d.ts examples/jsm/loaders/PLYLoader.d.ts examples/jsm/loaders/PVRLoader.d.ts examples/jsm/loaders/STLLoader.d.ts +examples/jsm/loaders/SVGLoader.d.ts examples/jsm/loaders/TDSLoader.d.ts +examples/jsm/loaders/TGALoader.d.ts examples/jsm/loaders/TIFFLoader.d.ts examples/jsm/loaders/TiltLoader.d.ts +examples/jsm/loaders/TTFLoader.d.ts +examples/jsm/loaders/USDZLoader.d.ts examples/jsm/loaders/VOXLoader.d.ts examples/jsm/loaders/VRMLLoader.d.ts examples/jsm/loaders/VTKLoader.d.ts diff --git a/types/three/examples/jsm/libs/lil-gui.module.min.d.ts b/types/three/examples/jsm/libs/lil-gui.module.min.d.ts index e40b04c1c..e7d4f4557 100644 --- a/types/three/examples/jsm/libs/lil-gui.module.min.d.ts +++ b/types/three/examples/jsm/libs/lil-gui.module.min.d.ts @@ -340,7 +340,7 @@ export class Controller, K extends keyof T = keyof T /** * The object this controller will modify. */ - object: object; + object: T; /** * The name of the property to control. */ @@ -398,12 +398,12 @@ export class Controller, K extends keyof T = keyof T * console.assert( this === controller ); * } ); */ - onChange(callback: (value: T[K]) => void): this; + onChange(callback: (this: this, value: T[K]) => void): this; /** * Used to access the function bound to `onChange` events. Don't modify this value directly. * Use the `controller.onChange( callback )` method instead. */ - _onChange: (value: T[K]) => void; + _onChange: (this: this, value: T[K]) => void; /** * Calls the onChange methods of this controller and its parent GUI. */ @@ -420,12 +420,12 @@ export class Controller, K extends keyof T = keyof T * console.assert( this === controller ); * } ); */ - onFinishChange(callback: (value: T[K]) => void): this; + onFinishChange(callback: (this: this, value: T[K]) => void): this; /** * Used to access the function bound to `onFinishChange` events. Don't modify this value * directly. Use the `controller.onFinishChange( callback )` method instead. */ - _onFinishChange: (value: T[K]) => void; + _onFinishChange: (this: this, value: T[K]) => void; /** * Should be called by Controller when its widgets lose focus. */ diff --git a/types/three/examples/jsm/loaders/LogLuvLoader.d.ts b/types/three/examples/jsm/loaders/LogLuvLoader.d.ts index ca88815f5..2b3b39bdd 100644 --- a/types/three/examples/jsm/loaders/LogLuvLoader.d.ts +++ b/types/three/examples/jsm/loaders/LogLuvLoader.d.ts @@ -11,7 +11,7 @@ export interface LogLuv { export class LogLuvLoader extends DataTextureLoader { type: TextureDataType; - constructor(manager: LoadingManager); + constructor(manager?: LoadingManager); parse(buffer: Iterable): LogLuv; diff --git a/types/three/examples/jsm/loaders/PCDLoader.d.ts b/types/three/examples/jsm/loaders/PCDLoader.d.ts index 4974cd935..dc2c009d6 100644 --- a/types/three/examples/jsm/loaders/PCDLoader.d.ts +++ b/types/three/examples/jsm/loaders/PCDLoader.d.ts @@ -1,8 +1,8 @@ -import { Points, Loader, LoadingManager } from '../../../src/Three.js'; +import { BufferGeometry, Loader, LoadingManager, Points, PointsMaterial } from '../../../src/Three.js'; -export class PCDLoader extends Loader { +export class PCDLoader extends Loader> { constructor(manager?: LoadingManager); littleEndian: boolean; - parse(data: ArrayBuffer | string): Points; + parse(data: ArrayBuffer | string): Points; } diff --git a/types/three/examples/jsm/misc/MD2CharacterComplex.d.ts b/types/three/examples/jsm/misc/MD2CharacterComplex.d.ts index 9c91c4bee..16366f8e0 100644 --- a/types/three/examples/jsm/misc/MD2CharacterComplex.d.ts +++ b/types/three/examples/jsm/misc/MD2CharacterComplex.d.ts @@ -14,7 +14,15 @@ export class MD2CharacterComplex { root: Object3D; meshBody: Mesh | null; meshWeapon: Mesh | null; - controls: null; + controls: { + crouch?: boolean | undefined; + jump?: boolean | undefined; + attack?: boolean | undefined; + moveForward?: boolean | undefined; + moveBackward?: boolean | undefined; + moveLeft?: boolean | undefined; + moveRight?: boolean | undefined; + } | null; skinsBody: Texture[]; skinsWeapon: Texture[]; weapons: Mesh[]; diff --git a/types/three/test/integration/three-examples/webgl_loader_gltf.ts b/types/three/test/integration/three-examples/webgl_loader_gltf.ts deleted file mode 100644 index d91c15f9f..000000000 --- a/types/three/test/integration/three-examples/webgl_loader_gltf.ts +++ /dev/null @@ -1,72 +0,0 @@ -import * as THREE from 'three'; - -import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; -import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; -import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'; - -let camera: THREE.PerspectiveCamera; -let scene: THREE.Scene; -let renderer: THREE.WebGLRenderer; - -init(); -render(); - -function init() { - const container = document.createElement('div'); - document.body.appendChild(container); - - camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.25, 20); - camera.position.set(-1.8, 0.6, 2.7); - - scene = new THREE.Scene(); - - new RGBELoader().setPath('textures/equirectangular/').load('royal_esplanade_1k.hdr', texture => { - texture.mapping = THREE.EquirectangularReflectionMapping; - - scene.background = texture; - scene.environment = texture; - - render(); - - // model - - const loader = new GLTFLoader().setPath('models/gltf/DamagedHelmet/glTF/'); - loader.load('DamagedHelmet.gltf', gltf => { - scene.add(gltf.scene); - - render(); - }); - }); - - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - renderer.toneMapping = THREE.ACESFilmicToneMapping; - renderer.toneMappingExposure = 1; - renderer.outputEncoding = THREE.sRGBEncoding; - container.appendChild(renderer.domElement); - - const controls = new OrbitControls(camera, renderer.domElement); - controls.addEventListener('change', render); // use if there is no animation loop - controls.minDistance = 2; - controls.maxDistance = 10; - controls.target.set(0, 0, -0.2); - controls.update(); - - window.addEventListener('resize', onWindowResize); -} - -function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); - - renderer.setSize(window.innerWidth, window.innerHeight); - - render(); -} - -// - -function render() { - renderer.render(scene, camera); -} diff --git a/types/three/test/integration/three-examples/webgl_loader_obj_mtl.ts b/types/three/test/integration/three-examples/webgl_loader_obj_mtl.ts deleted file mode 100644 index 0abb5ebba..000000000 --- a/types/three/test/integration/three-examples/webgl_loader_obj_mtl.ts +++ /dev/null @@ -1,115 +0,0 @@ -import * as THREE from 'three'; - -import { DDSLoader } from 'three/examples/jsm/loaders/DDSLoader'; -import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'; -import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'; - -let camera: THREE.PerspectiveCamera; -let scene: THREE.Scene; -let renderer: THREE.WebGLRenderer; - -let mouseX = 0; -let mouseY = 0; - -let windowHalfX = window.innerWidth / 2; -let windowHalfY = window.innerHeight / 2; - -init(); -animate(); - -function init() { - const container = document.createElement('div'); - document.body.appendChild(container); - - camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000); - camera.position.z = 250; - - // scene - - scene = new THREE.Scene(); - - const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4); - scene.add(ambientLight); - - const pointLight = new THREE.PointLight(0xffffff, 0.8); - camera.add(pointLight); - scene.add(camera); - - // model - - const onProgress = (xhr: ProgressEvent) => { - if (xhr.lengthComputable) { - const percentComplete = (xhr.loaded / xhr.total) * 100; - console.log(Math.round(percentComplete) + '% downloaded'); - } - }; - - const onError = () => {}; - - const manager = new THREE.LoadingManager(); - manager.addHandler(/\.dds$/i, new DDSLoader()); - - // comment in the following line and import TGALoader if your asset uses TGA textures - // manager.addHandler( /\.tga$/i, new TGALoader() ); - - new MTLLoader(manager).setPath('models/obj/male02/').load('male02_dds.mtl', materials => { - materials.preload(); - - new OBJLoader(manager) - .setMaterials(materials) - .setPath('models/obj/male02/') - .load( - 'male02.obj', - object => { - object.position.y = -95; - scene.add(object); - }, - onProgress, - onError, - ); - }); - - // - - renderer = new THREE.WebGLRenderer(); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - container.appendChild(renderer.domElement); - - document.addEventListener('mousemove', onDocumentMouseMove); - - // - - window.addEventListener('resize', onWindowResize); -} - -function onWindowResize() { - windowHalfX = window.innerWidth / 2; - windowHalfY = window.innerHeight / 2; - - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); - - renderer.setSize(window.innerWidth, window.innerHeight); -} - -function onDocumentMouseMove(event: MouseEvent) { - mouseX = (event.clientX - windowHalfX) / 2; - mouseY = (event.clientY - windowHalfY) / 2; -} - -// - -function animate() { - requestAnimationFrame(animate); - render(); -} - -function render() { - camera.position.x += (mouseX - camera.position.x) * 0.05; - camera.position.y += (-mouseY - camera.position.y) * 0.05; - - camera.lookAt(scene.position); - - renderer.render(scene, camera); -} diff --git a/types/three/test/integration/three-examples/webgl_loader_pcd.ts b/types/three/test/integration/three-examples/webgl_loader_pcd.ts deleted file mode 100644 index 48fbc3595..000000000 --- a/types/three/test/integration/three-examples/webgl_loader_pcd.ts +++ /dev/null @@ -1,100 +0,0 @@ -import * as THREE from 'three'; - -import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; -import { PCDLoader } from 'three/examples/jsm/loaders/PCDLoader.js'; - -let camera: THREE.PerspectiveCamera; -let scene: THREE.Scene; -let renderer: THREE.WebGLRenderer; - -init(); -render(); - -function init() { - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - document.body.appendChild(renderer.domElement); - - scene = new THREE.Scene(); - - camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.01, 40); - camera.position.set(0, 0, 1); - scene.add(camera); - - const controls = new OrbitControls(camera, renderer.domElement); - controls.addEventListener('change', render); // use if there is no animation loop - controls.minDistance = 0.5; - controls.maxDistance = 10; - - // scene.add( new THREE.AxesHelper( 1 ) ); - - const loader = new PCDLoader(); - loader.load('./models/pcd/binary/Zaghetto.pcd', points => { - points.geometry.center(); - points.geometry.rotateX(Math.PI); - points.name = 'Zaghetto.pcd'; - scene.add(points); - - render(); - }); - pcdLoaderLoad(loader, './models/pcd/binary/Zaghetto.pcd', points => { - points.geometry.center(); - points.geometry.rotateX(Math.PI); - points.name = 'Zaghetto.pcd'; - scene.add(points); - - render(); - }); - - const file = './models/pcd/binary/Zaghetto.pcd'; - const reader = new FileReader(); - - window.addEventListener('resize', onWindowResize); -} - -// Mostly copied from PCDLoader.js to exercise the parse() function -function pcdLoaderLoad( - pcdLoader: PCDLoader, - url: string, - onLoad: (points: THREE.Points) => void, - onProgress?: (event: ProgressEvent) => void, - onError?: (event: unknown) => void, -) { - const scope = pcdLoader; - - const loader = new THREE.FileLoader(scope.manager); - loader.setPath(scope.path); - loader.setResponseType('arraybuffer'); - loader.setRequestHeader(scope.requestHeader); - loader.setWithCredentials(scope.withCredentials); - loader.load( - url, - data => { - try { - onLoad(scope.parse(data)); - } catch (e) { - if (onError) { - onError(e); - } else { - console.error(e); - } - - scope.manager.itemError(url); - } - }, - onProgress, - onError, - ); -} - -function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); - - renderer.setSize(window.innerWidth, window.innerHeight); -} - -function render() { - renderer.render(scene, camera); -} diff --git a/types/three/test/integration/three-examples/webgl_loader_svg.ts b/types/three/test/integration/three-examples/webgl_loader_svg.ts deleted file mode 100644 index ba57d284f..000000000 --- a/types/three/test/integration/three-examples/webgl_loader_svg.ts +++ /dev/null @@ -1,149 +0,0 @@ -import * as THREE from 'three'; - -import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; -import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader'; - -let renderer: THREE.WebGLRenderer; -let scene: THREE.Scene; -let camera: THREE.PerspectiveCamera; -let guiData: { - currentURL: string; - drawFillShapes: boolean; - drawStrokes: boolean; - fillShapesWireframe: boolean; - strokesWireframe: boolean; -}; - -init(); -animate(); - -// - -function init() { - const container = document.getElementById('container') as HTMLElement; - - // - - camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000); - camera.position.set(0, 0, 200); - - // - - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - container.appendChild(renderer.domElement); - - // - - const controls = new OrbitControls(camera, renderer.domElement); - controls.screenSpacePanning = true; - - // - - window.addEventListener('resize', onWindowResize); - - guiData = { - currentURL: 'models/svg/tiger.svg', - drawFillShapes: true, - drawStrokes: true, - fillShapesWireframe: false, - strokesWireframe: false, - }; - - loadSVG(guiData.currentURL); -} - -function loadSVG(url: string) { - // - - scene = new THREE.Scene(); - scene.background = new THREE.Color(0xb0b0b0); - - // - - const helper = new THREE.GridHelper(160, 10); - helper.rotation.x = Math.PI / 2; - scene.add(helper); - - // - - const loader = new SVGLoader(); - - loader.load(url, data => { - const paths = data.paths; - - const group = new THREE.Group(); - group.scale.multiplyScalar(0.25); - group.position.x = -70; - group.position.y = 70; - group.scale.y *= -1; - - paths.forEach(path => { - const fillColor = path.userData!.style.fill; - if (guiData.drawFillShapes && fillColor !== undefined && fillColor !== 'none') { - const material = new THREE.MeshBasicMaterial({ - color: new THREE.Color().setStyle(fillColor), - opacity: path.userData!.style.fillOpacity, - transparent: path.userData!.style.fillOpacity < 1, - side: THREE.DoubleSide, - depthWrite: false, - wireframe: guiData.fillShapesWireframe, - }); - - const shapes = SVGLoader.createShapes(path); - - shapes.forEach(shape => { - const geometry = new THREE.ShapeGeometry(shape); - const mesh = new THREE.Mesh(geometry, material); - - group.add(mesh); - }); - } - - const strokeColor = path.userData!.style.stroke; - - if (guiData.drawStrokes && strokeColor !== undefined && strokeColor !== 'none') { - const material = new THREE.MeshBasicMaterial({ - color: new THREE.Color().setStyle(strokeColor), - opacity: path.userData!.style.strokeOpacity, - transparent: path.userData!.style.strokeOpacity < 1, - side: THREE.DoubleSide, - depthWrite: false, - wireframe: guiData.strokesWireframe, - }); - - for (let j = 0, jl = path.subPaths.length; j < jl; j++) { - const subPath = path.subPaths[j]; - - const geometry = SVGLoader.pointsToStroke(subPath.getPoints(), path.userData!.style); - - if (geometry) { - const mesh = new THREE.Mesh(geometry, material); - - group.add(mesh); - } - } - } - }); - - scene.add(group); - }); -} - -function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); - - renderer.setSize(window.innerWidth, window.innerHeight); -} - -function animate() { - requestAnimationFrame(animate); - - render(); -} - -function render() { - renderer.render(scene, camera); -} diff --git a/types/three/test/integration/three-examples/webgl_loader_texture_tga.ts b/types/three/test/integration/three-examples/webgl_loader_texture_tga.ts deleted file mode 100644 index 6091d0a6b..000000000 --- a/types/three/test/integration/three-examples/webgl_loader_texture_tga.ts +++ /dev/null @@ -1,88 +0,0 @@ -import * as THREE from 'three'; - -import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; -import { TGALoader } from 'three/examples/jsm/loaders/TGALoader'; - -let camera: THREE.PerspectiveCamera; -let scene: THREE.Scene; -let renderer: THREE.WebGLRenderer; - -init(); -animate(); - -function init() { - const container = document.createElement('div'); - document.body.appendChild(container); - - camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); - camera.position.set(0, 50, 250); - - scene = new THREE.Scene(); - - // - - const loader = new TGALoader(); - const geometry = new THREE.BoxGeometry(50, 50, 50); - - // add box 1 - grey8 texture - - const texture1 = loader.load('textures/crate_grey8.tga'); - const material1 = new THREE.MeshPhongMaterial({ color: 0xffffff, map: texture1 }); - - const mesh1 = new THREE.Mesh(geometry, material1); - mesh1.position.x = -50; - - scene.add(mesh1); - - // add box 2 - tga texture - - const texture2 = loader.load('textures/crate_color8.tga'); - const material2 = new THREE.MeshPhongMaterial({ color: 0xffffff, map: texture2 }); - - const mesh2 = new THREE.Mesh(geometry, material2); - mesh2.position.x = 50; - - scene.add(mesh2); - - // - - const ambientLight = new THREE.AmbientLight(0xffffff, 0.4); - scene.add(ambientLight); - - const light = new THREE.DirectionalLight(0xffffff, 1); - light.position.set(1, 1, 1); - scene.add(light); - - // - - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - container.appendChild(renderer.domElement); - - // - - const controls = new OrbitControls(camera, renderer.domElement); - controls.enableZoom = false; - - // - - window.addEventListener('resize', onWindowResize); -} - -function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); - - renderer.setSize(window.innerWidth, window.innerHeight); -} - -function animate() { - requestAnimationFrame(animate); - - render(); -} - -function render() { - renderer.render(scene, camera); -} diff --git a/types/three/test/integration/three-examples/webgl_loader_ttf.ts b/types/three/test/integration/three-examples/webgl_loader_ttf.ts deleted file mode 100644 index 49bb6acc1..000000000 --- a/types/three/test/integration/three-examples/webgl_loader_ttf.ts +++ /dev/null @@ -1,203 +0,0 @@ -import * as THREE from 'three'; - -import { TTFLoader } from 'three/examples/jsm/loaders/TTFLoader'; -import { Font } from 'three/examples/jsm/loaders/FontLoader'; -import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'; - -let camera: THREE.PerspectiveCamera; -let cameraTarget: THREE.Vector3; -let scene: THREE.Scene; -let renderer: THREE.WebGLRenderer; -let group: THREE.Group; -let textMesh1: THREE.Mesh; -let textMesh2: THREE.Mesh; -let textGeo: TextGeometry; -let material: THREE.MeshPhongMaterial; -let firstLetter = true; - -let text = 'three'; -const height = 20; -const size = 70; -const hover = 30; -const curveSegments = 4; -const bevelThickness = 2; -const bevelSize = 1.5; - -let font: Font | null = null; -const mirror = true; - -const targetRotation = 0; - -init(); -animate(); - -function init() { - const container = document.createElement('div'); - document.body.appendChild(container); - - // CAMERA - - camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 1500); - camera.position.set(0, 400, 700); - - cameraTarget = new THREE.Vector3(0, 150, 0); - - // SCENE - - scene = new THREE.Scene(); - scene.background = new THREE.Color(0x000000); - scene.fog = new THREE.Fog(0x000000, 250, 1400); - - // LIGHTS - - const dirLight = new THREE.DirectionalLight(0xffffff, 0.125); - dirLight.position.set(0, 0, 1).normalize(); - scene.add(dirLight); - - const pointLight = new THREE.PointLight(0xffffff, 1.5); - pointLight.position.set(0, 100, 90); - pointLight.color.setHSL(Math.random(), 1, 0.5); - scene.add(pointLight); - - material = new THREE.MeshPhongMaterial({ color: 0xffffff, flatShading: true }); - - group = new THREE.Group(); - group.position.y = 100; - - scene.add(group); - - const loader = new TTFLoader(); - - loader.load('fonts/ttf/kenpixel.ttf', json => { - font = new Font(json); - createText(); - }); - - const plane = new THREE.Mesh( - new THREE.PlaneGeometry(10000, 10000), - new THREE.MeshBasicMaterial({ color: 0xffffff, opacity: 0.5, transparent: true }), - ); - plane.position.y = 100; - plane.rotation.x = -Math.PI / 2; - scene.add(plane); - - // RENDERER - - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - container.appendChild(renderer.domElement); - - // EVENTS - - container.style.touchAction = 'none'; - - document.addEventListener('keypress', onDocumentKeyPress); - document.addEventListener('keydown', onDocumentKeyDown); - - window.addEventListener('resize', onWindowResize); -} - -function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); - - renderer.setSize(window.innerWidth, window.innerHeight); -} - -function onDocumentKeyDown(event: KeyboardEvent) { - if (firstLetter) { - firstLetter = false; - text = ''; - } - - const keyCode = event.keyCode; - - // backspace - - if (keyCode === 8) { - event.preventDefault(); - - text = text.substring(0, text.length - 1); - refreshText(); - - return false; - } -} - -function onDocumentKeyPress(event: KeyboardEvent) { - const keyCode = event.which; - - // backspace - - if (keyCode === 8) { - event.preventDefault(); - } else { - const ch = String.fromCharCode(keyCode); - text += ch; - - refreshText(); - } -} - -function createText() { - textGeo = new TextGeometry(text, { - font: font!, - size, - height, - curveSegments, - bevelThickness, - bevelSize, - bevelEnabled: true, - }); - - textGeo.computeBoundingBox(); - textGeo.computeVertexNormals(); - - const centerOffset = -0.5 * (textGeo.boundingBox!.max.x - textGeo.boundingBox!.min.x); - - textMesh1 = new THREE.Mesh(textGeo, material); - - textMesh1.position.x = centerOffset; - textMesh1.position.y = hover; - textMesh1.position.z = 0; - - textMesh1.rotation.x = 0; - textMesh1.rotation.y = Math.PI * 2; - - group.add(textMesh1); - - if (mirror) { - textMesh2 = new THREE.Mesh(textGeo, material); - - textMesh2.position.x = centerOffset; - textMesh2.position.y = -hover; - textMesh2.position.z = height; - - textMesh2.rotation.x = Math.PI; - textMesh2.rotation.y = Math.PI * 2; - - group.add(textMesh2); - } -} - -function refreshText() { - group.remove(textMesh1); - if (mirror) group.remove(textMesh2); - - if (!text) return; - - createText(); -} - -// - -function animate() { - requestAnimationFrame(animate); - - group.rotation.y += (targetRotation - group.rotation.y) * 0.05; - - camera.lookAt(cameraTarget); - - renderer.render(scene, camera); -} diff --git a/types/three/test/integration/three-examples/webgl_loader_usdz.ts b/types/three/test/integration/three-examples/webgl_loader_usdz.ts deleted file mode 100644 index c83e2f1b8..000000000 --- a/types/three/test/integration/three-examples/webgl_loader_usdz.ts +++ /dev/null @@ -1,56 +0,0 @@ -import * as THREE from 'three'; - -import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; -import { USDZLoader } from 'three/examples/jsm/loaders/USDZLoader'; - -let camera: THREE.PerspectiveCamera; -let scene: THREE.Scene; -let renderer: THREE.WebGLRenderer; - -init(); -animate(); - -function init() { - camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100); - camera.position.set(0, 0.75, -1); - - scene = new THREE.Scene(); - scene.background = new THREE.Color(0xeeeeee); - - scene.add(new THREE.GridHelper(2, 4)); - - const light = new THREE.DirectionalLight(0xffffff); - light.position.set(1, 1, 1); - scene.add(light); - - const light2 = new THREE.HemisphereLight(0xffffff, 0x888888); - scene.add(light2); - - // renderer - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - document.body.appendChild(renderer.domElement); - - new OrbitControls(camera, renderer.domElement); - - const loader = new USDZLoader(); - loader.load('models/usdz/saeukkang.usdz', usd => { - scene.add(usd); - }); - - window.addEventListener('resize', onWindowResize); -} - -function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); - - renderer.setSize(window.innerWidth, window.innerHeight); -} - -function animate() { - requestAnimationFrame(animate); - - renderer.render(scene, camera); -} diff --git a/types/three/tsconfig.json b/types/three/tsconfig.json index ca437384c..e6876ca10 100644 --- a/types/three/tsconfig.json +++ b/types/three/tsconfig.json @@ -25,15 +25,8 @@ "test/integration/three-examples/webgl2_rendertarget_texture2darray.ts", "test/integration/three-examples/webgl_camera_array.ts", "test/integration/three-examples/webgl_camera_cinematic.ts", - "test/integration/three-examples/webgl_loader_gltf.ts", "test/integration/three-examples/webgl_loader_ldraw.ts", "test/integration/three-examples/webgl_loader_mmd.ts", - "test/integration/three-examples/webgl_loader_obj_mtl.ts", - "test/integration/three-examples/webgl_loader_pcd.ts", - "test/integration/three-examples/webgl_loader_svg.ts", - "test/integration/three-examples/webgl_loader_texture_tga.ts", - "test/integration/three-examples/webgl_loader_ttf.ts", - "test/integration/three-examples/webgl_loader_usdz.ts", "test/integration/three-examples/webgl_marchingcubes.ts", "test/integration/three-examples/webgl_materials_channels.ts", "test/integration/three-examples/webgl_materials_envmaps_groundprojected.ts",