From 5ac1f4d78baad68ae40f4b20053c88967347b9cf Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Fri, 14 Jul 2023 20:59:10 -0400 Subject: [PATCH] Remove examples covered by example testing --- types/three/OTHER_FILES.txt | 11 + .../three-examples/misc_boxselection.ts | 138 -------- .../three-examples/misc_controls_arcball.ts | 145 --------- .../three-examples/misc_controls_drag.ts | 149 --------- .../three-examples/misc_controls_fly.ts | 132 -------- .../misc_controls_pointerlock.ts | 250 -------------- .../three-examples/misc_controls_transform.ts | 173 ---------- ...ebgl2_materials_texture3d_partialupdate.ts | 306 ------------------ .../webgl2_multiple_rendertargets.ts | 174 ---------- .../webgl2_volume_instancing.ts | 198 ------------ .../three-examples/webxr_ar_lighting.ts | 140 -------- types/three/tsconfig.json | 10 - 12 files changed, 11 insertions(+), 1815 deletions(-) delete mode 100644 types/three/test/integration/three-examples/misc_boxselection.ts delete mode 100644 types/three/test/integration/three-examples/misc_controls_arcball.ts delete mode 100644 types/three/test/integration/three-examples/misc_controls_drag.ts delete mode 100644 types/three/test/integration/three-examples/misc_controls_fly.ts delete mode 100644 types/three/test/integration/three-examples/misc_controls_pointerlock.ts delete mode 100644 types/three/test/integration/three-examples/misc_controls_transform.ts delete mode 100644 types/three/test/integration/three-examples/webgl2_materials_texture3d_partialupdate.ts delete mode 100644 types/three/test/integration/three-examples/webgl2_multiple_rendertargets.ts delete mode 100644 types/three/test/integration/three-examples/webgl2_volume_instancing.ts delete mode 100644 types/three/test/integration/three-examples/webxr_ar_lighting.ts diff --git a/types/three/OTHER_FILES.txt b/types/three/OTHER_FILES.txt index 86e03131c..821115ab9 100644 --- a/types/three/OTHER_FILES.txt +++ b/types/three/OTHER_FILES.txt @@ -5,7 +5,11 @@ build/three.module.d.ts build/three.module.min.d.ts examples/jsm/animation/AnimationClipCreator.d.ts examples/jsm/csm/CSMShader.d.ts +examples/jsm/controls/ArcballControls.d.ts +examples/jsm/controls/DragControls.d.ts +examples/jsm/controls/FlyControls.d.ts examples/jsm/controls/MapControls.d.ts +examples/jsm/controls/PointerLockControls.d.ts examples/jsm/curves/NURBSCurve.d.ts examples/jsm/curves/NURBSSurface.d.ts examples/jsm/curves/NURBSUtils.d.ts @@ -34,6 +38,8 @@ examples/jsm/helpers/VertexNormalsHelper.d.ts examples/jsm/helpers/VertexTangentsHelper.d.ts examples/jsm/interactive/HTMLMesh.d.ts examples/jsm/interactive/InteractiveGroup.d.ts +examples/jsm/interactive/SelectionBox.d.ts +examples/jsm/interactive/SelectionHelper.d.ts examples/jsm/libs/meshopt_decoder.module.d.ts examples/jsm/lights/LightProbeGenerator.d.ts examples/jsm/lines/Wireframe.d.ts @@ -64,12 +70,14 @@ examples/jsm/loaders/STLLoader.d.ts examples/jsm/loaders/TDSLoader.d.ts examples/jsm/loaders/TIFFLoader.d.ts examples/jsm/loaders/TiltLoader.d.ts +examples/jsm/loaders/VOXLoader.d.ts examples/jsm/loaders/VRMLLoader.d.ts examples/jsm/loaders/VTKLoader.d.ts examples/jsm/loaders/XYZLoader.d.ts examples/jsm/math/Capsule.d.ts examples/jsm/math/ColorConverter.d.ts examples/jsm/math/ConvexHull.d.ts +examples/jsm/math/ImprovedNoise.d.ts examples/jsm/math/Lut.d.ts examples/jsm/math/MeshSurfaceSampler.d.ts examples/jsm/math/OBB.d.ts @@ -87,6 +95,7 @@ examples/jsm/misc/VolumeSlice.d.ts examples/jsm/modifiers/CurveModifier.d.ts examples/jsm/modifiers/EdgeSplitModifier.d.ts examples/jsm/modifiers/SimplifyModifier.d.ts +examples/jsm/objects/Lensflare.d.ts examples/jsm/objects/Refractor.d.ts examples/jsm/objects/ShadowMesh.d.ts examples/jsm/objects/Sky.d.ts @@ -171,7 +180,9 @@ examples/jsm/utils/PackedPhongMaterial.d.ts examples/jsm/utils/SceneUtils.d.ts examples/jsm/utils/SkeletonUtils.d.ts examples/jsm/utils/UVsDebug.d.ts +examples/jsm/webxr/ARButton.d.ts examples/jsm/webxr/OculusHandModel.d.ts examples/jsm/webxr/OculusHandPointerModel.d.ts examples/jsm/webxr/Text2D.d.ts +examples/jsm/webxr/XREstimatedLight.d.ts examples/jsm/webxr/XRPlanes.d.ts diff --git a/types/three/test/integration/three-examples/misc_boxselection.ts b/types/three/test/integration/three-examples/misc_boxselection.ts deleted file mode 100644 index c2406cb7b..000000000 --- a/types/three/test/integration/three-examples/misc_boxselection.ts +++ /dev/null @@ -1,138 +0,0 @@ -import * as THREE from 'three'; - -import { SelectionBox } from 'three/examples/jsm/interactive/SelectionBox'; -import { SelectionHelper } from 'three/examples/jsm/interactive/SelectionHelper'; - -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(70, window.innerWidth / window.innerHeight, 1, 5000); - camera.position.z = 1000; - - scene = new THREE.Scene(); - scene.background = new THREE.Color(0xf0f0f0); - - scene.add(new THREE.AmbientLight(0x505050)); - - const light = new THREE.SpotLight(0xffffff, 1.5); - light.position.set(0, 500, 2000); - light.angle = Math.PI / 9; - - light.castShadow = true; - light.shadow.camera.near = 1000; - light.shadow.camera.far = 4000; - light.shadow.mapSize.width = 1024; - light.shadow.mapSize.height = 1024; - - scene.add(light); - - const geometry = new THREE.BoxGeometry(20, 20, 20); - - for (let i = 0; i < 200; i++) { - const object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff })); - - object.position.x = Math.random() * 1600 - 800; - object.position.y = Math.random() * 900 - 450; - object.position.z = Math.random() * 900 - 500; - - object.rotation.x = Math.random() * 2 * Math.PI; - object.rotation.y = Math.random() * 2 * Math.PI; - object.rotation.z = Math.random() * 2 * Math.PI; - - object.scale.x = Math.random() * 2 + 1; - object.scale.y = Math.random() * 2 + 1; - object.scale.z = Math.random() * 2 + 1; - - object.castShadow = true; - object.receiveShadow = true; - - scene.add(object); - } - - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - - renderer.shadowMap.enabled = true; - renderer.shadowMap.type = THREE.PCFShadowMap; - - container.appendChild(renderer.domElement); - - window.addEventListener('resize', onWindowResize); - - const selectionBox = new SelectionBox(camera, scene); - const helper = new SelectionHelper(renderer, 'selectBox'); - - document.addEventListener('pointerdown', event => { - for (const item of selectionBox.collection as Array>) { - item.material.emissive.set(0x000000); - } - - selectionBox.startPoint.set( - (event.clientX / window.innerWidth) * 2 - 1, - -(event.clientY / window.innerHeight) * 2 + 1, - 0.5, - ); - }); - - document.addEventListener('pointermove', event => { - if (helper.isDown) { - for (const item of selectionBox.collection) { - (item.material as THREE.MeshLambertMaterial).emissive.set(0x000000); - } - - selectionBox.endPoint.set( - (event.clientX / window.innerWidth) * 2 - 1, - -(event.clientY / window.innerHeight) * 2 + 1, - 0.5, - ); - - const allSelected = selectionBox.select(); - - for (const item of allSelected) { - (item.material as THREE.MeshLambertMaterial).emissive.set(0xffffff); - } - } - }); - - document.addEventListener('pointerup', event => { - selectionBox.endPoint.set( - (event.clientX / window.innerWidth) * 2 - 1, - -(event.clientY / window.innerHeight) * 2 + 1, - 0.5, - ); - - const allSelected = selectionBox.select(); - - for (const item of allSelected) { - (item.material as THREE.MeshLambertMaterial).emissive.set(0xffffff); - } - }); -} - -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/misc_controls_arcball.ts b/types/three/test/integration/three-examples/misc_controls_arcball.ts deleted file mode 100644 index 0cb7fc072..000000000 --- a/types/three/test/integration/three-examples/misc_controls_arcball.ts +++ /dev/null @@ -1,145 +0,0 @@ -import * as THREE from 'three'; - -import { ArcballControls } from 'three/examples/jsm/controls/ArcballControls'; - -import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'; -import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'; - -const perspectiveDistance = 2.5; -let camera: THREE.Camera; -let controls: ArcballControls; -let scene: THREE.Scene; -let renderer: THREE.WebGLRenderer; - -const arcballGui = { - gizmoVisible: true, - - setArcballControls: () => { - controls = new ArcballControls(camera, renderer.domElement, scene); - controls.addEventListener('change', render); - - arcballGui.gizmoVisible = true; - }, -}; - -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.outputEncoding = THREE.sRGBEncoding; - 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(); - scene.add(new THREE.HemisphereLight(0x443333, 0x222233, 4)); - - camera = makePerspectiveCamera(); - camera.position.set(0, 0, perspectiveDistance); - - const material = new THREE.MeshStandardMaterial(); - - new OBJLoader().setPath('models/obj/cerberus/').load('Cerberus.obj', 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.encoding = THREE.sRGBEncoding; - 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(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() - .setDataType(THREE.UnsignedByteType) - .setPath('textures/equirectangular/') - .load('venice_sunset_1k.hdr', hdrEquirect => { - hdrEquirect.mapping = THREE.EquirectangularReflectionMapping; - - scene.environment = hdrEquirect; - - render(); - }); - - window.addEventListener('keydown', onKeyDown); - window.addEventListener('resize', onWindowResize); - - arcballGui.setArcballControls(); - - render(); - }); -} - -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 instanceof THREE.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.left = -halfW; - camera.right = halfW; - camera.top = halfH; - camera.bottom = -halfH; - } else if (camera instanceof THREE.PerspectiveCamera) { - camera.aspect = window.innerWidth / window.innerHeight; - } - - (camera as THREE.OrthographicCamera).updateProjectionMatrix(); - - renderer.setSize(window.innerWidth, window.innerHeight); - - render(); -} - -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 render() { - renderer.render(scene, camera); -} diff --git a/types/three/test/integration/three-examples/misc_controls_drag.ts b/types/three/test/integration/three-examples/misc_controls_drag.ts deleted file mode 100644 index 901b41c63..000000000 --- a/types/three/test/integration/three-examples/misc_controls_drag.ts +++ /dev/null @@ -1,149 +0,0 @@ -import * as THREE from 'three'; - -import { DragControls } from 'three/examples/jsm/controls/DragControls'; - -let camera: THREE.PerspectiveCamera; -let scene: THREE.Scene; -let renderer: THREE.WebGLRenderer; -let controls: DragControls; -let group: THREE.Group; -let enableSelection = false; - -const objects: Array> = []; - -const mouse = new THREE.Vector2(); -const raycaster = new THREE.Raycaster(); - -init(); - -function init() { - const container = document.createElement('div'); - document.body.appendChild(container); - - camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 5000); - camera.position.z = 1000; - - scene = new THREE.Scene(); - scene.background = new THREE.Color(0xf0f0f0); - - scene.add(new THREE.AmbientLight(0x505050)); - - const light = new THREE.SpotLight(0xffffff, 1.5); - light.position.set(0, 500, 2000); - light.angle = Math.PI / 9; - - light.castShadow = true; - light.shadow.camera.near = 1000; - light.shadow.camera.far = 4000; - light.shadow.mapSize.width = 1024; - light.shadow.mapSize.height = 1024; - - scene.add(light); - - group = new THREE.Group(); - scene.add(group); - - const geometry = new THREE.BoxGeometry(40, 40, 40); - - for (let i = 0; i < 200; i++) { - const object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff })); - - object.position.x = Math.random() * 1000 - 500; - object.position.y = Math.random() * 600 - 300; - object.position.z = Math.random() * 800 - 400; - - object.rotation.x = Math.random() * 2 * Math.PI; - object.rotation.y = Math.random() * 2 * Math.PI; - object.rotation.z = Math.random() * 2 * Math.PI; - - object.scale.x = Math.random() * 2 + 1; - object.scale.y = Math.random() * 2 + 1; - object.scale.z = Math.random() * 2 + 1; - - object.castShadow = true; - object.receiveShadow = true; - - scene.add(object); - - objects.push(object); - } - - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - - renderer.shadowMap.enabled = true; - renderer.shadowMap.type = THREE.PCFShadowMap; - - container.appendChild(renderer.domElement); - - controls = new DragControls([...objects], camera, renderer.domElement); - controls.addEventListener('drag', render); - - // - - window.addEventListener('resize', onWindowResize); - - document.addEventListener('click', onClick); - window.addEventListener('keydown', onKeyDown); - window.addEventListener('keyup', onKeyUp); - - render(); -} - -function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); - - renderer.setSize(window.innerWidth, window.innerHeight); - - render(); -} - -function onKeyDown(event: KeyboardEvent) { - enableSelection = event.keyCode === 16 ? true : false; -} - -function onKeyUp() { - enableSelection = false; -} - -function onClick(event: MouseEvent) { - event.preventDefault(); - - if (enableSelection) { - const draggableObjects = controls.getObjects(); - draggableObjects.length = 0; - - mouse.x = (event.clientX / window.innerWidth) * 2 - 1; - mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; - - raycaster.setFromCamera(mouse, camera); - - const intersections = raycaster.intersectObjects>( - objects, - true, - ); - - if (intersections.length > 0) { - const object = intersections[0].object; - - object.material.emissive.set(0xaaaaaa); - group.attach(object); - - controls.transformGroup = true; - draggableObjects.push(group); - } - - if (group.children.length === 0) { - controls.transformGroup = false; - draggableObjects.push(...objects); - } - } - - render(); -} - -function render() { - renderer.render(scene, camera); -} diff --git a/types/three/test/integration/three-examples/misc_controls_fly.ts b/types/three/test/integration/three-examples/misc_controls_fly.ts deleted file mode 100644 index 2eff20f81..000000000 --- a/types/three/test/integration/three-examples/misc_controls_fly.ts +++ /dev/null @@ -1,132 +0,0 @@ -import * as THREE from 'three'; - -import { FlyControls } from 'three/examples/jsm/controls/FlyControls'; -import { Lensflare, LensflareElement } from 'three/examples/jsm/objects/Lensflare'; - -let camera: THREE.PerspectiveCamera; -let scene: THREE.Scene; -let renderer: THREE.WebGLRenderer; -let controls: FlyControls; - -const clock = new THREE.Clock(); - -init(); -animate(); - -function init() { - const container = document.createElement('div'); - document.body.appendChild(container); - - // camera - - camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 15000); - camera.position.z = 250; - - // scene - - scene = new THREE.Scene(); - scene.background = new THREE.Color().setHSL(0.51, 0.4, 0.01); - scene.fog = new THREE.Fog(scene.background, 3500, 15000); - - // world - - const s = 250; - - const geometry = new THREE.BoxGeometry(s, s, s); - const material = new THREE.MeshPhongMaterial({ color: 0xffffff, specular: 0xffffff, shininess: 50 }); - - for (let i = 0; i < 3000; i++) { - const mesh = new THREE.Mesh(geometry, material); - - mesh.position.x = 8000 * (2.0 * Math.random() - 1.0); - mesh.position.y = 8000 * (2.0 * Math.random() - 1.0); - mesh.position.z = 8000 * (2.0 * Math.random() - 1.0); - - mesh.rotation.x = Math.random() * Math.PI; - mesh.rotation.y = Math.random() * Math.PI; - mesh.rotation.z = Math.random() * Math.PI; - - mesh.matrixAutoUpdate = false; - mesh.updateMatrix(); - - scene.add(mesh); - } - - // lights - - const dirLight = new THREE.DirectionalLight(0xffffff, 0.05); - dirLight.position.set(0, -1, 0).normalize(); - dirLight.color.setHSL(0.1, 0.7, 0.5); - scene.add(dirLight); - - // lensflares - const textureLoader = new THREE.TextureLoader(); - - const textureFlare0 = textureLoader.load('textures/lensflare/lensflare0.png'); - const textureFlare3 = textureLoader.load('textures/lensflare/lensflare3.png'); - - addLight(0.55, 0.9, 0.5, 5000, 0, -1000); - addLight(0.08, 0.8, 0.5, 0, 0, -1000); - addLight(0.995, 0.5, 0.9, 5000, 5000, -1000); - - function addLight(h: number, s: number, l: number, x: number, y: number, z: number) { - const light = new THREE.PointLight(0xffffff, 1.5, 2000); - light.color.setHSL(h, s, l); - light.position.set(x, y, z); - scene.add(light); - - const lensflare = new Lensflare(); - lensflare.addElement(new LensflareElement(textureFlare0, 700, 0, light.color)); - lensflare.addElement(new LensflareElement(textureFlare3, 60, 0.6)); - lensflare.addElement(new LensflareElement(textureFlare3, 70, 0.7)); - lensflare.addElement(new LensflareElement(textureFlare3, 120, 0.9)); - lensflare.addElement(new LensflareElement(textureFlare3, 70, 1)); - light.add(lensflare); - } - - // renderer - - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - renderer.outputEncoding = THREE.sRGBEncoding; - container.appendChild(renderer.domElement); - - // - - controls = new FlyControls(camera, renderer.domElement); - - controls.movementSpeed = 2500; - controls.domElement = container; - controls.rollSpeed = Math.PI / 6; - controls.autoForward = false; - controls.dragToLook = false; - - // events - - window.addEventListener('resize', onWindowResize); -} - -// - -function onWindowResize() { - renderer.setSize(window.innerWidth, window.innerHeight); - - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); -} - -// - -function animate() { - requestAnimationFrame(animate); - - render(); -} - -function render() { - const delta = clock.getDelta(); - - controls.update(delta); - renderer.render(scene, camera); -} diff --git a/types/three/test/integration/three-examples/misc_controls_pointerlock.ts b/types/three/test/integration/three-examples/misc_controls_pointerlock.ts deleted file mode 100644 index f72b3c3c3..000000000 --- a/types/three/test/integration/three-examples/misc_controls_pointerlock.ts +++ /dev/null @@ -1,250 +0,0 @@ -import * as THREE from 'three'; - -import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls'; - -let camera: THREE.PerspectiveCamera; -let scene: THREE.Scene; -let renderer: THREE.WebGLRenderer; -let controls: PointerLockControls; - -const objects: Array> = []; - -let raycaster: THREE.Raycaster; - -let moveForward = false; -let moveBackward = false; -let moveLeft = false; -let moveRight = false; -let canJump = false; - -let prevTime = performance.now(); -const velocity = new THREE.Vector3(); -const direction = new THREE.Vector3(); -const vertex = new THREE.Vector3(); -const color = new THREE.Color(); - -init(); -animate(); - -function init() { - camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000); - camera.position.y = 10; - - scene = new THREE.Scene(); - scene.background = new THREE.Color(0xffffff); - scene.fog = new THREE.Fog(0xffffff, 0, 750); - - const light = new THREE.HemisphereLight(0xeeeeff, 0x777788, 0.75); - light.position.set(0.5, 1, 0.75); - scene.add(light); - - controls = new PointerLockControls(camera, document.body); - - const blocker = document.getElementById('blocker')!; - const instructions = document.getElementById('instructions')!; - - instructions.addEventListener('click', () => { - controls.lock(); - }); - - controls.addEventListener('lock', () => { - instructions.style.display = 'none'; - blocker.style.display = 'none'; - }); - - controls.addEventListener('unlock', () => { - blocker.style.display = 'block'; - instructions.style.display = ''; - }); - - scene.add(controls.getObject()); - - const onKeyDown = (event: KeyboardEvent) => { - switch (event.code) { - case 'ArrowUp': - case 'KeyW': - moveForward = true; - break; - - case 'ArrowLeft': - case 'KeyA': - moveLeft = true; - break; - - case 'ArrowDown': - case 'KeyS': - moveBackward = true; - break; - - case 'ArrowRight': - case 'KeyD': - moveRight = true; - break; - - case 'Space': - if (canJump) velocity.y += 350; - canJump = false; - break; - } - }; - - const onKeyUp = (event: KeyboardEvent) => { - switch (event.code) { - case 'ArrowUp': - case 'KeyW': - moveForward = false; - break; - - case 'ArrowLeft': - case 'KeyA': - moveLeft = false; - break; - - case 'ArrowDown': - case 'KeyS': - moveBackward = false; - break; - - case 'ArrowRight': - case 'KeyD': - moveRight = false; - break; - } - }; - - document.addEventListener('keydown', onKeyDown); - document.addEventListener('keyup', onKeyUp); - - raycaster = new THREE.Raycaster(new THREE.Vector3(), new THREE.Vector3(0, -1, 0), 0, 10); - - // floor - - const floorGeometry = new THREE.PlaneGeometry(2000, 2000, 100, 100); - floorGeometry.rotateX(-Math.PI / 2); - - // vertex displacement - - let position = floorGeometry.attributes.position; - - for (let i = 0, l = position.count; i < l; i++) { - vertex.fromBufferAttribute(position, i); - - vertex.x += Math.random() * 20 - 10; - vertex.y += Math.random() * 2; - vertex.z += Math.random() * 20 - 10; - - position.setXYZ(i, vertex.x, vertex.y, vertex.z); - } - - const indexedGeometry = floorGeometry.toNonIndexed(); // ensure each face has unique vertices - - position = indexedGeometry.attributes.position; - const colorsFloor = []; - - for (let i = 0, l = position.count; i < l; i++) { - color.setHSL(Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75); - colorsFloor.push(color.r, color.g, color.b); - } - - indexedGeometry.setAttribute('color', new THREE.Float32BufferAttribute(colorsFloor, 3)); - - const floorMaterial = new THREE.MeshBasicMaterial({ vertexColors: true }); - - const floor = new THREE.Mesh(indexedGeometry, floorMaterial); - scene.add(floor); - - // objects - - const boxGeometry = new THREE.BoxGeometry(20, 20, 20).toNonIndexed(); - - position = boxGeometry.attributes.position; - const colorsBox = []; - - for (let i = 0, l = position.count; i < l; i++) { - color.setHSL(Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75); - colorsBox.push(color.r, color.g, color.b); - } - - boxGeometry.setAttribute('color', new THREE.Float32BufferAttribute(colorsBox, 3)); - - for (let i = 0; i < 500; i++) { - const boxMaterial = new THREE.MeshPhongMaterial({ specular: 0xffffff, flatShading: true, vertexColors: true }); - boxMaterial.color.setHSL(Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75); - - const box = new THREE.Mesh(boxGeometry, boxMaterial); - box.position.x = Math.floor(Math.random() * 20 - 10) * 20; - box.position.y = Math.floor(Math.random() * 20) * 20 + 10; - box.position.z = Math.floor(Math.random() * 20 - 10) * 20; - - scene.add(box); - objects.push(box); - } - - // - - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - document.body.appendChild(renderer.domElement); - - // - - window.addEventListener('resize', onWindowResize); -} - -function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); - - renderer.setSize(window.innerWidth, window.innerHeight); -} - -function animate() { - requestAnimationFrame(animate); - - const time = performance.now(); - - if (controls.isLocked) { - raycaster.ray.origin.copy(controls.getObject().position); - raycaster.ray.origin.y -= 10; - - const intersections = raycaster.intersectObjects(objects, false); - - const onObject = intersections.length > 0; - - const delta = (time - prevTime) / 1000; - - velocity.x -= velocity.x * 10.0 * delta; - velocity.z -= velocity.z * 10.0 * delta; - - velocity.y -= 9.8 * 100.0 * delta; // 100.0 = mass - - direction.z = Number(moveForward) - Number(moveBackward); - direction.x = Number(moveRight) - Number(moveLeft); - direction.normalize(); // this ensures consistent movements in all directions - - if (moveForward || moveBackward) velocity.z -= direction.z * 400.0 * delta; - if (moveLeft || moveRight) velocity.x -= direction.x * 400.0 * delta; - - if (onObject) { - velocity.y = Math.max(0, velocity.y); - canJump = true; - } - - controls.moveRight(-velocity.x * delta); - controls.moveForward(-velocity.z * delta); - - controls.getObject().position.y += velocity.y * delta; // new behavior - - if (controls.getObject().position.y < 10) { - velocity.y = 0; - controls.getObject().position.y = 10; - - canJump = true; - } - } - - prevTime = time; - - renderer.render(scene, camera); -} diff --git a/types/three/test/integration/three-examples/misc_controls_transform.ts b/types/three/test/integration/three-examples/misc_controls_transform.ts deleted file mode 100644 index 41c38e7c7..000000000 --- a/types/three/test/integration/three-examples/misc_controls_transform.ts +++ /dev/null @@ -1,173 +0,0 @@ -import * as THREE from 'three'; - -import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; -import { TransformControls } from 'three/examples/jsm/controls/TransformControls'; - -let cameraPersp: THREE.PerspectiveCamera; -let cameraOrtho: THREE.OrthographicCamera; -let currentCamera: THREE.PerspectiveCamera | THREE.OrthographicCamera; - -let scene: THREE.Scene; -let renderer: THREE.WebGLRenderer; -let control: TransformControls; -let orbit: OrbitControls; - -init(); -render(); - -function init() { - renderer = new THREE.WebGLRenderer(); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - document.body.appendChild(renderer.domElement); - - const aspect = window.innerWidth / window.innerHeight; - - cameraPersp = new THREE.PerspectiveCamera(50, aspect, 0.01, 30000); - cameraOrtho = new THREE.OrthographicCamera(-600 * aspect, 600 * aspect, 600, -600, 0.01, 30000); - currentCamera = cameraPersp; - - currentCamera.position.set(1000, 500, 1000); - currentCamera.lookAt(0, 200, 0); - - scene = new THREE.Scene(); - scene.add(new THREE.GridHelper(1000, 10, 0x888888, 0x444444)); - - const light = new THREE.DirectionalLight(0xffffff, 2); - light.position.set(1, 1, 1); - scene.add(light); - - const texture = new THREE.TextureLoader().load('textures/crate.gif', render); - texture.anisotropy = renderer.capabilities.getMaxAnisotropy(); - - const geometry = new THREE.BoxGeometry(200, 200, 200); - const material = new THREE.MeshLambertMaterial({ map: texture, transparent: true }); - - 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', event => { - orbit.enabled = !event.value; - }); - - const mesh = new THREE.Mesh(geometry, material); - scene.add(mesh); - - control.attach(mesh); - scene.add(control); - - window.addEventListener('resize', onWindowResize); - - window.addEventListener('keydown', event => { - switch (event.keyCode) { - case 81: // Q - control.setSpace(control.space === 'local' ? 'world' : 'local'); - break; - - case 16: // Shift - control.setTranslationSnap(100); - control.setRotationSnap(THREE.MathUtils.degToRad(15)); - control.setScaleSnap(0.25); - break; - - case 87: // W - control.setMode('translate'); - break; - - case 69: // E - control.setMode('rotate'); - break; - - case 82: // R - control.setMode('scale'); - break; - - case 67: // 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 86: // 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 187: - case 107: // +, =, num+ - control.setSize(control.size + 0.1); - break; - - case 189: - case 109: // -, _, num- - control.setSize(Math.max(control.size - 0.1, 0.1)); - break; - - case 88: // X - control.showX = !control.showX; - break; - - case 89: // Y - control.showY = !control.showY; - break; - - case 90: // Z - control.showZ = !control.showZ; - break; - - case 32: // Spacebar - control.enabled = !control.enabled; - break; - } - }); - - window.addEventListener('keyup', event => { - switch (event.keyCode) { - case 16: // 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/types/three/test/integration/three-examples/webgl2_materials_texture3d_partialupdate.ts b/types/three/test/integration/three-examples/webgl2_materials_texture3d_partialupdate.ts deleted file mode 100644 index 35dfe63c2..000000000 --- a/types/three/test/integration/three-examples/webgl2_materials_texture3d_partialupdate.ts +++ /dev/null @@ -1,306 +0,0 @@ -import * as THREE from 'three'; -import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; -import { ImprovedNoise } from 'three/examples/jsm/math/ImprovedNoise'; - -import WEBGL from 'three/examples/jsm/capabilities/WebGL'; - -if (!WEBGL.isWebGL2Available()) { - document.body.appendChild(WEBGL.getWebGL2ErrorMessage()); -} - -const INITIAL_CLOUD_SIZE = 128; - -let renderer: THREE.WebGLRenderer; -let scene: THREE.Scene; -let camera: THREE.PerspectiveCamera; -let mesh: THREE.Mesh; -let prevTime = performance.now(); -let cloudTexture: THREE.Data3DTexture | null = null; - -init(); -animate(); - -function generateCloudTexture(size: number, scaleFactor = 1.0) { - const data = new Uint8Array(size * size * size); - const scale = (scaleFactor * 10.0) / size; - - let i = 0; - const perlin = new ImprovedNoise(); - const vector = new THREE.Vector3(); - - for (let z = 0; z < size; z++) { - for (let y = 0; y < size; y++) { - for (let x = 0; x < size; x++) { - const dist = vector - .set(x, y, z) - .subScalar(size / 2) - .divideScalar(size) - .length(); - const fadingFactor = (1.0 - dist) * (1.0 - dist); - data[i] = (128 + 128 * perlin.noise((x * scale) / 1.5, y * scale, (z * scale) / 1.5)) * fadingFactor; - - i++; - } - } - } - - return new THREE.Data3DTexture(data, size, size, size); -} - -function init() { - renderer = new THREE.WebGLRenderer(); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - document.body.appendChild(renderer.domElement); - - scene = new THREE.Scene(); - - camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100); - camera.position.set(0, 0, 1.5); - - new OrbitControls(camera, renderer.domElement); - - // Sky - - const canvas = document.createElement('canvas'); - canvas.width = 1; - canvas.height = 32; - - const context = canvas.getContext('2d') as CanvasRenderingContext2D; - const gradient = context.createLinearGradient(0, 0, 0, 32); - gradient.addColorStop(0.0, '#014a84'); - gradient.addColorStop(0.5, '#0561a0'); - gradient.addColorStop(1.0, '#437ab6'); - context.fillStyle = gradient; - context.fillRect(0, 0, 1, 32); - - const sky = new THREE.Mesh( - new THREE.SphereGeometry(10), - new THREE.MeshBasicMaterial({ map: new THREE.CanvasTexture(canvas), side: THREE.BackSide }), - ); - scene.add(sky); - - // Texture - - const texture = new THREE.Data3DTexture( - new Uint8Array(INITIAL_CLOUD_SIZE * INITIAL_CLOUD_SIZE * INITIAL_CLOUD_SIZE).fill(0), - INITIAL_CLOUD_SIZE, - INITIAL_CLOUD_SIZE, - INITIAL_CLOUD_SIZE, - ); - texture.format = THREE.RedFormat; - texture.minFilter = THREE.LinearFilter; - texture.magFilter = THREE.LinearFilter; - texture.unpackAlignment = 1; - - cloudTexture = texture; - - // Material - - const vertexShader = /* glsl */ ` - in vec3 position; - - uniform mat4 modelMatrix; - uniform mat4 modelViewMatrix; - uniform mat4 projectionMatrix; - uniform vec3 cameraPos; - - out vec3 vOrigin; - out vec3 vDirection; - - void main() { - vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 ); - - vOrigin = vec3( inverse( modelMatrix ) * vec4( cameraPos, 1.0 ) ).xyz; - vDirection = position - vOrigin; - - gl_Position = projectionMatrix * mvPosition; - } - `; - - const fragmentShader = /* glsl */ ` - precision highp float; - precision highp sampler3D; - - uniform mat4 modelViewMatrix; - uniform mat4 projectionMatrix; - - in vec3 vOrigin; - in vec3 vDirection; - - out vec4 color; - - uniform vec3 base; - uniform sampler3D map; - - uniform float threshold; - uniform float range; - uniform float opacity; - uniform float steps; - uniform float frame; - - uint wang_hash(uint seed) - { - seed = (seed ^ 61u) ^ (seed >> 16u); - seed *= 9u; - seed = seed ^ (seed >> 4u); - seed *= 0x27d4eb2du; - seed = seed ^ (seed >> 15u); - return seed; - } - - float randomFloat(inout uint seed) - { - return float(wang_hash(seed)) / 4294967296.; - } - - vec2 hitBox( vec3 orig, vec3 dir ) { - const vec3 box_min = vec3( - 0.5 ); - const vec3 box_max = vec3( 0.5 ); - vec3 inv_dir = 1.0 / dir; - vec3 tmin_tmp = ( box_min - orig ) * inv_dir; - vec3 tmax_tmp = ( box_max - orig ) * inv_dir; - vec3 tmin = min( tmin_tmp, tmax_tmp ); - vec3 tmax = max( tmin_tmp, tmax_tmp ); - float t0 = max( tmin.x, max( tmin.y, tmin.z ) ); - float t1 = min( tmax.x, min( tmax.y, tmax.z ) ); - return vec2( t0, t1 ); - } - - float sample1( vec3 p ) { - return texture( map, p ).r; - } - - float shading( vec3 coord ) { - float step = 0.01; - return sample1( coord + vec3( - step ) ) - sample1( coord + vec3( step ) ); - } - - void main(){ - vec3 rayDir = normalize( vDirection ); - vec2 bounds = hitBox( vOrigin, rayDir ); - - if ( bounds.x > bounds.y ) discard; - - bounds.x = max( bounds.x, 0.0 ); - - vec3 p = vOrigin + bounds.x * rayDir; - vec3 inc = 1.0 / abs( rayDir ); - float delta = min( inc.x, min( inc.y, inc.z ) ); - delta /= steps; - - // Jitter - - // Nice little seed from - // https://blog.demofox.org/2020/05/25/casual-shadertoy-path-tracing-1-basic-camera-diffuse-emissive/ - uint seed = uint( gl_FragCoord.x ) * uint( 1973 ) + uint( gl_FragCoord.y ) * uint( 9277 ) + uint( frame ) * uint( 26699 ); - vec3 size = vec3( textureSize( map, 0 ) ); - float randNum = randomFloat( seed ) * 2.0 - 1.0; - p += rayDir * randNum * ( 1.0 / size ); - - // - - vec4 ac = vec4( base, 0.0 ); - - for ( float t = bounds.x; t < bounds.y; t += delta ) { - - float d = sample1( p + 0.5 ); - - d = smoothstep( threshold - range, threshold + range, d ) * opacity; - - float col = shading( p + 0.5 ) * 3.0 + ( ( p.x + p.y ) * 0.25 ) + 0.2; - - ac.rgb += ( 1.0 - ac.a ) * d * col; - - ac.a += ( 1.0 - ac.a ) * d; - - if ( ac.a >= 0.95 ) break; - - p += rayDir * delta; - - } - - color = ac; - - if ( color.a == 0.0 ) discard; - - } - `; - - const geometry = new THREE.BoxGeometry(1, 1, 1); - const material = new THREE.RawShaderMaterial({ - glslVersion: THREE.GLSL3, - uniforms: { - base: { value: new THREE.Color(0x798aa0) }, - map: { value: texture }, - cameraPos: { value: new THREE.Vector3() }, - threshold: { value: 0.25 }, - opacity: { value: 0.25 }, - range: { value: 0.1 }, - steps: { value: 100 }, - frame: { value: 0 }, - }, - vertexShader, - fragmentShader, - side: THREE.BackSide, - transparent: true, - }); - - mesh = new THREE.Mesh(geometry, material); - scene.add(mesh); - - // - - window.addEventListener('resize', onWindowResize); -} - -function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); - - renderer.setSize(window.innerWidth, window.innerHeight); -} - -let curr = 0; -const countPerRow = 4; -const countPerSlice = countPerRow * countPerRow; -const sliceCount = 4; -const totalCount = sliceCount * countPerSlice; -const margins = 8; - -const perElementPaddedSize = (INITIAL_CLOUD_SIZE - margins) / countPerRow; -const perElementSize = Math.floor((INITIAL_CLOUD_SIZE - 1) / countPerRow); - -function animate() { - requestAnimationFrame(animate); - - const time = performance.now(); - if (time - prevTime > 1500.0 && curr < totalCount) { - const position = new THREE.Vector3( - Math.floor(curr % countPerRow) * perElementSize + margins * 0.5, - Math.floor((curr % countPerSlice) / countPerRow) * perElementSize + margins * 0.5, - Math.floor(curr / countPerSlice) * perElementSize + margins * 0.5, - ).floor(); - - const maxDimension = perElementPaddedSize - 1; - const box = new THREE.Box3( - new THREE.Vector3(0, 0, 0), - new THREE.Vector3(maxDimension, maxDimension, maxDimension), - ); - const scaleFactor = (Math.random() + 0.5) * 0.5; - const source = generateCloudTexture(perElementPaddedSize, scaleFactor); - - renderer.copyTextureToTexture3D(box, position, source, cloudTexture as THREE.Data3DTexture); - - prevTime = time; - - curr++; - } - - (mesh.material as THREE.RawShaderMaterial).uniforms.cameraPos.value.copy(camera.position); - // mesh.rotation.y = - performance.now() / 7500; - - (mesh.material as THREE.RawShaderMaterial).uniforms.frame.value++; - - renderer.render(scene, camera); -} diff --git a/types/three/test/integration/three-examples/webgl2_multiple_rendertargets.ts b/types/three/test/integration/three-examples/webgl2_multiple_rendertargets.ts deleted file mode 100644 index b584ce36a..000000000 --- a/types/three/test/integration/three-examples/webgl2_multiple_rendertargets.ts +++ /dev/null @@ -1,174 +0,0 @@ -import * as THREE from 'three'; - -import WEBGL from 'three/examples/jsm/capabilities/WebGL'; -import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; - -let camera: THREE.PerspectiveCamera; -let scene: THREE.Scene; -let renderer: THREE.WebGLRenderer; -let controls: OrbitControls; -let renderTarget: THREE.WebGLMultipleRenderTargets; -let postScene: THREE.Scene; -let postCamera: THREE.OrthographicCamera; - -init(); - -function init() { - renderer = new THREE.WebGLRenderer(); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - document.body.appendChild(renderer.domElement); - - // Create a multi render target with Float buffers - - renderTarget = new THREE.WebGLMultipleRenderTargets( - window.innerWidth * window.devicePixelRatio, - window.innerHeight * window.devicePixelRatio, - 2, - ); - - for (let i = 0, il = renderTarget.texture.length; i < il; i++) { - renderTarget.texture[i].minFilter = THREE.NearestFilter; - renderTarget.texture[i].magFilter = THREE.NearestFilter; - renderTarget.texture[i].type = THREE.FloatType; - } - - // Name our G-Buffer attachments for debugging - - renderTarget.texture[0].name = 'diffuse'; - renderTarget.texture[1].name = 'normal'; - - // Scene setup - - scene = new THREE.Scene(); - - camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10); - camera.position.z = 4; - - const diffuse = new THREE.TextureLoader().load('textures/brick_diffuse.jpg', () => { - render(); - }); - - diffuse.wrapS = diffuse.wrapT = THREE.RepeatWrapping; - - scene.add( - new THREE.Mesh( - new THREE.TorusKnotGeometry(1, 0.3, 128, 64), - new THREE.RawShaderMaterial({ - vertexShader: /* glsl */ ` - in vec3 position; - in vec3 normal; - in vec2 uv; - out vec3 vNormal; - out vec2 vUv; - uniform mat4 modelViewMatrix; - uniform mat4 projectionMatrix; - uniform mat3 normalMatrix; - void main() { - vUv = uv; - // get smooth normals - vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 ); - vec3 transformedNormal = normalMatrix * normal; - vNormal = normalize( transformedNormal ); - gl_Position = projectionMatrix * mvPosition; - } - `, - fragmentShader: ` - precision highp float; - precision highp int; - layout(location = 0) out vec4 gColor; - layout(location = 1) out vec4 gNormal; - uniform sampler2D tDiffuse; - uniform vec2 repeat; - in vec3 vNormal; - in vec2 vUv; - void main() { - // write color to G-Buffer - gColor = texture( tDiffuse, vUv * repeat ); - // write normals to G-Buffer - gNormal = vec4( normalize( vNormal ), 0.0 ); - } - `, - uniforms: { - tDiffuse: { value: diffuse }, - repeat: { value: new THREE.Vector2(5, 0.5) }, - }, - glslVersion: THREE.GLSL3, - }), - ), - ); - - // PostProcessing setup - - postScene = new THREE.Scene(); - postCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1); - - postScene.add( - new THREE.Mesh( - new THREE.PlaneGeometry(2, 2), - new THREE.RawShaderMaterial({ - vertexShader: ` - in vec3 position; - in vec2 uv; - out vec2 vUv; - uniform mat4 modelViewMatrix; - uniform mat4 projectionMatrix; - void main() { - vUv = uv; - gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); - } - `, - fragmentShader: ` - precision highp float; - precision highp int; - layout(location = 0) out vec4 pc_FragColor; - in vec2 vUv; - uniform sampler2D tDiffuse; - uniform sampler2D tNormal; - void main() { - vec3 diffuse = texture( tDiffuse, vUv ).rgb; - vec3 normal = texture( tNormal, vUv ).rgb; - pc_FragColor.rgb = mix( diffuse, normal, step( 0.5, vUv.x ) ); - pc_FragColor.a = 1.0; - } - `, - uniforms: { - tDiffuse: { value: renderTarget.texture[0] }, - tNormal: { value: renderTarget.texture[1] }, - }, - glslVersion: THREE.GLSL3, - }), - ), - ); - - // Controls - - controls = new OrbitControls(camera, renderer.domElement); - controls.addEventListener('change', render); - controls.enableZoom = false; - controls.screenSpacePanning = true; - - window.addEventListener('resize', onWindowResize, false); -} - -function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); - - renderer.setSize(window.innerWidth, window.innerHeight); - - const dpr = renderer.getPixelRatio(); - renderTarget.setSize(window.innerWidth * dpr, window.innerHeight * dpr); - - render(); -} - -function render() { - // render scene into target - renderer.setRenderTarget(renderTarget); - renderer.render(scene, camera); - - // render post FX - renderer.setRenderTarget(null); - renderer.render(postScene, postCamera); -} diff --git a/types/three/test/integration/three-examples/webgl2_volume_instancing.ts b/types/three/test/integration/three-examples/webgl2_volume_instancing.ts deleted file mode 100644 index 70c9edd16..000000000 --- a/types/three/test/integration/three-examples/webgl2_volume_instancing.ts +++ /dev/null @@ -1,198 +0,0 @@ -import * as THREE from 'three'; -import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; -import { VOXLoader, VOXData3DTexture } from 'three/examples/jsm/loaders/VOXLoader'; - -import WEBGL from 'three/examples/jsm/capabilities/WebGL'; - -if (!WEBGL.isWebGL2Available()) { - document.body.appendChild(WEBGL.getWebGL2ErrorMessage()); -} - -let renderer: THREE.WebGLRenderer; -let scene: THREE.Scene; -let camera: THREE.PerspectiveCamera; -let controls: OrbitControls; - -init(); -animate(); - -function init() { - renderer = new THREE.WebGLRenderer(); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - document.body.appendChild(renderer.domElement); - - scene = new THREE.Scene(); - - camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000); - camera.position.set(0, 0, 4); - - controls = new OrbitControls(camera, renderer.domElement); - controls.autoRotate = true; - controls.autoRotateSpeed = -1.0; - controls.enableDamping = true; - - // Material - - const vertexShader = /* glsl */ ` - in vec3 position; - in mat4 instanceMatrix; - - uniform mat4 modelMatrix; - uniform mat4 modelViewMatrix; - uniform mat4 projectionMatrix; - uniform vec3 cameraPos; - - out vec3 vOrigin; - out vec3 vDirection; - - void main() { - vec4 mvPosition = modelViewMatrix * instanceMatrix * vec4( position, 1.0 ); - - vOrigin = vec3( inverse( instanceMatrix * modelMatrix ) * vec4( cameraPos, 1.0 ) ).xyz; - vDirection = position - vOrigin; - - gl_Position = projectionMatrix * mvPosition; - } - `; - - const fragmentShader = /* glsl */ ` - precision highp float; - precision highp sampler3D; - - uniform mat4 modelViewMatrix; - uniform mat4 projectionMatrix; - - in vec3 vOrigin; - in vec3 vDirection; - - out vec4 color; - - uniform sampler3D map; - - uniform float threshold; - uniform float steps; - - vec2 hitBox( vec3 orig, vec3 dir ) { - const vec3 box_min = vec3( - 0.5 ); - const vec3 box_max = vec3( 0.5 ); - vec3 inv_dir = 1.0 / dir; - vec3 tmin_tmp = ( box_min - orig ) * inv_dir; - vec3 tmax_tmp = ( box_max - orig ) * inv_dir; - vec3 tmin = min( tmin_tmp, tmax_tmp ); - vec3 tmax = max( tmin_tmp, tmax_tmp ); - float t0 = max( tmin.x, max( tmin.y, tmin.z ) ); - float t1 = min( tmax.x, min( tmax.y, tmax.z ) ); - return vec2( t0, t1 ); - } - - float sample1( vec3 p ) { - return texture( map, p ).r; - } - - #define epsilon .0001 - - vec3 normal( vec3 coord ) { - if ( coord.x < epsilon ) return vec3( 1.0, 0.0, 0.0 ); - if ( coord.y < epsilon ) return vec3( 0.0, 1.0, 0.0 ); - if ( coord.z < epsilon ) return vec3( 0.0, 0.0, 1.0 ); - if ( coord.x > 1.0 - epsilon ) return vec3( - 1.0, 0.0, 0.0 ); - if ( coord.y > 1.0 - epsilon ) return vec3( 0.0, - 1.0, 0.0 ); - if ( coord.z > 1.0 - epsilon ) return vec3( 0.0, 0.0, - 1.0 ); - - float step = 0.01; - float x = sample1( coord + vec3( - step, 0.0, 0.0 ) ) - sample1( coord + vec3( step, 0.0, 0.0 ) ); - float y = sample1( coord + vec3( 0.0, - step, 0.0 ) ) - sample1( coord + vec3( 0.0, step, 0.0 ) ); - float z = sample1( coord + vec3( 0.0, 0.0, - step ) ) - sample1( coord + vec3( 0.0, 0.0, step ) ); - - return normalize( vec3( x, y, z ) ); - } - - void main(){ - - vec3 rayDir = normalize( vDirection ); - vec2 bounds = hitBox( vOrigin, rayDir ); - - if ( bounds.x > bounds.y ) discard; - - bounds.x = max( bounds.x, 0.0 ); - - vec3 p = vOrigin + bounds.x * rayDir; - vec3 inc = 1.0 / abs( rayDir ); - float delta = min( inc.x, min( inc.y, inc.z ) ); - delta /= 50.0; - - for ( float t = bounds.x; t < bounds.y; t += delta ) { - - float d = sample1( p + 0.5 ); - - if ( d > 0.5 ) { - - color.rgb = p * 2.0; // normal( p + 0.5 ); // * 0.5 + ( p * 1.5 + 0.25 ); - color.a = 1.; - break; - - } - - p += rayDir * delta; - - } - - if ( color.a == 0.0 ) discard; - - } - `; - - const loader = new VOXLoader(); - loader.load('models/vox/menger.vox', chunks => { - chunks.forEach(chunk => { - const geometry = new THREE.BoxGeometry(1, 1, 1); - const material = new THREE.RawShaderMaterial({ - glslVersion: THREE.GLSL3, - uniforms: { - map: { value: new VOXData3DTexture(chunk) }, - cameraPos: { value: new THREE.Vector3() }, - }, - vertexShader, - fragmentShader, - side: THREE.BackSide, - }); - - const mesh = new THREE.InstancedMesh(geometry, material, 50000); - mesh.onBeforeRender = (a, b, c, d, meshMat) => { - (meshMat as THREE.RawShaderMaterial).uniforms.cameraPos.value.copy(camera.position); - }; - - const transform = new THREE.Object3D(); - - for (let i = 0; i < mesh.count; i++) { - transform.position.random().subScalar(0.5).multiplyScalar(150); - transform.rotation.x = Math.random() * Math.PI; - transform.rotation.y = Math.random() * Math.PI; - transform.rotation.z = Math.random() * Math.PI; - transform.updateMatrix(); - - mesh.setMatrixAt(i, transform.matrix); - } - - scene.add(mesh); - }); - }); - - window.addEventListener('resize', onWindowResize); -} - -function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); - - renderer.setSize(window.innerWidth, window.innerHeight); -} - -function animate() { - requestAnimationFrame(animate); - - controls.update(); - - renderer.render(scene, camera); -} diff --git a/types/three/test/integration/three-examples/webxr_ar_lighting.ts b/types/three/test/integration/three-examples/webxr_ar_lighting.ts deleted file mode 100644 index 9f99b9965..000000000 --- a/types/three/test/integration/three-examples/webxr_ar_lighting.ts +++ /dev/null @@ -1,140 +0,0 @@ -import * as THREE from 'three'; - -import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'; -import { ARButton } from 'three/examples/jsm/webxr/ARButton'; -import { XREstimatedLight } from 'three/examples/jsm/webxr/XREstimatedLight'; - -let camera: THREE.PerspectiveCamera; -let scene: THREE.Scene; -let renderer: THREE.WebGLRenderer; -let controller: THREE.Group; -let defaultEnvironment: THREE.Texture; - -init(); -animate(); - -function init() { - const container = document.createElement('div'); - document.body.appendChild(container); - - scene = new THREE.Scene(); - - camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 20); - - const defaultLight = new THREE.HemisphereLight(0xffffff, 0xbbbbff, 1); - defaultLight.position.set(0.5, 1, 0.25); - scene.add(defaultLight); - - // - - renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - renderer.outputEncoding = THREE.sRGBEncoding; - renderer.useLegacyLights = false; - renderer.xr.enabled = true; - container.appendChild(renderer.domElement); - - // Don't add the XREstimatedLight to the scene initially. - // It doesn't have any estimated lighting values until an AR session starts. - - const xrLight = new XREstimatedLight(renderer); - - xrLight.addEventListener('estimationstart', () => { - // Swap the default light out for the estimated one one we start getting some estimated values. - scene.add(xrLight); - scene.remove(defaultLight); - - // The estimated lighting also provides an environment cubemap, which we can apply here. - if (xrLight.environment) { - scene.environment = xrLight.environment; - } - }); - - xrLight.addEventListener('estimationend', () => { - // Swap the lights back when we stop receiving estimated values. - scene.add(defaultLight); - scene.remove(xrLight); - - // Revert back to the default environment. - scene.environment = defaultEnvironment; - }); - - // - - const pmremGenerator = new THREE.PMREMGenerator(renderer); - pmremGenerator.compileEquirectangularShader(); - - new RGBELoader() - .setDataType(THREE.UnsignedByteType) - .setPath('textures/equirectangular/') - .load('royal_esplanade_1k.hdr', texture => { - defaultEnvironment = pmremGenerator.fromEquirectangular(texture).texture; - - scene.environment = defaultEnvironment; - - texture.dispose(); - pmremGenerator.dispose(); - }); - - // - - // In order for lighting estimation to work, 'light-estimation' must be included as either an optional or required feature. - document.body.appendChild(ARButton.createButton(renderer, { optionalFeatures: ['light-estimation'] })); - - // - - const ballGeometry = new THREE.SphereGeometry(0.175, 32, 32); - const ballGroup = new THREE.Group(); - ballGroup.position.z = -2; - - const rows = 3; - const cols = 3; - - for (let i = 0; i < rows; i++) { - for (let j = 0; j < cols; j++) { - const ballMaterial = new THREE.MeshStandardMaterial({ - color: 0xdddddd, - roughness: i / rows, - metalness: j / cols, - }); - const ballMesh = new THREE.Mesh(ballGeometry, ballMaterial); - ballMesh.position.set((i + 0.5 - rows * 0.5) * 0.4, (j + 0.5 - cols * 0.5) * 0.4, 0); - ballGroup.add(ballMesh); - } - } - - scene.add(ballGroup); - - // - - function onSelect() { - ballGroup.position.set(0, 0, -2).applyMatrix4(controller.matrixWorld); - ballGroup.quaternion.setFromRotationMatrix(controller.matrixWorld); - } - - controller = renderer.xr.getController(0); - controller.addEventListener('select', onSelect); - scene.add(controller); - - // - - window.addEventListener('resize', onWindowResize, false); -} - -function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); - - renderer.setSize(window.innerWidth, window.innerHeight); -} - -// - -function animate() { - renderer.setAnimationLoop(render); -} - -function render() { - renderer.render(scene, camera); -} diff --git a/types/three/tsconfig.json b/types/three/tsconfig.json index 79bff73ff..fcc615f41 100644 --- a/types/three/tsconfig.json +++ b/types/three/tsconfig.json @@ -22,16 +22,7 @@ "test/integration/materials-meshgouraud.ts", "test/integration/nodes-webgl.ts", "test/integration/objects-reflector.ts", - "test/integration/three-examples/misc_boxselection.ts", - "test/integration/three-examples/misc_controls_arcball.ts", - "test/integration/three-examples/misc_controls_drag.ts", - "test/integration/three-examples/misc_controls_fly.ts", - "test/integration/three-examples/misc_controls_pointerlock.ts", - "test/integration/three-examples/misc_controls_transform.ts", - "test/integration/three-examples/webgl2_materials_texture3d_partialupdate.ts", - "test/integration/three-examples/webgl2_multiple_rendertargets.ts", "test/integration/three-examples/webgl2_rendertarget_texture2darray.ts", - "test/integration/three-examples/webgl2_volume_instancing.ts", "test/integration/three-examples/webgl_buffergeometry_glbufferattribute.ts", "test/integration/three-examples/webgl_buffergeometry_instancing_interleaved.ts", "test/integration/three-examples/webgl_camera.ts", @@ -76,7 +67,6 @@ "test/integration/three-examples/webgl_shadowmap_csm.ts", "test/integration/three-examples/webgl_shadowmap_progressive.ts", "test/integration/three-examples/webgl_shadowmap_vsm.ts", - "test/integration/three-examples/webxr_ar_lighting.ts", "test/integration/three-examples/webxr_vr_handinput_cubes.ts", "test/integration/webxr-cube.ts", "test/unit/examples/jsm/exporters/PLYExporter.ts",