diff --git a/examples-testing/changes.patch b/examples-testing/changes.patch index 50fb3c658..73f006660 100644 --- a/examples-testing/changes.patch +++ b/examples-testing/changes.patch @@ -4608,7 +4608,7 @@ index 9a198325..e47d7b66 100644 if (shape.holes && shape.holes.length > 0) { for (let j = 0; j < shape.holes.length; j++) { diff --git a/examples-testing/examples/webgl_gpgpu_birds.ts b/examples-testing/examples/webgl_gpgpu_birds.ts -index 20a5e0d9..5bb4ed25 100644 +index 20a5e0d9..e9293211 100644 --- a/examples-testing/examples/webgl_gpgpu_birds.ts +++ b/examples-testing/examples/webgl_gpgpu_birds.ts @@ -3,7 +3,7 @@ import * as THREE from 'three'; @@ -4689,24 +4689,28 @@ index 20a5e0d9..5bb4ed25 100644 side: THREE.DoubleSide, }); -@@ -231,7 +231,7 @@ function initBirds() { +@@ -231,8 +231,8 @@ function initBirds() { scene.add(birdMesh); } -function fillPositionTexture(texture) { +- const theArray = texture.image.data; +function fillPositionTexture(texture: THREE.DataTexture) { - const theArray = texture.image.data; ++ const theArray = texture.image.data as Float32Array; for (let k = 0, kl = theArray.length; k < kl; k += 4) { -@@ -246,7 +246,7 @@ function fillPositionTexture(texture) { + const x = Math.random() * BOUNDS - BOUNDS_HALF; +@@ -246,8 +246,8 @@ function fillPositionTexture(texture) { } } -function fillVelocityTexture(texture) { +- const theArray = texture.image.data; +function fillVelocityTexture(texture: THREE.DataTexture) { - const theArray = texture.image.data; ++ const theArray = texture.image.data as Float32Array; for (let k = 0, kl = theArray.length; k < kl; k += 4) { + const x = Math.random() - 0.5; @@ -271,7 +271,7 @@ function onWindowResize() { renderer.setSize(window.innerWidth, window.innerHeight); } @@ -4717,7 +4721,7 @@ index 20a5e0d9..5bb4ed25 100644 mouseX = event.clientX - windowHalfX; diff --git a/examples-testing/examples/webgl_gpgpu_birds_gltf.ts b/examples-testing/examples/webgl_gpgpu_birds_gltf.ts -index 3176b95a..df84fb25 100644 +index 3176b95a..2463484a 100644 --- a/examples-testing/examples/webgl_gpgpu_birds_gltf.ts +++ b/examples-testing/examples/webgl_gpgpu_birds_gltf.ts @@ -2,7 +2,7 @@ import * as THREE from 'three'; @@ -4863,24 +4867,28 @@ index 3176b95a..df84fb25 100644 const geometry = BirdGeometry; const m = new THREE.MeshStandardMaterial({ -@@ -331,7 +344,7 @@ function initBirds(effectController) { +@@ -331,8 +344,8 @@ function initBirds(effectController) { scene.add(birdMesh); } -function fillPositionTexture(texture) { +- const theArray = texture.image.data; +function fillPositionTexture(texture: THREE.DataTexture) { - const theArray = texture.image.data; ++ const theArray = texture.image.data as Float32Array; for (let k = 0, kl = theArray.length; k < kl; k += 4) { -@@ -346,7 +359,7 @@ function fillPositionTexture(texture) { + const x = Math.random() * BOUNDS - BOUNDS_HALF; +@@ -346,8 +359,8 @@ function fillPositionTexture(texture) { } } -function fillVelocityTexture(texture) { +- const theArray = texture.image.data; +function fillVelocityTexture(texture: THREE.DataTexture) { - const theArray = texture.image.data; ++ const theArray = texture.image.data as Float32Array; for (let k = 0, kl = theArray.length; k < kl; k += 4) { + const x = Math.random() - 0.5; @@ -371,7 +384,7 @@ function onWindowResize() { renderer.setSize(window.innerWidth, window.innerHeight); } @@ -4891,7 +4899,7 @@ index 3176b95a..df84fb25 100644 mouseX = event.clientX - windowHalfX; diff --git a/examples-testing/examples/webgl_gpgpu_protoplanet.ts b/examples-testing/examples/webgl_gpgpu_protoplanet.ts -index 30444ddb..158350b0 100644 +index 30444ddb..e1c40aef 100644 --- a/examples-testing/examples/webgl_gpgpu_protoplanet.ts +++ b/examples-testing/examples/webgl_gpgpu_protoplanet.ts @@ -4,22 +4,32 @@ import Stats from 'three/addons/libs/stats.module.js'; @@ -4962,15 +4970,19 @@ index 30444ddb..158350b0 100644 }); const particles = new THREE.Points(geometry, material); -@@ -164,7 +174,7 @@ function initProtoplanets() { +@@ -164,9 +174,9 @@ function initProtoplanets() { scene.add(particles); } -function fillTextures(texturePosition, textureVelocity) { +- const posArray = texturePosition.image.data; +- const velArray = textureVelocity.image.data; +function fillTextures(texturePosition: THREE.DataTexture, textureVelocity: THREE.DataTexture) { - const posArray = texturePosition.image.data; - const velArray = textureVelocity.image.data; ++ const posArray = texturePosition.image.data as Float32Array; ++ const velArray = textureVelocity.image.data as Float32Array; + const radius = effectController.radius; + const height = effectController.height; @@ -261,7 +271,7 @@ function initGUI() { folder2.open(); } @@ -4981,7 +4993,7 @@ index 30444ddb..158350b0 100644 } diff --git a/examples-testing/examples/webgl_gpgpu_water.ts b/examples-testing/examples/webgl_gpgpu_water.ts -index 00c32f22..57e7c212 100644 +index 00c32f22..e1655f04 100644 --- a/examples-testing/examples/webgl_gpgpu_water.ts +++ b/examples-testing/examples/webgl_gpgpu_water.ts @@ -3,7 +3,7 @@ import * as THREE from 'three'; @@ -5078,6 +5090,15 @@ index 00c32f22..57e7c212 100644 let multR = waterMaxHeight; let mult = 0.025; let r = 0; +@@ -234,7 +234,7 @@ function fillTexture(texture) { + return r; + } + +- const pixels = texture.image.data; ++ const pixels = texture.image.data as Float32Array; + + let p = 0; + for (let j = 0; j < WIDTH; j++) { @@ -346,12 +346,12 @@ function onWindowResize() { renderer.setSize(window.innerWidth, window.innerHeight); } @@ -8695,7 +8716,7 @@ index 24bd4eb9..2dad75e8 100644 mouseY = event.clientY - windowHalfY; } diff --git a/examples-testing/examples/webgl_materials_texture_partialupdate.ts b/examples-testing/examples/webgl_materials_texture_partialupdate.ts -index 5adfc8e6..55d802e3 100644 +index 5adfc8e6..6f3772f0 100644 --- a/examples-testing/examples/webgl_materials_texture_partialupdate.ts +++ b/examples-testing/examples/webgl_materials_texture_partialupdate.ts @@ -1,6 +1,11 @@ @@ -8711,14 +8732,17 @@ index 5adfc8e6..55d802e3 100644 let last = 0; const position = new THREE.Vector2(); -@@ -77,7 +82,7 @@ function animate() { +@@ -77,9 +82,9 @@ function animate() { renderer.render(scene, camera); } -function updateDataTexture(texture) { +function updateDataTexture(texture: THREE.DataTexture) { const size = texture.image.width * texture.image.height; - const data = texture.image.data; +- const data = texture.image.data; ++ const data = texture.image.data as Uint8Array; + + // generate a random color and update texture data diff --git a/examples-testing/examples/webgl_materials_texture_rotation.ts b/examples-testing/examples/webgl_materials_texture_rotation.ts index 90b9416d..e6034b82 100644 @@ -15022,6 +15046,31 @@ index 012a5065..6ca474e3 100644 init(); +diff --git a/examples-testing/examples/webgpu_materials_envmaps_bpcem.ts b/examples-testing/examples/webgpu_materials_envmaps_bpcem.ts +index 2e466f0c..c3218846 100644 +--- a/examples-testing/examples/webgpu_materials_envmaps_bpcem.ts ++++ b/examples-testing/examples/webgpu_materials_envmaps_bpcem.ts +@@ -1,4 +1,4 @@ +-import * as THREE from 'three'; ++import * as THREE from 'three/webgpu'; + import { + bumpMap, + float, +@@ -15,11 +15,11 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + import { RectAreaLightHelper } from 'three/addons/helpers/RectAreaLightHelper.js'; + import { RectAreaLightTexturesLib } from 'three/addons/lights/RectAreaLightTexturesLib.js'; + +-let camera, scene, renderer; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGPURenderer; + +-let controls, cubeCamera; ++let controls: OrbitControls, cubeCamera: THREE.CubeCamera; + +-let groundPlane, wallMat; ++let groundPlane: THREE.Mesh, wallMat: THREE.MeshStandardNodeMaterial; + + init(); + diff --git a/examples-testing/examples/webgpu_materials_lightmap.ts b/examples-testing/examples/webgpu_materials_lightmap.ts index 616645aa..288f6e84 100644 --- a/examples-testing/examples/webgpu_materials_lightmap.ts @@ -15042,6 +15091,161 @@ index 616645aa..288f6e84 100644 init(); +diff --git a/examples-testing/examples/webgpu_materials_matcap.ts b/examples-testing/examples/webgpu_materials_matcap.ts +index d19b1196..267d0cc5 100644 +--- a/examples-testing/examples/webgpu_materials_matcap.ts ++++ b/examples-testing/examples/webgpu_materials_matcap.ts +@@ -1,11 +1,14 @@ +-import * as THREE from 'three'; ++import * as THREE from 'three/webgpu'; + + import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; + import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; + import { EXRLoader } from 'three/addons/loaders/EXRLoader.js'; + +-let mesh, renderer, scene, camera; ++let mesh: THREE.Mesh, ++ renderer: THREE.WebGPURenderer, ++ scene: THREE.Scene, ++ camera: THREE.PerspectiveCamera; + + const API = { + color: 0xffffff, // sRGB +@@ -52,7 +55,7 @@ function init() { + + // model + new GLTFLoader(manager).load('models/gltf/LeePerrySmith/LeePerrySmith.glb', function (gltf) { +- mesh = gltf.scene.children[0]; ++ mesh = gltf.scene.children[0] as THREE.Mesh; + mesh.position.y = -0.25; + + mesh.material = new THREE.MeshMatcapNodeMaterial({ +@@ -104,7 +107,7 @@ function render() { + // drag and drop anywhere in document + // + +-function updateMatcap(texture) { ++function updateMatcap(texture: THREE.Texture) { + if (mesh.material.matcap) { + mesh.material.matcap.dispose(); + } +@@ -118,11 +121,11 @@ function updateMatcap(texture) { + render(); + } + +-function handleJPG(event) { ++function handleJPG(event: ProgressEvent) { + // PNG, WebP, AVIF, too + +- function imgCallback(event) { +- const texture = new THREE.Texture(event.target); ++ function imgCallback(event: Event) { ++ const texture = new THREE.Texture(event.target!); + + texture.colorSpace = THREE.SRGBColorSpace; + +@@ -133,11 +136,11 @@ function handleJPG(event) { + + img.onload = imgCallback; + +- img.src = event.target.result; ++ img.src = event.target!.result as string; + } + +-function handleEXR(event) { +- const contents = event.target.result; ++function handleEXR(event: ProgressEvent) { ++ const contents = event.target!.result as ArrayBuffer; + + const loader = new EXRLoader(); + +@@ -162,9 +165,9 @@ function handleEXR(event) { + updateMatcap(texture); + } + +-function loadFile(file) { ++function loadFile(file: File) { + const filename = file.name; +- const extension = filename.split('.').pop().toLowerCase(); ++ const extension = filename.split('.').pop()!.toLowerCase(); + + if (extension === 'exr') { + const reader = new FileReader(); +@@ -190,12 +193,12 @@ function loadFile(file) { + function initDragAndDrop() { + document.addEventListener('dragover', function (event) { + event.preventDefault(); +- event.dataTransfer.dropEffect = 'copy'; ++ event.dataTransfer!.dropEffect = 'copy'; + }); + + document.addEventListener('drop', function (event) { + event.preventDefault(); + +- loadFile(event.dataTransfer.files[0]); ++ loadFile(event.dataTransfer!.files[0]); + }); + } +diff --git a/examples-testing/examples/webgpu_materials_sss.ts b/examples-testing/examples/webgpu_materials_sss.ts +index 7a493c71..74e8e0d9 100644 +--- a/examples-testing/examples/webgpu_materials_sss.ts ++++ b/examples-testing/examples/webgpu_materials_sss.ts +@@ -7,9 +7,9 @@ import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; + import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + import { FBXLoader } from 'three/addons/loaders/FBXLoader.js'; + +-let container, stats; +-let camera, scene, renderer; +-let model; ++let container: HTMLDivElement, stats: Stats; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGPURenderer; ++let model: THREE.Mesh; + + init(); + +@@ -92,7 +92,7 @@ function initMaterial() { + + const loaderFBX = new FBXLoader(); + loaderFBX.load('models/fbx/stanford-bunny.fbx', function (object) { +- model = object.children[0]; ++ model = object.children[0] as THREE.Mesh; + model.position.set(0, 0, 10); + model.scale.setScalar(1); + model.material = material; +@@ -102,16 +102,24 @@ function initMaterial() { + initGUI(material); + } + +-function initGUI(material) { ++function initGUI(material: THREE.MeshSSSNodeMaterial) { + const gui = new GUI({ title: 'Thickness Control' }); + +- const ThicknessControls = function () { +- this.distortion = material.thicknessDistortionNode.value; +- this.ambient = material.thicknessAmbientNode.value; +- this.attenuation = material.thicknessAttenuationNode.value; +- this.power = material.thicknessPowerNode.value; +- this.scale = material.thicknessScaleNode.value; +- }; ++ class ThicknessControls { ++ distortion: number; ++ ambient: number; ++ attenuation: number; ++ power: number; ++ scale: number; ++ ++ constructor() { ++ this.distortion = material.thicknessDistortionNode.value; ++ this.ambient = material.thicknessAmbientNode.value; ++ this.attenuation = material.thicknessAttenuationNode.value; ++ this.power = material.thicknessPowerNode.value; ++ this.scale = material.thicknessScaleNode.value; ++ } ++ } + + const thicknessControls = new ThicknessControls(); + diff --git a/examples-testing/examples/webgpu_materials_toon.ts b/examples-testing/examples/webgpu_materials_toon.ts index 1e9a2304..5f5dfef0 100644 --- a/examples-testing/examples/webgpu_materials_toon.ts @@ -15230,6 +15434,33 @@ index bd84aba0..f9d188c3 100644 } } +diff --git a/examples-testing/examples/webgpu_materialx_noise.ts b/examples-testing/examples/webgpu_materialx_noise.ts +index ea14773f..0fd147cd 100644 +--- a/examples-testing/examples/webgpu_materialx_noise.ts ++++ b/examples-testing/examples/webgpu_materialx_noise.ts +@@ -1,4 +1,4 @@ +-import * as THREE from 'three'; ++import * as THREE from 'three/webgpu'; + import { + normalWorld, + time, +@@ -13,12 +13,12 @@ import Stats from 'three/addons/libs/stats.module.js'; + import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + import { HDRCubeTextureLoader } from 'three/addons/loaders/HDRCubeTextureLoader.js'; + +-let container, stats; ++let container: HTMLDivElement, stats: Stats; + +-let camera, scene, renderer; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGPURenderer; + +-let particleLight; +-let group; ++let particleLight: THREE.Mesh; ++let group: THREE.Group; + + init(); + diff --git a/examples-testing/examples/webgpu_mesh_batch.ts b/examples-testing/examples/webgpu_mesh_batch.ts index 17bc8440..1f7bc551 100644 --- a/examples-testing/examples/webgpu_mesh_batch.ts @@ -15319,6 +15550,39 @@ index 17bc8440..1f7bc551 100644 for (let i = 0, l = list.length; i < l; i++) { list[i].z *= factor; } +diff --git a/examples-testing/examples/webgpu_mirror.ts b/examples-testing/examples/webgpu_mirror.ts +index 989dd4d5..5e150190 100644 +--- a/examples-testing/examples/webgpu_mirror.ts ++++ b/examples-testing/examples/webgpu_mirror.ts +@@ -1,13 +1,13 @@ +-import * as THREE from 'three'; ++import * as THREE from 'three/webgpu'; + import { reflector, uv, texture, color } from 'three/tsl'; + + import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + +-let camera, scene, renderer; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGPURenderer; + +-let cameraControls; ++let cameraControls: OrbitControls; + +-let sphereGroup, smallSphere; ++let sphereGroup: THREE.Object3D, smallSphere: THREE.Mesh; + + init(); + +@@ -72,8 +72,8 @@ function init() { + const groundUVOffset = texture(decalNormal).xy.mul(2).sub(1).mul(groundNormalScale); + const verticalUVOffset = texture(floorNormal, uv().mul(5)).xy.mul(2).sub(1).mul(verticalNormalScale); + +- groundReflector.uvNode = groundReflector.uvNode.add(groundUVOffset); +- verticalReflector.uvNode = verticalReflector.uvNode.add(verticalUVOffset); ++ groundReflector.uvNode = groundReflector.uvNode!.add(groundUVOffset); ++ verticalReflector.uvNode = verticalReflector.uvNode!.add(verticalUVOffset); + + const groundNode = texture(decalDiffuse).a.mix(color(0xffffff), groundReflector); + const verticalNode = color(0x0000ff).mul(0.1).add(verticalReflector); diff --git a/examples-testing/examples/webgpu_modifier_curve.ts b/examples-testing/examples/webgpu_modifier_curve.ts index 4879a9e5..66fee55f 100644 --- a/examples-testing/examples/webgpu_modifier_curve.ts @@ -15473,6 +15737,33 @@ index a749bd6d..16bcee89 100644 init(); +diff --git a/examples-testing/examples/webgpu_multiple_rendertargets.ts b/examples-testing/examples/webgpu_multiple_rendertargets.ts +index d6a60fc2..8fac5871 100644 +--- a/examples-testing/examples/webgpu_multiple_rendertargets.ts ++++ b/examples-testing/examples/webgpu_multiple_rendertargets.ts +@@ -1,10 +1,10 @@ +-import * as THREE from 'three'; ++import * as THREE from 'three/webgpu'; + import { mix, vec2, step, texture, uv, screenUV, normalWorld, output, mrt } from 'three/tsl'; + + import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + +-let camera, scene, renderer, torus; +-let postProcessing, renderTarget; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGPURenderer, torus: THREE.Mesh; ++let postProcessing: THREE.PostProcessing, renderTarget: THREE.RenderTarget; + + init(); + +@@ -84,7 +84,7 @@ function onWindowResize() { + renderTarget.setSize(window.innerWidth * dpr, window.innerHeight * dpr); + } + +-function render(time) { ++function render(time: DOMHighResTimeStamp) { + torus.rotation.y = (time / 1000) * 0.4; + + // render scene into target diff --git a/examples-testing/examples/webgpu_multiple_rendertargets_readback.ts b/examples-testing/examples/webgpu_multiple_rendertargets_readback.ts index 989361b6..491df42d 100644 --- a/examples-testing/examples/webgpu_multiple_rendertargets_readback.ts @@ -15550,6 +15841,56 @@ index 989361b6..491df42d 100644 pixelBufferTexture.image.data = pixelBuffer; pixelBufferTexture.needsUpdate = true; +diff --git a/examples-testing/examples/webgpu_multisampled_renderbuffers.ts b/examples-testing/examples/webgpu_multisampled_renderbuffers.ts +index d105b77c..2cdd4ba7 100644 +--- a/examples-testing/examples/webgpu_multisampled_renderbuffers.ts ++++ b/examples-testing/examples/webgpu_multisampled_renderbuffers.ts +@@ -1,14 +1,14 @@ +-import * as THREE from 'three'; ++import * as THREE from 'three/webgpu'; + import { texture } from 'three/tsl'; + + import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; + +-let camera, scene, renderer; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGPURenderer; + const mouse = new THREE.Vector2(); + +-let quadMesh, renderTarget; ++let quadMesh: THREE.QuadMesh, renderTarget: THREE.RenderTarget; + +-let box, box2; ++let box: THREE.InstancedMesh, box2: THREE.InstancedMesh; + + const dpr = 1; + +@@ -22,7 +22,7 @@ const mat4 = new THREE.Matrix4(); + const count = 50; + const fullRadius = 20; // Radius of the sphere + const halfRadius = 10; // Radius of the sphere +-const positions = new Array(count).fill().map((_, i) => { ++const positions = new Array(count).fill(undefined).map((_, i) => { + const radius = i % 2 === 0 ? fullRadius : halfRadius; + + const phi = Math.acos(2 * Math.random() - 1) - Math.PI / 2; // phi: latitude, range -π/2 to π/2 +@@ -41,7 +41,7 @@ init(); + function initGUI() { + const gui = new GUI(); + gui.add(params, 'samples', 0, 4).step(1); +- gui.add(params, 'animated', true); ++ gui.add(params, 'animated'); + } + + function init() { +@@ -97,7 +97,7 @@ function init() { + quadMesh = new THREE.QuadMesh(materialFX); + } + +-function onWindowMouseMove(e) { ++function onWindowMouseMove(e: MouseEvent) { + mouse.x = e.offsetX / window.innerWidth; + mouse.y = e.offsetY / window.innerHeight; + } diff --git a/examples-testing/examples/webgpu_ocean.ts b/examples-testing/examples/webgpu_ocean.ts index 9eb9922d..b75024ec 100644 --- a/examples-testing/examples/webgpu_ocean.ts @@ -16798,7 +17139,7 @@ index 7eb0ce1b..7528f59f 100644 const windowHalfY = window.innerHeight / 2; diff --git a/examples-testing/examples/webgpu_textures_partialupdate.ts b/examples-testing/examples/webgpu_textures_partialupdate.ts -index e8ebe87d..9fae06bd 100644 +index e8ebe87d..bc6886f0 100644 --- a/examples-testing/examples/webgpu_textures_partialupdate.ts +++ b/examples-testing/examples/webgpu_textures_partialupdate.ts @@ -1,6 +1,11 @@ @@ -16815,14 +17156,17 @@ index e8ebe87d..9fae06bd 100644 let last = 0; const position = new THREE.Vector2(); -@@ -78,7 +83,7 @@ async function animate() { +@@ -78,9 +83,9 @@ async function animate() { } } -function updateDataTexture(texture) { +function updateDataTexture(texture: THREE.DataTexture) { const size = texture.image.width * texture.image.height; - const data = texture.image.data; +- const data = texture.image.data; ++ const data = texture.image.data as Uint8Array; + + // generate a random color and update texture data diff --git a/examples-testing/examples/webgpu_tonemapping.ts b/examples-testing/examples/webgpu_tonemapping.ts index 07fb8d27..ea32b4d6 100644 diff --git a/examples-testing/examples/misc_controls_arcball.ts b/examples-testing/examples/misc_controls_arcball.ts deleted file mode 100644 index c1d5378a4..000000000 --- a/examples-testing/examples/misc_controls_arcball.ts +++ /dev/null @@ -1,215 +0,0 @@ -import * as THREE from 'three'; - -import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; - -import { ArcballControls } from 'three/addons/controls/ArcballControls.js'; - -import { OBJLoader } from 'three/addons/loaders/OBJLoader.js'; -import { RGBELoader } from 'three/addons/loaders/RGBELoader.js'; - -const cameras = ['Orthographic', 'Perspective']; -const cameraType = { type: 'Perspective' }; - -const perspectiveDistance = 2.5; -const orthographicDistance = 120; -let camera: THREE.OrthographicCamera | THREE.PerspectiveCamera, - controls: ArcballControls, - scene: THREE.Scene, - renderer: THREE.WebGLRenderer, - gui: GUI; -let folderOptions: GUI, folderAnimations: GUI; - -const arcballGui = { - gizmoVisible: true, - - setArcballControls: function () { - controls = new ArcballControls(camera, renderer.domElement, scene); - controls.addEventListener('change', render); - - this.gizmoVisible = true; - - this.populateGui(); - }, - - populateGui: function () { - folderOptions.add(controls, 'enabled').name('Enable controls'); - folderOptions.add(controls, 'enableFocus').name('Enable focus'); - folderOptions.add(controls, 'enableGrid').name('Enable Grid'); - folderOptions.add(controls, 'enableRotate').name('Enable rotate'); - folderOptions.add(controls, 'enablePan').name('Enable pan'); - folderOptions.add(controls, 'enableZoom').name('Enable zoom'); - folderOptions.add(controls, 'cursorZoom').name('Cursor zoom'); - folderOptions.add(controls, 'adjustNearFar').name('adjust near/far'); - folderOptions.add(controls, 'scaleFactor', 1.1, 10, 0.1).name('Scale factor'); - folderOptions.add(controls, 'minDistance', 0, 50, 0.5).name('Min distance'); - folderOptions.add(controls, 'maxDistance', 0, 50, 0.5).name('Max distance'); - folderOptions.add(controls, 'minZoom', 0, 50, 0.5).name('Min zoom'); - folderOptions.add(controls, 'maxZoom', 0, 50, 0.5).name('Max zoom'); - folderOptions - .add(arcballGui, 'gizmoVisible') - .name('Show gizmos') - .onChange(function () { - controls.setGizmosVisible(arcballGui.gizmoVisible); - }); - folderOptions.add(controls, 'copyState').name('Copy state(ctrl+c)'); - folderOptions.add(controls, 'pasteState').name('Paste state(ctrl+v)'); - folderOptions.add(controls, 'reset').name('Reset'); - folderAnimations.add(controls, 'enableAnimations').name('Enable anim.'); - folderAnimations.add(controls, 'dampingFactor', 0, 100, 1).name('Damping'); - folderAnimations.add(controls, 'wMax', 0, 100, 1).name('Angular spd'); - }, -}; - -init(); - -function init() { - const container = document.createElement('div'); - document.body.appendChild(container); - - renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - renderer.toneMapping = THREE.ReinhardToneMapping; - renderer.toneMappingExposure = 3; - renderer.domElement.style.background = 'linear-gradient( 180deg, rgba( 0,0,0,1 ) 0%, rgba( 128,128,255,1 ) 100% )'; - container.appendChild(renderer.domElement); - - // - - scene = new THREE.Scene(); - - camera = makePerspectiveCamera(); - camera.position.set(0, 0, perspectiveDistance); - - const material = new THREE.MeshStandardMaterial(); - - new OBJLoader().setPath('models/obj/cerberus/').load('Cerberus.obj', function (group) { - const textureLoader = new THREE.TextureLoader().setPath('models/obj/cerberus/'); - - material.roughness = 1; - material.metalness = 1; - - const diffuseMap = textureLoader.load('Cerberus_A.jpg', render); - diffuseMap.colorSpace = THREE.SRGBColorSpace; - material.map = diffuseMap; - - material.metalnessMap = material.roughnessMap = textureLoader.load('Cerberus_RM.jpg', render); - material.normalMap = textureLoader.load('Cerberus_N.jpg', render); - - material.map.wrapS = THREE.RepeatWrapping; - material.roughnessMap.wrapS = THREE.RepeatWrapping; - material.metalnessMap.wrapS = THREE.RepeatWrapping; - material.normalMap.wrapS = THREE.RepeatWrapping; - - group.traverse(function (child) { - if ((child as THREE.Mesh).isMesh) { - (child as THREE.Mesh).material = material; - } - }); - - group.rotation.y = Math.PI / 2; - group.position.x += 0.25; - scene.add(group); - render(); - - new RGBELoader().setPath('textures/equirectangular/').load('venice_sunset_1k.hdr', function (hdrEquirect) { - hdrEquirect.mapping = THREE.EquirectangularReflectionMapping; - - scene.environment = hdrEquirect; - - render(); - }); - - window.addEventListener('keydown', onKeyDown); - window.addEventListener('resize', onWindowResize); - - // - - gui = new GUI(); - gui.add(cameraType, 'type', cameras) - .name('Choose Camera') - .onChange(function () { - setCamera(cameraType.type); - }); - - folderOptions = gui.addFolder('Arcball parameters'); - folderAnimations = folderOptions.addFolder('Animations'); - - arcballGui.setArcballControls(); - - render(); - }); -} - -function makeOrthographicCamera() { - const halfFovV = THREE.MathUtils.DEG2RAD * 45 * 0.5; - const halfFovH = Math.atan((window.innerWidth / window.innerHeight) * Math.tan(halfFovV)); - - const halfW = perspectiveDistance * Math.tan(halfFovH); - const halfH = perspectiveDistance * Math.tan(halfFovV); - const near = 0.01; - const far = 2000; - const newCamera = new THREE.OrthographicCamera(-halfW, halfW, halfH, -halfH, near, far); - return newCamera; -} - -function makePerspectiveCamera() { - const fov = 45; - const aspect = window.innerWidth / window.innerHeight; - const near = 0.01; - const far = 2000; - const newCamera = new THREE.PerspectiveCamera(fov, aspect, near, far); - return newCamera; -} - -function onWindowResize() { - if (camera.type == 'OrthographicCamera') { - const halfFovV = THREE.MathUtils.DEG2RAD * 45 * 0.5; - const halfFovH = Math.atan((window.innerWidth / window.innerHeight) * Math.tan(halfFovV)); - - const halfW = perspectiveDistance * Math.tan(halfFovH); - const halfH = perspectiveDistance * Math.tan(halfFovV); - (camera as THREE.OrthographicCamera).left = -halfW; - (camera as THREE.OrthographicCamera).right = halfW; - (camera as THREE.OrthographicCamera).top = halfH; - (camera as THREE.OrthographicCamera).bottom = -halfH; - } else if (camera.type == 'PerspectiveCamera') { - (camera as THREE.PerspectiveCamera).aspect = window.innerWidth / window.innerHeight; - } - - camera.updateProjectionMatrix(); - - renderer.setSize(window.innerWidth, window.innerHeight); - - render(); -} - -function render() { - renderer.render(scene, camera); -} - -function onKeyDown(event: KeyboardEvent) { - if (event.key === 'c') { - if (event.ctrlKey || event.metaKey) { - controls.copyState(); - } - } else if (event.key === 'v') { - if (event.ctrlKey || event.metaKey) { - controls.pasteState(); - } - } -} - -function setCamera(type: string) { - if (type == 'Orthographic') { - camera = makeOrthographicCamera(); - camera.position.set(0, 0, orthographicDistance); - } else if (type == 'Perspective') { - camera = makePerspectiveCamera(); - camera.position.set(0, 0, perspectiveDistance); - } - - controls.setCamera(camera); - - render(); -} diff --git a/examples-testing/examples/misc_controls_trackball.ts b/examples-testing/examples/misc_controls_trackball.ts deleted file mode 100644 index 2e8f3dadc..000000000 --- a/examples-testing/examples/misc_controls_trackball.ts +++ /dev/null @@ -1,139 +0,0 @@ -import * as THREE from 'three'; - -import Stats from 'three/addons/libs/stats.module.js'; -import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; - -import { TrackballControls } from 'three/addons/controls/TrackballControls.js'; - -let perspectiveCamera: THREE.PerspectiveCamera, - orthographicCamera: THREE.OrthographicCamera, - controls: TrackballControls, - scene: THREE.Scene, - renderer: THREE.WebGLRenderer, - stats: Stats; - -const params = { - orthographicCamera: false, -}; - -const frustumSize = 400; - -init(); - -function init() { - const aspect = window.innerWidth / window.innerHeight; - - perspectiveCamera = new THREE.PerspectiveCamera(60, aspect, 1, 1000); - perspectiveCamera.position.z = 500; - - orthographicCamera = new THREE.OrthographicCamera( - (frustumSize * aspect) / -2, - (frustumSize * aspect) / 2, - frustumSize / 2, - frustumSize / -2, - 1, - 1000, - ); - orthographicCamera.position.z = 500; - - // world - - scene = new THREE.Scene(); - scene.background = new THREE.Color(0xcccccc); - scene.fog = new THREE.FogExp2(0xcccccc, 0.002); - - const geometry = new THREE.ConeGeometry(10, 30, 4, 1); - const material = new THREE.MeshPhongMaterial({ color: 0xffffff, flatShading: true }); - - for (let i = 0; i < 500; i++) { - const mesh = new THREE.Mesh(geometry, material); - mesh.position.x = (Math.random() - 0.5) * 1000; - mesh.position.y = (Math.random() - 0.5) * 1000; - mesh.position.z = (Math.random() - 0.5) * 1000; - mesh.updateMatrix(); - mesh.matrixAutoUpdate = false; - scene.add(mesh); - } - - // lights - - const dirLight1 = new THREE.DirectionalLight(0xffffff, 3); - dirLight1.position.set(1, 1, 1); - scene.add(dirLight1); - - const dirLight2 = new THREE.DirectionalLight(0x002288, 3); - dirLight2.position.set(-1, -1, -1); - scene.add(dirLight2); - - const ambientLight = new THREE.AmbientLight(0x555555); - scene.add(ambientLight); - - // renderer - - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - renderer.setAnimationLoop(animate); - document.body.appendChild(renderer.domElement); - - stats = new Stats(); - document.body.appendChild(stats.dom); - - // - - const gui = new GUI(); - gui.add(params, 'orthographicCamera') - .name('use orthographic') - .onChange(function (value) { - controls.dispose(); - - createControls(value ? orthographicCamera : perspectiveCamera); - }); - - // - - window.addEventListener('resize', onWindowResize); - - createControls(perspectiveCamera); -} - -function createControls(camera: THREE.Camera) { - controls = new TrackballControls(camera, renderer.domElement); - - controls.rotateSpeed = 1.0; - controls.zoomSpeed = 1.2; - controls.panSpeed = 0.8; - - controls.keys = ['KeyA', 'KeyS', 'KeyD']; -} - -function onWindowResize() { - const aspect = window.innerWidth / window.innerHeight; - - perspectiveCamera.aspect = aspect; - perspectiveCamera.updateProjectionMatrix(); - - orthographicCamera.left = (-frustumSize * aspect) / 2; - orthographicCamera.right = (frustumSize * aspect) / 2; - orthographicCamera.top = frustumSize / 2; - orthographicCamera.bottom = -frustumSize / 2; - orthographicCamera.updateProjectionMatrix(); - - renderer.setSize(window.innerWidth, window.innerHeight); - - controls.handleResize(); -} - -function animate() { - controls.update(); - - render(); - - stats.update(); -} - -function render() { - const camera = params.orthographicCamera ? orthographicCamera : perspectiveCamera; - - renderer.render(scene, camera); -} diff --git a/examples-testing/examples/misc_controls_transform.ts b/examples-testing/examples/misc_controls_transform.ts deleted file mode 100644 index d7d327e96..000000000 --- a/examples-testing/examples/misc_controls_transform.ts +++ /dev/null @@ -1,184 +0,0 @@ -import * as THREE from 'three'; - -import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; -import { TransformControls } from 'three/addons/controls/TransformControls.js'; - -let cameraPersp: THREE.PerspectiveCamera, cameraOrtho: THREE.OrthographicCamera, currentCamera: THREE.Camera; -let scene: THREE.Scene, renderer: THREE.WebGLRenderer, control: TransformControls, orbit: OrbitControls; - -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); - - const aspect = window.innerWidth / window.innerHeight; - - const frustumSize = 5; - - cameraPersp = new THREE.PerspectiveCamera(50, aspect, 0.1, 100); - cameraOrtho = new THREE.OrthographicCamera( - -frustumSize * aspect, - frustumSize * aspect, - frustumSize, - -frustumSize, - 0.1, - 100, - ); - currentCamera = cameraPersp; - - currentCamera.position.set(5, 2.5, 5); - - scene = new THREE.Scene(); - scene.add(new THREE.GridHelper(5, 10, 0x888888, 0x444444)); - - const ambientLight = new THREE.AmbientLight(0xffffff); - scene.add(ambientLight); - - const light = new THREE.DirectionalLight(0xffffff, 4); - light.position.set(1, 1, 1); - scene.add(light); - - const texture = new THREE.TextureLoader().load('textures/crate.gif', render); - texture.colorSpace = THREE.SRGBColorSpace; - texture.anisotropy = renderer.capabilities.getMaxAnisotropy(); - - const geometry = new THREE.BoxGeometry(); - const material = new THREE.MeshLambertMaterial({ map: texture }); - - orbit = new OrbitControls(currentCamera, renderer.domElement); - orbit.update(); - orbit.addEventListener('change', render); - - control = new TransformControls(currentCamera, renderer.domElement); - control.addEventListener('change', render); - control.addEventListener('dragging-changed', function (event) { - orbit.enabled = !event.value; - }); - - const mesh = new THREE.Mesh(geometry, material); - scene.add(mesh); - - control.attach(mesh); - - const gizmo = control.getHelper(); - scene.add(gizmo); - - window.addEventListener('resize', onWindowResize); - - window.addEventListener('keydown', function (event) { - switch (event.key) { - case 'q': - control.setSpace(control.space === 'local' ? 'world' : 'local'); - break; - - case 'Shift': - control.setTranslationSnap(1); - control.setRotationSnap(THREE.MathUtils.degToRad(15)); - control.setScaleSnap(0.25); - break; - - case 'w': - control.setMode('translate'); - break; - - case 'e': - control.setMode('rotate'); - break; - - case 'r': - control.setMode('scale'); - break; - - case 'c': - const position = currentCamera.position.clone(); - - currentCamera = (currentCamera as THREE.PerspectiveCamera).isPerspectiveCamera - ? cameraOrtho - : cameraPersp; - currentCamera.position.copy(position); - - orbit.object = currentCamera; - control.camera = currentCamera; - - currentCamera.lookAt(orbit.target.x, orbit.target.y, orbit.target.z); - onWindowResize(); - break; - - case 'v': - const randomFoV = Math.random() + 0.1; - const randomZoom = Math.random() + 0.1; - - cameraPersp.fov = randomFoV * 160; - cameraOrtho.bottom = -randomFoV * 500; - cameraOrtho.top = randomFoV * 500; - - cameraPersp.zoom = randomZoom * 5; - cameraOrtho.zoom = randomZoom * 5; - onWindowResize(); - break; - - case '+': - case '=': - control.setSize(control.size + 0.1); - break; - - case '-': - case '_': - control.setSize(Math.max(control.size - 0.1, 0.1)); - break; - - case 'x': - control.showX = !control.showX; - break; - - case 'y': - control.showY = !control.showY; - break; - - case 'z': - control.showZ = !control.showZ; - break; - - case ' ': - control.enabled = !control.enabled; - break; - - case 'Escape': - control.reset(); - break; - } - }); - - window.addEventListener('keyup', function (event) { - switch (event.key) { - case 'Shift': - control.setTranslationSnap(null); - control.setRotationSnap(null); - control.setScaleSnap(null); - break; - } - }); -} - -function onWindowResize() { - const aspect = window.innerWidth / window.innerHeight; - - cameraPersp.aspect = aspect; - cameraPersp.updateProjectionMatrix(); - - cameraOrtho.left = cameraOrtho.bottom * aspect; - cameraOrtho.right = cameraOrtho.top * aspect; - cameraOrtho.updateProjectionMatrix(); - - renderer.setSize(window.innerWidth, window.innerHeight); - - render(); -} - -function render() { - renderer.render(scene, currentCamera); -} diff --git a/examples-testing/examples/misc_exporter_draco.ts b/examples-testing/examples/misc_exporter_draco.ts deleted file mode 100644 index cb9d3f599..000000000 --- a/examples-testing/examples/misc_exporter_draco.ts +++ /dev/null @@ -1,121 +0,0 @@ -import * as THREE from 'three'; - -import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; -import { DRACOExporter } from 'three/addons/exporters/DRACOExporter.js'; -import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; - -let scene: THREE.Scene, - camera: THREE.PerspectiveCamera, - renderer: THREE.WebGLRenderer, - exporter: DRACOExporter, - mesh: THREE.Mesh; - -const params = { - export: exportFile, -}; - -init(); - -function init() { - camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100); - camera.position.set(4, 2, 4); - - scene = new THREE.Scene(); - scene.background = new THREE.Color(0xa0a0a0); - scene.fog = new THREE.Fog(0xa0a0a0, 4, 20); - - exporter = new DRACOExporter(); - - // - - const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444, 3); - hemiLight.position.set(0, 20, 0); - scene.add(hemiLight); - - const directionalLight = new THREE.DirectionalLight(0xffffff, 3); - directionalLight.position.set(0, 20, 10); - directionalLight.castShadow = true; - directionalLight.shadow.camera.top = 2; - directionalLight.shadow.camera.bottom = -2; - directionalLight.shadow.camera.left = -2; - directionalLight.shadow.camera.right = 2; - scene.add(directionalLight); - - // ground - - const ground = new THREE.Mesh( - new THREE.PlaneGeometry(40, 40), - new THREE.MeshPhongMaterial({ color: 0xbbbbbb, depthWrite: false }), - ); - ground.rotation.x = -Math.PI / 2; - ground.receiveShadow = true; - scene.add(ground); - - const grid = new THREE.GridHelper(40, 20, 0x000000, 0x000000); - grid.material.opacity = 0.2; - grid.material.transparent = true; - scene.add(grid); - - // export mesh - - const geometry = new THREE.TorusKnotGeometry(0.75, 0.2, 200, 30); - const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 }); - mesh = new THREE.Mesh(geometry, material); - mesh.castShadow = true; - mesh.position.y = 1.5; - scene.add(mesh); - - // - - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - renderer.setAnimationLoop(animate); - renderer.shadowMap.enabled = true; - document.body.appendChild(renderer.domElement); - - // - - const controls = new OrbitControls(camera, renderer.domElement); - controls.target.set(0, 1.5, 0); - controls.update(); - - // - - window.addEventListener('resize', onWindowResize); - - const gui = new GUI(); - - gui.add(params, 'export').name('Export DRC'); - gui.open(); -} - -function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); - - renderer.setSize(window.innerWidth, window.innerHeight); -} - -function animate() { - renderer.render(scene, camera); -} - -function exportFile() { - const result = exporter.parse(mesh); - saveArrayBuffer(result, 'file.drc'); -} - -const link = document.createElement('a'); -link.style.display = 'none'; -document.body.appendChild(link); - -function save(blob: Blob, filename: string) { - link.href = URL.createObjectURL(blob); - link.download = filename; - link.click(); -} - -function saveArrayBuffer(buffer: BufferSource, filename: string) { - save(new Blob([buffer], { type: 'application/octet-stream' }), filename); -} diff --git a/examples-testing/examples/misc_exporter_exr.ts b/examples-testing/examples/misc_exporter_exr.ts deleted file mode 100644 index 1cd5fb279..000000000 --- a/examples-testing/examples/misc_exporter_exr.ts +++ /dev/null @@ -1,165 +0,0 @@ -import * as THREE from 'three'; - -import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; -import { EXRExporter, ZIP_COMPRESSION, ZIPS_COMPRESSION, NO_COMPRESSION } from 'three/addons/exporters/EXRExporter.js'; -import { RGBELoader } from 'three/addons/loaders/RGBELoader.js'; -import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; - -let scene: THREE.Scene, - camera: THREE.PerspectiveCamera, - renderer: THREE.WebGLRenderer, - exporter: EXRExporter, - mesh: THREE.Mesh, - controls: OrbitControls, - renderTarget: THREE.WebGLRenderTarget, - dataTexture: THREE.DataTexture; - -const params = { - target: 'pmrem', - type: 'HalfFloatType', - compression: 'ZIP', - export: exportFile, -}; - -init(); - -function init() { - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - renderer.setAnimationLoop(animate); - document.body.appendChild(renderer.domElement); - - // - - camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100); - camera.position.set(10, 0, 0); - - scene = new THREE.Scene(); - - exporter = new EXRExporter(); - const rgbeloader = new RGBELoader(); - - // - - const pmremGenerator = new THREE.PMREMGenerator(renderer); - pmremGenerator.compileEquirectangularShader(); - - rgbeloader.load('textures/equirectangular/san_giuseppe_bridge_2k.hdr', function (texture) { - texture.mapping = THREE.EquirectangularReflectionMapping; - - renderTarget = pmremGenerator.fromEquirectangular(texture); - scene.background = renderTarget.texture; - }); - - createDataTexture(); - - // - - controls = new OrbitControls(camera, renderer.domElement); - controls.enableDamping = true; - controls.rotateSpeed = -0.25; // negative, to track mouse pointer - - // - - window.addEventListener('resize', onWindowResize); - - const gui = new GUI(); - - const input = gui.addFolder('Input'); - input.add(params, 'target').options(['pmrem', 'data-texture']).onChange(swapScene); - - const options = gui.addFolder('Output Options'); - options.add(params, 'type').options(['FloatType', 'HalfFloatType']); - options.add(params, 'compression').options(['ZIP', 'ZIPS', 'NONE']); - - gui.add(params, 'export').name('Export EXR'); - gui.open(); -} - -function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); - - renderer.setSize(window.innerWidth, window.innerHeight); -} - -function animate() { - controls.update(); - renderer.render(scene, camera); -} - -function createDataTexture() { - const normal = new THREE.Vector3(); - const coord = new THREE.Vector2(); - const size = 800, - radius = 320, - factor = (Math.PI * 0.5) / radius; - const data = new Float32Array(4 * size * size); - - for (let i = 0; i < size; i++) { - for (let j = 0; j < size; j++) { - const idx = i * size * 4 + j * 4; - coord.set(j, i).subScalar(size / 2); - - if (coord.length() < radius) - normal.set(Math.sin(coord.x * factor), Math.sin(coord.y * factor), Math.cos(coord.x * factor)); - else normal.set(0, 0, 1); - - data[idx + 0] = 0.5 + 0.5 * normal.x; - data[idx + 1] = 0.5 + 0.5 * normal.y; - data[idx + 2] = 0.5 + 0.5 * normal.z; - data[idx + 3] = 1; - } - } - - dataTexture = new THREE.DataTexture(data, size, size, THREE.RGBAFormat, THREE.FloatType); - dataTexture.needsUpdate = true; - - const material = new THREE.MeshBasicMaterial({ map: dataTexture }); - const quad = new THREE.PlaneGeometry(50, 50); - mesh = new THREE.Mesh(quad, material); - mesh.visible = false; - - scene.add(mesh); -} - -function swapScene() { - if (params.target == 'pmrem') { - camera.position.set(10, 0, 0); - controls.enabled = true; - scene.background = renderTarget.texture; - mesh.visible = false; - } else { - camera.position.set(0, 0, 70); - controls.enabled = false; - scene.background = new THREE.Color(0, 0, 0); - mesh.visible = true; - } -} - -async function exportFile() { - let result, exportType, exportCompression; - - if (params.type == 'HalfFloatType') exportType = THREE.HalfFloatType; - else exportType = THREE.FloatType; - - if (params.compression == 'ZIP') exportCompression = ZIP_COMPRESSION; - else if (params.compression == 'ZIPS') exportCompression = ZIPS_COMPRESSION; - else exportCompression = NO_COMPRESSION; - - if (params.target == 'pmrem') - result = await exporter.parse(renderer, renderTarget, { type: exportType, compression: exportCompression }); - else result = await exporter.parse(dataTexture, { type: exportType, compression: exportCompression }); - - saveArrayBuffer(result, params.target + '.exr'); -} - -function saveArrayBuffer(buffer: Uint8Array, filename: string) { - const blob = new Blob([buffer], { type: 'image/x-exr' }); - const link = document.createElement('a'); - - link.href = URL.createObjectURL(blob); - link.download = filename; - link.click(); -} diff --git a/examples-testing/examples/misc_exporter_gltf.ts b/examples-testing/examples/misc_exporter_gltf.ts deleted file mode 100644 index faef7421b..000000000 --- a/examples-testing/examples/misc_exporter_gltf.ts +++ /dev/null @@ -1,514 +0,0 @@ -import * as THREE from 'three'; - -import { GLTFExporter } from 'three/addons/exporters/GLTFExporter.js'; -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'; -import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; -import * as TextureUtils from 'three/addons/utils/WebGLTextureUtils.js'; - -function exportGLTF(input: THREE.Object3D | THREE.Object3D[]) { - const gltfExporter = new GLTFExporter().setTextureUtils(TextureUtils); - - const options = { - trs: params.trs, - onlyVisible: params.onlyVisible, - binary: params.binary, - maxTextureSize: params.maxTextureSize, - }; - gltfExporter.parse( - input, - function (result) { - if (result instanceof ArrayBuffer) { - saveArrayBuffer(result, 'scene.glb'); - } else { - const output = JSON.stringify(result, null, 2); - console.log(output); - saveString(output, 'scene.gltf'); - } - }, - function (error) { - console.log('An error happened during parsing', error); - }, - options, - ); -} - -const link = document.createElement('a'); -link.style.display = 'none'; -document.body.appendChild(link); // Firefox workaround, see #6594 - -function save(blob: Blob, filename: string) { - link.href = URL.createObjectURL(blob); - link.download = filename; - link.click(); - - // URL.revokeObjectURL( url ); breaks Firefox... -} - -function saveString(text: string, filename: string) { - save(new Blob([text], { type: 'text/plain' }), filename); -} - -function saveArrayBuffer(buffer: BufferSource, filename: string) { - save(new Blob([buffer], { type: 'application/octet-stream' }), filename); -} - -let container: HTMLDivElement; - -let camera: THREE.PerspectiveCamera, - object: THREE.Object3D, - object2: THREE.Mesh, - material: THREE.MeshBasicMaterial | THREE.MeshLambertMaterial | THREE.MeshStandardMaterial, - geometry: THREE.BufferGeometry, - scene1: THREE.Scene, - scene2: THREE.Scene, - renderer: THREE.WebGLRenderer; -let gridHelper: THREE.GridHelper, sphere: THREE.Mesh, model: THREE.Group, coffeemat: THREE.Group; - -const params = { - trs: false, - onlyVisible: true, - binary: false, - maxTextureSize: 4096, - exportScene1: exportScene1, - exportScenes: exportScenes, - exportSphere: exportSphere, - exportModel: exportModel, - exportObjects: exportObjects, - exportSceneObject: exportSceneObject, - exportCompressedObject: exportCompressedObject, -}; - -init(); - -function init() { - container = document.createElement('div'); - document.body.appendChild(container); - - // Make linear gradient texture - - const data = new Uint8ClampedArray(100 * 100 * 4); - - for (let y = 0; y < 100; y++) { - for (let x = 0; x < 100; x++) { - const stride = 4 * (100 * y + x); - - data[stride] = Math.round((255 * y) / 99); - data[stride + 1] = Math.round(255 - (255 * y) / 99); - data[stride + 2] = 0; - data[stride + 3] = 255; - } - } - - const gradientTexture = new THREE.DataTexture(data, 100, 100, THREE.RGBAFormat); - gradientTexture.minFilter = THREE.LinearFilter; - gradientTexture.magFilter = THREE.LinearFilter; - gradientTexture.needsUpdate = true; - - scene1 = new THREE.Scene(); - scene1.name = 'Scene1'; - - // --------------------------------------------------------------------- - // Perspective Camera - // --------------------------------------------------------------------- - camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000); - camera.position.set(600, 400, 0); - - camera.name = 'PerspectiveCamera'; - scene1.add(camera); - - // --------------------------------------------------------------------- - // Ambient light - // --------------------------------------------------------------------- - const ambientLight = new THREE.AmbientLight(0xcccccc); - ambientLight.name = 'AmbientLight'; - scene1.add(ambientLight); - - // --------------------------------------------------------------------- - // DirectLight - // --------------------------------------------------------------------- - const dirLight = new THREE.DirectionalLight(0xffffff, 3); - dirLight.target.position.set(0, 0, -1); - dirLight.add(dirLight.target); - dirLight.lookAt(-1, -1, 0); - dirLight.name = 'DirectionalLight'; - scene1.add(dirLight); - - // --------------------------------------------------------------------- - // Grid - // --------------------------------------------------------------------- - gridHelper = new THREE.GridHelper(2000, 20, 0xc1c1c1, 0x8d8d8d); - gridHelper.position.y = -50; - gridHelper.name = 'Grid'; - scene1.add(gridHelper); - - // --------------------------------------------------------------------- - // Axes - // --------------------------------------------------------------------- - const axes = new THREE.AxesHelper(500); - axes.name = 'AxesHelper'; - scene1.add(axes); - - // --------------------------------------------------------------------- - // Simple geometry with basic material - // --------------------------------------------------------------------- - // Icosahedron - const mapGrid = new THREE.TextureLoader().load('textures/uv_grid_opengl.jpg'); - mapGrid.wrapS = mapGrid.wrapT = THREE.RepeatWrapping; - mapGrid.colorSpace = THREE.SRGBColorSpace; - material = new THREE.MeshBasicMaterial({ - color: 0xffffff, - map: mapGrid, - }); - - object = new THREE.Mesh(new THREE.IcosahedronGeometry(75, 0), material); - object.position.set(-200, 0, 200); - object.name = 'Icosahedron'; - scene1.add(object); - - // Octahedron - material = new THREE.MeshBasicMaterial({ - color: 0x0000ff, - wireframe: true, - }); - object = new THREE.Mesh(new THREE.OctahedronGeometry(75, 1), material); - object.position.set(0, 0, 200); - object.name = 'Octahedron'; - scene1.add(object); - - // Tetrahedron - material = new THREE.MeshBasicMaterial({ - color: 0xff0000, - transparent: true, - opacity: 0.5, - }); - - object = new THREE.Mesh(new THREE.TetrahedronGeometry(75, 0), material); - object.position.set(200, 0, 200); - object.name = 'Tetrahedron'; - scene1.add(object); - - // --------------------------------------------------------------------- - // Buffered geometry primitives - // --------------------------------------------------------------------- - // Sphere - material = new THREE.MeshStandardMaterial({ - color: 0xffff00, - metalness: 0.5, - roughness: 1.0, - flatShading: true, - }); - material.map = gradientTexture; - material.bumpMap = mapGrid; - sphere = new THREE.Mesh(new THREE.SphereGeometry(70, 10, 10), material); - sphere.position.set(0, 0, 0); - sphere.name = 'Sphere'; - scene1.add(sphere); - - // Cylinder - material = new THREE.MeshStandardMaterial({ - color: 0xff00ff, - flatShading: true, - }); - object = new THREE.Mesh(new THREE.CylinderGeometry(10, 80, 100), material); - object.position.set(200, 0, 0); - object.name = 'Cylinder'; - scene1.add(object); - - // TorusKnot - material = new THREE.MeshStandardMaterial({ - color: 0xff0000, - roughness: 1, - }); - object = new THREE.Mesh(new THREE.TorusKnotGeometry(50, 15, 40, 10), material); - object.position.set(-200, 0, 0); - object.name = 'Cylinder'; - scene1.add(object); - - // --------------------------------------------------------------------- - // Hierarchy - // --------------------------------------------------------------------- - const mapWood = new THREE.TextureLoader().load('textures/hardwood2_diffuse.jpg'); - material = new THREE.MeshStandardMaterial({ map: mapWood, side: THREE.DoubleSide }); - - object = new THREE.Mesh(new THREE.BoxGeometry(40, 100, 100), material); - object.position.set(-200, 0, 400); - object.name = 'Cube'; - scene1.add(object); - - object2 = new THREE.Mesh(new THREE.BoxGeometry(40, 40, 40, 2, 2, 2), material); - object2.position.set(0, 0, 50); - object2.rotation.set(0, 45, 0); - object2.name = 'SubCube'; - object.add(object2); - - // --------------------------------------------------------------------- - // Groups - // --------------------------------------------------------------------- - const group1 = new THREE.Group(); - group1.name = 'Group'; - scene1.add(group1); - - const group2 = new THREE.Group(); - group2.name = 'subGroup'; - group2.position.set(0, 50, 0); - group1.add(group2); - - object2 = new THREE.Mesh(new THREE.BoxGeometry(30, 30, 30), material); - object2.name = 'Cube in group'; - object2.position.set(0, 0, 400); - group2.add(object2); - - // --------------------------------------------------------------------- - // THREE.Line Strip - // --------------------------------------------------------------------- - geometry = new THREE.BufferGeometry(); - let numPoints = 100; - let positions = new Float32Array(numPoints * 3); - - for (let i = 0; i < numPoints; i++) { - positions[i * 3] = i; - positions[i * 3 + 1] = Math.sin(i / 2) * 20; - positions[i * 3 + 2] = 0; - } - - geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); - object = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0xffff00 })); - object.position.set(-50, 0, -200); - scene1.add(object); - - // --------------------------------------------------------------------- - // THREE.Line Loop - // --------------------------------------------------------------------- - geometry = new THREE.BufferGeometry(); - numPoints = 5; - const radius = 70; - positions = new Float32Array(numPoints * 3); - - for (let i = 0; i < numPoints; i++) { - const s = (i * Math.PI * 2) / numPoints; - positions[i * 3] = radius * Math.sin(s); - positions[i * 3 + 1] = radius * Math.cos(s); - positions[i * 3 + 2] = 0; - } - - geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); - object = new THREE.LineLoop(geometry, new THREE.LineBasicMaterial({ color: 0xffff00 })); - object.position.set(0, 0, -200); - - scene1.add(object); - - // --------------------------------------------------------------------- - // THREE.Points - // --------------------------------------------------------------------- - numPoints = 100; - const pointsArray = new Float32Array(numPoints * 3); - for (let i = 0; i < numPoints; i++) { - pointsArray[3 * i] = -50 + Math.random() * 100; - pointsArray[3 * i + 1] = Math.random() * 100; - pointsArray[3 * i + 2] = -50 + Math.random() * 100; - } - - const pointsGeo = new THREE.BufferGeometry(); - pointsGeo.setAttribute('position', new THREE.BufferAttribute(pointsArray, 3)); - - const pointsMaterial = new THREE.PointsMaterial({ color: 0xffff00, size: 5 }); - const pointCloud = new THREE.Points(pointsGeo, pointsMaterial); - pointCloud.name = 'Points'; - pointCloud.position.set(-200, 0, -200); - scene1.add(pointCloud); - - // --------------------------------------------------------------------- - // Ortho camera - // --------------------------------------------------------------------- - - const height = 1000; // frustum height - const aspect = window.innerWidth / window.innerHeight; - - const cameraOrtho = new THREE.OrthographicCamera(-height * aspect, height * aspect, height, -height, 0, 2000); - cameraOrtho.position.set(600, 400, 0); - cameraOrtho.lookAt(0, 0, 0); - scene1.add(cameraOrtho); - cameraOrtho.name = 'OrthographicCamera'; - - material = new THREE.MeshLambertMaterial({ - color: 0xffff00, - side: THREE.DoubleSide, - }); - - object = new THREE.Mesh(new THREE.CircleGeometry(50, 20, 0, Math.PI * 2), material); - object.position.set(200, 0, -400); - scene1.add(object); - - object = new THREE.Mesh(new THREE.RingGeometry(10, 50, 20, 5, 0, Math.PI * 2), material); - object.position.set(0, 0, -400); - scene1.add(object); - - object = new THREE.Mesh(new THREE.CylinderGeometry(25, 75, 100, 40, 5), material); - object.position.set(-200, 0, -400); - scene1.add(object); - - // - const points = []; - - for (let i = 0; i < 50; i++) { - points.push(new THREE.Vector2(Math.sin(i * 0.2) * Math.sin(i * 0.1) * 15 + 50, (i - 5) * 2)); - } - - object = new THREE.Mesh(new THREE.LatheGeometry(points, 20), material); - object.position.set(200, 0, 400); - scene1.add(object); - - // --------------------------------------------------------------------- - // Big red box hidden just for testing `onlyVisible` option - // --------------------------------------------------------------------- - material = new THREE.MeshBasicMaterial({ - color: 0xff0000, - }); - object = new THREE.Mesh(new THREE.BoxGeometry(200, 200, 200), material); - object.position.set(0, 0, 0); - object.name = 'CubeHidden'; - object.visible = false; - scene1.add(object); - - // --------------------------------------------------------------------- - // Model requiring KHR_mesh_quantization - // --------------------------------------------------------------------- - const loader = new GLTFLoader(); - loader.load('models/gltf/ShaderBall.glb', function (gltf) { - model = gltf.scene; - model.scale.setScalar(50); - model.position.set(200, -40, -200); - scene1.add(model); - }); - - // --------------------------------------------------------------------- - // Model requiring KHR_mesh_quantization - // --------------------------------------------------------------------- - - material = new THREE.MeshBasicMaterial({ - color: 0xffffff, - }); - object = new THREE.InstancedMesh(new THREE.BoxGeometry(10, 10, 10, 2, 2, 2), material, 50); - const matrix = new THREE.Matrix4(); - const color = new THREE.Color(); - for (let i = 0; i < 50; i++) { - matrix.setPosition(Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50); - (object as THREE.InstancedMesh).setMatrixAt(i, matrix); - (object as THREE.InstancedMesh).setColorAt(i, color.setHSL(i / 50, 1, 0.5)); - } - - object.position.set(400, 0, 200); - scene1.add(object); - - // --------------------------------------------------------------------- - // 2nd THREE.Scene - // --------------------------------------------------------------------- - scene2 = new THREE.Scene(); - object = new THREE.Mesh(new THREE.BoxGeometry(100, 100, 100), material); - object.position.set(0, 0, 0); - object.name = 'Cube2ndScene'; - scene2.name = 'Scene2'; - scene2.add(object); - - // - - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - renderer.setAnimationLoop(animate); - renderer.toneMapping = THREE.ACESFilmicToneMapping; - renderer.toneMappingExposure = 1; - - container.appendChild(renderer.domElement); - - // - - window.addEventListener('resize', onWindowResize); - - // --------------------------------------------------------------------- - // Exporting compressed textures and meshes (KTX2 / Draco / Meshopt) - // --------------------------------------------------------------------- - const ktx2Loader = new KTX2Loader().setTranscoderPath('jsm/libs/basis/').detectSupport(renderer); - - const gltfLoader = new GLTFLoader().setPath('models/gltf/'); - gltfLoader.setKTX2Loader(ktx2Loader); - gltfLoader.setMeshoptDecoder(MeshoptDecoder); - gltfLoader.load('coffeemat.glb', function (gltf) { - gltf.scene.position.x = 400; - gltf.scene.position.z = -200; - - scene1.add(gltf.scene); - - coffeemat = gltf.scene; - }); - - // - - const gui = new GUI(); - - let h = gui.addFolder('Settings'); - h.add(params, 'trs').name('Use TRS'); - h.add(params, 'onlyVisible').name('Only Visible Objects'); - h.add(params, 'binary').name('Binary (GLB)'); - h.add(params, 'maxTextureSize', 2, 8192).name('Max Texture Size').step(1); - - h = gui.addFolder('Export'); - h.add(params, 'exportScene1').name('Export Scene 1'); - h.add(params, 'exportScenes').name('Export Scene 1 and 2'); - h.add(params, 'exportSphere').name('Export Sphere'); - h.add(params, 'exportModel').name('Export Model'); - h.add(params, 'exportObjects').name('Export Sphere With Grid'); - h.add(params, 'exportSceneObject').name('Export Scene 1 and Object'); - h.add(params, 'exportCompressedObject').name('Export Coffeemat (from compressed data)'); - - gui.open(); -} - -function exportScene1() { - exportGLTF(scene1); -} - -function exportScenes() { - exportGLTF([scene1, scene2]); -} - -function exportSphere() { - exportGLTF(sphere); -} - -function exportModel() { - exportGLTF(model); -} - -function exportObjects() { - exportGLTF([sphere, gridHelper]); -} - -function exportSceneObject() { - exportGLTF([scene1, gridHelper]); -} - -function exportCompressedObject() { - exportGLTF([coffeemat]); -} - -function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); - - renderer.setSize(window.innerWidth, window.innerHeight); -} - -// - -function animate() { - const timer = Date.now() * 0.0001; - - camera.position.x = Math.cos(timer) * 800; - camera.position.z = Math.sin(timer) * 800; - - camera.lookAt(scene1.position); - renderer.render(scene1, camera); -} diff --git a/examples-testing/examples/misc_exporter_obj.ts b/examples-testing/examples/misc_exporter_obj.ts deleted file mode 100644 index 73638fff1..000000000 --- a/examples-testing/examples/misc_exporter_obj.ts +++ /dev/null @@ -1,192 +0,0 @@ -import * as THREE from 'three'; - -import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; -import { OBJExporter } from 'three/addons/exporters/OBJExporter.js'; -import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; - -let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer; - -const params = { - addTriangle: addTriangle, - addCube: addCube, - addCylinder: addCylinder, - addMultiple: addMultiple, - addTransformed: addTransformed, - addPoints: addPoints, - exportToObj: exportToObj, -}; - -init(); - -function init() { - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - renderer.setAnimationLoop(animate); - document.body.appendChild(renderer.domElement); - - camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000); - camera.position.set(0, 0, 400); - - scene = new THREE.Scene(); - - const ambientLight = new THREE.AmbientLight(0xffffff); - scene.add(ambientLight); - - const directionalLight = new THREE.DirectionalLight(0xffffff, 2.5); - directionalLight.position.set(0, 1, 1); - scene.add(directionalLight); - - const gui = new GUI(); - - let h = gui.addFolder('Geometry Selection'); - h.add(params, 'addTriangle').name('Triangle'); - h.add(params, 'addCube').name('Cube'); - h.add(params, 'addCylinder').name('Cylinder'); - h.add(params, 'addMultiple').name('Multiple objects'); - h.add(params, 'addTransformed').name('Transformed objects'); - h.add(params, 'addPoints').name('Point Cloud'); - - h = gui.addFolder('Export'); - h.add(params, 'exportToObj').name('Export OBJ'); - - gui.open(); - - addGeometry(1); - - window.addEventListener('resize', onWindowResize); - - const controls = new OrbitControls(camera, renderer.domElement); - controls.enablePan = false; -} - -function exportToObj() { - const exporter = new OBJExporter(); - const result = exporter.parse(scene); - saveString(result, 'object.obj'); -} - -function addGeometry(type: number) { - for (let i = 0; i < scene.children.length; i++) { - const child = scene.children[i]; - - if ((child as THREE.Mesh).isMesh || (child as THREE.Points).isPoints) { - (child as THREE.Mesh | THREE.Points).geometry.dispose(); - scene.remove(child); - i--; - } - } - - if (type === 1) { - const material = new THREE.MeshLambertMaterial({ color: 0x00cc00 }); - const geometry = generateTriangleGeometry(); - - scene.add(new THREE.Mesh(geometry, material)); - } else if (type === 2) { - const material = new THREE.MeshLambertMaterial({ color: 0x00cc00 }); - const geometry = new THREE.BoxGeometry(100, 100, 100); - scene.add(new THREE.Mesh(geometry, material)); - } else if (type === 3) { - const material = new THREE.MeshLambertMaterial({ color: 0x00cc00 }); - const geometry = new THREE.CylinderGeometry(50, 50, 100, 30, 1); - scene.add(new THREE.Mesh(geometry, material)); - } else if (type === 4 || type === 5) { - const material = new THREE.MeshLambertMaterial({ color: 0x00cc00 }); - const geometry = generateTriangleGeometry(); - - const mesh = new THREE.Mesh(geometry, material); - mesh.position.x = -200; - scene.add(mesh); - - const geometry2 = new THREE.BoxGeometry(100, 100, 100); - const mesh2 = new THREE.Mesh(geometry2, material); - scene.add(mesh2); - - const geometry3 = new THREE.CylinderGeometry(50, 50, 100, 30, 1); - const mesh3 = new THREE.Mesh(geometry3, material); - mesh3.position.x = 200; - scene.add(mesh3); - - if (type === 5) { - mesh.rotation.y = Math.PI / 4.0; - mesh2.rotation.y = Math.PI / 4.0; - mesh3.rotation.y = Math.PI / 4.0; - } - } else if (type === 6) { - const points = [0, 0, 0, 100, 0, 0, 100, 100, 0, 0, 100, 0]; - const colors = [0.5, 0, 0, 0.5, 0, 0, 0, 0.5, 0, 0, 0.5, 0]; - - const geometry = new THREE.BufferGeometry(); - geometry.setAttribute('position', new THREE.Float32BufferAttribute(points, 3)); - geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3)); - - const material = new THREE.PointsMaterial({ size: 10, vertexColors: true }); - - const pointCloud = new THREE.Points(geometry, material); - pointCloud.name = 'point cloud'; - scene.add(pointCloud); - } -} - -function addTriangle() { - addGeometry(1); -} - -function addCube() { - addGeometry(2); -} - -function addCylinder() { - addGeometry(3); -} - -function addMultiple() { - addGeometry(4); -} - -function addTransformed() { - addGeometry(5); -} - -function addPoints() { - addGeometry(6); -} - -const link = document.createElement('a'); -link.style.display = 'none'; -document.body.appendChild(link); - -function save(blob: Blob, filename: string) { - link.href = URL.createObjectURL(blob); - link.download = filename; - link.click(); -} - -function saveString(text: string, filename: string) { - save(new Blob([text], { type: 'text/plain' }), filename); -} - -function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); - - renderer.setSize(window.innerWidth, window.innerHeight); -} - -function animate() { - renderer.render(scene, camera); -} - -function generateTriangleGeometry() { - const geometry = new THREE.BufferGeometry(); - const vertices = []; - - vertices.push(-50, -50, 0); - vertices.push(50, -50, 0); - vertices.push(50, 50, 0); - - geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3)); - geometry.computeVertexNormals(); - - return geometry; -} diff --git a/examples-testing/index.js b/examples-testing/index.js index 3b270491a..56ed9d9ae 100644 --- a/examples-testing/index.js +++ b/examples-testing/index.js @@ -58,14 +58,7 @@ const exceptionList = [ 'webgpu_lights_custom', 'webgpu_lines_fat_wireframe', 'webgpu_materials', - 'webgpu_materials_envmaps_bpcem', - 'webgpu_materials_matcap', - 'webgpu_materials_sss', - 'webgpu_materialx_noise', - 'webgpu_mirror', 'webgpu_mrt_mask', - 'webgpu_multiple_rendertargets', - 'webgpu_multisampled_renderbuffers', 'webgpu_occlusion', 'webgpu_particles', 'webgpu_performance', diff --git a/types/three/src/materials/nodes/MeshSSSNodeMaterial.d.ts b/types/three/src/materials/nodes/MeshSSSNodeMaterial.d.ts index bccbec30c..21c235c11 100644 --- a/types/three/src/materials/nodes/MeshSSSNodeMaterial.d.ts +++ b/types/three/src/materials/nodes/MeshSSSNodeMaterial.d.ts @@ -1,14 +1,14 @@ -import ConstNode from "../../nodes/core/ConstNode.js"; +import InputNode from "../../nodes/core/InputNode.js"; import Node from "../../nodes/core/Node.js"; import MeshPhysicalNodeMaterial, { MeshPhysicalNodeMaterialParameters } from "./MeshPhysicalNodeMaterial.js"; export default class MeshSSSNodeMaterial extends MeshPhysicalNodeMaterial { thicknessColorNode: Node | null; - thicknessDistortionNode: ConstNode; - thicknessAmbientNode: ConstNode; - thicknessAttenuationNode: ConstNode; - thicknessPowerNode: ConstNode; - thicknessScaleNode: ConstNode; + thicknessDistortionNode: InputNode; + thicknessAmbientNode: InputNode; + thicknessAttenuationNode: InputNode; + thicknessPowerNode: InputNode; + thicknessScaleNode: InputNode; constructor(parameters?: MeshPhysicalNodeMaterialParameters); diff --git a/types/three/src/textures/DataTexture.d.ts b/types/three/src/textures/DataTexture.d.ts index 33cbe3902..4b828ef18 100644 --- a/types/three/src/textures/DataTexture.d.ts +++ b/types/three/src/textures/DataTexture.d.ts @@ -51,7 +51,7 @@ export class DataTexture extends Texture { * @param colorSpace See {@link Texture.colorSpace | .colorSpace}. Default {@link NoColorSpace} */ constructor( - data?: BufferSource | null, + data?: ArrayBufferView | null, width?: number, height?: number, format?: PixelFormat, @@ -111,7 +111,7 @@ export class DataTexture extends Texture { } export interface TextureImageData { - data: Uint8Array | Uint8ClampedArray; + data: ArrayBufferView; height: number; width: number; }