From 94e1f2b5002da3acf863553da452f58d519f7ee2 Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Tue, 4 Jul 2023 14:49:20 -0400 Subject: [PATCH] Apply consistent formatting to examples testing (#521) * Consistent formatting * Update patch --- .github/workflows/CI.yml | 3 +- .prettierignore | 1 - examples-testing/changes.patch | 2101 ++++++++--------- examples-testing/examples/css2d_label.ts | 300 ++- examples-testing/examples/css3d_molecules.ts | 430 ++-- .../examples/css3d_orthographic.ts | 392 ++- .../examples/css3d_periodictable.ts | 1449 ++++++------ examples-testing/examples/css3d_sandbox.ts | 337 ++- examples-testing/examples/css3d_sprites.ts | 225 +- examples-testing/examples/css3d_youtube.ts | 110 +- examples-testing/examples/games_fps.ts | 398 ++-- .../examples/misc_animation_groups.ts | 205 +- .../examples/misc_animation_keys.ts | 248 +- .../examples/misc_boxselection.ts | 182 +- .../examples/misc_controls_arcball.ts | 318 ++- .../examples/misc_controls_drag.ts | 176 +- .../examples/misc_controls_map.ts | 122 +- .../examples/misc_controls_orbit.ts | 110 +- .../examples/misc_controls_pointerlock.ts | 377 ++- .../examples/misc_controls_trackball.ts | 166 +- .../examples/misc_controls_transform.ts | 312 ++- .../examples/misc_exporter_draco.ts | 185 +- .../examples/misc_exporter_obj.ts | 257 +- .../examples/misc_exporter_stl.ts | 155 +- examples-testing/examples/misc_lookat.ts | 126 +- examples-testing/examples/misc_uv_tests.ts | 75 +- examples-testing/examples/svg_lines.ts | 110 +- examples-testing/examples/svg_sandbox.ts | 338 ++- .../examples/webaudio_orientation.ts | 243 +- examples-testing/index.js | 5 +- 30 files changed, 4516 insertions(+), 4940 deletions(-) diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml index c4bd7b5d8..eb939bf0c 100644 --- a/.github/workflows/CI.yml +++ b/.github/workflows/CI.yml @@ -3,7 +3,7 @@ on: pull_request: {} jobs: - test: + build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 @@ -36,3 +36,4 @@ jobs: working-directory: examples-testing - run: npm run type-check working-directory: examples-testing + - run: npm run format-check diff --git a/.prettierignore b/.prettierignore index d33a021fc..b598bb332 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,3 +1,2 @@ .pnp.* .yarn/* -examples-testing/examples diff --git a/examples-testing/changes.patch b/examples-testing/changes.patch index 2403be6bc..e65081cf4 100644 --- a/examples-testing/changes.patch +++ b/examples-testing/changes.patch @@ -1,20 +1,17 @@ diff --git a/examples-testing/examples/css2d_label.ts b/examples-testing/examples/css2d_label.ts -index ce736e5f..9f4361d2 100644 +index cf61d1e0..693b1e2b 100644 --- a/examples-testing/examples/css2d_label.ts +++ b/examples-testing/examples/css2d_label.ts -@@ -10,7 +10,10 @@ import { GUI } from "three/addons/libs/lil-gui.module.min.js"; +@@ -7,7 +7,7 @@ import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; let gui; -let camera, scene, renderer, labelRenderer; -+let camera: THREE.PerspectiveCamera, -+ scene: THREE.Scene, -+ renderer: THREE.WebGLRenderer, -+ labelRenderer: CSS2DRenderer; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer, labelRenderer: CSS2DRenderer; const layers = { - "Toggle Name": function () { -@@ -31,7 +34,7 @@ const layers = { + 'Toggle Name': function () { +@@ -28,7 +28,7 @@ const layers = { const clock = new THREE.Clock(); const textureLoader = new THREE.TextureLoader(); @@ -23,38 +20,36 @@ index ce736e5f..9f4361d2 100644 init(); animate(); -@@ -71,7 +74,7 @@ function init() { - normalMap: textureLoader.load("textures/planets/earth_normal_2048.jpg"), - normalScale: new THREE.Vector2(0.85, 0.85), - }); -- earthMaterial.map.colorSpace = THREE.SRGBColorSpace; -+ earthMaterial.map!.colorSpace = THREE.SRGBColorSpace; - const earth = new THREE.Mesh(earthGeometry, earthMaterial); - scene.add(earth); - -@@ -80,7 +83,7 @@ function init() { - shininess: 5, - map: textureLoader.load("textures/planets/moon_1024.jpg"), - }); -- moonMaterial.map.colorSpace = THREE.SRGBColorSpace; -+ moonMaterial.map!.colorSpace = THREE.SRGBColorSpace; - moon = new THREE.Mesh(moonGeometry, moonMaterial); - scene.add(moon); +@@ -63,7 +63,7 @@ function init() { + normalMap: textureLoader.load('textures/planets/earth_normal_2048.jpg'), + normalScale: new THREE.Vector2(0.85, 0.85), + }); +- earthMaterial.map.colorSpace = THREE.SRGBColorSpace; ++ earthMaterial.map!.colorSpace = THREE.SRGBColorSpace; + const earth = new THREE.Mesh(earthGeometry, earthMaterial); + scene.add(earth); + +@@ -72,7 +72,7 @@ function init() { + shininess: 5, + map: textureLoader.load('textures/planets/moon_1024.jpg'), + }); +- moonMaterial.map.colorSpace = THREE.SRGBColorSpace; ++ moonMaterial.map!.colorSpace = THREE.SRGBColorSpace; + moon = new THREE.Mesh(moonGeometry, moonMaterial); + scene.add(moon); diff --git a/examples-testing/examples/css3d_molecules.ts b/examples-testing/examples/css3d_molecules.ts -index ee79a493..a73c6aff 100644 +index 53847260..f08bb34a 100644 --- a/examples-testing/examples/css3d_molecules.ts +++ b/examples-testing/examples/css3d_molecules.ts -@@ -9,11 +9,13 @@ import { - } from "three/addons/renderers/CSS3DRenderer.js"; - import { GUI } from "three/addons/libs/lil-gui.module.min.js"; +@@ -5,11 +5,11 @@ import { PDBLoader } from 'three/addons/loaders/PDBLoader.js'; + import { CSS3DRenderer, CSS3DObject, CSS3DSprite } from 'three/addons/renderers/CSS3DRenderer.js'; + import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; -let camera, scene, renderer; -let controls; -let root; -+let camera: THREE.PerspectiveCamera, -+ scene: THREE.Scene, -+ renderer: CSS3DRenderer; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: CSS3DRenderer; +let controls: TrackballControls; +let root: THREE.Object3D; @@ -63,372 +58,352 @@ index ee79a493..a73c6aff 100644 const tmpVec1 = new THREE.Vector3(); const tmpVec2 = new THREE.Vector3(); const tmpVec3 = new THREE.Vector3(); -@@ -53,7 +55,7 @@ const params = { +@@ -49,7 +49,7 @@ const params = { }; const loader = new PDBLoader(); -const colorSpriteMap = {}; +const colorSpriteMap: { [element: string]: string | undefined } = {}; - const baseSprite = document.createElement("img"); + const baseSprite = document.createElement('img'); init(); -@@ -77,7 +79,7 @@ function init() { +@@ -68,7 +68,7 @@ function init() { - renderer = new CSS3DRenderer(); - renderer.setSize(window.innerWidth, window.innerHeight); -- document.getElementById("container").appendChild(renderer.domElement); -+ document.getElementById("container")!.appendChild(renderer.domElement); + renderer = new CSS3DRenderer(); + renderer.setSize(window.innerWidth, window.innerHeight); +- document.getElementById('container').appendChild(renderer.domElement); ++ document.getElementById('container')!.appendChild(renderer.domElement); - // + // -@@ -105,7 +107,7 @@ function init() { - gui.open(); +@@ -96,7 +96,7 @@ function init() { + gui.open(); } -function changeVizType(value) { +function changeVizType(value: number) { - if (value === 0) showAtoms(); - else if (value === 1) showBonds(); - else showAtomsBonds(); -@@ -157,7 +159,12 @@ function showAtomsBonds() { + if (value === 0) showAtoms(); + else if (value === 1) showBonds(); + else showAtomsBonds(); +@@ -148,7 +148,7 @@ function showAtomsBonds() { // -function colorify(ctx, width, height, color) { -+function colorify( -+ ctx: CanvasRenderingContext2D, -+ width: number, -+ height: number, -+ color: THREE.Color -+) { - const r = color.r, - g = color.g, - b = color.b; -@@ -174,7 +181,7 @@ function colorify(ctx, width, height, color) { - ctx.putImageData(imageData, 0, 0); ++function colorify(ctx: CanvasRenderingContext2D, width: number, height: number, color: THREE.Color) { + const r = color.r, + g = color.g, + b = color.b; +@@ -165,7 +165,7 @@ function colorify(ctx, width, height, color) { + ctx.putImageData(imageData, 0, 0); } -function imageToCanvas(image) { +function imageToCanvas(image: HTMLImageElement) { - const width = image.width; - const height = image.height; + const width = image.width; + const height = image.height; -@@ -183,7 +190,7 @@ function imageToCanvas(image) { - canvas.width = width; - canvas.height = height; +@@ -174,7 +174,7 @@ function imageToCanvas(image) { + canvas.width = width; + canvas.height = height; -- const context = canvas.getContext("2d"); -+ const context = canvas.getContext("2d")!; - context.drawImage(image, 0, 0, width, height); +- const context = canvas.getContext('2d'); ++ const context = canvas.getContext('2d')!; + context.drawImage(image, 0, 0, width, height); - return canvas; -@@ -191,12 +198,12 @@ function imageToCanvas(image) { + return canvas; +@@ -182,12 +182,12 @@ function imageToCanvas(image) { // -function loadMolecule(model) { +function loadMolecule(model: string) { - const url = "models/pdb/" + model; + const url = 'models/pdb/' + model; - for (let i = 0; i < objects.length; i++) { - const object = objects[i]; -- object.parent.remove(object); -+ object.parent!.remove(object); - } + for (let i = 0; i < objects.length; i++) { + const object = objects[i]; +- object.parent.remove(object); ++ object.parent!.remove(object); + } - objects.length = 0; -@@ -207,7 +214,7 @@ function loadMolecule(model) { - const json = pdb.json; + objects.length = 0; +@@ -198,7 +198,7 @@ function loadMolecule(model) { + const json = pdb.json; - geometryAtoms.computeBoundingBox(); -- geometryAtoms.boundingBox.getCenter(offset).negate(); -+ geometryAtoms.boundingBox!.getCenter(offset).negate(); + geometryAtoms.computeBoundingBox(); +- geometryAtoms.boundingBox.getCenter(offset).negate(); ++ geometryAtoms.boundingBox!.getCenter(offset).negate(); - geometryAtoms.translate(offset.x, offset.y, offset.z); - geometryBonds.translate(offset.x, offset.y, offset.z); -@@ -227,7 +234,7 @@ function loadMolecule(model) { + geometryAtoms.translate(offset.x, offset.y, offset.z); + geometryBonds.translate(offset.x, offset.y, offset.z); +@@ -218,7 +218,7 @@ function loadMolecule(model) { - if (!colorSpriteMap[element]) { - const canvas = imageToCanvas(baseSprite); -- const context = canvas.getContext("2d"); -+ const context = canvas.getContext("2d")!; + if (!colorSpriteMap[element]) { + const canvas = imageToCanvas(baseSprite); +- const context = canvas.getContext('2d'); ++ const context = canvas.getContext('2d')!; - colorify(context, canvas.width, canvas.height, color); + colorify(context, canvas.width, canvas.height, color); -@@ -236,7 +243,7 @@ function loadMolecule(model) { - colorSpriteMap[element] = dataUrl; - } +@@ -227,7 +227,7 @@ function loadMolecule(model) { + colorSpriteMap[element] = dataUrl; + } -- const colorSprite = colorSpriteMap[element]; -+ const colorSprite = colorSpriteMap[element]!; +- const colorSprite = colorSpriteMap[element]; ++ const colorSprite = colorSpriteMap[element]!; - const atom = document.createElement("img"); - atom.src = colorSprite; + const atom = document.createElement('img'); + atom.src = colorSprite; diff --git a/examples-testing/examples/css3d_orthographic.ts b/examples-testing/examples/css3d_orthographic.ts -index b3bd43c6..bf1664c8 100644 +index 4aabbed0..5488635e 100644 --- a/examples-testing/examples/css3d_orthographic.ts +++ b/examples-testing/examples/css3d_orthographic.ts -@@ -6,10 +6,13 @@ import { - CSS3DObject, - } from "three/addons/renderers/CSS3DRenderer.js"; - import { GUI } from "three/addons/libs/lil-gui.module.min.js"; -+import { Controller } from "lil-gui"; +@@ -3,10 +3,11 @@ import * as THREE from 'three'; + import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + import { CSS3DRenderer, CSS3DObject } from 'three/addons/renderers/CSS3DRenderer.js'; + import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; ++import { Controller } from 'lil-gui'; -let camera, scene, renderer; -+let camera: THREE.OrthographicCamera, -+ scene: THREE.Scene, -+ renderer: THREE.WebGLRenderer; ++let camera: THREE.OrthographicCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer; -let scene2, renderer2; +let scene2: THREE.Scene, renderer2: CSS3DRenderer; const frustumSize = 500; -@@ -84,18 +87,24 @@ function init() { - renderer2 = new CSS3DRenderer(); - renderer2.setSize(window.innerWidth, window.innerHeight); - renderer2.domElement.style.position = "absolute"; -- renderer2.domElement.style.top = 0; -+ renderer2.domElement.style.top = "0"; - document.body.appendChild(renderer2.domElement); - - const controls = new OrbitControls(camera, renderer2.domElement); - controls.minZoom = 0.5; - controls.maxZoom = 2; - -- function createPlane(width, height, cssColor, pos, rot) { -+ function createPlane( -+ width: number, -+ height: number, -+ cssColor: string, -+ pos: THREE.Vector3, -+ rot: THREE.Euler -+ ) { - const element = document.createElement("div"); - element.style.width = width + "px"; - element.style.height = height + "px"; -- element.style.opacity = 0.75; -+ element.style.opacity = "0.75"; - element.style.background = cssColor; - - const object = new CSS3DObject(element); -@@ -142,12 +151,12 @@ function createPanel() { - - const settings = { - setViewOffset() { -- folder1.children[1].enable().setValue(window.innerWidth); -- folder1.children[2].enable().setValue(window.innerHeight); -- folder1.children[3].enable().setValue(0); -- folder1.children[4].enable().setValue(0); -- folder1.children[5].enable().setValue(window.innerWidth); -- folder1.children[6].enable().setValue(window.innerHeight); -+ (folder1.children[1] as Controller).enable().setValue(window.innerWidth); -+ (folder1.children[2] as Controller).enable().setValue(window.innerHeight); -+ (folder1.children[3] as Controller).enable().setValue(0); -+ (folder1.children[4] as Controller).enable().setValue(0); -+ (folder1.children[5] as Controller).enable().setValue(window.innerWidth); -+ (folder1.children[6] as Controller).enable().setValue(window.innerHeight); - }, - fullWidth: 0, - fullHeight: 0, -@@ -156,12 +165,12 @@ function createPanel() { - width: 0, - height: 0, - clearViewOffset() { -- folder1.children[1].setValue(0).disable(); -- folder1.children[2].setValue(0).disable(); -- folder1.children[3].setValue(0).disable(); -- folder1.children[4].setValue(0).disable(); -- folder1.children[5].setValue(0).disable(); -- folder1.children[6].setValue(0).disable(); -+ (folder1.children[1] as Controller).setValue(0).disable(); -+ (folder1.children[2] as Controller).setValue(0).disable(); -+ (folder1.children[3] as Controller).setValue(0).disable(); -+ (folder1.children[4] as Controller).setValue(0).disable(); -+ (folder1.children[5] as Controller).setValue(0).disable(); -+ (folder1.children[6] as Controller).setValue(0).disable(); - camera.clearViewOffset(); - }, - }; -@@ -175,7 +184,7 @@ function createPanel() { - window.screen.width * 2, - 1 - ) -- .onChange((val) => updateCameraViewOffset({ fullWidth: val })) -+ .onChange((val: number) => updateCameraViewOffset({ fullWidth: val })) - .disable(); - folder1 - .add( -@@ -185,19 +194,19 @@ function createPanel() { - window.screen.height * 2, - 1 - ) -- .onChange((val) => updateCameraViewOffset({ fullHeight: val })) -+ .onChange((val: number) => updateCameraViewOffset({ fullHeight: val })) - .disable(); - folder1 - .add(settings, "offsetX", 0, 256, 1) -- .onChange((val) => updateCameraViewOffset({ x: val })) -+ .onChange((val: number) => updateCameraViewOffset({ x: val })) - .disable(); - folder1 - .add(settings, "offsetY", 0, 256, 1) -- .onChange((val) => updateCameraViewOffset({ y: val })) -+ .onChange((val: number) => updateCameraViewOffset({ y: val })) - .disable(); - folder1 - .add(settings, "width", window.screen.width / 4, window.screen.width * 2, 1) -- .onChange((val) => updateCameraViewOffset({ width: val })) -+ .onChange((val: number) => updateCameraViewOffset({ width: val })) - .disable(); - folder1 - .add( -@@ -207,7 +216,7 @@ function createPanel() { - window.screen.height * 2, - 1 - ) -- .onChange((val) => updateCameraViewOffset({ height: val })) -+ .onChange((val: number) => updateCameraViewOffset({ height: val })) - .disable(); - folder1.add(settings, "clearViewOffset"); +@@ -75,18 +76,18 @@ function init() { + renderer2 = new CSS3DRenderer(); + renderer2.setSize(window.innerWidth, window.innerHeight); + renderer2.domElement.style.position = 'absolute'; +- renderer2.domElement.style.top = 0; ++ renderer2.domElement.style.top = '0'; + document.body.appendChild(renderer2.domElement); + + const controls = new OrbitControls(camera, renderer2.domElement); + controls.minZoom = 0.5; + controls.maxZoom = 2; + +- function createPlane(width, height, cssColor, pos, rot) { ++ function createPlane(width: number, height: number, cssColor: string, pos: THREE.Vector3, rot: THREE.Euler) { + const element = document.createElement('div'); + element.style.width = width + 'px'; + element.style.height = height + 'px'; +- element.style.opacity = 0.75; ++ element.style.opacity = '0.75'; + element.style.background = cssColor; + + const object = new CSS3DObject(element); +@@ -133,12 +134,12 @@ function createPanel() { + + const settings = { + setViewOffset() { +- folder1.children[1].enable().setValue(window.innerWidth); +- folder1.children[2].enable().setValue(window.innerHeight); +- folder1.children[3].enable().setValue(0); +- folder1.children[4].enable().setValue(0); +- folder1.children[5].enable().setValue(window.innerWidth); +- folder1.children[6].enable().setValue(window.innerHeight); ++ (folder1.children[1] as Controller).enable().setValue(window.innerWidth); ++ (folder1.children[2] as Controller).enable().setValue(window.innerHeight); ++ (folder1.children[3] as Controller).enable().setValue(0); ++ (folder1.children[4] as Controller).enable().setValue(0); ++ (folder1.children[5] as Controller).enable().setValue(window.innerWidth); ++ (folder1.children[6] as Controller).enable().setValue(window.innerHeight); + }, + fullWidth: 0, + fullHeight: 0, +@@ -147,12 +148,12 @@ function createPanel() { + width: 0, + height: 0, + clearViewOffset() { +- folder1.children[1].setValue(0).disable(); +- folder1.children[2].setValue(0).disable(); +- folder1.children[3].setValue(0).disable(); +- folder1.children[4].setValue(0).disable(); +- folder1.children[5].setValue(0).disable(); +- folder1.children[6].setValue(0).disable(); ++ (folder1.children[1] as Controller).setValue(0).disable(); ++ (folder1.children[2] as Controller).setValue(0).disable(); ++ (folder1.children[3] as Controller).setValue(0).disable(); ++ (folder1.children[4] as Controller).setValue(0).disable(); ++ (folder1.children[5] as Controller).setValue(0).disable(); ++ (folder1.children[6] as Controller).setValue(0).disable(); + camera.clearViewOffset(); + }, + }; +@@ -160,32 +161,46 @@ function createPanel() { + folder1.add(settings, 'setViewOffset'); + folder1 + .add(settings, 'fullWidth', window.screen.width / 4, window.screen.width * 2, 1) +- .onChange(val => updateCameraViewOffset({ fullWidth: val })) ++ .onChange((val: number) => updateCameraViewOffset({ fullWidth: val })) + .disable(); + folder1 + .add(settings, 'fullHeight', window.screen.height / 4, window.screen.height * 2, 1) +- .onChange(val => updateCameraViewOffset({ fullHeight: val })) ++ .onChange((val: number) => updateCameraViewOffset({ fullHeight: val })) + .disable(); + folder1 + .add(settings, 'offsetX', 0, 256, 1) +- .onChange(val => updateCameraViewOffset({ x: val })) ++ .onChange((val: number) => updateCameraViewOffset({ x: val })) + .disable(); + folder1 + .add(settings, 'offsetY', 0, 256, 1) +- .onChange(val => updateCameraViewOffset({ y: val })) ++ .onChange((val: number) => updateCameraViewOffset({ y: val })) + .disable(); + folder1 + .add(settings, 'width', window.screen.width / 4, window.screen.width * 2, 1) +- .onChange(val => updateCameraViewOffset({ width: val })) ++ .onChange((val: number) => updateCameraViewOffset({ width: val })) + .disable(); + folder1 + .add(settings, 'height', window.screen.height / 4, window.screen.height * 2, 1) +- .onChange(val => updateCameraViewOffset({ height: val })) ++ .onChange((val: number) => updateCameraViewOffset({ height: val })) + .disable(); + folder1.add(settings, 'clearViewOffset'); } -@@ -219,6 +228,13 @@ function updateCameraViewOffset({ - y, - width, - height, + +-function updateCameraViewOffset({ fullWidth, fullHeight, x, y, width, height }) { ++function updateCameraViewOffset({ ++ fullWidth, ++ fullHeight, ++ x, ++ y, ++ width, ++ height, +}: { -+ fullWidth?: number; -+ fullHeight?: number; -+ x?: number; -+ y?: number; -+ width?: number; -+ height?: number; - }) { - if (!camera.view) { - camera.setViewOffset( ++ fullWidth?: number; ++ fullHeight?: number; ++ x?: number; ++ y?: number; ++ width?: number; ++ height?: number; ++}) { + if (!camera.view) { + camera.setViewOffset( + fullWidth || window.innerWidth, diff --git a/examples-testing/examples/css3d_periodictable.ts b/examples-testing/examples/css3d_periodictable.ts -index 33d3514b..c4393857 100644 +index e3a33f79..516df464 100644 --- a/examples-testing/examples/css3d_periodictable.ts +++ b/examples-testing/examples/css3d_periodictable.ts -@@ -600,11 +600,18 @@ const table = [ - 7, +@@ -597,11 +597,16 @@ const table = [ + 7, ]; -let camera, scene, renderer; -let controls; -- ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: CSS3DRenderer; ++let controls: TrackballControls; + -const objects = []; -const targets = { table: [], sphere: [], helix: [], grid: [] }; -+let camera: THREE.PerspectiveCamera, -+ scene: THREE.Scene, -+ renderer: CSS3DRenderer; -+let controls: TrackballControls; -+ +const objects: CSS3DObject[] = []; +const targets: { -+ table: THREE.Object3D[]; -+ sphere: THREE.Object3D[]; -+ helix: THREE.Object3D[]; -+ grid: THREE.Object3D[]; ++ table: THREE.Object3D[]; ++ sphere: THREE.Object3D[]; ++ helix: THREE.Object3D[]; ++ grid: THREE.Object3D[]; +} = { table: [], sphere: [], helix: [], grid: [] }; init(); animate(); -@@ -630,12 +637,12 @@ function init() { - - const number = document.createElement("div"); - number.className = "number"; -- number.textContent = i / 5 + 1; -+ number.textContent = `${i / 5 + 1}`; - element.appendChild(number); - - const symbol = document.createElement("div"); - symbol.className = "symbol"; -- symbol.textContent = table[i]; -+ symbol.textContent = table[i] as string; - element.appendChild(symbol); - - const details = document.createElement("div"); -@@ -654,8 +661,8 @@ function init() { +@@ -621,12 +626,12 @@ function init() { + + const number = document.createElement('div'); + number.className = 'number'; +- number.textContent = i / 5 + 1; ++ number.textContent = `${i / 5 + 1}`; + element.appendChild(number); + + const symbol = document.createElement('div'); + symbol.className = 'symbol'; +- symbol.textContent = table[i]; ++ symbol.textContent = table[i] as string; + element.appendChild(symbol); + + const details = document.createElement('div'); +@@ -645,8 +650,8 @@ function init() { + // + + const object = new THREE.Object3D(); +- object.position.x = table[i + 3] * 140 - 1330; +- object.position.y = -(table[i + 4] * 180) + 990; ++ object.position.x = (table[i + 3] as number) * 140 - 1330; ++ object.position.y = -((table[i + 4] as number) * 180) + 990; + + targets.table.push(object); + } +@@ -705,7 +710,7 @@ function init() { + + renderer = new CSS3DRenderer(); + renderer.setSize(window.innerWidth, window.innerHeight); +- document.getElementById('container').appendChild(renderer.domElement); ++ document.getElementById('container')!.appendChild(renderer.domElement); + // - const object = new THREE.Object3D(); -- object.position.x = table[i + 3] * 140 - 1330; -- object.position.y = -(table[i + 4] * 180) + 990; -+ object.position.x = (table[i + 3] as number) * 140 - 1330; -+ object.position.y = -((table[i + 4] as number) * 180) + 990; - - targets.table.push(object); - } -@@ -714,7 +721,7 @@ function init() { - - renderer = new CSS3DRenderer(); - renderer.setSize(window.innerWidth, window.innerHeight); -- document.getElementById("container").appendChild(renderer.domElement); -+ document.getElementById("container")!.appendChild(renderer.domElement); - - // - -@@ -723,22 +730,22 @@ function init() { - controls.maxDistance = 6000; - controls.addEventListener("change", render); - -- const buttonTable = document.getElementById("table"); -+ const buttonTable = document.getElementById("table")!; - buttonTable.addEventListener("click", function () { - transform(targets.table, 2000); - }); - -- const buttonSphere = document.getElementById("sphere"); -+ const buttonSphere = document.getElementById("sphere")!; - buttonSphere.addEventListener("click", function () { - transform(targets.sphere, 2000); - }); - -- const buttonHelix = document.getElementById("helix"); -+ const buttonHelix = document.getElementById("helix")!; - buttonHelix.addEventListener("click", function () { - transform(targets.helix, 2000); - }); - -- const buttonGrid = document.getElementById("grid"); -+ const buttonGrid = document.getElementById("grid")!; - buttonGrid.addEventListener("click", function () { - transform(targets.grid, 2000); - }); -@@ -750,7 +757,7 @@ function init() { - window.addEventListener("resize", onWindowResize); +@@ -714,22 +719,22 @@ function init() { + controls.maxDistance = 6000; + controls.addEventListener('change', render); + +- const buttonTable = document.getElementById('table'); ++ const buttonTable = document.getElementById('table')!; + buttonTable.addEventListener('click', function () { + transform(targets.table, 2000); + }); + +- const buttonSphere = document.getElementById('sphere'); ++ const buttonSphere = document.getElementById('sphere')!; + buttonSphere.addEventListener('click', function () { + transform(targets.sphere, 2000); + }); + +- const buttonHelix = document.getElementById('helix'); ++ const buttonHelix = document.getElementById('helix')!; + buttonHelix.addEventListener('click', function () { + transform(targets.helix, 2000); + }); + +- const buttonGrid = document.getElementById('grid'); ++ const buttonGrid = document.getElementById('grid')!; + buttonGrid.addEventListener('click', function () { + transform(targets.grid, 2000); + }); +@@ -741,7 +746,7 @@ function init() { + window.addEventListener('resize', onWindowResize); } -function transform(targets, duration) { +function transform(targets: THREE.Object3D[], duration: number) { - TWEEN.removeAll(); - - for (let i = 0; i < objects.length; i++) { -@@ -774,7 +781,7 @@ function transform(targets, duration) { - .start(); - } - -- new TWEEN.Tween(this) -+ new TWEEN.Tween({}) - .to({}, duration * 2) - .onUpdate(render) - .start(); + TWEEN.removeAll(); + + for (let i = 0; i < objects.length; i++) { +@@ -765,7 +770,7 @@ function transform(targets, duration) { + .start(); + } + +- new TWEEN.Tween(this) ++ new TWEEN.Tween({}) + .to({}, duration * 2) + .onUpdate(render) + .start(); diff --git a/examples-testing/examples/css3d_sandbox.ts b/examples-testing/examples/css3d_sandbox.ts -index dd2c5229..a3dc447b 100644 +index 1088b84b..b910c1f0 100644 --- a/examples-testing/examples/css3d_sandbox.ts +++ b/examples-testing/examples/css3d_sandbox.ts -@@ -5,13 +5,15 @@ import { - CSS3DRenderer, - CSS3DObject, - } from "three/addons/renderers/CSS3DRenderer.js"; --import { GUI } from "three/addons/libs/lil-gui.module.min.js"; -+import { Controller, GUI } from "three/addons/libs/lil-gui.module.min.js"; +@@ -2,13 +2,13 @@ import * as THREE from 'three'; + + import { TrackballControls } from 'three/addons/controls/TrackballControls.js'; + import { CSS3DRenderer, CSS3DObject } from 'three/addons/renderers/CSS3DRenderer.js'; +-import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; ++import { Controller, GUI } from 'three/addons/libs/lil-gui.module.min.js'; -let camera, scene, renderer; -+let camera: THREE.PerspectiveCamera, -+ scene: THREE.Scene, -+ renderer: THREE.WebGLRenderer; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer; -let scene2, renderer2; +let scene2: THREE.Scene, renderer2: CSS3DRenderer; @@ -438,131 +413,127 @@ index dd2c5229..a3dc447b 100644 init(); animate(); -@@ -43,7 +45,7 @@ function init() { - const element = document.createElement("div"); - element.style.width = "100px"; - element.style.height = "100px"; -- element.style.opacity = i < 5 ? 0.5 : 1; -+ element.style.opacity = `${i < 5 ? 0.5 : 1}`; - element.style.background = new THREE.Color( - Math.random() * 0xffffff - ).getStyle(); -@@ -77,7 +79,7 @@ function init() { - renderer2 = new CSS3DRenderer(); - renderer2.setSize(window.innerWidth, window.innerHeight); - renderer2.domElement.style.position = "absolute"; -- renderer2.domElement.style.top = 0; -+ renderer2.domElement.style.top = "0"; - document.body.appendChild(renderer2.domElement); - - controls = new TrackballControls(camera, renderer2.domElement); -@@ -111,12 +113,12 @@ function createPanel() { - - const settings = { - setViewOffset() { -- folder1.children[1].enable().setValue(window.innerWidth); -- folder1.children[2].enable().setValue(window.innerHeight); -- folder1.children[3].enable().setValue(0); -- folder1.children[4].enable().setValue(0); -- folder1.children[5].enable().setValue(window.innerWidth); -- folder1.children[6].enable().setValue(window.innerHeight); -+ (folder1.children[1] as Controller).enable().setValue(window.innerWidth); -+ (folder1.children[2] as Controller).enable().setValue(window.innerHeight); -+ (folder1.children[3] as Controller).enable().setValue(0); -+ (folder1.children[4] as Controller).enable().setValue(0); -+ (folder1.children[5] as Controller).enable().setValue(window.innerWidth); -+ (folder1.children[6] as Controller).enable().setValue(window.innerHeight); - }, - fullWidth: 0, - fullHeight: 0, -@@ -125,12 +127,12 @@ function createPanel() { - width: 0, - height: 0, - clearViewOffset() { -- folder1.children[1].setValue(0).disable(); -- folder1.children[2].setValue(0).disable(); -- folder1.children[3].setValue(0).disable(); -- folder1.children[4].setValue(0).disable(); -- folder1.children[5].setValue(0).disable(); -- folder1.children[6].setValue(0).disable(); -+ (folder1.children[1] as Controller).setValue(0).disable(); -+ (folder1.children[2] as Controller).setValue(0).disable(); -+ (folder1.children[3] as Controller).setValue(0).disable(); -+ (folder1.children[4] as Controller).setValue(0).disable(); -+ (folder1.children[5] as Controller).setValue(0).disable(); -+ (folder1.children[6] as Controller).setValue(0).disable(); - camera.clearViewOffset(); - }, - }; -@@ -144,7 +146,7 @@ function createPanel() { - window.screen.width * 2, - 1 - ) -- .onChange((val) => updateCameraViewOffset({ fullWidth: val })) -+ .onChange((val: number) => updateCameraViewOffset({ fullWidth: val })) - .disable(); - folder1 - .add( -@@ -154,19 +156,19 @@ function createPanel() { - window.screen.height * 2, - 1 - ) -- .onChange((val) => updateCameraViewOffset({ fullHeight: val })) -+ .onChange((val: number) => updateCameraViewOffset({ fullHeight: val })) - .disable(); - folder1 - .add(settings, "offsetX", 0, 256, 1) -- .onChange((val) => updateCameraViewOffset({ x: val })) -+ .onChange((val: number) => updateCameraViewOffset({ x: val })) - .disable(); - folder1 - .add(settings, "offsetY", 0, 256, 1) -- .onChange((val) => updateCameraViewOffset({ y: val })) -+ .onChange((val: number) => updateCameraViewOffset({ y: val })) - .disable(); - folder1 - .add(settings, "width", window.screen.width / 4, window.screen.width * 2, 1) -- .onChange((val) => updateCameraViewOffset({ width: val })) -+ .onChange((val: number) => updateCameraViewOffset({ width: val })) - .disable(); - folder1 - .add( -@@ -176,7 +178,7 @@ function createPanel() { - window.screen.height * 2, - 1 - ) -- .onChange((val) => updateCameraViewOffset({ height: val })) -+ .onChange((val: number) => updateCameraViewOffset({ height: val })) - .disable(); - folder1.add(settings, "clearViewOffset"); +@@ -35,7 +35,7 @@ function init() { + const element = document.createElement('div'); + element.style.width = '100px'; + element.style.height = '100px'; +- element.style.opacity = i < 5 ? 0.5 : 1; ++ element.style.opacity = `${i < 5 ? 0.5 : 1}`; + element.style.background = new THREE.Color(Math.random() * 0xffffff).getStyle(); + + const object = new CSS3DObject(element); +@@ -67,7 +67,7 @@ function init() { + renderer2 = new CSS3DRenderer(); + renderer2.setSize(window.innerWidth, window.innerHeight); + renderer2.domElement.style.position = 'absolute'; +- renderer2.domElement.style.top = 0; ++ renderer2.domElement.style.top = '0'; + document.body.appendChild(renderer2.domElement); + + controls = new TrackballControls(camera, renderer2.domElement); +@@ -101,12 +101,12 @@ function createPanel() { + + const settings = { + setViewOffset() { +- folder1.children[1].enable().setValue(window.innerWidth); +- folder1.children[2].enable().setValue(window.innerHeight); +- folder1.children[3].enable().setValue(0); +- folder1.children[4].enable().setValue(0); +- folder1.children[5].enable().setValue(window.innerWidth); +- folder1.children[6].enable().setValue(window.innerHeight); ++ (folder1.children[1] as Controller).enable().setValue(window.innerWidth); ++ (folder1.children[2] as Controller).enable().setValue(window.innerHeight); ++ (folder1.children[3] as Controller).enable().setValue(0); ++ (folder1.children[4] as Controller).enable().setValue(0); ++ (folder1.children[5] as Controller).enable().setValue(window.innerWidth); ++ (folder1.children[6] as Controller).enable().setValue(window.innerHeight); + }, + fullWidth: 0, + fullHeight: 0, +@@ -115,12 +115,12 @@ function createPanel() { + width: 0, + height: 0, + clearViewOffset() { +- folder1.children[1].setValue(0).disable(); +- folder1.children[2].setValue(0).disable(); +- folder1.children[3].setValue(0).disable(); +- folder1.children[4].setValue(0).disable(); +- folder1.children[5].setValue(0).disable(); +- folder1.children[6].setValue(0).disable(); ++ (folder1.children[1] as Controller).setValue(0).disable(); ++ (folder1.children[2] as Controller).setValue(0).disable(); ++ (folder1.children[3] as Controller).setValue(0).disable(); ++ (folder1.children[4] as Controller).setValue(0).disable(); ++ (folder1.children[5] as Controller).setValue(0).disable(); ++ (folder1.children[6] as Controller).setValue(0).disable(); + camera.clearViewOffset(); + }, + }; +@@ -128,32 +128,46 @@ function createPanel() { + folder1.add(settings, 'setViewOffset'); + folder1 + .add(settings, 'fullWidth', window.screen.width / 4, window.screen.width * 2, 1) +- .onChange(val => updateCameraViewOffset({ fullWidth: val })) ++ .onChange((val: number) => updateCameraViewOffset({ fullWidth: val })) + .disable(); + folder1 + .add(settings, 'fullHeight', window.screen.height / 4, window.screen.height * 2, 1) +- .onChange(val => updateCameraViewOffset({ fullHeight: val })) ++ .onChange((val: number) => updateCameraViewOffset({ fullHeight: val })) + .disable(); + folder1 + .add(settings, 'offsetX', 0, 256, 1) +- .onChange(val => updateCameraViewOffset({ x: val })) ++ .onChange((val: number) => updateCameraViewOffset({ x: val })) + .disable(); + folder1 + .add(settings, 'offsetY', 0, 256, 1) +- .onChange(val => updateCameraViewOffset({ y: val })) ++ .onChange((val: number) => updateCameraViewOffset({ y: val })) + .disable(); + folder1 + .add(settings, 'width', window.screen.width / 4, window.screen.width * 2, 1) +- .onChange(val => updateCameraViewOffset({ width: val })) ++ .onChange((val: number) => updateCameraViewOffset({ width: val })) + .disable(); + folder1 + .add(settings, 'height', window.screen.height / 4, window.screen.height * 2, 1) +- .onChange(val => updateCameraViewOffset({ height: val })) ++ .onChange((val: number) => updateCameraViewOffset({ height: val })) + .disable(); + folder1.add(settings, 'clearViewOffset'); } -@@ -188,6 +190,13 @@ function updateCameraViewOffset({ - y, - width, - height, + +-function updateCameraViewOffset({ fullWidth, fullHeight, x, y, width, height }) { ++function updateCameraViewOffset({ ++ fullWidth, ++ fullHeight, ++ x, ++ y, ++ width, ++ height, +}: { -+ fullWidth?: number; -+ fullHeight?: number; -+ x?: number; -+ y?: number; -+ width?: number; -+ height?: number; - }) { - if (!camera.view) { - camera.setViewOffset( ++ fullWidth?: number; ++ fullHeight?: number; ++ x?: number; ++ y?: number; ++ width?: number; ++ height?: number; ++}) { + if (!camera.view) { + camera.setViewOffset( + fullWidth || window.innerWidth, diff --git a/examples-testing/examples/css3d_sprites.ts b/examples-testing/examples/css3d_sprites.ts -index ce6d2384..23f3e9ed 100644 +index dfe24e79..93f2c07b 100644 --- a/examples-testing/examples/css3d_sprites.ts +++ b/examples-testing/examples/css3d_sprites.ts -@@ -7,12 +7,14 @@ import { - CSS3DSprite, - } from "three/addons/renderers/CSS3DRenderer.js"; +@@ -4,12 +4,12 @@ import TWEEN from 'three/addons/libs/tween.module.js'; + import { TrackballControls } from 'three/addons/controls/TrackballControls.js'; + import { CSS3DRenderer, CSS3DSprite } from 'three/addons/renderers/CSS3DRenderer.js'; -let camera, scene, renderer; -let controls; -+let camera: THREE.PerspectiveCamera, -+ scene: THREE.Scene, -+ renderer: CSS3DRenderer; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: CSS3DRenderer; +let controls: TrackballControls; const particlesTotal = 512; @@ -573,128 +544,126 @@ index ce6d2384..23f3e9ed 100644 let current = 0; init(); -@@ -33,7 +35,7 @@ function init() { - const image = document.createElement("img"); - image.addEventListener("load", function () { - for (let i = 0; i < particlesTotal; i++) { -- const object = new CSS3DSprite(image.cloneNode()); -+ const object = new CSS3DSprite(image.cloneNode() as typeof image); - (object.position.x = Math.random() * 4000 - 2000), - (object.position.y = Math.random() * 4000 - 2000), - (object.position.z = Math.random() * 4000 - 2000); -@@ -105,7 +107,7 @@ function init() { - - renderer = new CSS3DRenderer(); - renderer.setSize(window.innerWidth, window.innerHeight); -- document.getElementById("container").appendChild(renderer.domElement); -+ document.getElementById("container")!.appendChild(renderer.domElement); - - // - -@@ -143,7 +145,7 @@ function transition() { - .start(); - } - -- new TWEEN.Tween(this) -+ new TWEEN.Tween({}) - .to({}, duration * 3) - .onComplete(transition) - .start(); +@@ -25,7 +25,7 @@ function init() { + const image = document.createElement('img'); + image.addEventListener('load', function () { + for (let i = 0; i < particlesTotal; i++) { +- const object = new CSS3DSprite(image.cloneNode()); ++ const object = new CSS3DSprite(image.cloneNode() as typeof image); + (object.position.x = Math.random() * 4000 - 2000), + (object.position.y = Math.random() * 4000 - 2000), + (object.position.z = Math.random() * 4000 - 2000); +@@ -93,7 +93,7 @@ function init() { + + renderer = new CSS3DRenderer(); + renderer.setSize(window.innerWidth, window.innerHeight); +- document.getElementById('container').appendChild(renderer.domElement); ++ document.getElementById('container')!.appendChild(renderer.domElement); + + // + +@@ -131,7 +131,7 @@ function transition() { + .start(); + } + +- new TWEEN.Tween(this) ++ new TWEEN.Tween({}) + .to({}, duration * 3) + .onComplete(transition) + .start(); diff --git a/examples-testing/examples/css3d_youtube.ts b/examples-testing/examples/css3d_youtube.ts -index f717a9a5..4d603752 100644 +index 62652f87..3dcc2f12 100644 --- a/examples-testing/examples/css3d_youtube.ts +++ b/examples-testing/examples/css3d_youtube.ts -@@ -6,10 +6,12 @@ import { - CSS3DObject, - } from "three/addons/renderers/CSS3DRenderer.js"; +@@ -3,10 +3,10 @@ import * as THREE from 'three'; + import { TrackballControls } from 'three/addons/controls/TrackballControls.js'; + import { CSS3DRenderer, CSS3DObject } from 'three/addons/renderers/CSS3DRenderer.js'; -let camera, scene, renderer; -let controls; -+let camera: THREE.PerspectiveCamera, -+ scene: THREE.Scene, -+ renderer: CSS3DRenderer; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: CSS3DRenderer; +let controls: TrackballControls; -function Element(id, x, y, z, ry) { +function Element(id: string, x: number, y: number, z: number, ry: number) { - const div = document.createElement("div"); - div.style.width = "480px"; - div.style.height = "360px"; -@@ -33,7 +35,7 @@ init(); + const div = document.createElement('div'); + div.style.width = '480px'; + div.style.height = '360px'; +@@ -30,7 +30,7 @@ init(); animate(); function init() { -- const container = document.getElementById("container"); -+ const container = document.getElementById("container")!; - - camera = new THREE.PerspectiveCamera( - 50, -@@ -50,10 +52,10 @@ function init() { - container.appendChild(renderer.domElement); - - const group = new THREE.Group(); -- group.add(new Element("SJOz3qjfQXU", 0, 0, 240, 0)); -- group.add(new Element("Y2-xZ-1HE-Q", 240, 0, 0, Math.PI / 2)); -- group.add(new Element("IrydklNpcFI", 0, 0, -240, Math.PI)); -- group.add(new Element("9ubytEsCaS0", -240, 0, 0, -Math.PI / 2)); -+ group.add(Element("SJOz3qjfQXU", 0, 0, 240, 0)); -+ group.add(Element("Y2-xZ-1HE-Q", 240, 0, 0, Math.PI / 2)); -+ group.add(Element("IrydklNpcFI", 0, 0, -240, Math.PI)); -+ group.add(Element("9ubytEsCaS0", -240, 0, 0, -Math.PI / 2)); - scene.add(group); - - controls = new TrackballControls(camera, renderer.domElement); -@@ -63,7 +65,7 @@ function init() { - - // Block iframe events when dragging camera - -- const blocker = document.getElementById("blocker"); -+ const blocker = document.getElementById("blocker")!; - blocker.style.display = "none"; - - controls.addEventListener("start", function () { +- const container = document.getElementById('container'); ++ const container = document.getElementById('container')!; + + camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 5000); + camera.position.set(500, 350, 750); +@@ -42,10 +42,10 @@ function init() { + container.appendChild(renderer.domElement); + + const group = new THREE.Group(); +- group.add(new Element('SJOz3qjfQXU', 0, 0, 240, 0)); +- group.add(new Element('Y2-xZ-1HE-Q', 240, 0, 0, Math.PI / 2)); +- group.add(new Element('IrydklNpcFI', 0, 0, -240, Math.PI)); +- group.add(new Element('9ubytEsCaS0', -240, 0, 0, -Math.PI / 2)); ++ group.add(Element('SJOz3qjfQXU', 0, 0, 240, 0)); ++ group.add(Element('Y2-xZ-1HE-Q', 240, 0, 0, Math.PI / 2)); ++ group.add(Element('IrydklNpcFI', 0, 0, -240, Math.PI)); ++ group.add(Element('9ubytEsCaS0', -240, 0, 0, -Math.PI / 2)); + scene.add(group); + + controls = new TrackballControls(camera, renderer.domElement); +@@ -55,7 +55,7 @@ function init() { + + // Block iframe events when dragging camera + +- const blocker = document.getElementById('blocker'); ++ const blocker = document.getElementById('blocker')!; + blocker.style.display = 'none'; + + controls.addEventListener('start', function () { diff --git a/examples-testing/examples/games_fps.ts b/examples-testing/examples/games_fps.ts -index 4ed91b1d..50b388b4 100644 +index 49dd6f39..911a1493 100644 --- a/examples-testing/examples/games_fps.ts +++ b/examples-testing/examples/games_fps.ts -@@ -44,7 +44,7 @@ directionalLight.shadow.radius = 4; +@@ -39,7 +39,7 @@ directionalLight.shadow.radius = 4; directionalLight.shadow.bias = -0.00006; scene.add(directionalLight); --const container = document.getElementById("container"); -+const container = document.getElementById("container")!; +-const container = document.getElementById('container'); ++const container = document.getElementById('container')!; const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); -@@ -55,9 +55,9 @@ renderer.toneMapping = THREE.ACESFilmicToneMapping; +@@ -50,9 +50,9 @@ renderer.toneMapping = THREE.ACESFilmicToneMapping; container.appendChild(renderer.domElement); const stats = new Stats(); --stats.domElement.style.position = "absolute"; --stats.domElement.style.top = "0px"; +-stats.domElement.style.position = 'absolute'; +-stats.domElement.style.top = '0px'; -container.appendChild(stats.domElement); -+stats.dom.style.position = "absolute"; -+stats.dom.style.top = "0px"; ++stats.dom.style.position = 'absolute'; ++stats.dom.style.top = '0px'; +container.appendChild(stats.dom); const GRAVITY = 30; -@@ -69,7 +69,13 @@ const STEPS_PER_FRAME = 5; +@@ -64,7 +64,13 @@ const STEPS_PER_FRAME = 5; const sphereGeometry = new THREE.IcosahedronGeometry(SPHERE_RADIUS, 5); const sphereMaterial = new THREE.MeshLambertMaterial({ color: 0xdede8d }); -const spheres = []; +interface Sphere { -+ mesh: THREE.Mesh; -+ collider: THREE.Sphere; -+ velocity: THREE.Vector3; ++ mesh: THREE.Mesh; ++ collider: THREE.Sphere; ++ velocity: THREE.Vector3; +} + +const spheres: Sphere[] = []; let sphereIdx = 0; for (let i = 0; i < NUM_SPHERES; i++) { -@@ -100,7 +106,7 @@ const playerDirection = new THREE.Vector3(); +@@ -91,7 +97,7 @@ const playerDirection = new THREE.Vector3(); let playerOnFloor = false; let mouseTime = 0; @@ -703,120 +672,116 @@ index 4ed91b1d..50b388b4 100644 const vector1 = new THREE.Vector3(); const vector2 = new THREE.Vector3(); -@@ -179,7 +185,7 @@ function playerCollisions() { - } +@@ -164,7 +170,7 @@ function playerCollisions() { + } } -function updatePlayer(deltaTime) { +function updatePlayer(deltaTime: number) { - let damping = Math.exp(-4 * deltaTime) - 1; + let damping = Math.exp(-4 * deltaTime) - 1; - if (!playerOnFloor) { -@@ -199,7 +205,7 @@ function updatePlayer(deltaTime) { - camera.position.copy(playerCollider.end); + if (!playerOnFloor) { +@@ -184,7 +190,7 @@ function updatePlayer(deltaTime) { + camera.position.copy(playerCollider.end); } -function playerSphereCollision(sphere) { +function playerSphereCollision(sphere: Sphere) { - const center = vector1 - .addVectors(playerCollider.start, playerCollider.end) - .multiplyScalar(0.5); -@@ -262,7 +268,7 @@ function spheresCollisions() { - } + const center = vector1.addVectors(playerCollider.start, playerCollider.end).multiplyScalar(0.5); + + const sphere_center = sphere.collider.center; +@@ -239,7 +245,7 @@ function spheresCollisions() { + } } -function updateSpheres(deltaTime) { +function updateSpheres(deltaTime: number) { - spheres.forEach((sphere) => { - sphere.collider.center.addScaledVector(sphere.velocity, deltaTime); + spheres.forEach(sphere => { + sphere.collider.center.addScaledVector(sphere.velocity, deltaTime); -@@ -308,7 +314,7 @@ function getSideVector() { - return playerDirection; +@@ -282,7 +288,7 @@ function getSideVector() { + return playerDirection; } -function controls(deltaTime) { +function controls(deltaTime: number) { - // gives a bit of air control - const speedDelta = deltaTime * (playerOnFloor ? 25 : 8); - -@@ -343,12 +349,14 @@ loader.load("collision-world.glb", (gltf) => { - worldOctree.fromGraphNode(gltf.scene); - - gltf.scene.traverse((child) => { -- if (child.isMesh) { -+ if ((child as THREE.Mesh).isMesh) { - child.castShadow = true; - child.receiveShadow = true; - -- if (child.material.map) { -- child.material.map.anisotropy = 4; -+ if (((child as THREE.Mesh).material as THREE.MeshStandardMaterial).map) { -+ ( -+ (child as THREE.Mesh).material as THREE.MeshStandardMaterial -+ ).map!.anisotropy = 4; - } - } - }); -@@ -358,7 +366,7 @@ loader.load("collision-world.glb", (gltf) => { - scene.add(helper); + // gives a bit of air control + const speedDelta = deltaTime * (playerOnFloor ? 25 : 8); + +@@ -317,12 +323,12 @@ loader.load('collision-world.glb', gltf => { + worldOctree.fromGraphNode(gltf.scene); - const gui = new GUI({ width: 200 }); -- gui.add({ debug: false }, "debug").onChange(function (value) { -+ gui.add({ debug: false }, "debug").onChange(function (value: boolean) { - helper.visible = value; - }); + gltf.scene.traverse(child => { +- if (child.isMesh) { ++ if ((child as THREE.Mesh).isMesh) { + child.castShadow = true; + child.receiveShadow = true; + +- if (child.material.map) { +- child.material.map.anisotropy = 4; ++ if (((child as THREE.Mesh).material as THREE.MeshStandardMaterial).map) { ++ ((child as THREE.Mesh).material as THREE.MeshStandardMaterial).map!.anisotropy = 4; + } + } + }); +@@ -332,7 +338,7 @@ loader.load('collision-world.glb', gltf => { + scene.add(helper); + + const gui = new GUI({ width: 200 }); +- gui.add({ debug: false }, 'debug').onChange(function (value) { ++ gui.add({ debug: false }, 'debug').onChange(function (value: boolean) { + helper.visible = value; + }); diff --git a/examples-testing/examples/misc_animation_groups.ts b/examples-testing/examples/misc_animation_groups.ts -index 44a0c4b8..bb9b1264 100644 +index 19d263f4..f8d0bed3 100644 --- a/examples-testing/examples/misc_animation_groups.ts +++ b/examples-testing/examples/misc_animation_groups.ts -@@ -2,8 +2,11 @@ import * as THREE from "three"; +@@ -2,8 +2,8 @@ import * as THREE from 'three'; - import Stats from "three/addons/libs/stats.module.js"; + import Stats from 'three/addons/libs/stats.module.js'; -let stats, clock; -let scene, camera, renderer, mixer; +let stats: Stats, clock: THREE.Clock; -+let scene: THREE.Scene, -+ camera: THREE.PerspectiveCamera, -+ renderer: THREE.WebGLRenderer, -+ mixer: THREE.AnimationMixer; ++let scene: THREE.Scene, camera: THREE.PerspectiveCamera, renderer: THREE.WebGLRenderer, mixer: THREE.AnimationMixer; init(); animate(); diff --git a/examples-testing/examples/misc_animation_keys.ts b/examples-testing/examples/misc_animation_keys.ts -index a36b4959..271a8848 100644 +index 4a808987..d2613d02 100644 --- a/examples-testing/examples/misc_animation_keys.ts +++ b/examples-testing/examples/misc_animation_keys.ts -@@ -2,8 +2,11 @@ import * as THREE from "three"; +@@ -2,8 +2,8 @@ import * as THREE from 'three'; - import Stats from "three/addons/libs/stats.module.js"; + import Stats from 'three/addons/libs/stats.module.js'; -let stats, clock; -let scene, camera, renderer, mixer; +let stats: Stats, clock: THREE.Clock; -+let scene: THREE.Scene, -+ camera: THREE.PerspectiveCamera, -+ renderer: THREE.WebGLRenderer, -+ mixer: THREE.AnimationMixer; ++let scene: THREE.Scene, camera: THREE.PerspectiveCamera, renderer: THREE.WebGLRenderer, mixer: THREE.AnimationMixer; init(); animate(); +@@ -25,7 +25,10 @@ function init() { + // + + const geometry = new THREE.BoxGeometry(5, 5, 5); +- const material = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true }); ++ const material = new THREE.MeshBasicMaterial({ ++ color: 0xffffff, ++ transparent: true, ++ }); + const mesh = new THREE.Mesh(geometry, material); + scene.add(mesh); + diff --git a/examples-testing/examples/misc_boxselection.ts b/examples-testing/examples/misc_boxselection.ts -index ab31b0e5..44337ff5 100644 +index a78c71b3..44337ff5 100644 --- a/examples-testing/examples/misc_boxselection.ts +++ b/examples-testing/examples/misc_boxselection.ts -@@ -1,52 +1,40 @@ --import * as THREE from "three"; -+import * as THREE from 'three'; - --import Stats from "three/addons/libs/stats.module.js"; -+import Stats from 'three/addons/libs/stats.module.js'; - --import { SelectionBox } from "three/addons/interactive/SelectionBox.js"; --import { SelectionHelper } from "three/addons/interactive/SelectionHelper.js"; -+import { SelectionBox } from 'three/addons/interactive/SelectionBox.js'; -+import { SelectionHelper } from 'three/addons/interactive/SelectionHelper.js'; +@@ -5,73 +5,70 @@ import Stats from 'three/addons/libs/stats.module.js'; + import { SelectionBox } from 'three/addons/interactive/SelectionBox.js'; + import { SelectionHelper } from 'three/addons/interactive/SelectionHelper.js'; -let container, stats; -let camera, scene, renderer; @@ -825,290 +790,227 @@ index ab31b0e5..44337ff5 100644 -init(); -animate(); -- --function init() { -- container = document.createElement("div"); -- document.body.appendChild(container); +container = document.createElement('div'); +document.body.appendChild(container); -- camera = new THREE.PerspectiveCamera( -- 70, -- window.innerWidth / window.innerHeight, -- 1, -- 5000 -- ); -- camera.position.z = 1000; +-function init() { +- 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); +- 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)); +- 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; +- 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; +- 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); +- 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); +- 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 }) -- ); +- 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; -@@ -64,88 +52,89 @@ function init() { - object.receiveShadow = true; +- 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.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.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.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); -- } +- 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); +- 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; +- 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); +- renderer.shadowMap.enabled = true; +- renderer.shadowMap.type = THREE.PCFShadowMap; +container.appendChild(renderer.domElement); -- stats = new Stats(); -- container.appendChild(stats.dom); +- container.appendChild(renderer.domElement); +stats = new Stats(); +container.appendChild(stats.dom); -- window.addEventListener("resize", onWindowResize); --} +- stats = new Stats(); +- container.appendChild(stats.dom); +window.addEventListener('resize', onWindowResize); -+ + +- window.addEventListener('resize', onWindowResize); +-} +animate(); function onWindowResize() { -- camera.aspect = window.innerWidth / window.innerHeight; -- camera.updateProjectionMatrix(); -+ camera.aspect = window.innerWidth / window.innerHeight; -+ camera.updateProjectionMatrix(); - -- renderer.setSize(window.innerWidth, window.innerHeight); -+ renderer.setSize(window.innerWidth, window.innerHeight); - } - - // + camera.aspect = window.innerWidth / window.innerHeight; +@@ -98,7 +95,7 @@ const helper = new SelectionHelper(renderer, 'selectBox'); - function animate() { -- requestAnimationFrame(animate); -+ requestAnimationFrame(animate); - -- render(); -- stats.update(); -+ render(); -+ stats.update(); - } - - function render() { -- renderer.render(scene, camera); -+ renderer.render(scene, camera); - } - - const selectionBox = new SelectionBox(camera, scene); --const helper = new SelectionHelper(renderer, "selectBox"); -- --document.addEventListener("pointerdown", function (event) { -- for (const item of selectionBox.collection) { -- item.material.emissive.set(0x000000); -- } -- -- selectionBox.startPoint.set( -- (event.clientX / window.innerWidth) * 2 - 1, -- -(event.clientY / window.innerHeight) * 2 + 1, -- 0.5 -- ); --}); -+const helper = new SelectionHelper(renderer, 'selectBox'); - --document.addEventListener("pointermove", function (event) { -- if (helper.isDown) { -- for (let i = 0; i < selectionBox.collection.length; i++) { -- selectionBox.collection[i].material.emissive.set(0x000000); -+document.addEventListener('pointerdown', function (event) { -+ for (const item of selectionBox.collection) { + document.addEventListener('pointerdown', function (event) { + for (const item of selectionBox.collection) { +- item.material.emissive.set(0x000000); + (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 -+ selectionBox.startPoint.set( -+ (event.clientX / window.innerWidth) * 2 - 1, -+ -(event.clientY / window.innerHeight) * 2 + 1, -+ 0.5, - ); -+}); - -- const allSelected = selectionBox.select(); -+document.addEventListener('pointermove', function (event) { -+ if (helper.isDown) { -+ for (let i = 0; i < selectionBox.collection.length; i++) { + selectionBox.startPoint.set( +@@ -111,7 +108,7 @@ document.addEventListener('pointerdown', function (event) { + document.addEventListener('pointermove', function (event) { + if (helper.isDown) { + for (let i = 0; i < selectionBox.collection.length; i++) { +- selectionBox.collection[i].material.emissive.set(0x000000); + (selectionBox.collection[i].material as THREE.MeshLambertMaterial).emissive.set(0x000000); -+ } - -- for (let i = 0; i < allSelected.length; i++) { -- allSelected[i].material.emissive.set(0xffffff); -+ selectionBox.endPoint.set( -+ (event.clientX / window.innerWidth) * 2 - 1, -+ -(event.clientY / window.innerHeight) * 2 + 1, -+ 0.5, -+ ); -+ -+ const allSelected = selectionBox.select(); -+ -+ for (let i = 0; i < allSelected.length; i++) { + } + + selectionBox.endPoint.set( +@@ -123,7 +120,7 @@ document.addEventListener('pointermove', function (event) { + const allSelected = selectionBox.select(); + + for (let i = 0; i < allSelected.length; i++) { +- allSelected[i].material.emissive.set(0xffffff); + (allSelected[i].material as THREE.MeshLambertMaterial).emissive.set(0xffffff); -+ } + } } -- } }); +@@ -138,6 +135,6 @@ document.addEventListener('pointerup', function (event) { + const allSelected = selectionBox.select(); --document.addEventListener("pointerup", function (event) { -- selectionBox.endPoint.set( -- (event.clientX / window.innerWidth) * 2 - 1, -- -(event.clientY / window.innerHeight) * 2 + 1, -- 0.5 -- ); -+document.addEventListener('pointerup', function (event) { -+ selectionBox.endPoint.set( -+ (event.clientX / window.innerWidth) * 2 - 1, -+ -(event.clientY / window.innerHeight) * 2 + 1, -+ 0.5, -+ ); - -- const allSelected = selectionBox.select(); -+ const allSelected = selectionBox.select(); - -- for (let i = 0; i < allSelected.length; i++) { -- allSelected[i].material.emissive.set(0xffffff); -- } -+ for (let i = 0; i < allSelected.length; i++) { + for (let i = 0; i < allSelected.length; i++) { +- allSelected[i].material.emissive.set(0xffffff); + (allSelected[i].material as THREE.MeshLambertMaterial).emissive.set(0xffffff); -+ } + } }); diff --git a/examples-testing/examples/misc_controls_arcball.ts b/examples-testing/examples/misc_controls_arcball.ts -index 6deca2a8..2a10c769 100644 +index f7ea233d..64a2143a 100644 --- a/examples-testing/examples/misc_controls_arcball.ts +++ b/examples-testing/examples/misc_controls_arcball.ts -@@ -12,8 +12,12 @@ const cameraType = { type: "Perspective" }; +@@ -12,8 +12,12 @@ const cameraType = { type: 'Perspective' }; const perspectiveDistance = 2.5; const orthographicDistance = 120; -let camera, controls, scene, renderer, gui; -let folderOptions, folderAnimations; +let camera: THREE.OrthographicCamera | THREE.PerspectiveCamera, -+ controls: ArcballControls, -+ scene: THREE.Scene, -+ renderer: THREE.WebGLRenderer, -+ gui: GUI; ++ controls: ArcballControls, ++ scene: THREE.Scene, ++ renderer: THREE.WebGLRenderer, ++ gui: GUI; +let folderOptions: GUI, folderAnimations: GUI; const arcballGui = { - gizmoVisible: true, -@@ -109,8 +113,8 @@ function init() { - material.normalMap.wrapS = THREE.RepeatWrapping; + gizmoVisible: true, +@@ -99,8 +103,8 @@ function init() { + material.normalMap.wrapS = THREE.RepeatWrapping; + + group.traverse(function (child) { +- if (child.isMesh) { +- child.material = material; ++ if ((child as THREE.Mesh).isMesh) { ++ (child as THREE.Mesh).material = material; + } + }); + +@@ -166,12 +170,12 @@ function onWindowResize() { + + const halfW = perspectiveDistance * Math.tan(halfFovH); + const halfH = perspectiveDistance * Math.tan(halfFovV); +- camera.left = -halfW; +- camera.right = halfW; +- camera.top = halfH; +- camera.bottom = -halfH; ++ (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.aspect = window.innerWidth / window.innerHeight; ++ (camera as THREE.PerspectiveCamera).aspect = window.innerWidth / window.innerHeight; + } - group.traverse(function (child) { -- if (child.isMesh) { -- child.material = material; -+ if ((child as THREE.Mesh).isMesh) { -+ (child as THREE.Mesh).material = material; - } - }); - -@@ -190,12 +194,13 @@ function onWindowResize() { - - const halfW = perspectiveDistance * Math.tan(halfFovH); - const halfH = perspectiveDistance * Math.tan(halfFovV); -- camera.left = -halfW; -- camera.right = halfW; -- camera.top = halfH; -- camera.bottom = -halfH; -+ (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.aspect = window.innerWidth / window.innerHeight; -+ (camera as THREE.PerspectiveCamera).aspect = -+ window.innerWidth / window.innerHeight; - } - - camera.updateProjectionMatrix(); -@@ -209,7 +214,7 @@ function render() { - renderer.render(scene, camera); + camera.updateProjectionMatrix(); +@@ -185,7 +189,7 @@ function render() { + renderer.render(scene, camera); } -function onKeyDown(event) { +function onKeyDown(event: KeyboardEvent) { - if (event.key === "c") { - if (event.ctrlKey || event.metaKey) { - controls.copyState(); -@@ -221,7 +226,7 @@ function onKeyDown(event) { - } + if (event.key === 'c') { + if (event.ctrlKey || event.metaKey) { + controls.copyState(); +@@ -197,7 +201,7 @@ function onKeyDown(event) { + } } -function setCamera(type) { +function setCamera(type: string) { - if (type == "Orthographic") { - camera = makeOrthographicCamera(); - camera.position.set(0, 0, orthographicDistance); + if (type == 'Orthographic') { + camera = makeOrthographicCamera(); + camera.position.set(0, 0, orthographicDistance); diff --git a/examples-testing/examples/misc_controls_drag.ts b/examples-testing/examples/misc_controls_drag.ts -index af1e3afb..ba749f5f 100644 +index da4bd243..ec63df35 100644 --- a/examples-testing/examples/misc_controls_drag.ts +++ b/examples-testing/examples/misc_controls_drag.ts -@@ -2,12 +2,14 @@ import * as THREE from "three"; +@@ -2,12 +2,12 @@ import * as THREE from 'three'; - import { DragControls } from "three/addons/controls/DragControls.js"; + import { DragControls } from 'three/addons/controls/DragControls.js'; -let container; -let camera, scene, renderer; -let controls, group; +let container: HTMLDivElement; -+let camera: THREE.PerspectiveCamera, -+ scene: THREE.Scene, -+ renderer: THREE.WebGLRenderer; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer; +let controls: DragControls, group: THREE.Group; let enableSelection = false; @@ -1116,87 +1018,98 @@ index af1e3afb..ba749f5f 100644 +const objects: THREE.Object3D[] = []; const mouse = new THREE.Vector2(), - raycaster = new THREE.Raycaster(); -@@ -106,7 +108,7 @@ function onWindowResize() { - render(); + raycaster = new THREE.Raycaster(); +@@ -98,7 +98,7 @@ function onWindowResize() { + render(); } -function onKeyDown(event) { +function onKeyDown(event: KeyboardEvent) { - enableSelection = event.keyCode === 16 ? true : false; + enableSelection = event.keyCode === 16 ? true : false; } -@@ -114,7 +116,7 @@ function onKeyUp() { - enableSelection = false; +@@ -106,7 +106,7 @@ function onKeyUp() { + enableSelection = false; } -function onClick(event) { +function onClick(event: MouseEvent) { - event.preventDefault(); - - if (enableSelection === true) { -@@ -132,10 +134,14 @@ function onClick(event) { - const object = intersections[0].object; - - if (group.children.includes(object) === true) { -- object.material.emissive.set(0x000000); -+ ( -+ (object as THREE.Mesh).material as THREE.MeshLambertMaterial -+ ).emissive.set(0x000000); - scene.attach(object); - } else { -- object.material.emissive.set(0xaaaaaa); -+ ( -+ (object as THREE.Mesh).material as THREE.MeshLambertMaterial -+ ).emissive.set(0xaaaaaa); - group.attach(object); - } + event.preventDefault(); + + if (enableSelection === true) { +@@ -124,10 +124,10 @@ function onClick(event) { + const object = intersections[0].object; + + if (group.children.includes(object) === true) { +- object.material.emissive.set(0x000000); ++ ((object as THREE.Mesh).material as THREE.MeshLambertMaterial).emissive.set(0x000000); + scene.attach(object); + } else { +- object.material.emissive.set(0xaaaaaa); ++ ((object as THREE.Mesh).material as THREE.MeshLambertMaterial).emissive.set(0xaaaaaa); + group.attach(object); + } diff --git a/examples-testing/examples/misc_controls_map.ts b/examples-testing/examples/misc_controls_map.ts -index 964bca83..09c9d73c 100644 +index 35e03d2c..698e57ab 100644 --- a/examples-testing/examples/misc_controls_map.ts +++ b/examples-testing/examples/misc_controls_map.ts -@@ -4,7 +4,10 @@ import { GUI } from "three/addons/libs/lil-gui.module.min.js"; +@@ -4,7 +4,7 @@ import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; - import { MapControls } from "three/addons/controls/MapControls.js"; + import { MapControls } from 'three/addons/controls/MapControls.js'; -let camera, controls, scene, renderer; -+let camera: THREE.PerspectiveCamera, -+ controls: MapControls, -+ scene: THREE.Scene, -+ renderer: THREE.WebGLRenderer; ++let camera: THREE.PerspectiveCamera, controls: MapControls, scene: THREE.Scene, renderer: THREE.WebGLRenderer; init(); //render(); // remove when using next line for animation loop (requestAnimationFrame) +@@ -43,7 +43,10 @@ function init() { + + const geometry = new THREE.BoxGeometry(1, 1, 1); + geometry.translate(0, 0.5, 0); +- const material = new THREE.MeshPhongMaterial({ color: 0xeeeeee, flatShading: true }); ++ const material = new THREE.MeshPhongMaterial({ ++ color: 0xeeeeee, ++ flatShading: true, ++ }); + + for (let i = 0; i < 500; i++) { + const mesh = new THREE.Mesh(geometry, material); diff --git a/examples-testing/examples/misc_controls_orbit.ts b/examples-testing/examples/misc_controls_orbit.ts -index e2e3500a..eec819f5 100644 +index 28bc3c01..a13dc532 100644 --- a/examples-testing/examples/misc_controls_orbit.ts +++ b/examples-testing/examples/misc_controls_orbit.ts -@@ -2,7 +2,10 @@ import * as THREE from "three"; +@@ -2,7 +2,7 @@ import * as THREE from 'three'; - import { OrbitControls } from "three/addons/controls/OrbitControls.js"; + import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; -let camera, controls, scene, renderer; -+let camera: THREE.PerspectiveCamera, -+ controls: OrbitControls, -+ scene: THREE.Scene, -+ renderer: THREE.WebGLRenderer; ++let camera: THREE.PerspectiveCamera, controls: OrbitControls, scene: THREE.Scene, renderer: THREE.WebGLRenderer; init(); //render(); // remove when using next line for animation loop (requestAnimationFrame) +@@ -41,7 +41,10 @@ function init() { + // world + + const geometry = new THREE.CylinderGeometry(0, 10, 30, 4, 1); +- const material = new THREE.MeshPhongMaterial({ color: 0xffffff, flatShading: true }); ++ const material = new THREE.MeshPhongMaterial({ ++ color: 0xffffff, ++ flatShading: true, ++ }); + + for (let i = 0; i < 500; i++) { + const mesh = new THREE.Mesh(geometry, material); diff --git a/examples-testing/examples/misc_controls_pointerlock.ts b/examples-testing/examples/misc_controls_pointerlock.ts -index 53d56579..d92f3528 100644 +index d29ffaff..7859eadb 100644 --- a/examples-testing/examples/misc_controls_pointerlock.ts +++ b/examples-testing/examples/misc_controls_pointerlock.ts -@@ -2,11 +2,14 @@ import * as THREE from "three"; +@@ -2,11 +2,11 @@ import * as THREE from 'three'; - import { PointerLockControls } from "three/addons/controls/PointerLockControls.js"; + import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js'; -let camera, scene, renderer, controls; -+let camera: THREE.PerspectiveCamera, -+ scene: THREE.Scene, -+ renderer: THREE.WebGLRenderer, -+ controls: PointerLockControls; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer, controls: PointerLockControls; -const objects = []; +const objects: THREE.Mesh[] = []; @@ -1206,277 +1119,300 @@ index 53d56579..d92f3528 100644 let moveForward = false; let moveBackward = false; -@@ -42,8 +45,8 @@ function init() { +@@ -37,8 +37,8 @@ function init() { - controls = new PointerLockControls(camera, document.body); + controls = new PointerLockControls(camera, document.body); -- const blocker = document.getElementById("blocker"); -- const instructions = document.getElementById("instructions"); -+ const blocker = document.getElementById("blocker")!; -+ const instructions = document.getElementById("instructions")!; +- const blocker = document.getElementById('blocker'); +- const instructions = document.getElementById('instructions'); ++ const blocker = document.getElementById('blocker')!; ++ const instructions = document.getElementById('instructions')!; - instructions.addEventListener("click", function () { - controls.lock(); -@@ -61,7 +64,7 @@ function init() { + instructions.addEventListener('click', function () { + controls.lock(); +@@ -56,7 +56,7 @@ function init() { - scene.add(controls.getObject()); + scene.add(controls.getObject()); -- const onKeyDown = function (event) { -+ const onKeyDown = function (event: KeyboardEvent) { - switch (event.code) { - case "ArrowUp": - case "KeyW": -@@ -90,7 +93,7 @@ function init() { - } - }; - -- const onKeyUp = function (event) { -+ const onKeyUp = function (event: KeyboardEvent) { - switch (event.code) { - case "ArrowUp": - case "KeyW": -@@ -126,7 +129,12 @@ function init() { - - // floor - -- let floorGeometry = new THREE.PlaneGeometry(2000, 2000, 100, 100); -+ let floorGeometry: THREE.BufferGeometry = new THREE.PlaneGeometry( -+ 2000, -+ 2000, -+ 100, -+ 100 -+ ); - floorGeometry.rotateX(-Math.PI / 2); - - // vertex displacement +- const onKeyDown = function (event) { ++ const onKeyDown = function (event: KeyboardEvent) { + switch (event.code) { + case 'ArrowUp': + case 'KeyW': +@@ -85,7 +85,7 @@ function init() { + } + }; + +- const onKeyUp = function (event) { ++ const onKeyUp = function (event: KeyboardEvent) { + switch (event.code) { + case 'ArrowUp': + case 'KeyW': +@@ -116,7 +116,7 @@ function init() { + + // floor + +- let floorGeometry = new THREE.PlaneGeometry(2000, 2000, 100, 100); ++ let floorGeometry: THREE.BufferGeometry = new THREE.PlaneGeometry(2000, 2000, 100, 100); + floorGeometry.rotateX(-Math.PI / 2); + + // vertex displacement +@@ -165,7 +165,11 @@ function init() { + 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 }); ++ 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, THREE.SRGBColorSpace); + + const box = new THREE.Mesh(boxGeometry, boxMaterial); diff --git a/examples-testing/examples/misc_controls_trackball.ts b/examples-testing/examples/misc_controls_trackball.ts -index 73dece67..cfbfa2f4 100644 +index 19c42c6a..1b7f21ad 100644 --- a/examples-testing/examples/misc_controls_trackball.ts +++ b/examples-testing/examples/misc_controls_trackball.ts -@@ -5,7 +5,12 @@ import { GUI } from "three/addons/libs/lil-gui.module.min.js"; +@@ -5,7 +5,12 @@ import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; - import { TrackballControls } from "three/addons/controls/TrackballControls.js"; + import { TrackballControls } from 'three/addons/controls/TrackballControls.js'; -let perspectiveCamera, orthographicCamera, controls, scene, renderer, stats; +let perspectiveCamera: THREE.PerspectiveCamera, -+ orthographicCamera: THREE.OrthographicCamera, -+ controls: TrackballControls, -+ scene: THREE.Scene, -+ renderer: THREE.WebGLRenderer, -+ stats: Stats; ++ orthographicCamera: THREE.OrthographicCamera, ++ controls: TrackballControls, ++ scene: THREE.Scene, ++ renderer: THREE.WebGLRenderer, ++ stats: Stats; const params = { - orthographicCamera: false, -@@ -83,7 +88,7 @@ function init() { - gui - .add(params, "orthographicCamera") - .name("use orthographic") -- .onChange(function (value) { -+ .onChange(function (value: boolean) { - controls.dispose(); - - createControls(value ? orthographicCamera : perspectiveCamera); -@@ -96,7 +101,7 @@ function init() { - createControls(perspectiveCamera); + orthographicCamera: false, +@@ -39,7 +44,10 @@ function init() { + scene.fog = new THREE.FogExp2(0xcccccc, 0.002); + + const geometry = new THREE.CylinderGeometry(0, 10, 30, 4, 1); +- const material = new THREE.MeshPhongMaterial({ color: 0xffffff, flatShading: true }); ++ const material = new THREE.MeshPhongMaterial({ ++ color: 0xffffff, ++ flatShading: true, ++ }); + + for (let i = 0; i < 500; i++) { + const mesh = new THREE.Mesh(geometry, material); +@@ -79,7 +87,7 @@ function init() { + const gui = new GUI(); + gui.add(params, 'orthographicCamera') + .name('use orthographic') +- .onChange(function (value) { ++ .onChange(function (value: boolean) { + controls.dispose(); + + createControls(value ? orthographicCamera : perspectiveCamera); +@@ -92,7 +100,7 @@ function init() { + createControls(perspectiveCamera); } -function createControls(camera) { +function createControls(camera: THREE.Camera) { - controls = new TrackballControls(camera, renderer.domElement); + controls = new TrackballControls(camera, renderer.domElement); - controls.rotateSpeed = 1.0; + controls.rotateSpeed = 1.0; diff --git a/examples-testing/examples/misc_controls_transform.ts b/examples-testing/examples/misc_controls_transform.ts -index af9ed85c..332ec594 100644 +index aa4de6f3..7c08981b 100644 --- a/examples-testing/examples/misc_controls_transform.ts +++ b/examples-testing/examples/misc_controls_transform.ts -@@ -3,8 +3,13 @@ import * as THREE from "three"; - import { OrbitControls } from "three/addons/controls/OrbitControls.js"; - import { TransformControls } from "three/addons/controls/TransformControls.js"; +@@ -3,8 +3,8 @@ import * as THREE from 'three'; + import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + import { TransformControls } from 'three/addons/controls/TransformControls.js'; -let cameraPersp, cameraOrtho, currentCamera; -let scene, renderer, control, orbit; -+let cameraPersp: THREE.PerspectiveCamera, -+ cameraOrtho: THREE.OrthographicCamera, -+ currentCamera: THREE.Camera; -+let scene: THREE.Scene, -+ renderer: THREE.WebGLRenderer, -+ control: TransformControls, -+ orbit: OrbitControls; ++let cameraPersp: THREE.PerspectiveCamera, cameraOrtho: THREE.OrthographicCamera, currentCamera: THREE.Camera; ++let scene: THREE.Scene, renderer: THREE.WebGLRenderer, control: TransformControls, orbit: OrbitControls; init(); render(); -@@ -94,7 +99,8 @@ function init() { - case 67: // C - const position = currentCamera.position.clone(); - -- currentCamera = currentCamera.isPerspectiveCamera -+ currentCamera = (currentCamera as THREE.PerspectiveCamera) -+ .isPerspectiveCamera - ? cameraOrtho - : cameraPersp; - currentCamera.position.copy(position); +@@ -36,7 +36,10 @@ function init() { + texture.anisotropy = renderer.capabilities.getMaxAnisotropy(); + + const geometry = new THREE.BoxGeometry(200, 200, 200); +- const material = new THREE.MeshLambertMaterial({ map: texture, transparent: true }); ++ const material = new THREE.MeshLambertMaterial({ ++ map: texture, ++ transparent: true, ++ }); + + orbit = new OrbitControls(currentCamera, renderer.domElement); + orbit.update(); +@@ -84,7 +87,9 @@ function init() { + case 67: // C + const position = currentCamera.position.clone(); + +- currentCamera = currentCamera.isPerspectiveCamera ? cameraOrtho : cameraPersp; ++ currentCamera = (currentCamera as THREE.PerspectiveCamera).isPerspectiveCamera ++ ? cameraOrtho ++ : cameraPersp; + currentCamera.position.copy(position); + + orbit.object = currentCamera; diff --git a/examples-testing/examples/misc_exporter_draco.ts b/examples-testing/examples/misc_exporter_draco.ts -index 242a6a5e..eb38ce3f 100644 +index ce1e6967..f8b4b868 100644 --- a/examples-testing/examples/misc_exporter_draco.ts +++ b/examples-testing/examples/misc_exporter_draco.ts -@@ -4,7 +4,11 @@ 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"; +@@ -4,7 +4,11 @@ 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, camera, renderer, exporter, mesh; +let scene: THREE.Scene, -+ camera: THREE.PerspectiveCamera, -+ renderer: THREE.WebGLRenderer, -+ exporter: DRACOExporter, -+ mesh: THREE.Mesh; ++ camera: THREE.PerspectiveCamera, ++ renderer: THREE.WebGLRenderer, ++ exporter: DRACOExporter, ++ mesh: THREE.Mesh; const params = { - export: exportFile, -@@ -114,12 +118,12 @@ const link = document.createElement("a"); - link.style.display = "none"; + export: exportFile, +@@ -109,12 +113,12 @@ const link = document.createElement('a'); + link.style.display = 'none'; document.body.appendChild(link); -function save(blob, filename) { +function save(blob: Blob, filename: string) { - link.href = URL.createObjectURL(blob); - link.download = filename; - link.click(); + link.href = URL.createObjectURL(blob); + link.download = filename; + link.click(); } -function saveArrayBuffer(buffer, filename) { +function saveArrayBuffer(buffer: BufferSource, filename: string) { - save(new Blob([buffer], { type: "application/octet-stream" }), filename); + save(new Blob([buffer], { type: 'application/octet-stream' }), filename); } diff --git a/examples-testing/examples/misc_exporter_obj.ts b/examples-testing/examples/misc_exporter_obj.ts -index 7dce2e5d..4cdc0da6 100644 +index 02ad9072..efb71b1d 100644 --- a/examples-testing/examples/misc_exporter_obj.ts +++ b/examples-testing/examples/misc_exporter_obj.ts -@@ -4,7 +4,9 @@ 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"; +@@ -4,7 +4,7 @@ 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, scene, renderer; -+let camera: THREE.PerspectiveCamera, -+ scene: THREE.Scene, -+ renderer: THREE.WebGLRenderer; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer; const params = { - addTriangle: addTriangle, -@@ -71,12 +73,12 @@ function exportToObj() { - saveString(result, "object.obj"); + addTriangle: addTriangle, +@@ -66,12 +66,12 @@ function exportToObj() { + saveString(result, 'object.obj'); } -function addGeometry(type) { +function addGeometry(type: number) { - for (let i = 0; i < scene.children.length; i++) { - const child = scene.children[i]; - -- if (child.isMesh || child.isPoints) { -- child.geometry.dispose(); -+ if ((child as THREE.Mesh).isMesh || (child as THREE.Points).isPoints) { -+ (child as THREE.Mesh | THREE.Points).geometry.dispose(); - scene.remove(child); - i--; - } -@@ -164,13 +166,13 @@ const link = document.createElement("a"); - link.style.display = "none"; + for (let i = 0; i < scene.children.length; i++) { + const child = scene.children[i]; + +- if (child.isMesh || child.isPoints) { +- child.geometry.dispose(); ++ if ((child as THREE.Mesh).isMesh || (child as THREE.Points).isPoints) { ++ (child as THREE.Mesh | THREE.Points).geometry.dispose(); + scene.remove(child); + i--; + } +@@ -156,13 +156,13 @@ const link = document.createElement('a'); + link.style.display = 'none'; document.body.appendChild(link); -function save(blob, filename) { +function save(blob: Blob, filename: string) { - link.href = URL.createObjectURL(blob); - link.download = filename; - link.click(); + link.href = URL.createObjectURL(blob); + link.download = filename; + link.click(); } -function saveString(text, filename) { +function saveString(text: string, filename: string) { - save(new Blob([text], { type: "text/plain" }), filename); + save(new Blob([text], { type: 'text/plain' }), filename); } diff --git a/examples-testing/examples/misc_exporter_stl.ts b/examples-testing/examples/misc_exporter_stl.ts -index 07bd1745..da487601 100644 +index 673bad13..71e65414 100644 --- a/examples-testing/examples/misc_exporter_stl.ts +++ b/examples-testing/examples/misc_exporter_stl.ts -@@ -4,7 +4,11 @@ import { OrbitControls } from "three/addons/controls/OrbitControls.js"; - import { STLExporter } from "three/addons/exporters/STLExporter.js"; - import { GUI } from "three/addons/libs/lil-gui.module.min.js"; +@@ -4,7 +4,11 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + import { STLExporter } from 'three/addons/exporters/STLExporter.js'; + import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; -let scene, camera, renderer, exporter, mesh; +let scene: THREE.Scene, -+ camera: THREE.PerspectiveCamera, -+ renderer: THREE.WebGLRenderer, -+ exporter: STLExporter, -+ mesh: THREE.Mesh; ++ camera: THREE.PerspectiveCamera, ++ renderer: THREE.WebGLRenderer, ++ exporter: STLExporter, ++ mesh: THREE.Mesh; const params = { - exportASCII: exportASCII, -@@ -120,16 +124,16 @@ const link = document.createElement("a"); - link.style.display = "none"; + exportASCII: exportASCII, +@@ -115,16 +119,16 @@ const link = document.createElement('a'); + link.style.display = 'none'; document.body.appendChild(link); -function save(blob, filename) { +function save(blob: Blob, filename: string) { - link.href = URL.createObjectURL(blob); - link.download = filename; - link.click(); + link.href = URL.createObjectURL(blob); + link.download = filename; + link.click(); } -function saveString(text, filename) { +function saveString(text: string, filename: string) { - save(new Blob([text], { type: "text/plain" }), filename); + save(new Blob([text], { type: 'text/plain' }), filename); } -function saveArrayBuffer(buffer, filename) { +function saveArrayBuffer(buffer: BufferSource, filename: string) { - save(new Blob([buffer], { type: "application/octet-stream" }), filename); + save(new Blob([buffer], { type: 'application/octet-stream' }), filename); } diff --git a/examples-testing/examples/misc_lookat.ts b/examples-testing/examples/misc_lookat.ts -index e450cc34..2085afe3 100644 +index f6241b9e..93e83400 100644 --- a/examples-testing/examples/misc_lookat.ts +++ b/examples-testing/examples/misc_lookat.ts -@@ -2,9 +2,12 @@ import * as THREE from "three"; +@@ -2,9 +2,9 @@ import * as THREE from 'three'; - import Stats from "three/addons/libs/stats.module.js"; + import Stats from 'three/addons/libs/stats.module.js'; -let camera, scene, renderer, stats; -+let camera: THREE.PerspectiveCamera, -+ scene: THREE.Scene, -+ renderer: THREE.WebGLRenderer, -+ stats: Stats; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer, stats: Stats; -let sphere; +let sphere: THREE.Mesh; let mouseX = 0, - mouseY = 0; -@@ -72,7 +75,7 @@ function onWindowResize() { - renderer.setSize(window.innerWidth, window.innerHeight); + mouseY = 0; +@@ -64,7 +64,7 @@ function onWindowResize() { + renderer.setSize(window.innerWidth, window.innerHeight); } -function onDocumentMouseMove(event) { +function onDocumentMouseMove(event: MouseEvent) { - mouseX = (event.clientX - windowHalfX) * 10; - mouseY = (event.clientY - windowHalfY) * 10; + mouseX = (event.clientX - windowHalfX) * 10; + mouseY = (event.clientY - windowHalfY) * 10; } diff --git a/examples-testing/examples/misc_uv_tests.ts b/examples-testing/examples/misc_uv_tests.ts -index 6dd3fbfc..39c2ce28 100644 +index 4f782d45..0759cfca 100644 --- a/examples-testing/examples/misc_uv_tests.ts +++ b/examples-testing/examples/misc_uv_tests.ts -@@ -7,7 +7,7 @@ import { UVsDebug } from "three/addons/utils/UVsDebug.js"; +@@ -7,7 +7,7 @@ import { UVsDebug } from 'three/addons/utils/UVsDebug.js'; * as well as allow a new user to visualize what UVs are about. */ -function test(name, geometry) { +function test(name: string, geometry: THREE.BufferGeometry) { - const d = document.createElement("div"); + const d = document.createElement('div'); - d.innerHTML = "

" + name + "

"; + d.innerHTML = '

' + name + '

'; diff --git a/examples-testing/examples/svg_lines.ts b/examples-testing/examples/svg_lines.ts -index badcf87e..6662ad46 100644 +index 99b74c40..65aaf28d 100644 --- a/examples-testing/examples/svg_lines.ts +++ b/examples-testing/examples/svg_lines.ts -@@ -4,7 +4,7 @@ import { SVGRenderer } from "three/addons/renderers/SVGRenderer.js"; +@@ -4,7 +4,7 @@ import { SVGRenderer } from 'three/addons/renderers/SVGRenderer.js'; THREE.ColorManagement.enabled = false; @@ -1486,100 +1422,149 @@ index badcf87e..6662ad46 100644 init(); animate(); diff --git a/examples-testing/examples/svg_sandbox.ts b/examples-testing/examples/svg_sandbox.ts -index e7221f35..5e3ed6e6 100644 +index e6be8386..faea9a7a 100644 --- a/examples-testing/examples/svg_sandbox.ts +++ b/examples-testing/examples/svg_sandbox.ts -@@ -6,9 +6,12 @@ import { SVGRenderer, SVGObject } from "three/addons/renderers/SVGRenderer.js"; +@@ -6,9 +6,9 @@ import { SVGRenderer, SVGObject } from 'three/addons/renderers/SVGRenderer.js'; THREE.ColorManagement.enabled = false; -let camera, scene, renderer, stats; -+let camera: THREE.PerspectiveCamera, -+ scene: THREE.Scene, -+ renderer: SVGRenderer, -+ stats: Stats; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: SVGRenderer, stats: Stats; -let group; +let group: THREE.Mesh; init(); animate(); -@@ -41,7 +44,7 @@ function init() { - - const boxGeometry = new THREE.BoxGeometry(100, 100, 100); - -- let mesh = new THREE.Mesh( -+ let mesh: THREE.Mesh = new THREE.Mesh( - boxGeometry, - new THREE.MeshBasicMaterial({ - color: 0x0000ff, -@@ -181,7 +184,7 @@ function init() { - node.setAttribute("r", "40"); - - for (let i = 0; i < 50; i++) { -- const object = new SVGObject(node.cloneNode()); -+ const object = new SVGObject(node.cloneNode() as SVGCircleElement); - object.position.x = Math.random() * 1000 - 500; - object.position.y = Math.random() * 1000 - 500; - object.position.z = Math.random() * 1000 - 500; -@@ -194,7 +197,7 @@ function init() { - fileLoader.load("models/svg/hexagon.svg", function (svg) { - const node = document.createElementNS("http://www.w3.org/2000/svg", "g"); - const parser = new DOMParser(); -- const doc = parser.parseFromString(svg, "image/svg+xml"); -+ const doc = parser.parseFromString(svg as string, "image/svg+xml"); - - node.appendChild(doc.documentElement); +@@ -33,9 +33,13 @@ function init() { + + const boxGeometry = new THREE.BoxGeometry(100, 100, 100); + +- let mesh = new THREE.Mesh( ++ let mesh: THREE.Mesh = new THREE.Mesh( + boxGeometry, +- new THREE.MeshBasicMaterial({ color: 0x0000ff, opacity: 0.5, transparent: true }), ++ new THREE.MeshBasicMaterial({ ++ color: 0x0000ff, ++ opacity: 0.5, ++ transparent: true, ++ }), + ); + mesh.position.x = 500; + mesh.rotation.x = Math.random(); +@@ -55,7 +59,10 @@ function init() { + + mesh = new THREE.Mesh( + new THREE.PlaneGeometry(100, 100), +- new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff, side: THREE.DoubleSide }), ++ new THREE.MeshBasicMaterial({ ++ color: Math.random() * 0xffffff, ++ side: THREE.DoubleSide, ++ }), + ); + mesh.position.y = -500; + mesh.scale.x = mesh.scale.y = mesh.scale.z = 2; +@@ -75,7 +82,10 @@ function init() { + // POLYFIELD + + const geometry = new THREE.BufferGeometry(); +- const material = new THREE.MeshBasicMaterial({ vertexColors: true, side: THREE.DoubleSide }); ++ const material = new THREE.MeshBasicMaterial({ ++ vertexColors: true, ++ side: THREE.DoubleSide, ++ }); + + const v = new THREE.Vector3(); + const v0 = new THREE.Vector3(); +@@ -122,7 +132,9 @@ function init() { + // SPRITES + + for (let i = 0; i < 50; i++) { +- const material = new THREE.SpriteMaterial({ color: Math.random() * 0xffffff }); ++ const material = new THREE.SpriteMaterial({ ++ color: Math.random() * 0xffffff, ++ }); + const sprite = new THREE.Sprite(material); + sprite.position.x = Math.random() * 1000 - 500; + sprite.position.y = Math.random() * 1000 - 500; +@@ -139,7 +151,7 @@ function init() { + node.setAttribute('r', '40'); + + for (let i = 0; i < 50; i++) { +- const object = new SVGObject(node.cloneNode()); ++ const object = new SVGObject(node.cloneNode() as SVGCircleElement); + object.position.x = Math.random() * 1000 - 500; + object.position.y = Math.random() * 1000 - 500; + object.position.z = Math.random() * 1000 - 500; +@@ -152,7 +164,7 @@ function init() { + fileLoader.load('models/svg/hexagon.svg', function (svg) { + const node = document.createElementNS('http://www.w3.org/2000/svg', 'g'); + const parser = new DOMParser(); +- const doc = parser.parseFromString(svg, 'image/svg+xml'); ++ const doc = parser.parseFromString(svg as string, 'image/svg+xml'); + + node.appendChild(doc.documentElement); diff --git a/examples-testing/examples/webaudio_orientation.ts b/examples-testing/examples/webaudio_orientation.ts -index a86b8cbf..42c918f8 100644 +index 8a74c418..7258ed10 100644 --- a/examples-testing/examples/webaudio_orientation.ts +++ b/examples-testing/examples/webaudio_orientation.ts -@@ -4,16 +4,18 @@ import { OrbitControls } from "three/addons/controls/OrbitControls.js"; - import { PositionalAudioHelper } from "three/addons/helpers/PositionalAudioHelper.js"; - import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js"; +@@ -4,16 +4,16 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + import { PositionalAudioHelper } from 'three/addons/helpers/PositionalAudioHelper.js'; + import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; -let scene, camera, renderer; -+let scene: THREE.Scene, -+ camera: THREE.PerspectiveCamera, -+ renderer: THREE.WebGLRenderer; ++let scene: THREE.Scene, camera: THREE.PerspectiveCamera, renderer: THREE.WebGLRenderer; --const startButton = document.getElementById("startButton"); -+const startButton = document.getElementById("startButton")!; - startButton.addEventListener("click", init); +-const startButton = document.getElementById('startButton'); ++const startButton = document.getElementById('startButton')!; + startButton.addEventListener('click', init); function init() { -- const overlay = document.getElementById("overlay"); -+ const overlay = document.getElementById("overlay")!; - overlay.remove(); - -- const container = document.getElementById("container"); -+ const container = document.getElementById("container")!; +- const overlay = document.getElementById('overlay'); ++ const overlay = document.getElementById('overlay')!; + overlay.remove(); - // +- const container = document.getElementById('container'); ++ const container = document.getElementById('container')!; -@@ -70,7 +72,7 @@ function init() { - const listener = new THREE.AudioListener(); - camera.add(listener); - -- const audioElement = document.getElementById("music"); -+ const audioElement = document.getElementById("music") as HTMLAudioElement; - audioElement.play(); - - const positionalAudio = new THREE.PositionalAudio(listener); -@@ -90,10 +92,11 @@ function init() { - boomBox.scale.set(20, 20, 20); - - boomBox.traverse(function (object) { -- if (object.isMesh) { -- object.material.envMap = reflectionCube; -- object.geometry.rotateY(-Math.PI); -- object.castShadow = true; -+ if ((object as THREE.Mesh).isMesh) { -+ ((object as THREE.Mesh).material as THREE.MeshStandardMaterial).envMap = -+ reflectionCube; -+ (object as THREE.Mesh).geometry.rotateY(-Math.PI); -+ (object as THREE.Mesh).castShadow = true; - } - }); + // +@@ -65,7 +65,7 @@ function init() { + const listener = new THREE.AudioListener(); + camera.add(listener); + +- const audioElement = document.getElementById('music'); ++ const audioElement = document.getElementById('music') as HTMLAudioElement; + audioElement.play(); + + const positionalAudio = new THREE.PositionalAudio(listener); +@@ -85,10 +85,10 @@ function init() { + boomBox.scale.set(20, 20, 20); + + boomBox.traverse(function (object) { +- if (object.isMesh) { +- object.material.envMap = reflectionCube; +- object.geometry.rotateY(-Math.PI); +- object.castShadow = true; ++ if ((object as THREE.Mesh).isMesh) { ++ ((object as THREE.Mesh).material as THREE.MeshStandardMaterial).envMap = reflectionCube; ++ (object as THREE.Mesh).geometry.rotateY(-Math.PI); ++ (object as THREE.Mesh).castShadow = true; + } + }); + +@@ -100,7 +100,11 @@ function init() { + // sound is damped behind this wall + + const wallGeometry = new THREE.BoxGeometry(2, 1, 0.1); +- const wallMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, transparent: true, opacity: 0.5 }); ++ const wallMaterial = new THREE.MeshBasicMaterial({ ++ color: 0xff0000, ++ transparent: true, ++ opacity: 0.5, ++ }); + + const wall = new THREE.Mesh(wallGeometry, wallMaterial); + wall.position.set(0, 0.5, -0.5); diff --git a/examples-testing/examples/css2d_label.ts b/examples-testing/examples/css2d_label.ts index ce736e5f8..cf61d1e0b 100644 --- a/examples-testing/examples/css2d_label.ts +++ b/examples-testing/examples/css2d_label.ts @@ -1,31 +1,28 @@ -import * as THREE from "three"; +import * as THREE from 'three'; -import { OrbitControls } from "three/addons/controls/OrbitControls.js"; -import { - CSS2DRenderer, - CSS2DObject, -} from "three/addons/renderers/CSS2DRenderer.js"; +import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; +import { CSS2DRenderer, CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js'; -import { GUI } from "three/addons/libs/lil-gui.module.min.js"; +import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; let gui; let camera, scene, renderer, labelRenderer; const layers = { - "Toggle Name": function () { - camera.layers.toggle(0); - }, - "Toggle Mass": function () { - camera.layers.toggle(1); - }, - "Enable All": function () { - camera.layers.enableAll(); - }, - - "Disable All": function () { - camera.layers.disableAll(); - }, + 'Toggle Name': function () { + camera.layers.toggle(0); + }, + 'Toggle Mass': function () { + camera.layers.toggle(1); + }, + 'Enable All': function () { + camera.layers.enableAll(); + }, + + 'Disable All': function () { + camera.layers.disableAll(); + }, }; const clock = new THREE.Clock(); @@ -37,158 +34,153 @@ init(); animate(); function init() { - const EARTH_RADIUS = 1; - const MOON_RADIUS = 0.27; - - camera = new THREE.PerspectiveCamera( - 45, - window.innerWidth / window.innerHeight, - 0.1, - 200 - ); - camera.position.set(10, 5, 20); - camera.layers.enableAll(); - - scene = new THREE.Scene(); - - const dirLight = new THREE.DirectionalLight(0xffffff, 1); - dirLight.position.set(0, 0, 1); - dirLight.layers.enableAll(); - scene.add(dirLight); - - const axesHelper = new THREE.AxesHelper(5); - axesHelper.layers.enableAll(); - scene.add(axesHelper); - - // - - const earthGeometry = new THREE.SphereGeometry(EARTH_RADIUS, 16, 16); - const earthMaterial = new THREE.MeshPhongMaterial({ - specular: 0x333333, - shininess: 5, - map: textureLoader.load("textures/planets/earth_atmos_2048.jpg"), - specularMap: textureLoader.load("textures/planets/earth_specular_2048.jpg"), - normalMap: textureLoader.load("textures/planets/earth_normal_2048.jpg"), - normalScale: new THREE.Vector2(0.85, 0.85), - }); - earthMaterial.map.colorSpace = THREE.SRGBColorSpace; - const earth = new THREE.Mesh(earthGeometry, earthMaterial); - scene.add(earth); - - const moonGeometry = new THREE.SphereGeometry(MOON_RADIUS, 16, 16); - const moonMaterial = new THREE.MeshPhongMaterial({ - shininess: 5, - map: textureLoader.load("textures/planets/moon_1024.jpg"), - }); - moonMaterial.map.colorSpace = THREE.SRGBColorSpace; - moon = new THREE.Mesh(moonGeometry, moonMaterial); - scene.add(moon); - - // - - earth.layers.enableAll(); - moon.layers.enableAll(); - - const earthDiv = document.createElement("div"); - earthDiv.className = "label"; - earthDiv.textContent = "Earth"; - earthDiv.style.backgroundColor = "transparent"; - - const earthLabel = new CSS2DObject(earthDiv); - earthLabel.position.set(1.5 * EARTH_RADIUS, 0, 0); - earthLabel.center.set(0, 1); - earth.add(earthLabel); - earthLabel.layers.set(0); - - const earthMassDiv = document.createElement("div"); - earthMassDiv.className = "label"; - earthMassDiv.textContent = "5.97237e24 kg"; - earthMassDiv.style.backgroundColor = "transparent"; - - const earthMassLabel = new CSS2DObject(earthMassDiv); - earthMassLabel.position.set(1.5 * EARTH_RADIUS, 0, 0); - earthMassLabel.center.set(0, 0); - earth.add(earthMassLabel); - earthMassLabel.layers.set(1); - - const moonDiv = document.createElement("div"); - moonDiv.className = "label"; - moonDiv.textContent = "Moon"; - moonDiv.style.backgroundColor = "transparent"; - - const moonLabel = new CSS2DObject(moonDiv); - moonLabel.position.set(1.5 * MOON_RADIUS, 0, 0); - moonLabel.center.set(0, 1); - moon.add(moonLabel); - moonLabel.layers.set(0); - - const moonMassDiv = document.createElement("div"); - moonMassDiv.className = "label"; - moonMassDiv.textContent = "7.342e22 kg"; - moonMassDiv.style.backgroundColor = "transparent"; - - const moonMassLabel = new CSS2DObject(moonMassDiv); - moonMassLabel.position.set(1.5 * MOON_RADIUS, 0, 0); - moonMassLabel.center.set(0, 0); - moon.add(moonMassLabel); - moonMassLabel.layers.set(1); - - // - - renderer = new THREE.WebGLRenderer(); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - document.body.appendChild(renderer.domElement); - - labelRenderer = new CSS2DRenderer(); - labelRenderer.setSize(window.innerWidth, window.innerHeight); - labelRenderer.domElement.style.position = "absolute"; - labelRenderer.domElement.style.top = "0px"; - document.body.appendChild(labelRenderer.domElement); - - const controls = new OrbitControls(camera, labelRenderer.domElement); - controls.minDistance = 5; - controls.maxDistance = 100; - - // - - window.addEventListener("resize", onWindowResize); - - initGui(); + const EARTH_RADIUS = 1; + const MOON_RADIUS = 0.27; + + camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200); + camera.position.set(10, 5, 20); + camera.layers.enableAll(); + + scene = new THREE.Scene(); + + const dirLight = new THREE.DirectionalLight(0xffffff, 1); + dirLight.position.set(0, 0, 1); + dirLight.layers.enableAll(); + scene.add(dirLight); + + const axesHelper = new THREE.AxesHelper(5); + axesHelper.layers.enableAll(); + scene.add(axesHelper); + + // + + const earthGeometry = new THREE.SphereGeometry(EARTH_RADIUS, 16, 16); + const earthMaterial = new THREE.MeshPhongMaterial({ + specular: 0x333333, + shininess: 5, + map: textureLoader.load('textures/planets/earth_atmos_2048.jpg'), + specularMap: textureLoader.load('textures/planets/earth_specular_2048.jpg'), + normalMap: textureLoader.load('textures/planets/earth_normal_2048.jpg'), + normalScale: new THREE.Vector2(0.85, 0.85), + }); + earthMaterial.map.colorSpace = THREE.SRGBColorSpace; + const earth = new THREE.Mesh(earthGeometry, earthMaterial); + scene.add(earth); + + const moonGeometry = new THREE.SphereGeometry(MOON_RADIUS, 16, 16); + const moonMaterial = new THREE.MeshPhongMaterial({ + shininess: 5, + map: textureLoader.load('textures/planets/moon_1024.jpg'), + }); + moonMaterial.map.colorSpace = THREE.SRGBColorSpace; + moon = new THREE.Mesh(moonGeometry, moonMaterial); + scene.add(moon); + + // + + earth.layers.enableAll(); + moon.layers.enableAll(); + + const earthDiv = document.createElement('div'); + earthDiv.className = 'label'; + earthDiv.textContent = 'Earth'; + earthDiv.style.backgroundColor = 'transparent'; + + const earthLabel = new CSS2DObject(earthDiv); + earthLabel.position.set(1.5 * EARTH_RADIUS, 0, 0); + earthLabel.center.set(0, 1); + earth.add(earthLabel); + earthLabel.layers.set(0); + + const earthMassDiv = document.createElement('div'); + earthMassDiv.className = 'label'; + earthMassDiv.textContent = '5.97237e24 kg'; + earthMassDiv.style.backgroundColor = 'transparent'; + + const earthMassLabel = new CSS2DObject(earthMassDiv); + earthMassLabel.position.set(1.5 * EARTH_RADIUS, 0, 0); + earthMassLabel.center.set(0, 0); + earth.add(earthMassLabel); + earthMassLabel.layers.set(1); + + const moonDiv = document.createElement('div'); + moonDiv.className = 'label'; + moonDiv.textContent = 'Moon'; + moonDiv.style.backgroundColor = 'transparent'; + + const moonLabel = new CSS2DObject(moonDiv); + moonLabel.position.set(1.5 * MOON_RADIUS, 0, 0); + moonLabel.center.set(0, 1); + moon.add(moonLabel); + moonLabel.layers.set(0); + + const moonMassDiv = document.createElement('div'); + moonMassDiv.className = 'label'; + moonMassDiv.textContent = '7.342e22 kg'; + moonMassDiv.style.backgroundColor = 'transparent'; + + const moonMassLabel = new CSS2DObject(moonMassDiv); + moonMassLabel.position.set(1.5 * MOON_RADIUS, 0, 0); + moonMassLabel.center.set(0, 0); + moon.add(moonMassLabel); + moonMassLabel.layers.set(1); + + // + + renderer = new THREE.WebGLRenderer(); + renderer.setPixelRatio(window.devicePixelRatio); + renderer.setSize(window.innerWidth, window.innerHeight); + document.body.appendChild(renderer.domElement); + + labelRenderer = new CSS2DRenderer(); + labelRenderer.setSize(window.innerWidth, window.innerHeight); + labelRenderer.domElement.style.position = 'absolute'; + labelRenderer.domElement.style.top = '0px'; + document.body.appendChild(labelRenderer.domElement); + + const controls = new OrbitControls(camera, labelRenderer.domElement); + controls.minDistance = 5; + controls.maxDistance = 100; + + // + + window.addEventListener('resize', onWindowResize); + + initGui(); } function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; + camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); + camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); + renderer.setSize(window.innerWidth, window.innerHeight); - labelRenderer.setSize(window.innerWidth, window.innerHeight); + labelRenderer.setSize(window.innerWidth, window.innerHeight); } function animate() { - requestAnimationFrame(animate); + requestAnimationFrame(animate); - const elapsed = clock.getElapsedTime(); + const elapsed = clock.getElapsedTime(); - moon.position.set(Math.sin(elapsed) * 5, 0, Math.cos(elapsed) * 5); + moon.position.set(Math.sin(elapsed) * 5, 0, Math.cos(elapsed) * 5); - renderer.render(scene, camera); - labelRenderer.render(scene, camera); + renderer.render(scene, camera); + labelRenderer.render(scene, camera); } // function initGui() { - gui = new GUI(); + gui = new GUI(); - gui.title("Camera Layers"); + gui.title('Camera Layers'); - gui.add(layers, "Toggle Name"); - gui.add(layers, "Toggle Mass"); - gui.add(layers, "Enable All"); - gui.add(layers, "Disable All"); + gui.add(layers, 'Toggle Name'); + gui.add(layers, 'Toggle Mass'); + gui.add(layers, 'Enable All'); + gui.add(layers, 'Disable All'); - gui.open(); + gui.open(); } diff --git a/examples-testing/examples/css3d_molecules.ts b/examples-testing/examples/css3d_molecules.ts index ee79a4937..538472607 100644 --- a/examples-testing/examples/css3d_molecules.ts +++ b/examples-testing/examples/css3d_molecules.ts @@ -1,13 +1,9 @@ -import * as THREE from "three"; +import * as THREE from 'three'; -import { TrackballControls } from "three/addons/controls/TrackballControls.js"; -import { PDBLoader } from "three/addons/loaders/PDBLoader.js"; -import { - CSS3DRenderer, - CSS3DObject, - CSS3DSprite, -} from "three/addons/renderers/CSS3DRenderer.js"; -import { GUI } from "three/addons/libs/lil-gui.module.min.js"; +import { TrackballControls } from 'three/addons/controls/TrackballControls.js'; +import { PDBLoader } from 'three/addons/loaders/PDBLoader.js'; +import { CSS3DRenderer, CSS3DObject, CSS3DSprite } from 'three/addons/renderers/CSS3DRenderer.js'; +import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; let camera, scene, renderer; let controls; @@ -21,347 +17,337 @@ const tmpVec4 = new THREE.Vector3(); const offset = new THREE.Vector3(); const VIZ_TYPE = { - Atoms: 0, - Bonds: 1, - "Atoms + Bonds": 2, + Atoms: 0, + Bonds: 1, + 'Atoms + Bonds': 2, }; const MOLECULES = { - Ethanol: "ethanol.pdb", - Aspirin: "aspirin.pdb", - Caffeine: "caffeine.pdb", - Nicotine: "nicotine.pdb", - LSD: "lsd.pdb", - Cocaine: "cocaine.pdb", - Cholesterol: "cholesterol.pdb", - Lycopene: "lycopene.pdb", - Glucose: "glucose.pdb", - "Aluminium oxide": "Al2O3.pdb", - Cubane: "cubane.pdb", - Copper: "cu.pdb", - Fluorite: "caf2.pdb", - Salt: "nacl.pdb", - "YBCO superconductor": "ybco.pdb", - Buckyball: "buckyball.pdb", - // 'Diamond': 'diamond.pdb', - Graphite: "graphite.pdb", + Ethanol: 'ethanol.pdb', + Aspirin: 'aspirin.pdb', + Caffeine: 'caffeine.pdb', + Nicotine: 'nicotine.pdb', + LSD: 'lsd.pdb', + Cocaine: 'cocaine.pdb', + Cholesterol: 'cholesterol.pdb', + Lycopene: 'lycopene.pdb', + Glucose: 'glucose.pdb', + 'Aluminium oxide': 'Al2O3.pdb', + Cubane: 'cubane.pdb', + Copper: 'cu.pdb', + Fluorite: 'caf2.pdb', + Salt: 'nacl.pdb', + 'YBCO superconductor': 'ybco.pdb', + Buckyball: 'buckyball.pdb', + // 'Diamond': 'diamond.pdb', + Graphite: 'graphite.pdb', }; const params = { - vizType: 2, - molecule: "caffeine.pdb", + vizType: 2, + molecule: 'caffeine.pdb', }; const loader = new PDBLoader(); const colorSpriteMap = {}; -const baseSprite = document.createElement("img"); +const baseSprite = document.createElement('img'); init(); animate(); function init() { - camera = new THREE.PerspectiveCamera( - 70, - window.innerWidth / window.innerHeight, - 1, - 5000 - ); - camera.position.z = 1000; + camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 5000); + camera.position.z = 1000; - scene = new THREE.Scene(); + scene = new THREE.Scene(); - root = new THREE.Object3D(); - scene.add(root); + root = new THREE.Object3D(); + scene.add(root); - // + // - renderer = new CSS3DRenderer(); - renderer.setSize(window.innerWidth, window.innerHeight); - document.getElementById("container").appendChild(renderer.domElement); + renderer = new CSS3DRenderer(); + renderer.setSize(window.innerWidth, window.innerHeight); + document.getElementById('container').appendChild(renderer.domElement); - // + // - controls = new TrackballControls(camera, renderer.domElement); - controls.rotateSpeed = 0.5; + controls = new TrackballControls(camera, renderer.domElement); + controls.rotateSpeed = 0.5; - // + // - baseSprite.onload = function () { - loadMolecule(params.molecule); - }; + baseSprite.onload = function () { + loadMolecule(params.molecule); + }; - baseSprite.src = "textures/sprites/ball.png"; + baseSprite.src = 'textures/sprites/ball.png'; - // + // - window.addEventListener("resize", onWindowResize); + window.addEventListener('resize', onWindowResize); - // + // - const gui = new GUI(); + const gui = new GUI(); - gui.add(params, "vizType", VIZ_TYPE).onChange(changeVizType); - gui.add(params, "molecule", MOLECULES).onChange(loadMolecule); - gui.open(); + gui.add(params, 'vizType', VIZ_TYPE).onChange(changeVizType); + gui.add(params, 'molecule', MOLECULES).onChange(loadMolecule); + gui.open(); } function changeVizType(value) { - if (value === 0) showAtoms(); - else if (value === 1) showBonds(); - else showAtomsBonds(); + if (value === 0) showAtoms(); + else if (value === 1) showBonds(); + else showAtomsBonds(); } // function showAtoms() { - for (let i = 0; i < objects.length; i++) { - const object = objects[i]; - - if (object instanceof CSS3DSprite) { - object.element.style.display = ""; - object.visible = true; - } else { - object.element.style.display = "none"; - object.visible = false; + for (let i = 0; i < objects.length; i++) { + const object = objects[i]; + + if (object instanceof CSS3DSprite) { + object.element.style.display = ''; + object.visible = true; + } else { + object.element.style.display = 'none'; + object.visible = false; + } } - } } function showBonds() { - for (let i = 0; i < objects.length; i++) { - const object = objects[i]; - - if (object instanceof CSS3DSprite) { - object.element.style.display = "none"; - object.visible = false; - } else { - object.element.style.display = ""; - object.element.style.height = object.userData.bondLengthFull; - object.visible = true; + for (let i = 0; i < objects.length; i++) { + const object = objects[i]; + + if (object instanceof CSS3DSprite) { + object.element.style.display = 'none'; + object.visible = false; + } else { + object.element.style.display = ''; + object.element.style.height = object.userData.bondLengthFull; + object.visible = true; + } } - } } function showAtomsBonds() { - for (let i = 0; i < objects.length; i++) { - const object = objects[i]; + for (let i = 0; i < objects.length; i++) { + const object = objects[i]; - object.element.style.display = ""; - object.visible = true; + object.element.style.display = ''; + object.visible = true; - if (!(object instanceof CSS3DSprite)) { - object.element.style.height = object.userData.bondLengthShort; + if (!(object instanceof CSS3DSprite)) { + object.element.style.height = object.userData.bondLengthShort; + } } - } } // function colorify(ctx, width, height, color) { - const r = color.r, - g = color.g, - b = color.b; + const r = color.r, + g = color.g, + b = color.b; - const imageData = ctx.getImageData(0, 0, width, height); - const data = imageData.data; + const imageData = ctx.getImageData(0, 0, width, height); + const data = imageData.data; - for (let i = 0, l = data.length; i < l; i += 4) { - data[i + 0] *= r; - data[i + 1] *= g; - data[i + 2] *= b; - } + for (let i = 0, l = data.length; i < l; i += 4) { + data[i + 0] *= r; + data[i + 1] *= g; + data[i + 2] *= b; + } - ctx.putImageData(imageData, 0, 0); + ctx.putImageData(imageData, 0, 0); } function imageToCanvas(image) { - const width = image.width; - const height = image.height; + const width = image.width; + const height = image.height; - const canvas = document.createElement("canvas"); + const canvas = document.createElement('canvas'); - canvas.width = width; - canvas.height = height; + canvas.width = width; + canvas.height = height; - const context = canvas.getContext("2d"); - context.drawImage(image, 0, 0, width, height); + const context = canvas.getContext('2d'); + context.drawImage(image, 0, 0, width, height); - return canvas; + return canvas; } // function loadMolecule(model) { - const url = "models/pdb/" + model; + const url = 'models/pdb/' + model; - for (let i = 0; i < objects.length; i++) { - const object = objects[i]; - object.parent.remove(object); - } + for (let i = 0; i < objects.length; i++) { + const object = objects[i]; + object.parent.remove(object); + } - objects.length = 0; + objects.length = 0; - loader.load(url, function (pdb) { - const geometryAtoms = pdb.geometryAtoms; - const geometryBonds = pdb.geometryBonds; - const json = pdb.json; + loader.load(url, function (pdb) { + const geometryAtoms = pdb.geometryAtoms; + const geometryBonds = pdb.geometryBonds; + const json = pdb.json; - geometryAtoms.computeBoundingBox(); - geometryAtoms.boundingBox.getCenter(offset).negate(); + geometryAtoms.computeBoundingBox(); + geometryAtoms.boundingBox.getCenter(offset).negate(); - geometryAtoms.translate(offset.x, offset.y, offset.z); - geometryBonds.translate(offset.x, offset.y, offset.z); + geometryAtoms.translate(offset.x, offset.y, offset.z); + geometryBonds.translate(offset.x, offset.y, offset.z); - const positionAtoms = geometryAtoms.getAttribute("position"); - const colorAtoms = geometryAtoms.getAttribute("color"); + const positionAtoms = geometryAtoms.getAttribute('position'); + const colorAtoms = geometryAtoms.getAttribute('color'); - const position = new THREE.Vector3(); - const color = new THREE.Color(); + const position = new THREE.Vector3(); + const color = new THREE.Color(); - for (let i = 0; i < positionAtoms.count; i++) { - position.fromBufferAttribute(positionAtoms, i); - color.fromBufferAttribute(colorAtoms, i); + for (let i = 0; i < positionAtoms.count; i++) { + position.fromBufferAttribute(positionAtoms, i); + color.fromBufferAttribute(colorAtoms, i); - const atomJSON = json.atoms[i]; - const element = atomJSON[4]; + const atomJSON = json.atoms[i]; + const element = atomJSON[4]; - if (!colorSpriteMap[element]) { - const canvas = imageToCanvas(baseSprite); - const context = canvas.getContext("2d"); + if (!colorSpriteMap[element]) { + const canvas = imageToCanvas(baseSprite); + const context = canvas.getContext('2d'); - colorify(context, canvas.width, canvas.height, color); + colorify(context, canvas.width, canvas.height, color); - const dataUrl = canvas.toDataURL(); + const dataUrl = canvas.toDataURL(); - colorSpriteMap[element] = dataUrl; - } + colorSpriteMap[element] = dataUrl; + } - const colorSprite = colorSpriteMap[element]; + const colorSprite = colorSpriteMap[element]; - const atom = document.createElement("img"); - atom.src = colorSprite; + const atom = document.createElement('img'); + atom.src = colorSprite; - const object = new CSS3DSprite(atom); - object.position.copy(position); - object.position.multiplyScalar(75); + const object = new CSS3DSprite(atom); + object.position.copy(position); + object.position.multiplyScalar(75); - object.matrixAutoUpdate = false; - object.updateMatrix(); + object.matrixAutoUpdate = false; + object.updateMatrix(); - root.add(object); + root.add(object); - objects.push(object); - } + objects.push(object); + } - const positionBonds = geometryBonds.getAttribute("position"); + const positionBonds = geometryBonds.getAttribute('position'); - const start = new THREE.Vector3(); - const end = new THREE.Vector3(); + const start = new THREE.Vector3(); + const end = new THREE.Vector3(); - for (let i = 0; i < positionBonds.count; i += 2) { - start.fromBufferAttribute(positionBonds, i); - end.fromBufferAttribute(positionBonds, i + 1); + for (let i = 0; i < positionBonds.count; i += 2) { + start.fromBufferAttribute(positionBonds, i); + end.fromBufferAttribute(positionBonds, i + 1); - start.multiplyScalar(75); - end.multiplyScalar(75); + start.multiplyScalar(75); + end.multiplyScalar(75); - tmpVec1.subVectors(end, start); - const bondLength = tmpVec1.length() - 50; + tmpVec1.subVectors(end, start); + const bondLength = tmpVec1.length() - 50; - // + // - let bond = document.createElement("div"); - bond.className = "bond"; - bond.style.height = bondLength + "px"; + let bond = document.createElement('div'); + bond.className = 'bond'; + bond.style.height = bondLength + 'px'; - let object = new CSS3DObject(bond); - object.position.copy(start); - object.position.lerp(end, 0.5); + let object = new CSS3DObject(bond); + object.position.copy(start); + object.position.lerp(end, 0.5); - object.userData.bondLengthShort = bondLength + "px"; - object.userData.bondLengthFull = bondLength + 55 + "px"; + object.userData.bondLengthShort = bondLength + 'px'; + object.userData.bondLengthFull = bondLength + 55 + 'px'; - // + // - const axis = tmpVec2.set(0, 1, 0).cross(tmpVec1); - const radians = Math.acos( - tmpVec3.set(0, 1, 0).dot(tmpVec4.copy(tmpVec1).normalize()) - ); + const axis = tmpVec2.set(0, 1, 0).cross(tmpVec1); + const radians = Math.acos(tmpVec3.set(0, 1, 0).dot(tmpVec4.copy(tmpVec1).normalize())); - const objMatrix = new THREE.Matrix4().makeRotationAxis( - axis.normalize(), - radians - ); - object.matrix.copy(objMatrix); - object.quaternion.setFromRotationMatrix(object.matrix); + const objMatrix = new THREE.Matrix4().makeRotationAxis(axis.normalize(), radians); + object.matrix.copy(objMatrix); + object.quaternion.setFromRotationMatrix(object.matrix); - object.matrixAutoUpdate = false; - object.updateMatrix(); + object.matrixAutoUpdate = false; + object.updateMatrix(); - root.add(object); + root.add(object); - objects.push(object); + objects.push(object); - // + // - const joint = new THREE.Object3D(); - joint.position.copy(start); - joint.position.lerp(end, 0.5); + const joint = new THREE.Object3D(); + joint.position.copy(start); + joint.position.lerp(end, 0.5); - joint.matrix.copy(objMatrix); - joint.quaternion.setFromRotationMatrix(joint.matrix); + joint.matrix.copy(objMatrix); + joint.quaternion.setFromRotationMatrix(joint.matrix); - joint.matrixAutoUpdate = false; - joint.updateMatrix(); + joint.matrixAutoUpdate = false; + joint.updateMatrix(); - bond = document.createElement("div"); - bond.className = "bond"; - bond.style.height = bondLength + "px"; + bond = document.createElement('div'); + bond.className = 'bond'; + bond.style.height = bondLength + 'px'; - object = new CSS3DObject(bond); - object.rotation.y = Math.PI / 2; + object = new CSS3DObject(bond); + object.rotation.y = Math.PI / 2; - object.matrixAutoUpdate = false; - object.updateMatrix(); + object.matrixAutoUpdate = false; + object.updateMatrix(); - object.userData.bondLengthShort = bondLength + "px"; - object.userData.bondLengthFull = bondLength + 55 + "px"; + object.userData.bondLengthShort = bondLength + 'px'; + object.userData.bondLengthFull = bondLength + 55 + 'px'; - object.userData.joint = joint; + object.userData.joint = joint; - joint.add(object); - root.add(joint); + joint.add(object); + root.add(joint); - objects.push(object); - } + objects.push(object); + } - //console.log( "CSS3DObjects:", objects.length ); + //console.log( "CSS3DObjects:", objects.length ); - changeVizType(params.vizType); - }); + changeVizType(params.vizType); + }); } // function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); + renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { - requestAnimationFrame(animate); - controls.update(); + requestAnimationFrame(animate); + controls.update(); - const time = Date.now() * 0.0004; + const time = Date.now() * 0.0004; - root.rotation.x = time; - root.rotation.y = time * 0.7; + root.rotation.x = time; + root.rotation.y = time * 0.7; - render(); + render(); } function render() { - renderer.render(scene, camera); + renderer.render(scene, camera); } diff --git a/examples-testing/examples/css3d_orthographic.ts b/examples-testing/examples/css3d_orthographic.ts index b3bd43c68..4aabbed08 100644 --- a/examples-testing/examples/css3d_orthographic.ts +++ b/examples-testing/examples/css3d_orthographic.ts @@ -1,11 +1,8 @@ -import * as THREE from "three"; +import * as THREE from 'three'; -import { OrbitControls } from "three/addons/controls/OrbitControls.js"; -import { - CSS3DRenderer, - CSS3DObject, -} from "three/addons/renderers/CSS3DRenderer.js"; -import { GUI } from "three/addons/libs/lil-gui.module.min.js"; +import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; +import { CSS3DRenderer, CSS3DObject } from 'three/addons/renderers/CSS3DRenderer.js'; +import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; let camera, scene, renderer; @@ -17,226 +14,195 @@ init(); animate(); function init() { - const aspect = window.innerWidth / window.innerHeight; - camera = new THREE.OrthographicCamera( - (frustumSize * aspect) / -2, - (frustumSize * aspect) / 2, - frustumSize / 2, - frustumSize / -2, - 1, - 1000 - ); - - camera.position.set(-200, 200, 200); - - scene = new THREE.Scene(); - scene.background = new THREE.Color(0xf0f0f0); - - scene2 = new THREE.Scene(); - - const material = new THREE.MeshBasicMaterial({ - color: 0x000000, - wireframe: true, - wireframeLinewidth: 1, - side: THREE.DoubleSide, - }); - - // left - createPlane( - 100, - 100, - "chocolate", - new THREE.Vector3(-50, 0, 0), - new THREE.Euler(0, -90 * THREE.MathUtils.DEG2RAD, 0) - ); - // right - createPlane( - 100, - 100, - "saddlebrown", - new THREE.Vector3(0, 0, 50), - new THREE.Euler(0, 0, 0) - ); - // top - createPlane( - 100, - 100, - "yellowgreen", - new THREE.Vector3(0, 50, 0), - new THREE.Euler(-90 * THREE.MathUtils.DEG2RAD, 0, 0) - ); - // bottom - createPlane( - 300, - 300, - "seagreen", - new THREE.Vector3(0, -50, 0), - new THREE.Euler(-90 * THREE.MathUtils.DEG2RAD, 0, 0) - ); - - // - - renderer = new THREE.WebGLRenderer(); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - document.body.appendChild(renderer.domElement); - - renderer2 = new CSS3DRenderer(); - renderer2.setSize(window.innerWidth, window.innerHeight); - renderer2.domElement.style.position = "absolute"; - renderer2.domElement.style.top = 0; - document.body.appendChild(renderer2.domElement); - - const controls = new OrbitControls(camera, renderer2.domElement); - controls.minZoom = 0.5; - controls.maxZoom = 2; - - function createPlane(width, height, cssColor, pos, rot) { - const element = document.createElement("div"); - element.style.width = width + "px"; - element.style.height = height + "px"; - element.style.opacity = 0.75; - element.style.background = cssColor; - - const object = new CSS3DObject(element); - object.position.copy(pos); - object.rotation.copy(rot); - scene2.add(object); - - const geometry = new THREE.PlaneGeometry(width, height); - const mesh = new THREE.Mesh(geometry, material); - mesh.position.copy(object.position); - mesh.rotation.copy(object.rotation); - scene.add(mesh); - } - - window.addEventListener("resize", onWindowResize); - createPanel(); + const aspect = window.innerWidth / window.innerHeight; + camera = new THREE.OrthographicCamera( + (frustumSize * aspect) / -2, + (frustumSize * aspect) / 2, + frustumSize / 2, + frustumSize / -2, + 1, + 1000, + ); + + camera.position.set(-200, 200, 200); + + scene = new THREE.Scene(); + scene.background = new THREE.Color(0xf0f0f0); + + scene2 = new THREE.Scene(); + + const material = new THREE.MeshBasicMaterial({ + color: 0x000000, + wireframe: true, + wireframeLinewidth: 1, + side: THREE.DoubleSide, + }); + + // left + createPlane( + 100, + 100, + 'chocolate', + new THREE.Vector3(-50, 0, 0), + new THREE.Euler(0, -90 * THREE.MathUtils.DEG2RAD, 0), + ); + // right + createPlane(100, 100, 'saddlebrown', new THREE.Vector3(0, 0, 50), new THREE.Euler(0, 0, 0)); + // top + createPlane( + 100, + 100, + 'yellowgreen', + new THREE.Vector3(0, 50, 0), + new THREE.Euler(-90 * THREE.MathUtils.DEG2RAD, 0, 0), + ); + // bottom + createPlane( + 300, + 300, + 'seagreen', + new THREE.Vector3(0, -50, 0), + new THREE.Euler(-90 * THREE.MathUtils.DEG2RAD, 0, 0), + ); + + // + + renderer = new THREE.WebGLRenderer(); + renderer.setPixelRatio(window.devicePixelRatio); + renderer.setSize(window.innerWidth, window.innerHeight); + document.body.appendChild(renderer.domElement); + + renderer2 = new CSS3DRenderer(); + renderer2.setSize(window.innerWidth, window.innerHeight); + renderer2.domElement.style.position = 'absolute'; + renderer2.domElement.style.top = 0; + document.body.appendChild(renderer2.domElement); + + const controls = new OrbitControls(camera, renderer2.domElement); + controls.minZoom = 0.5; + controls.maxZoom = 2; + + function createPlane(width, height, cssColor, pos, rot) { + const element = document.createElement('div'); + element.style.width = width + 'px'; + element.style.height = height + 'px'; + element.style.opacity = 0.75; + element.style.background = cssColor; + + const object = new CSS3DObject(element); + object.position.copy(pos); + object.rotation.copy(rot); + scene2.add(object); + + const geometry = new THREE.PlaneGeometry(width, height); + const mesh = new THREE.Mesh(geometry, material); + mesh.position.copy(object.position); + mesh.rotation.copy(object.rotation); + scene.add(mesh); + } + + window.addEventListener('resize', onWindowResize); + createPanel(); } function onWindowResize() { - const aspect = window.innerWidth / window.innerHeight; + const aspect = window.innerWidth / window.innerHeight; - camera.left = (-frustumSize * aspect) / 2; - camera.right = (frustumSize * aspect) / 2; - camera.top = frustumSize / 2; - camera.bottom = -frustumSize / 2; + camera.left = (-frustumSize * aspect) / 2; + camera.right = (frustumSize * aspect) / 2; + camera.top = frustumSize / 2; + camera.bottom = -frustumSize / 2; - camera.updateProjectionMatrix(); + camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); + renderer.setSize(window.innerWidth, window.innerHeight); - renderer2.setSize(window.innerWidth, window.innerHeight); + renderer2.setSize(window.innerWidth, window.innerHeight); } function animate() { - requestAnimationFrame(animate); + requestAnimationFrame(animate); - renderer.render(scene, camera); - renderer2.render(scene2, camera); + renderer.render(scene, camera); + renderer2.render(scene2, camera); } function createPanel() { - const panel = new GUI(); - const folder1 = panel.addFolder("camera setViewOffset").close(); - - const settings = { - setViewOffset() { - folder1.children[1].enable().setValue(window.innerWidth); - folder1.children[2].enable().setValue(window.innerHeight); - folder1.children[3].enable().setValue(0); - folder1.children[4].enable().setValue(0); - folder1.children[5].enable().setValue(window.innerWidth); - folder1.children[6].enable().setValue(window.innerHeight); - }, - fullWidth: 0, - fullHeight: 0, - offsetX: 0, - offsetY: 0, - width: 0, - height: 0, - clearViewOffset() { - folder1.children[1].setValue(0).disable(); - folder1.children[2].setValue(0).disable(); - folder1.children[3].setValue(0).disable(); - folder1.children[4].setValue(0).disable(); - folder1.children[5].setValue(0).disable(); - folder1.children[6].setValue(0).disable(); - camera.clearViewOffset(); - }, - }; - - folder1.add(settings, "setViewOffset"); - folder1 - .add( - settings, - "fullWidth", - window.screen.width / 4, - window.screen.width * 2, - 1 - ) - .onChange((val) => updateCameraViewOffset({ fullWidth: val })) - .disable(); - folder1 - .add( - settings, - "fullHeight", - window.screen.height / 4, - window.screen.height * 2, - 1 - ) - .onChange((val) => updateCameraViewOffset({ fullHeight: val })) - .disable(); - folder1 - .add(settings, "offsetX", 0, 256, 1) - .onChange((val) => updateCameraViewOffset({ x: val })) - .disable(); - folder1 - .add(settings, "offsetY", 0, 256, 1) - .onChange((val) => updateCameraViewOffset({ y: val })) - .disable(); - folder1 - .add(settings, "width", window.screen.width / 4, window.screen.width * 2, 1) - .onChange((val) => updateCameraViewOffset({ width: val })) - .disable(); - folder1 - .add( - settings, - "height", - window.screen.height / 4, - window.screen.height * 2, - 1 - ) - .onChange((val) => updateCameraViewOffset({ height: val })) - .disable(); - folder1.add(settings, "clearViewOffset"); + const panel = new GUI(); + const folder1 = panel.addFolder('camera setViewOffset').close(); + + const settings = { + setViewOffset() { + folder1.children[1].enable().setValue(window.innerWidth); + folder1.children[2].enable().setValue(window.innerHeight); + folder1.children[3].enable().setValue(0); + folder1.children[4].enable().setValue(0); + folder1.children[5].enable().setValue(window.innerWidth); + folder1.children[6].enable().setValue(window.innerHeight); + }, + fullWidth: 0, + fullHeight: 0, + offsetX: 0, + offsetY: 0, + width: 0, + height: 0, + clearViewOffset() { + folder1.children[1].setValue(0).disable(); + folder1.children[2].setValue(0).disable(); + folder1.children[3].setValue(0).disable(); + folder1.children[4].setValue(0).disable(); + folder1.children[5].setValue(0).disable(); + folder1.children[6].setValue(0).disable(); + camera.clearViewOffset(); + }, + }; + + folder1.add(settings, 'setViewOffset'); + folder1 + .add(settings, 'fullWidth', window.screen.width / 4, window.screen.width * 2, 1) + .onChange(val => updateCameraViewOffset({ fullWidth: val })) + .disable(); + folder1 + .add(settings, 'fullHeight', window.screen.height / 4, window.screen.height * 2, 1) + .onChange(val => updateCameraViewOffset({ fullHeight: val })) + .disable(); + folder1 + .add(settings, 'offsetX', 0, 256, 1) + .onChange(val => updateCameraViewOffset({ x: val })) + .disable(); + folder1 + .add(settings, 'offsetY', 0, 256, 1) + .onChange(val => updateCameraViewOffset({ y: val })) + .disable(); + folder1 + .add(settings, 'width', window.screen.width / 4, window.screen.width * 2, 1) + .onChange(val => updateCameraViewOffset({ width: val })) + .disable(); + folder1 + .add(settings, 'height', window.screen.height / 4, window.screen.height * 2, 1) + .onChange(val => updateCameraViewOffset({ height: val })) + .disable(); + folder1.add(settings, 'clearViewOffset'); } -function updateCameraViewOffset({ - fullWidth, - fullHeight, - x, - y, - width, - height, -}) { - if (!camera.view) { - camera.setViewOffset( - fullWidth || window.innerWidth, - fullHeight || window.innerHeight, - x || 0, - y || 0, - width || window.innerWidth, - height || window.innerHeight - ); - } else { - camera.setViewOffset( - fullWidth || camera.view.fullWidth, - fullHeight || camera.view.fullHeight, - x || camera.view.offsetX, - y || camera.view.offsetY, - width || camera.view.width, - height || camera.view.height - ); - } +function updateCameraViewOffset({ fullWidth, fullHeight, x, y, width, height }) { + if (!camera.view) { + camera.setViewOffset( + fullWidth || window.innerWidth, + fullHeight || window.innerHeight, + x || 0, + y || 0, + width || window.innerWidth, + height || window.innerHeight, + ); + } else { + camera.setViewOffset( + fullWidth || camera.view.fullWidth, + fullHeight || camera.view.fullHeight, + x || camera.view.offsetX, + y || camera.view.offsetY, + width || camera.view.width, + height || camera.view.height, + ); + } } diff --git a/examples-testing/examples/css3d_periodictable.ts b/examples-testing/examples/css3d_periodictable.ts index 33d3514bb..e3a33f796 100644 --- a/examples-testing/examples/css3d_periodictable.ts +++ b/examples-testing/examples/css3d_periodictable.ts @@ -1,603 +1,600 @@ -import * as THREE from "three"; +import * as THREE from 'three'; -import TWEEN from "three/addons/libs/tween.module.js"; -import { TrackballControls } from "three/addons/controls/TrackballControls.js"; -import { - CSS3DRenderer, - CSS3DObject, -} from "three/addons/renderers/CSS3DRenderer.js"; +import TWEEN from 'three/addons/libs/tween.module.js'; +import { TrackballControls } from 'three/addons/controls/TrackballControls.js'; +import { CSS3DRenderer, CSS3DObject } from 'three/addons/renderers/CSS3DRenderer.js'; const table = [ - "H", - "Hydrogen", - "1.00794", - 1, - 1, - "He", - "Helium", - "4.002602", - 18, - 1, - "Li", - "Lithium", - "6.941", - 1, - 2, - "Be", - "Beryllium", - "9.012182", - 2, - 2, - "B", - "Boron", - "10.811", - 13, - 2, - "C", - "Carbon", - "12.0107", - 14, - 2, - "N", - "Nitrogen", - "14.0067", - 15, - 2, - "O", - "Oxygen", - "15.9994", - 16, - 2, - "F", - "Fluorine", - "18.9984032", - 17, - 2, - "Ne", - "Neon", - "20.1797", - 18, - 2, - "Na", - "Sodium", - "22.98976...", - 1, - 3, - "Mg", - "Magnesium", - "24.305", - 2, - 3, - "Al", - "Aluminium", - "26.9815386", - 13, - 3, - "Si", - "Silicon", - "28.0855", - 14, - 3, - "P", - "Phosphorus", - "30.973762", - 15, - 3, - "S", - "Sulfur", - "32.065", - 16, - 3, - "Cl", - "Chlorine", - "35.453", - 17, - 3, - "Ar", - "Argon", - "39.948", - 18, - 3, - "K", - "Potassium", - "39.948", - 1, - 4, - "Ca", - "Calcium", - "40.078", - 2, - 4, - "Sc", - "Scandium", - "44.955912", - 3, - 4, - "Ti", - "Titanium", - "47.867", - 4, - 4, - "V", - "Vanadium", - "50.9415", - 5, - 4, - "Cr", - "Chromium", - "51.9961", - 6, - 4, - "Mn", - "Manganese", - "54.938045", - 7, - 4, - "Fe", - "Iron", - "55.845", - 8, - 4, - "Co", - "Cobalt", - "58.933195", - 9, - 4, - "Ni", - "Nickel", - "58.6934", - 10, - 4, - "Cu", - "Copper", - "63.546", - 11, - 4, - "Zn", - "Zinc", - "65.38", - 12, - 4, - "Ga", - "Gallium", - "69.723", - 13, - 4, - "Ge", - "Germanium", - "72.63", - 14, - 4, - "As", - "Arsenic", - "74.9216", - 15, - 4, - "Se", - "Selenium", - "78.96", - 16, - 4, - "Br", - "Bromine", - "79.904", - 17, - 4, - "Kr", - "Krypton", - "83.798", - 18, - 4, - "Rb", - "Rubidium", - "85.4678", - 1, - 5, - "Sr", - "Strontium", - "87.62", - 2, - 5, - "Y", - "Yttrium", - "88.90585", - 3, - 5, - "Zr", - "Zirconium", - "91.224", - 4, - 5, - "Nb", - "Niobium", - "92.90628", - 5, - 5, - "Mo", - "Molybdenum", - "95.96", - 6, - 5, - "Tc", - "Technetium", - "(98)", - 7, - 5, - "Ru", - "Ruthenium", - "101.07", - 8, - 5, - "Rh", - "Rhodium", - "102.9055", - 9, - 5, - "Pd", - "Palladium", - "106.42", - 10, - 5, - "Ag", - "Silver", - "107.8682", - 11, - 5, - "Cd", - "Cadmium", - "112.411", - 12, - 5, - "In", - "Indium", - "114.818", - 13, - 5, - "Sn", - "Tin", - "118.71", - 14, - 5, - "Sb", - "Antimony", - "121.76", - 15, - 5, - "Te", - "Tellurium", - "127.6", - 16, - 5, - "I", - "Iodine", - "126.90447", - 17, - 5, - "Xe", - "Xenon", - "131.293", - 18, - 5, - "Cs", - "Caesium", - "132.9054", - 1, - 6, - "Ba", - "Barium", - "132.9054", - 2, - 6, - "La", - "Lanthanum", - "138.90547", - 4, - 9, - "Ce", - "Cerium", - "140.116", - 5, - 9, - "Pr", - "Praseodymium", - "140.90765", - 6, - 9, - "Nd", - "Neodymium", - "144.242", - 7, - 9, - "Pm", - "Promethium", - "(145)", - 8, - 9, - "Sm", - "Samarium", - "150.36", - 9, - 9, - "Eu", - "Europium", - "151.964", - 10, - 9, - "Gd", - "Gadolinium", - "157.25", - 11, - 9, - "Tb", - "Terbium", - "158.92535", - 12, - 9, - "Dy", - "Dysprosium", - "162.5", - 13, - 9, - "Ho", - "Holmium", - "164.93032", - 14, - 9, - "Er", - "Erbium", - "167.259", - 15, - 9, - "Tm", - "Thulium", - "168.93421", - 16, - 9, - "Yb", - "Ytterbium", - "173.054", - 17, - 9, - "Lu", - "Lutetium", - "174.9668", - 18, - 9, - "Hf", - "Hafnium", - "178.49", - 4, - 6, - "Ta", - "Tantalum", - "180.94788", - 5, - 6, - "W", - "Tungsten", - "183.84", - 6, - 6, - "Re", - "Rhenium", - "186.207", - 7, - 6, - "Os", - "Osmium", - "190.23", - 8, - 6, - "Ir", - "Iridium", - "192.217", - 9, - 6, - "Pt", - "Platinum", - "195.084", - 10, - 6, - "Au", - "Gold", - "196.966569", - 11, - 6, - "Hg", - "Mercury", - "200.59", - 12, - 6, - "Tl", - "Thallium", - "204.3833", - 13, - 6, - "Pb", - "Lead", - "207.2", - 14, - 6, - "Bi", - "Bismuth", - "208.9804", - 15, - 6, - "Po", - "Polonium", - "(209)", - 16, - 6, - "At", - "Astatine", - "(210)", - 17, - 6, - "Rn", - "Radon", - "(222)", - 18, - 6, - "Fr", - "Francium", - "(223)", - 1, - 7, - "Ra", - "Radium", - "(226)", - 2, - 7, - "Ac", - "Actinium", - "(227)", - 4, - 10, - "Th", - "Thorium", - "232.03806", - 5, - 10, - "Pa", - "Protactinium", - "231.0588", - 6, - 10, - "U", - "Uranium", - "238.02891", - 7, - 10, - "Np", - "Neptunium", - "(237)", - 8, - 10, - "Pu", - "Plutonium", - "(244)", - 9, - 10, - "Am", - "Americium", - "(243)", - 10, - 10, - "Cm", - "Curium", - "(247)", - 11, - 10, - "Bk", - "Berkelium", - "(247)", - 12, - 10, - "Cf", - "Californium", - "(251)", - 13, - 10, - "Es", - "Einstenium", - "(252)", - 14, - 10, - "Fm", - "Fermium", - "(257)", - 15, - 10, - "Md", - "Mendelevium", - "(258)", - 16, - 10, - "No", - "Nobelium", - "(259)", - 17, - 10, - "Lr", - "Lawrencium", - "(262)", - 18, - 10, - "Rf", - "Rutherfordium", - "(267)", - 4, - 7, - "Db", - "Dubnium", - "(268)", - 5, - 7, - "Sg", - "Seaborgium", - "(271)", - 6, - 7, - "Bh", - "Bohrium", - "(272)", - 7, - 7, - "Hs", - "Hassium", - "(270)", - 8, - 7, - "Mt", - "Meitnerium", - "(276)", - 9, - 7, - "Ds", - "Darmstadium", - "(281)", - 10, - 7, - "Rg", - "Roentgenium", - "(280)", - 11, - 7, - "Cn", - "Copernicium", - "(285)", - 12, - 7, - "Nh", - "Nihonium", - "(286)", - 13, - 7, - "Fl", - "Flerovium", - "(289)", - 14, - 7, - "Mc", - "Moscovium", - "(290)", - 15, - 7, - "Lv", - "Livermorium", - "(293)", - 16, - 7, - "Ts", - "Tennessine", - "(294)", - 17, - 7, - "Og", - "Oganesson", - "(294)", - 18, - 7, + 'H', + 'Hydrogen', + '1.00794', + 1, + 1, + 'He', + 'Helium', + '4.002602', + 18, + 1, + 'Li', + 'Lithium', + '6.941', + 1, + 2, + 'Be', + 'Beryllium', + '9.012182', + 2, + 2, + 'B', + 'Boron', + '10.811', + 13, + 2, + 'C', + 'Carbon', + '12.0107', + 14, + 2, + 'N', + 'Nitrogen', + '14.0067', + 15, + 2, + 'O', + 'Oxygen', + '15.9994', + 16, + 2, + 'F', + 'Fluorine', + '18.9984032', + 17, + 2, + 'Ne', + 'Neon', + '20.1797', + 18, + 2, + 'Na', + 'Sodium', + '22.98976...', + 1, + 3, + 'Mg', + 'Magnesium', + '24.305', + 2, + 3, + 'Al', + 'Aluminium', + '26.9815386', + 13, + 3, + 'Si', + 'Silicon', + '28.0855', + 14, + 3, + 'P', + 'Phosphorus', + '30.973762', + 15, + 3, + 'S', + 'Sulfur', + '32.065', + 16, + 3, + 'Cl', + 'Chlorine', + '35.453', + 17, + 3, + 'Ar', + 'Argon', + '39.948', + 18, + 3, + 'K', + 'Potassium', + '39.948', + 1, + 4, + 'Ca', + 'Calcium', + '40.078', + 2, + 4, + 'Sc', + 'Scandium', + '44.955912', + 3, + 4, + 'Ti', + 'Titanium', + '47.867', + 4, + 4, + 'V', + 'Vanadium', + '50.9415', + 5, + 4, + 'Cr', + 'Chromium', + '51.9961', + 6, + 4, + 'Mn', + 'Manganese', + '54.938045', + 7, + 4, + 'Fe', + 'Iron', + '55.845', + 8, + 4, + 'Co', + 'Cobalt', + '58.933195', + 9, + 4, + 'Ni', + 'Nickel', + '58.6934', + 10, + 4, + 'Cu', + 'Copper', + '63.546', + 11, + 4, + 'Zn', + 'Zinc', + '65.38', + 12, + 4, + 'Ga', + 'Gallium', + '69.723', + 13, + 4, + 'Ge', + 'Germanium', + '72.63', + 14, + 4, + 'As', + 'Arsenic', + '74.9216', + 15, + 4, + 'Se', + 'Selenium', + '78.96', + 16, + 4, + 'Br', + 'Bromine', + '79.904', + 17, + 4, + 'Kr', + 'Krypton', + '83.798', + 18, + 4, + 'Rb', + 'Rubidium', + '85.4678', + 1, + 5, + 'Sr', + 'Strontium', + '87.62', + 2, + 5, + 'Y', + 'Yttrium', + '88.90585', + 3, + 5, + 'Zr', + 'Zirconium', + '91.224', + 4, + 5, + 'Nb', + 'Niobium', + '92.90628', + 5, + 5, + 'Mo', + 'Molybdenum', + '95.96', + 6, + 5, + 'Tc', + 'Technetium', + '(98)', + 7, + 5, + 'Ru', + 'Ruthenium', + '101.07', + 8, + 5, + 'Rh', + 'Rhodium', + '102.9055', + 9, + 5, + 'Pd', + 'Palladium', + '106.42', + 10, + 5, + 'Ag', + 'Silver', + '107.8682', + 11, + 5, + 'Cd', + 'Cadmium', + '112.411', + 12, + 5, + 'In', + 'Indium', + '114.818', + 13, + 5, + 'Sn', + 'Tin', + '118.71', + 14, + 5, + 'Sb', + 'Antimony', + '121.76', + 15, + 5, + 'Te', + 'Tellurium', + '127.6', + 16, + 5, + 'I', + 'Iodine', + '126.90447', + 17, + 5, + 'Xe', + 'Xenon', + '131.293', + 18, + 5, + 'Cs', + 'Caesium', + '132.9054', + 1, + 6, + 'Ba', + 'Barium', + '132.9054', + 2, + 6, + 'La', + 'Lanthanum', + '138.90547', + 4, + 9, + 'Ce', + 'Cerium', + '140.116', + 5, + 9, + 'Pr', + 'Praseodymium', + '140.90765', + 6, + 9, + 'Nd', + 'Neodymium', + '144.242', + 7, + 9, + 'Pm', + 'Promethium', + '(145)', + 8, + 9, + 'Sm', + 'Samarium', + '150.36', + 9, + 9, + 'Eu', + 'Europium', + '151.964', + 10, + 9, + 'Gd', + 'Gadolinium', + '157.25', + 11, + 9, + 'Tb', + 'Terbium', + '158.92535', + 12, + 9, + 'Dy', + 'Dysprosium', + '162.5', + 13, + 9, + 'Ho', + 'Holmium', + '164.93032', + 14, + 9, + 'Er', + 'Erbium', + '167.259', + 15, + 9, + 'Tm', + 'Thulium', + '168.93421', + 16, + 9, + 'Yb', + 'Ytterbium', + '173.054', + 17, + 9, + 'Lu', + 'Lutetium', + '174.9668', + 18, + 9, + 'Hf', + 'Hafnium', + '178.49', + 4, + 6, + 'Ta', + 'Tantalum', + '180.94788', + 5, + 6, + 'W', + 'Tungsten', + '183.84', + 6, + 6, + 'Re', + 'Rhenium', + '186.207', + 7, + 6, + 'Os', + 'Osmium', + '190.23', + 8, + 6, + 'Ir', + 'Iridium', + '192.217', + 9, + 6, + 'Pt', + 'Platinum', + '195.084', + 10, + 6, + 'Au', + 'Gold', + '196.966569', + 11, + 6, + 'Hg', + 'Mercury', + '200.59', + 12, + 6, + 'Tl', + 'Thallium', + '204.3833', + 13, + 6, + 'Pb', + 'Lead', + '207.2', + 14, + 6, + 'Bi', + 'Bismuth', + '208.9804', + 15, + 6, + 'Po', + 'Polonium', + '(209)', + 16, + 6, + 'At', + 'Astatine', + '(210)', + 17, + 6, + 'Rn', + 'Radon', + '(222)', + 18, + 6, + 'Fr', + 'Francium', + '(223)', + 1, + 7, + 'Ra', + 'Radium', + '(226)', + 2, + 7, + 'Ac', + 'Actinium', + '(227)', + 4, + 10, + 'Th', + 'Thorium', + '232.03806', + 5, + 10, + 'Pa', + 'Protactinium', + '231.0588', + 6, + 10, + 'U', + 'Uranium', + '238.02891', + 7, + 10, + 'Np', + 'Neptunium', + '(237)', + 8, + 10, + 'Pu', + 'Plutonium', + '(244)', + 9, + 10, + 'Am', + 'Americium', + '(243)', + 10, + 10, + 'Cm', + 'Curium', + '(247)', + 11, + 10, + 'Bk', + 'Berkelium', + '(247)', + 12, + 10, + 'Cf', + 'Californium', + '(251)', + 13, + 10, + 'Es', + 'Einstenium', + '(252)', + 14, + 10, + 'Fm', + 'Fermium', + '(257)', + 15, + 10, + 'Md', + 'Mendelevium', + '(258)', + 16, + 10, + 'No', + 'Nobelium', + '(259)', + 17, + 10, + 'Lr', + 'Lawrencium', + '(262)', + 18, + 10, + 'Rf', + 'Rutherfordium', + '(267)', + 4, + 7, + 'Db', + 'Dubnium', + '(268)', + 5, + 7, + 'Sg', + 'Seaborgium', + '(271)', + 6, + 7, + 'Bh', + 'Bohrium', + '(272)', + 7, + 7, + 'Hs', + 'Hassium', + '(270)', + 8, + 7, + 'Mt', + 'Meitnerium', + '(276)', + 9, + 7, + 'Ds', + 'Darmstadium', + '(281)', + 10, + 7, + 'Rg', + 'Roentgenium', + '(280)', + 11, + 7, + 'Cn', + 'Copernicium', + '(285)', + 12, + 7, + 'Nh', + 'Nihonium', + '(286)', + 13, + 7, + 'Fl', + 'Flerovium', + '(289)', + 14, + 7, + 'Mc', + 'Moscovium', + '(290)', + 15, + 7, + 'Lv', + 'Livermorium', + '(293)', + 16, + 7, + 'Ts', + 'Tennessine', + '(294)', + 17, + 7, + 'Og', + 'Oganesson', + '(294)', + 18, + 7, ]; let camera, scene, renderer; @@ -610,193 +607,187 @@ init(); animate(); function init() { - camera = new THREE.PerspectiveCamera( - 40, - window.innerWidth / window.innerHeight, - 1, - 10000 - ); - camera.position.z = 3000; + camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000); + camera.position.z = 3000; - scene = new THREE.Scene(); + scene = new THREE.Scene(); - // table + // table - for (let i = 0; i < table.length; i += 5) { - const element = document.createElement("div"); - element.className = "element"; - element.style.backgroundColor = - "rgba(0,127,127," + (Math.random() * 0.5 + 0.25) + ")"; + for (let i = 0; i < table.length; i += 5) { + const element = document.createElement('div'); + element.className = 'element'; + element.style.backgroundColor = 'rgba(0,127,127,' + (Math.random() * 0.5 + 0.25) + ')'; - const number = document.createElement("div"); - number.className = "number"; - number.textContent = i / 5 + 1; - element.appendChild(number); + const number = document.createElement('div'); + number.className = 'number'; + number.textContent = i / 5 + 1; + element.appendChild(number); - const symbol = document.createElement("div"); - symbol.className = "symbol"; - symbol.textContent = table[i]; - element.appendChild(symbol); + const symbol = document.createElement('div'); + symbol.className = 'symbol'; + symbol.textContent = table[i]; + element.appendChild(symbol); - const details = document.createElement("div"); - details.className = "details"; - details.innerHTML = table[i + 1] + "
" + table[i + 2]; - element.appendChild(details); + const details = document.createElement('div'); + details.className = 'details'; + details.innerHTML = table[i + 1] + '
' + table[i + 2]; + element.appendChild(details); - const objectCSS = new CSS3DObject(element); - objectCSS.position.x = Math.random() * 4000 - 2000; - objectCSS.position.y = Math.random() * 4000 - 2000; - objectCSS.position.z = Math.random() * 4000 - 2000; - scene.add(objectCSS); + const objectCSS = new CSS3DObject(element); + objectCSS.position.x = Math.random() * 4000 - 2000; + objectCSS.position.y = Math.random() * 4000 - 2000; + objectCSS.position.z = Math.random() * 4000 - 2000; + scene.add(objectCSS); - objects.push(objectCSS); + objects.push(objectCSS); - // + // - const object = new THREE.Object3D(); - object.position.x = table[i + 3] * 140 - 1330; - object.position.y = -(table[i + 4] * 180) + 990; + const object = new THREE.Object3D(); + object.position.x = table[i + 3] * 140 - 1330; + object.position.y = -(table[i + 4] * 180) + 990; - targets.table.push(object); - } + targets.table.push(object); + } - // sphere + // sphere - const vector = new THREE.Vector3(); + const vector = new THREE.Vector3(); - for (let i = 0, l = objects.length; i < l; i++) { - const phi = Math.acos(-1 + (2 * i) / l); - const theta = Math.sqrt(l * Math.PI) * phi; + for (let i = 0, l = objects.length; i < l; i++) { + const phi = Math.acos(-1 + (2 * i) / l); + const theta = Math.sqrt(l * Math.PI) * phi; - const object = new THREE.Object3D(); + const object = new THREE.Object3D(); - object.position.setFromSphericalCoords(800, phi, theta); + object.position.setFromSphericalCoords(800, phi, theta); - vector.copy(object.position).multiplyScalar(2); + vector.copy(object.position).multiplyScalar(2); - object.lookAt(vector); + object.lookAt(vector); - targets.sphere.push(object); - } + targets.sphere.push(object); + } - // helix + // helix - for (let i = 0, l = objects.length; i < l; i++) { - const theta = i * 0.175 + Math.PI; - const y = -(i * 8) + 450; + for (let i = 0, l = objects.length; i < l; i++) { + const theta = i * 0.175 + Math.PI; + const y = -(i * 8) + 450; - const object = new THREE.Object3D(); + const object = new THREE.Object3D(); - object.position.setFromCylindricalCoords(900, theta, y); + object.position.setFromCylindricalCoords(900, theta, y); - vector.x = object.position.x * 2; - vector.y = object.position.y; - vector.z = object.position.z * 2; + vector.x = object.position.x * 2; + vector.y = object.position.y; + vector.z = object.position.z * 2; - object.lookAt(vector); + object.lookAt(vector); - targets.helix.push(object); - } + targets.helix.push(object); + } - // grid + // grid - for (let i = 0; i < objects.length; i++) { - const object = new THREE.Object3D(); + for (let i = 0; i < objects.length; i++) { + const object = new THREE.Object3D(); - object.position.x = (i % 5) * 400 - 800; - object.position.y = -(Math.floor(i / 5) % 5) * 400 + 800; - object.position.z = Math.floor(i / 25) * 1000 - 2000; + object.position.x = (i % 5) * 400 - 800; + object.position.y = -(Math.floor(i / 5) % 5) * 400 + 800; + object.position.z = Math.floor(i / 25) * 1000 - 2000; - targets.grid.push(object); - } + targets.grid.push(object); + } - // + // - renderer = new CSS3DRenderer(); - renderer.setSize(window.innerWidth, window.innerHeight); - document.getElementById("container").appendChild(renderer.domElement); + renderer = new CSS3DRenderer(); + renderer.setSize(window.innerWidth, window.innerHeight); + document.getElementById('container').appendChild(renderer.domElement); - // + // - controls = new TrackballControls(camera, renderer.domElement); - controls.minDistance = 500; - controls.maxDistance = 6000; - controls.addEventListener("change", render); + controls = new TrackballControls(camera, renderer.domElement); + controls.minDistance = 500; + controls.maxDistance = 6000; + controls.addEventListener('change', render); - const buttonTable = document.getElementById("table"); - buttonTable.addEventListener("click", function () { - transform(targets.table, 2000); - }); + const buttonTable = document.getElementById('table'); + buttonTable.addEventListener('click', function () { + transform(targets.table, 2000); + }); - const buttonSphere = document.getElementById("sphere"); - buttonSphere.addEventListener("click", function () { - transform(targets.sphere, 2000); - }); + const buttonSphere = document.getElementById('sphere'); + buttonSphere.addEventListener('click', function () { + transform(targets.sphere, 2000); + }); - const buttonHelix = document.getElementById("helix"); - buttonHelix.addEventListener("click", function () { - transform(targets.helix, 2000); - }); + const buttonHelix = document.getElementById('helix'); + buttonHelix.addEventListener('click', function () { + transform(targets.helix, 2000); + }); - const buttonGrid = document.getElementById("grid"); - buttonGrid.addEventListener("click", function () { - transform(targets.grid, 2000); - }); + const buttonGrid = document.getElementById('grid'); + buttonGrid.addEventListener('click', function () { + transform(targets.grid, 2000); + }); - transform(targets.table, 2000); + transform(targets.table, 2000); - // + // - window.addEventListener("resize", onWindowResize); + window.addEventListener('resize', onWindowResize); } function transform(targets, duration) { - TWEEN.removeAll(); - - for (let i = 0; i < objects.length; i++) { - const object = objects[i]; - const target = targets[i]; - - new TWEEN.Tween(object.position) - .to( - { x: target.position.x, y: target.position.y, z: target.position.z }, - Math.random() * duration + duration - ) - .easing(TWEEN.Easing.Exponential.InOut) - .start(); - - new TWEEN.Tween(object.rotation) - .to( - { x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, - Math.random() * duration + duration - ) - .easing(TWEEN.Easing.Exponential.InOut) - .start(); - } - - new TWEEN.Tween(this) - .to({}, duration * 2) - .onUpdate(render) - .start(); + TWEEN.removeAll(); + + for (let i = 0; i < objects.length; i++) { + const object = objects[i]; + const target = targets[i]; + + new TWEEN.Tween(object.position) + .to( + { x: target.position.x, y: target.position.y, z: target.position.z }, + Math.random() * duration + duration, + ) + .easing(TWEEN.Easing.Exponential.InOut) + .start(); + + new TWEEN.Tween(object.rotation) + .to( + { x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, + Math.random() * duration + duration, + ) + .easing(TWEEN.Easing.Exponential.InOut) + .start(); + } + + new TWEEN.Tween(this) + .to({}, duration * 2) + .onUpdate(render) + .start(); } function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); + renderer.setSize(window.innerWidth, window.innerHeight); - render(); + render(); } function animate() { - requestAnimationFrame(animate); + requestAnimationFrame(animate); - TWEEN.update(); + TWEEN.update(); - controls.update(); + controls.update(); } function render() { - renderer.render(scene, camera); + renderer.render(scene, camera); } diff --git a/examples-testing/examples/css3d_sandbox.ts b/examples-testing/examples/css3d_sandbox.ts index dd2c5229c..1088b84b1 100644 --- a/examples-testing/examples/css3d_sandbox.ts +++ b/examples-testing/examples/css3d_sandbox.ts @@ -1,11 +1,8 @@ -import * as THREE from "three"; +import * as THREE from 'three'; -import { TrackballControls } from "three/addons/controls/TrackballControls.js"; -import { - CSS3DRenderer, - CSS3DObject, -} from "three/addons/renderers/CSS3DRenderer.js"; -import { GUI } from "three/addons/libs/lil-gui.module.min.js"; +import { TrackballControls } from 'three/addons/controls/TrackballControls.js'; +import { CSS3DRenderer, CSS3DObject } from 'three/addons/renderers/CSS3DRenderer.js'; +import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; let camera, scene, renderer; @@ -17,199 +14,167 @@ init(); animate(); function init() { - camera = new THREE.PerspectiveCamera( - 45, - window.innerWidth / window.innerHeight, - 1, - 1000 - ); - camera.position.set(200, 200, 200); - - scene = new THREE.Scene(); - scene.background = new THREE.Color(0xf0f0f0); - - scene2 = new THREE.Scene(); - - const material = new THREE.MeshBasicMaterial({ - color: 0x000000, - wireframe: true, - wireframeLinewidth: 1, - side: THREE.DoubleSide, - }); - - // - - for (let i = 0; i < 10; i++) { - const element = document.createElement("div"); - element.style.width = "100px"; - element.style.height = "100px"; - element.style.opacity = i < 5 ? 0.5 : 1; - element.style.background = new THREE.Color( - Math.random() * 0xffffff - ).getStyle(); - - const object = new CSS3DObject(element); - object.position.x = Math.random() * 200 - 100; - object.position.y = Math.random() * 200 - 100; - object.position.z = Math.random() * 200 - 100; - object.rotation.x = Math.random(); - object.rotation.y = Math.random(); - object.rotation.z = Math.random(); - object.scale.x = Math.random() + 0.5; - object.scale.y = Math.random() + 0.5; - scene2.add(object); - - const geometry = new THREE.PlaneGeometry(100, 100); - const mesh = new THREE.Mesh(geometry, material); - mesh.position.copy(object.position); - mesh.rotation.copy(object.rotation); - mesh.scale.copy(object.scale); - scene.add(mesh); - } - - // - - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - document.body.appendChild(renderer.domElement); - - renderer2 = new CSS3DRenderer(); - renderer2.setSize(window.innerWidth, window.innerHeight); - renderer2.domElement.style.position = "absolute"; - renderer2.domElement.style.top = 0; - document.body.appendChild(renderer2.domElement); - - controls = new TrackballControls(camera, renderer2.domElement); - - window.addEventListener("resize", onWindowResize); - createPanel(); + camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000); + camera.position.set(200, 200, 200); + + scene = new THREE.Scene(); + scene.background = new THREE.Color(0xf0f0f0); + + scene2 = new THREE.Scene(); + + const material = new THREE.MeshBasicMaterial({ + color: 0x000000, + wireframe: true, + wireframeLinewidth: 1, + side: THREE.DoubleSide, + }); + + // + + for (let i = 0; i < 10; i++) { + const element = document.createElement('div'); + element.style.width = '100px'; + element.style.height = '100px'; + element.style.opacity = i < 5 ? 0.5 : 1; + element.style.background = new THREE.Color(Math.random() * 0xffffff).getStyle(); + + const object = new CSS3DObject(element); + object.position.x = Math.random() * 200 - 100; + object.position.y = Math.random() * 200 - 100; + object.position.z = Math.random() * 200 - 100; + object.rotation.x = Math.random(); + object.rotation.y = Math.random(); + object.rotation.z = Math.random(); + object.scale.x = Math.random() + 0.5; + object.scale.y = Math.random() + 0.5; + scene2.add(object); + + const geometry = new THREE.PlaneGeometry(100, 100); + const mesh = new THREE.Mesh(geometry, material); + mesh.position.copy(object.position); + mesh.rotation.copy(object.rotation); + mesh.scale.copy(object.scale); + scene.add(mesh); + } + + // + + renderer = new THREE.WebGLRenderer({ antialias: true }); + renderer.setPixelRatio(window.devicePixelRatio); + renderer.setSize(window.innerWidth, window.innerHeight); + document.body.appendChild(renderer.domElement); + + renderer2 = new CSS3DRenderer(); + renderer2.setSize(window.innerWidth, window.innerHeight); + renderer2.domElement.style.position = 'absolute'; + renderer2.domElement.style.top = 0; + document.body.appendChild(renderer2.domElement); + + controls = new TrackballControls(camera, renderer2.domElement); + + window.addEventListener('resize', onWindowResize); + createPanel(); } function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; + camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); + camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); + renderer.setSize(window.innerWidth, window.innerHeight); - renderer2.setSize(window.innerWidth, window.innerHeight); + renderer2.setSize(window.innerWidth, window.innerHeight); } function animate() { - requestAnimationFrame(animate); + requestAnimationFrame(animate); - controls.update(); + controls.update(); - renderer.render(scene, camera); - renderer2.render(scene2, camera); + renderer.render(scene, camera); + renderer2.render(scene2, camera); } function createPanel() { - const panel = new GUI(); - const folder1 = panel.addFolder("camera setViewOffset").close(); - - const settings = { - setViewOffset() { - folder1.children[1].enable().setValue(window.innerWidth); - folder1.children[2].enable().setValue(window.innerHeight); - folder1.children[3].enable().setValue(0); - folder1.children[4].enable().setValue(0); - folder1.children[5].enable().setValue(window.innerWidth); - folder1.children[6].enable().setValue(window.innerHeight); - }, - fullWidth: 0, - fullHeight: 0, - offsetX: 0, - offsetY: 0, - width: 0, - height: 0, - clearViewOffset() { - folder1.children[1].setValue(0).disable(); - folder1.children[2].setValue(0).disable(); - folder1.children[3].setValue(0).disable(); - folder1.children[4].setValue(0).disable(); - folder1.children[5].setValue(0).disable(); - folder1.children[6].setValue(0).disable(); - camera.clearViewOffset(); - }, - }; - - folder1.add(settings, "setViewOffset"); - folder1 - .add( - settings, - "fullWidth", - window.screen.width / 4, - window.screen.width * 2, - 1 - ) - .onChange((val) => updateCameraViewOffset({ fullWidth: val })) - .disable(); - folder1 - .add( - settings, - "fullHeight", - window.screen.height / 4, - window.screen.height * 2, - 1 - ) - .onChange((val) => updateCameraViewOffset({ fullHeight: val })) - .disable(); - folder1 - .add(settings, "offsetX", 0, 256, 1) - .onChange((val) => updateCameraViewOffset({ x: val })) - .disable(); - folder1 - .add(settings, "offsetY", 0, 256, 1) - .onChange((val) => updateCameraViewOffset({ y: val })) - .disable(); - folder1 - .add(settings, "width", window.screen.width / 4, window.screen.width * 2, 1) - .onChange((val) => updateCameraViewOffset({ width: val })) - .disable(); - folder1 - .add( - settings, - "height", - window.screen.height / 4, - window.screen.height * 2, - 1 - ) - .onChange((val) => updateCameraViewOffset({ height: val })) - .disable(); - folder1.add(settings, "clearViewOffset"); + const panel = new GUI(); + const folder1 = panel.addFolder('camera setViewOffset').close(); + + const settings = { + setViewOffset() { + folder1.children[1].enable().setValue(window.innerWidth); + folder1.children[2].enable().setValue(window.innerHeight); + folder1.children[3].enable().setValue(0); + folder1.children[4].enable().setValue(0); + folder1.children[5].enable().setValue(window.innerWidth); + folder1.children[6].enable().setValue(window.innerHeight); + }, + fullWidth: 0, + fullHeight: 0, + offsetX: 0, + offsetY: 0, + width: 0, + height: 0, + clearViewOffset() { + folder1.children[1].setValue(0).disable(); + folder1.children[2].setValue(0).disable(); + folder1.children[3].setValue(0).disable(); + folder1.children[4].setValue(0).disable(); + folder1.children[5].setValue(0).disable(); + folder1.children[6].setValue(0).disable(); + camera.clearViewOffset(); + }, + }; + + folder1.add(settings, 'setViewOffset'); + folder1 + .add(settings, 'fullWidth', window.screen.width / 4, window.screen.width * 2, 1) + .onChange(val => updateCameraViewOffset({ fullWidth: val })) + .disable(); + folder1 + .add(settings, 'fullHeight', window.screen.height / 4, window.screen.height * 2, 1) + .onChange(val => updateCameraViewOffset({ fullHeight: val })) + .disable(); + folder1 + .add(settings, 'offsetX', 0, 256, 1) + .onChange(val => updateCameraViewOffset({ x: val })) + .disable(); + folder1 + .add(settings, 'offsetY', 0, 256, 1) + .onChange(val => updateCameraViewOffset({ y: val })) + .disable(); + folder1 + .add(settings, 'width', window.screen.width / 4, window.screen.width * 2, 1) + .onChange(val => updateCameraViewOffset({ width: val })) + .disable(); + folder1 + .add(settings, 'height', window.screen.height / 4, window.screen.height * 2, 1) + .onChange(val => updateCameraViewOffset({ height: val })) + .disable(); + folder1.add(settings, 'clearViewOffset'); } -function updateCameraViewOffset({ - fullWidth, - fullHeight, - x, - y, - width, - height, -}) { - if (!camera.view) { - camera.setViewOffset( - fullWidth || window.innerWidth, - fullHeight || window.innerHeight, - x || 0, - y || 0, - width || window.innerWidth, - height || window.innerHeight - ); - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); - } else { - camera.setViewOffset( - fullWidth || camera.view.fullWidth, - fullHeight || camera.view.fullHeight, - x || camera.view.offsetX, - y || camera.view.offsetY, - width || camera.view.width, - height || camera.view.height - ); - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); - } +function updateCameraViewOffset({ fullWidth, fullHeight, x, y, width, height }) { + if (!camera.view) { + camera.setViewOffset( + fullWidth || window.innerWidth, + fullHeight || window.innerHeight, + x || 0, + y || 0, + width || window.innerWidth, + height || window.innerHeight, + ); + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); + } else { + camera.setViewOffset( + fullWidth || camera.view.fullWidth, + fullHeight || camera.view.fullHeight, + x || camera.view.offsetX, + y || camera.view.offsetY, + width || camera.view.width, + height || camera.view.height, + ); + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); + } } diff --git a/examples-testing/examples/css3d_sprites.ts b/examples-testing/examples/css3d_sprites.ts index ce6d23842..dfe24e79d 100644 --- a/examples-testing/examples/css3d_sprites.ts +++ b/examples-testing/examples/css3d_sprites.ts @@ -1,11 +1,8 @@ -import * as THREE from "three"; +import * as THREE from 'three'; -import TWEEN from "three/addons/libs/tween.module.js"; -import { TrackballControls } from "three/addons/controls/TrackballControls.js"; -import { - CSS3DRenderer, - CSS3DSprite, -} from "three/addons/renderers/CSS3DRenderer.js"; +import TWEEN from 'three/addons/libs/tween.module.js'; +import { TrackballControls } from 'three/addons/controls/TrackballControls.js'; +import { CSS3DRenderer, CSS3DSprite } from 'three/addons/renderers/CSS3DRenderer.js'; let camera, scene, renderer; let controls; @@ -19,152 +16,142 @@ init(); animate(); function init() { - camera = new THREE.PerspectiveCamera( - 75, - window.innerWidth / window.innerHeight, - 1, - 5000 - ); - camera.position.set(600, 400, 1500); - camera.lookAt(0, 0, 0); - - scene = new THREE.Scene(); - - const image = document.createElement("img"); - image.addEventListener("load", function () { - for (let i = 0; i < particlesTotal; i++) { - const object = new CSS3DSprite(image.cloneNode()); - (object.position.x = Math.random() * 4000 - 2000), - (object.position.y = Math.random() * 4000 - 2000), - (object.position.z = Math.random() * 4000 - 2000); - scene.add(object); + camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 5000); + camera.position.set(600, 400, 1500); + camera.lookAt(0, 0, 0); - objects.push(object); - } + scene = new THREE.Scene(); - transition(); - }); - image.src = "textures/sprite.png"; + const image = document.createElement('img'); + image.addEventListener('load', function () { + for (let i = 0; i < particlesTotal; i++) { + const object = new CSS3DSprite(image.cloneNode()); + (object.position.x = Math.random() * 4000 - 2000), + (object.position.y = Math.random() * 4000 - 2000), + (object.position.z = Math.random() * 4000 - 2000); + scene.add(object); - // Plane + objects.push(object); + } - const amountX = 16; - const amountZ = 32; - const separationPlane = 150; - const offsetX = ((amountX - 1) * separationPlane) / 2; - const offsetZ = ((amountZ - 1) * separationPlane) / 2; + transition(); + }); + image.src = 'textures/sprite.png'; - for (let i = 0; i < particlesTotal; i++) { - const x = (i % amountX) * separationPlane; - const z = Math.floor(i / amountX) * separationPlane; - const y = (Math.sin(x * 0.5) + Math.sin(z * 0.5)) * 200; + // Plane - positions.push(x - offsetX, y, z - offsetZ); - } + const amountX = 16; + const amountZ = 32; + const separationPlane = 150; + const offsetX = ((amountX - 1) * separationPlane) / 2; + const offsetZ = ((amountZ - 1) * separationPlane) / 2; - // Cube + for (let i = 0; i < particlesTotal; i++) { + const x = (i % amountX) * separationPlane; + const z = Math.floor(i / amountX) * separationPlane; + const y = (Math.sin(x * 0.5) + Math.sin(z * 0.5)) * 200; - const amount = 8; - const separationCube = 150; - const offset = ((amount - 1) * separationCube) / 2; + positions.push(x - offsetX, y, z - offsetZ); + } - for (let i = 0; i < particlesTotal; i++) { - const x = (i % amount) * separationCube; - const y = Math.floor((i / amount) % amount) * separationCube; - const z = Math.floor(i / (amount * amount)) * separationCube; + // Cube - positions.push(x - offset, y - offset, z - offset); - } + const amount = 8; + const separationCube = 150; + const offset = ((amount - 1) * separationCube) / 2; - // Random + for (let i = 0; i < particlesTotal; i++) { + const x = (i % amount) * separationCube; + const y = Math.floor((i / amount) % amount) * separationCube; + const z = Math.floor(i / (amount * amount)) * separationCube; - for (let i = 0; i < particlesTotal; i++) { - positions.push( - Math.random() * 4000 - 2000, - Math.random() * 4000 - 2000, - Math.random() * 4000 - 2000 - ); - } + positions.push(x - offset, y - offset, z - offset); + } - // Sphere + // Random - const radius = 750; + for (let i = 0; i < particlesTotal; i++) { + positions.push(Math.random() * 4000 - 2000, Math.random() * 4000 - 2000, Math.random() * 4000 - 2000); + } - for (let i = 0; i < particlesTotal; i++) { - const phi = Math.acos(-1 + (2 * i) / particlesTotal); - const theta = Math.sqrt(particlesTotal * Math.PI) * phi; + // Sphere - positions.push( - radius * Math.cos(theta) * Math.sin(phi), - radius * Math.sin(theta) * Math.sin(phi), - radius * Math.cos(phi) - ); - } + const radius = 750; - // + for (let i = 0; i < particlesTotal; i++) { + const phi = Math.acos(-1 + (2 * i) / particlesTotal); + const theta = Math.sqrt(particlesTotal * Math.PI) * phi; + + positions.push( + radius * Math.cos(theta) * Math.sin(phi), + radius * Math.sin(theta) * Math.sin(phi), + radius * Math.cos(phi), + ); + } - renderer = new CSS3DRenderer(); - renderer.setSize(window.innerWidth, window.innerHeight); - document.getElementById("container").appendChild(renderer.domElement); + // - // + renderer = new CSS3DRenderer(); + renderer.setSize(window.innerWidth, window.innerHeight); + document.getElementById('container').appendChild(renderer.domElement); - controls = new TrackballControls(camera, renderer.domElement); + // - // + controls = new TrackballControls(camera, renderer.domElement); - window.addEventListener("resize", onWindowResize); + // + + window.addEventListener('resize', onWindowResize); } function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); + renderer.setSize(window.innerWidth, window.innerHeight); } function transition() { - const offset = current * particlesTotal * 3; - const duration = 2000; - - for (let i = 0, j = offset; i < particlesTotal; i++, j += 3) { - const object = objects[i]; - - new TWEEN.Tween(object.position) - .to( - { - x: positions[j], - y: positions[j + 1], - z: positions[j + 2], - }, - Math.random() * duration + duration - ) - .easing(TWEEN.Easing.Exponential.InOut) - .start(); - } - - new TWEEN.Tween(this) - .to({}, duration * 3) - .onComplete(transition) - .start(); - - current = (current + 1) % 4; + const offset = current * particlesTotal * 3; + const duration = 2000; + + for (let i = 0, j = offset; i < particlesTotal; i++, j += 3) { + const object = objects[i]; + + new TWEEN.Tween(object.position) + .to( + { + x: positions[j], + y: positions[j + 1], + z: positions[j + 2], + }, + Math.random() * duration + duration, + ) + .easing(TWEEN.Easing.Exponential.InOut) + .start(); + } + + new TWEEN.Tween(this) + .to({}, duration * 3) + .onComplete(transition) + .start(); + + current = (current + 1) % 4; } function animate() { - requestAnimationFrame(animate); + requestAnimationFrame(animate); - TWEEN.update(); - controls.update(); + TWEEN.update(); + controls.update(); - const time = performance.now(); + const time = performance.now(); - for (let i = 0, l = objects.length; i < l; i++) { - const object = objects[i]; - const scale = - Math.sin((Math.floor(object.position.x) + time) * 0.002) * 0.3 + 1; - object.scale.set(scale, scale, scale); - } + for (let i = 0, l = objects.length; i < l; i++) { + const object = objects[i]; + const scale = Math.sin((Math.floor(object.position.x) + time) * 0.002) * 0.3 + 1; + object.scale.set(scale, scale, scale); + } - renderer.render(scene, camera); + renderer.render(scene, camera); } diff --git a/examples-testing/examples/css3d_youtube.ts b/examples-testing/examples/css3d_youtube.ts index f717a9a59..62652f87f 100644 --- a/examples-testing/examples/css3d_youtube.ts +++ b/examples-testing/examples/css3d_youtube.ts @@ -1,87 +1,79 @@ -import * as THREE from "three"; +import * as THREE from 'three'; -import { TrackballControls } from "three/addons/controls/TrackballControls.js"; -import { - CSS3DRenderer, - CSS3DObject, -} from "three/addons/renderers/CSS3DRenderer.js"; +import { TrackballControls } from 'three/addons/controls/TrackballControls.js'; +import { CSS3DRenderer, CSS3DObject } from 'three/addons/renderers/CSS3DRenderer.js'; let camera, scene, renderer; let controls; function Element(id, x, y, z, ry) { - const div = document.createElement("div"); - div.style.width = "480px"; - div.style.height = "360px"; - div.style.backgroundColor = "#000"; - - const iframe = document.createElement("iframe"); - iframe.style.width = "480px"; - iframe.style.height = "360px"; - iframe.style.border = "0px"; - iframe.src = ["https://www.youtube.com/embed/", id, "?rel=0"].join(""); - div.appendChild(iframe); - - const object = new CSS3DObject(div); - object.position.set(x, y, z); - object.rotation.y = ry; - - return object; + const div = document.createElement('div'); + div.style.width = '480px'; + div.style.height = '360px'; + div.style.backgroundColor = '#000'; + + const iframe = document.createElement('iframe'); + iframe.style.width = '480px'; + iframe.style.height = '360px'; + iframe.style.border = '0px'; + iframe.src = ['https://www.youtube.com/embed/', id, '?rel=0'].join(''); + div.appendChild(iframe); + + const object = new CSS3DObject(div); + object.position.set(x, y, z); + object.rotation.y = ry; + + return object; } init(); animate(); function init() { - const container = document.getElementById("container"); + const container = document.getElementById('container'); - camera = new THREE.PerspectiveCamera( - 50, - window.innerWidth / window.innerHeight, - 1, - 5000 - ); - camera.position.set(500, 350, 750); + camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 5000); + camera.position.set(500, 350, 750); - scene = new THREE.Scene(); + scene = new THREE.Scene(); - renderer = new CSS3DRenderer(); - renderer.setSize(window.innerWidth, window.innerHeight); - container.appendChild(renderer.domElement); + renderer = new CSS3DRenderer(); + renderer.setSize(window.innerWidth, window.innerHeight); + container.appendChild(renderer.domElement); - const group = new THREE.Group(); - group.add(new Element("SJOz3qjfQXU", 0, 0, 240, 0)); - group.add(new Element("Y2-xZ-1HE-Q", 240, 0, 0, Math.PI / 2)); - group.add(new Element("IrydklNpcFI", 0, 0, -240, Math.PI)); - group.add(new Element("9ubytEsCaS0", -240, 0, 0, -Math.PI / 2)); - scene.add(group); + const group = new THREE.Group(); + group.add(new Element('SJOz3qjfQXU', 0, 0, 240, 0)); + group.add(new Element('Y2-xZ-1HE-Q', 240, 0, 0, Math.PI / 2)); + group.add(new Element('IrydklNpcFI', 0, 0, -240, Math.PI)); + group.add(new Element('9ubytEsCaS0', -240, 0, 0, -Math.PI / 2)); + scene.add(group); - controls = new TrackballControls(camera, renderer.domElement); - controls.rotateSpeed = 4; + controls = new TrackballControls(camera, renderer.domElement); + controls.rotateSpeed = 4; - window.addEventListener("resize", onWindowResize); + window.addEventListener('resize', onWindowResize); - // Block iframe events when dragging camera + // Block iframe events when dragging camera - const blocker = document.getElementById("blocker"); - blocker.style.display = "none"; + const blocker = document.getElementById('blocker'); + blocker.style.display = 'none'; - controls.addEventListener("start", function () { - blocker.style.display = ""; - }); - controls.addEventListener("end", function () { - blocker.style.display = "none"; - }); + controls.addEventListener('start', function () { + blocker.style.display = ''; + }); + controls.addEventListener('end', function () { + blocker.style.display = 'none'; + }); } function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); + renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { - requestAnimationFrame(animate); - controls.update(); - renderer.render(scene, camera); + requestAnimationFrame(animate); + controls.update(); + renderer.render(scene, camera); } diff --git a/examples-testing/examples/games_fps.ts b/examples-testing/examples/games_fps.ts index 4ed91b1df..49dd6f395 100644 --- a/examples-testing/examples/games_fps.ts +++ b/examples-testing/examples/games_fps.ts @@ -1,15 +1,15 @@ -import * as THREE from "three"; +import * as THREE from 'three'; -import Stats from "three/addons/libs/stats.module.js"; +import Stats from 'three/addons/libs/stats.module.js'; -import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js"; +import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; -import { Octree } from "three/addons/math/Octree.js"; -import { OctreeHelper } from "three/addons/helpers/OctreeHelper.js"; +import { Octree } from 'three/addons/math/Octree.js'; +import { OctreeHelper } from 'three/addons/helpers/OctreeHelper.js'; -import { Capsule } from "three/addons/math/Capsule.js"; +import { Capsule } from 'three/addons/math/Capsule.js'; -import { GUI } from "three/addons/libs/lil-gui.module.min.js"; +import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; const clock = new THREE.Clock(); @@ -17,13 +17,8 @@ const scene = new THREE.Scene(); scene.background = new THREE.Color(0x88ccee); scene.fog = new THREE.Fog(0x88ccee, 0, 50); -const camera = new THREE.PerspectiveCamera( - 70, - window.innerWidth / window.innerHeight, - 0.1, - 1000 -); -camera.rotation.order = "YXZ"; +const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000); +camera.rotation.order = 'YXZ'; const fillLight1 = new THREE.HemisphereLight(0x8dc1de, 0x00668d, 0.5); fillLight1.position.set(2, 1, 1); @@ -44,7 +39,7 @@ directionalLight.shadow.radius = 4; directionalLight.shadow.bias = -0.00006; scene.add(directionalLight); -const container = document.getElementById("container"); +const container = document.getElementById('container'); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); @@ -55,8 +50,8 @@ renderer.toneMapping = THREE.ACESFilmicToneMapping; container.appendChild(renderer.domElement); const stats = new Stats(); -stats.domElement.style.position = "absolute"; -stats.domElement.style.top = "0px"; +stats.domElement.style.position = 'absolute'; +stats.domElement.style.top = '0px'; container.appendChild(stats.domElement); const GRAVITY = 30; @@ -73,26 +68,22 @@ const spheres = []; let sphereIdx = 0; for (let i = 0; i < NUM_SPHERES; i++) { - const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); - sphere.castShadow = true; - sphere.receiveShadow = true; + const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); + sphere.castShadow = true; + sphere.receiveShadow = true; - scene.add(sphere); + scene.add(sphere); - spheres.push({ - mesh: sphere, - collider: new THREE.Sphere(new THREE.Vector3(0, -100, 0), SPHERE_RADIUS), - velocity: new THREE.Vector3(), - }); + spheres.push({ + mesh: sphere, + collider: new THREE.Sphere(new THREE.Vector3(0, -100, 0), SPHERE_RADIUS), + velocity: new THREE.Vector3(), + }); } const worldOctree = new Octree(); -const playerCollider = new Capsule( - new THREE.Vector3(0, 0.35, 0), - new THREE.Vector3(0, 1, 0), - 0.35 -); +const playerCollider = new Capsule(new THREE.Vector3(0, 0.35, 0), new THREE.Vector3(0, 1, 0), 0.35); const playerVelocity = new THREE.Vector3(); const playerDirection = new THREE.Vector3(); @@ -106,294 +97,277 @@ const vector1 = new THREE.Vector3(); const vector2 = new THREE.Vector3(); const vector3 = new THREE.Vector3(); -document.addEventListener("keydown", (event) => { - keyStates[event.code] = true; +document.addEventListener('keydown', event => { + keyStates[event.code] = true; }); -document.addEventListener("keyup", (event) => { - keyStates[event.code] = false; +document.addEventListener('keyup', event => { + keyStates[event.code] = false; }); -container.addEventListener("mousedown", () => { - document.body.requestPointerLock(); +container.addEventListener('mousedown', () => { + document.body.requestPointerLock(); - mouseTime = performance.now(); + mouseTime = performance.now(); }); -document.addEventListener("mouseup", () => { - if (document.pointerLockElement !== null) throwBall(); +document.addEventListener('mouseup', () => { + if (document.pointerLockElement !== null) throwBall(); }); -document.body.addEventListener("mousemove", (event) => { - if (document.pointerLockElement === document.body) { - camera.rotation.y -= event.movementX / 500; - camera.rotation.x -= event.movementY / 500; - } +document.body.addEventListener('mousemove', event => { + if (document.pointerLockElement === document.body) { + camera.rotation.y -= event.movementX / 500; + camera.rotation.x -= event.movementY / 500; + } }); -window.addEventListener("resize", onWindowResize); +window.addEventListener('resize', onWindowResize); function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); + renderer.setSize(window.innerWidth, window.innerHeight); } function throwBall() { - const sphere = spheres[sphereIdx]; + const sphere = spheres[sphereIdx]; - camera.getWorldDirection(playerDirection); + camera.getWorldDirection(playerDirection); - sphere.collider.center - .copy(playerCollider.end) - .addScaledVector(playerDirection, playerCollider.radius * 1.5); + sphere.collider.center.copy(playerCollider.end).addScaledVector(playerDirection, playerCollider.radius * 1.5); - // throw the ball with more force if we hold the button longer, and if we move forward + // throw the ball with more force if we hold the button longer, and if we move forward - const impulse = - 15 + 30 * (1 - Math.exp((mouseTime - performance.now()) * 0.001)); + const impulse = 15 + 30 * (1 - Math.exp((mouseTime - performance.now()) * 0.001)); - sphere.velocity.copy(playerDirection).multiplyScalar(impulse); - sphere.velocity.addScaledVector(playerVelocity, 2); + sphere.velocity.copy(playerDirection).multiplyScalar(impulse); + sphere.velocity.addScaledVector(playerVelocity, 2); - sphereIdx = (sphereIdx + 1) % spheres.length; + sphereIdx = (sphereIdx + 1) % spheres.length; } function playerCollisions() { - const result = worldOctree.capsuleIntersect(playerCollider); + const result = worldOctree.capsuleIntersect(playerCollider); - playerOnFloor = false; + playerOnFloor = false; - if (result) { - playerOnFloor = result.normal.y > 0; + if (result) { + playerOnFloor = result.normal.y > 0; - if (!playerOnFloor) { - playerVelocity.addScaledVector( - result.normal, - -result.normal.dot(playerVelocity) - ); - } + if (!playerOnFloor) { + playerVelocity.addScaledVector(result.normal, -result.normal.dot(playerVelocity)); + } - playerCollider.translate(result.normal.multiplyScalar(result.depth)); - } + playerCollider.translate(result.normal.multiplyScalar(result.depth)); + } } function updatePlayer(deltaTime) { - let damping = Math.exp(-4 * deltaTime) - 1; + let damping = Math.exp(-4 * deltaTime) - 1; - if (!playerOnFloor) { - playerVelocity.y -= GRAVITY * deltaTime; + if (!playerOnFloor) { + playerVelocity.y -= GRAVITY * deltaTime; - // small air resistance - damping *= 0.1; - } + // small air resistance + damping *= 0.1; + } - playerVelocity.addScaledVector(playerVelocity, damping); + playerVelocity.addScaledVector(playerVelocity, damping); - const deltaPosition = playerVelocity.clone().multiplyScalar(deltaTime); - playerCollider.translate(deltaPosition); + const deltaPosition = playerVelocity.clone().multiplyScalar(deltaTime); + playerCollider.translate(deltaPosition); - playerCollisions(); + playerCollisions(); - camera.position.copy(playerCollider.end); + camera.position.copy(playerCollider.end); } function playerSphereCollision(sphere) { - const center = vector1 - .addVectors(playerCollider.start, playerCollider.end) - .multiplyScalar(0.5); + const center = vector1.addVectors(playerCollider.start, playerCollider.end).multiplyScalar(0.5); - const sphere_center = sphere.collider.center; + const sphere_center = sphere.collider.center; - const r = playerCollider.radius + sphere.collider.radius; - const r2 = r * r; + const r = playerCollider.radius + sphere.collider.radius; + const r2 = r * r; - // approximation: player = 3 spheres + // approximation: player = 3 spheres - for (const point of [playerCollider.start, playerCollider.end, center]) { - const d2 = point.distanceToSquared(sphere_center); + for (const point of [playerCollider.start, playerCollider.end, center]) { + const d2 = point.distanceToSquared(sphere_center); - if (d2 < r2) { - const normal = vector1.subVectors(point, sphere_center).normalize(); - const v1 = vector2 - .copy(normal) - .multiplyScalar(normal.dot(playerVelocity)); - const v2 = vector3 - .copy(normal) - .multiplyScalar(normal.dot(sphere.velocity)); + if (d2 < r2) { + const normal = vector1.subVectors(point, sphere_center).normalize(); + const v1 = vector2.copy(normal).multiplyScalar(normal.dot(playerVelocity)); + const v2 = vector3.copy(normal).multiplyScalar(normal.dot(sphere.velocity)); - playerVelocity.add(v2).sub(v1); - sphere.velocity.add(v1).sub(v2); + playerVelocity.add(v2).sub(v1); + sphere.velocity.add(v1).sub(v2); - const d = (r - Math.sqrt(d2)) / 2; - sphere_center.addScaledVector(normal, -d); + const d = (r - Math.sqrt(d2)) / 2; + sphere_center.addScaledVector(normal, -d); + } } - } } function spheresCollisions() { - for (let i = 0, length = spheres.length; i < length; i++) { - const s1 = spheres[i]; + for (let i = 0, length = spheres.length; i < length; i++) { + const s1 = spheres[i]; - for (let j = i + 1; j < length; j++) { - const s2 = spheres[j]; + for (let j = i + 1; j < length; j++) { + const s2 = spheres[j]; - const d2 = s1.collider.center.distanceToSquared(s2.collider.center); - const r = s1.collider.radius + s2.collider.radius; - const r2 = r * r; + const d2 = s1.collider.center.distanceToSquared(s2.collider.center); + const r = s1.collider.radius + s2.collider.radius; + const r2 = r * r; - if (d2 < r2) { - const normal = vector1 - .subVectors(s1.collider.center, s2.collider.center) - .normalize(); - const v1 = vector2.copy(normal).multiplyScalar(normal.dot(s1.velocity)); - const v2 = vector3.copy(normal).multiplyScalar(normal.dot(s2.velocity)); + if (d2 < r2) { + const normal = vector1.subVectors(s1.collider.center, s2.collider.center).normalize(); + const v1 = vector2.copy(normal).multiplyScalar(normal.dot(s1.velocity)); + const v2 = vector3.copy(normal).multiplyScalar(normal.dot(s2.velocity)); - s1.velocity.add(v2).sub(v1); - s2.velocity.add(v1).sub(v2); + s1.velocity.add(v2).sub(v1); + s2.velocity.add(v1).sub(v2); - const d = (r - Math.sqrt(d2)) / 2; + const d = (r - Math.sqrt(d2)) / 2; - s1.collider.center.addScaledVector(normal, d); - s2.collider.center.addScaledVector(normal, -d); - } + s1.collider.center.addScaledVector(normal, d); + s2.collider.center.addScaledVector(normal, -d); + } + } } - } } function updateSpheres(deltaTime) { - spheres.forEach((sphere) => { - sphere.collider.center.addScaledVector(sphere.velocity, deltaTime); + spheres.forEach(sphere => { + sphere.collider.center.addScaledVector(sphere.velocity, deltaTime); - const result = worldOctree.sphereIntersect(sphere.collider); + const result = worldOctree.sphereIntersect(sphere.collider); - if (result) { - sphere.velocity.addScaledVector( - result.normal, - -result.normal.dot(sphere.velocity) * 1.5 - ); - sphere.collider.center.add(result.normal.multiplyScalar(result.depth)); - } else { - sphere.velocity.y -= GRAVITY * deltaTime; - } + if (result) { + sphere.velocity.addScaledVector(result.normal, -result.normal.dot(sphere.velocity) * 1.5); + sphere.collider.center.add(result.normal.multiplyScalar(result.depth)); + } else { + sphere.velocity.y -= GRAVITY * deltaTime; + } - const damping = Math.exp(-1.5 * deltaTime) - 1; - sphere.velocity.addScaledVector(sphere.velocity, damping); + const damping = Math.exp(-1.5 * deltaTime) - 1; + sphere.velocity.addScaledVector(sphere.velocity, damping); - playerSphereCollision(sphere); - }); + playerSphereCollision(sphere); + }); - spheresCollisions(); + spheresCollisions(); - for (const sphere of spheres) { - sphere.mesh.position.copy(sphere.collider.center); - } + for (const sphere of spheres) { + sphere.mesh.position.copy(sphere.collider.center); + } } function getForwardVector() { - camera.getWorldDirection(playerDirection); - playerDirection.y = 0; - playerDirection.normalize(); + camera.getWorldDirection(playerDirection); + playerDirection.y = 0; + playerDirection.normalize(); - return playerDirection; + return playerDirection; } function getSideVector() { - camera.getWorldDirection(playerDirection); - playerDirection.y = 0; - playerDirection.normalize(); - playerDirection.cross(camera.up); + camera.getWorldDirection(playerDirection); + playerDirection.y = 0; + playerDirection.normalize(); + playerDirection.cross(camera.up); - return playerDirection; + return playerDirection; } function controls(deltaTime) { - // gives a bit of air control - const speedDelta = deltaTime * (playerOnFloor ? 25 : 8); + // gives a bit of air control + const speedDelta = deltaTime * (playerOnFloor ? 25 : 8); - if (keyStates["KeyW"]) { - playerVelocity.add(getForwardVector().multiplyScalar(speedDelta)); - } + if (keyStates['KeyW']) { + playerVelocity.add(getForwardVector().multiplyScalar(speedDelta)); + } - if (keyStates["KeyS"]) { - playerVelocity.add(getForwardVector().multiplyScalar(-speedDelta)); - } + if (keyStates['KeyS']) { + playerVelocity.add(getForwardVector().multiplyScalar(-speedDelta)); + } - if (keyStates["KeyA"]) { - playerVelocity.add(getSideVector().multiplyScalar(-speedDelta)); - } + if (keyStates['KeyA']) { + playerVelocity.add(getSideVector().multiplyScalar(-speedDelta)); + } - if (keyStates["KeyD"]) { - playerVelocity.add(getSideVector().multiplyScalar(speedDelta)); - } + if (keyStates['KeyD']) { + playerVelocity.add(getSideVector().multiplyScalar(speedDelta)); + } - if (playerOnFloor) { - if (keyStates["Space"]) { - playerVelocity.y = 15; + if (playerOnFloor) { + if (keyStates['Space']) { + playerVelocity.y = 15; + } } - } } -const loader = new GLTFLoader().setPath("./models/gltf/"); +const loader = new GLTFLoader().setPath('./models/gltf/'); -loader.load("collision-world.glb", (gltf) => { - scene.add(gltf.scene); +loader.load('collision-world.glb', gltf => { + scene.add(gltf.scene); - worldOctree.fromGraphNode(gltf.scene); + worldOctree.fromGraphNode(gltf.scene); - gltf.scene.traverse((child) => { - if (child.isMesh) { - child.castShadow = true; - child.receiveShadow = true; + gltf.scene.traverse(child => { + if (child.isMesh) { + child.castShadow = true; + child.receiveShadow = true; - if (child.material.map) { - child.material.map.anisotropy = 4; - } - } - }); + if (child.material.map) { + child.material.map.anisotropy = 4; + } + } + }); - const helper = new OctreeHelper(worldOctree); - helper.visible = false; - scene.add(helper); + const helper = new OctreeHelper(worldOctree); + helper.visible = false; + scene.add(helper); - const gui = new GUI({ width: 200 }); - gui.add({ debug: false }, "debug").onChange(function (value) { - helper.visible = value; - }); + const gui = new GUI({ width: 200 }); + gui.add({ debug: false }, 'debug').onChange(function (value) { + helper.visible = value; + }); - animate(); + animate(); }); function teleportPlayerIfOob() { - if (camera.position.y <= -25) { - playerCollider.start.set(0, 0.35, 0); - playerCollider.end.set(0, 1, 0); - playerCollider.radius = 0.35; - camera.position.copy(playerCollider.end); - camera.rotation.set(0, 0, 0); - } + if (camera.position.y <= -25) { + playerCollider.start.set(0, 0.35, 0); + playerCollider.end.set(0, 1, 0); + playerCollider.radius = 0.35; + camera.position.copy(playerCollider.end); + camera.rotation.set(0, 0, 0); + } } function animate() { - const deltaTime = Math.min(0.05, clock.getDelta()) / STEPS_PER_FRAME; + const deltaTime = Math.min(0.05, clock.getDelta()) / STEPS_PER_FRAME; - // we look for collisions in substeps to mitigate the risk of - // an object traversing another too quickly for detection. + // we look for collisions in substeps to mitigate the risk of + // an object traversing another too quickly for detection. - for (let i = 0; i < STEPS_PER_FRAME; i++) { - controls(deltaTime); + for (let i = 0; i < STEPS_PER_FRAME; i++) { + controls(deltaTime); - updatePlayer(deltaTime); + updatePlayer(deltaTime); - updateSpheres(deltaTime); + updateSpheres(deltaTime); - teleportPlayerIfOob(); - } + teleportPlayerIfOob(); + } - renderer.render(scene, camera); + renderer.render(scene, camera); - stats.update(); + stats.update(); - requestAnimationFrame(animate); + requestAnimationFrame(animate); } diff --git a/examples-testing/examples/misc_animation_groups.ts b/examples-testing/examples/misc_animation_groups.ts index 44a0c4b8c..19d263f4b 100644 --- a/examples-testing/examples/misc_animation_groups.ts +++ b/examples-testing/examples/misc_animation_groups.ts @@ -1,6 +1,6 @@ -import * as THREE from "three"; +import * as THREE from 'three'; -import Stats from "three/addons/libs/stats.module.js"; +import Stats from 'three/addons/libs/stats.module.js'; let stats, clock; let scene, camera, renderer, mixer; @@ -9,136 +9,123 @@ init(); animate(); function init() { - scene = new THREE.Scene(); + scene = new THREE.Scene(); - // + // - camera = new THREE.PerspectiveCamera( - 40, - window.innerWidth / window.innerHeight, - 1, - 1000 - ); - camera.position.set(50, 50, 100); - camera.lookAt(scene.position); + camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000); + camera.position.set(50, 50, 100); + camera.lookAt(scene.position); - // all objects of this animation group share a common animation state + // all objects of this animation group share a common animation state - const animationGroup = new THREE.AnimationObjectGroup(); + const animationGroup = new THREE.AnimationObjectGroup(); - // + // - const geometry = new THREE.BoxGeometry(5, 5, 5); - const material = new THREE.MeshBasicMaterial({ transparent: true }); + const geometry = new THREE.BoxGeometry(5, 5, 5); + const material = new THREE.MeshBasicMaterial({ transparent: true }); - // + // - for (let i = 0; i < 5; i++) { - for (let j = 0; j < 5; j++) { - const mesh = new THREE.Mesh(geometry, material); + for (let i = 0; i < 5; i++) { + for (let j = 0; j < 5; j++) { + const mesh = new THREE.Mesh(geometry, material); - mesh.position.x = 32 - 16 * i; - mesh.position.y = 0; - mesh.position.z = 32 - 16 * j; + mesh.position.x = 32 - 16 * i; + mesh.position.y = 0; + mesh.position.z = 32 - 16 * j; - scene.add(mesh); - animationGroup.add(mesh); + scene.add(mesh); + animationGroup.add(mesh); + } } - } - - // create some keyframe tracks - - const xAxis = new THREE.Vector3(1, 0, 0); - const qInitial = new THREE.Quaternion().setFromAxisAngle(xAxis, 0); - const qFinal = new THREE.Quaternion().setFromAxisAngle(xAxis, Math.PI); - const quaternionKF = new THREE.QuaternionKeyframeTrack( - ".quaternion", - [0, 1, 2], - [ - qInitial.x, - qInitial.y, - qInitial.z, - qInitial.w, - qFinal.x, - qFinal.y, - qFinal.z, - qFinal.w, - qInitial.x, - qInitial.y, - qInitial.z, - qInitial.w, - ] - ); - - const colorKF = new THREE.ColorKeyframeTrack( - ".material.color", - [0, 1, 2], - [1, 0, 0, 0, 1, 0, 0, 0, 1], - THREE.InterpolateDiscrete - ); - const opacityKF = new THREE.NumberKeyframeTrack( - ".material.opacity", - [0, 1, 2], - [1, 0, 1] - ); - - // create clip - - const clip = new THREE.AnimationClip("default", 3, [ - quaternionKF, - colorKF, - opacityKF, - ]); - - // apply the animation group to the mixer as the root object - - mixer = new THREE.AnimationMixer(animationGroup); - - const clipAction = mixer.clipAction(clip); - clipAction.play(); - - // - - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - document.body.appendChild(renderer.domElement); - - // - - stats = new Stats(); - document.body.appendChild(stats.dom); - - // - - clock = new THREE.Clock(); - - // - - window.addEventListener("resize", onWindowResize); + + // create some keyframe tracks + + const xAxis = new THREE.Vector3(1, 0, 0); + const qInitial = new THREE.Quaternion().setFromAxisAngle(xAxis, 0); + const qFinal = new THREE.Quaternion().setFromAxisAngle(xAxis, Math.PI); + const quaternionKF = new THREE.QuaternionKeyframeTrack( + '.quaternion', + [0, 1, 2], + [ + qInitial.x, + qInitial.y, + qInitial.z, + qInitial.w, + qFinal.x, + qFinal.y, + qFinal.z, + qFinal.w, + qInitial.x, + qInitial.y, + qInitial.z, + qInitial.w, + ], + ); + + const colorKF = new THREE.ColorKeyframeTrack( + '.material.color', + [0, 1, 2], + [1, 0, 0, 0, 1, 0, 0, 0, 1], + THREE.InterpolateDiscrete, + ); + const opacityKF = new THREE.NumberKeyframeTrack('.material.opacity', [0, 1, 2], [1, 0, 1]); + + // create clip + + const clip = new THREE.AnimationClip('default', 3, [quaternionKF, colorKF, opacityKF]); + + // apply the animation group to the mixer as the root object + + mixer = new THREE.AnimationMixer(animationGroup); + + const clipAction = mixer.clipAction(clip); + clipAction.play(); + + // + + renderer = new THREE.WebGLRenderer({ antialias: true }); + renderer.setPixelRatio(window.devicePixelRatio); + renderer.setSize(window.innerWidth, window.innerHeight); + document.body.appendChild(renderer.domElement); + + // + + stats = new Stats(); + document.body.appendChild(stats.dom); + + // + + clock = new THREE.Clock(); + + // + + window.addEventListener('resize', onWindowResize); } function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); + renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { - requestAnimationFrame(animate); + requestAnimationFrame(animate); - render(); + render(); } function render() { - const delta = clock.getDelta(); + const delta = clock.getDelta(); - if (mixer) { - mixer.update(delta); - } + if (mixer) { + mixer.update(delta); + } - renderer.render(scene, camera); + renderer.render(scene, camera); - stats.update(); + stats.update(); } diff --git a/examples-testing/examples/misc_animation_keys.ts b/examples-testing/examples/misc_animation_keys.ts index a36b4959f..4a8089878 100644 --- a/examples-testing/examples/misc_animation_keys.ts +++ b/examples-testing/examples/misc_animation_keys.ts @@ -1,6 +1,6 @@ -import * as THREE from "three"; +import * as THREE from 'three'; -import Stats from "three/addons/libs/stats.module.js"; +import Stats from 'three/addons/libs/stats.module.js'; let stats, clock; let scene, camera, renderer, mixer; @@ -9,153 +9,127 @@ init(); animate(); function init() { - scene = new THREE.Scene(); - - // - - camera = new THREE.PerspectiveCamera( - 40, - window.innerWidth / window.innerHeight, - 1, - 1000 - ); - camera.position.set(25, 25, 50); - camera.lookAt(scene.position); - - // - - const axesHelper = new THREE.AxesHelper(10); - scene.add(axesHelper); - - // - - const geometry = new THREE.BoxGeometry(5, 5, 5); - const material = new THREE.MeshBasicMaterial({ - color: 0xffffff, - transparent: true, - }); - const mesh = new THREE.Mesh(geometry, material); - scene.add(mesh); - - // create a keyframe track (i.e. a timed sequence of keyframes) for each animated property - // Note: the keyframe track type should correspond to the type of the property being animated - - // POSITION - const positionKF = new THREE.VectorKeyframeTrack( - ".position", - [0, 1, 2], - [0, 0, 0, 30, 0, 0, 0, 0, 0] - ); - - // SCALE - const scaleKF = new THREE.VectorKeyframeTrack( - ".scale", - [0, 1, 2], - [1, 1, 1, 2, 2, 2, 1, 1, 1] - ); - - // ROTATION - // Rotation should be performed using quaternions, using a THREE.QuaternionKeyframeTrack - // Interpolating Euler angles (.rotation property) can be problematic and is currently not supported - - // set up rotation about x axis - const xAxis = new THREE.Vector3(1, 0, 0); - - const qInitial = new THREE.Quaternion().setFromAxisAngle(xAxis, 0); - const qFinal = new THREE.Quaternion().setFromAxisAngle(xAxis, Math.PI); - const quaternionKF = new THREE.QuaternionKeyframeTrack( - ".quaternion", - [0, 1, 2], - [ - qInitial.x, - qInitial.y, - qInitial.z, - qInitial.w, - qFinal.x, - qFinal.y, - qFinal.z, - qFinal.w, - qInitial.x, - qInitial.y, - qInitial.z, - qInitial.w, - ] - ); - - // COLOR - const colorKF = new THREE.ColorKeyframeTrack( - ".material.color", - [0, 1, 2], - [1, 0, 0, 0, 1, 0, 0, 0, 1], - THREE.InterpolateDiscrete - ); - - // OPACITY - const opacityKF = new THREE.NumberKeyframeTrack( - ".material.opacity", - [0, 1, 2], - [1, 0, 1] - ); - - // create an animation sequence with the tracks - // If a negative time value is passed, the duration will be calculated from the times of the passed tracks array - const clip = new THREE.AnimationClip("Action", 3, [ - scaleKF, - positionKF, - quaternionKF, - colorKF, - opacityKF, - ]); - - // setup the THREE.AnimationMixer - mixer = new THREE.AnimationMixer(mesh); - - // create a ClipAction and set it to play - const clipAction = mixer.clipAction(clip); - clipAction.play(); - - // - - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - document.body.appendChild(renderer.domElement); - - // - - stats = new Stats(); - document.body.appendChild(stats.dom); - - // - - clock = new THREE.Clock(); - - // - - window.addEventListener("resize", onWindowResize); + scene = new THREE.Scene(); + + // + + camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000); + camera.position.set(25, 25, 50); + camera.lookAt(scene.position); + + // + + const axesHelper = new THREE.AxesHelper(10); + scene.add(axesHelper); + + // + + const geometry = new THREE.BoxGeometry(5, 5, 5); + const material = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true }); + const mesh = new THREE.Mesh(geometry, material); + scene.add(mesh); + + // create a keyframe track (i.e. a timed sequence of keyframes) for each animated property + // Note: the keyframe track type should correspond to the type of the property being animated + + // POSITION + const positionKF = new THREE.VectorKeyframeTrack('.position', [0, 1, 2], [0, 0, 0, 30, 0, 0, 0, 0, 0]); + + // SCALE + const scaleKF = new THREE.VectorKeyframeTrack('.scale', [0, 1, 2], [1, 1, 1, 2, 2, 2, 1, 1, 1]); + + // ROTATION + // Rotation should be performed using quaternions, using a THREE.QuaternionKeyframeTrack + // Interpolating Euler angles (.rotation property) can be problematic and is currently not supported + + // set up rotation about x axis + const xAxis = new THREE.Vector3(1, 0, 0); + + const qInitial = new THREE.Quaternion().setFromAxisAngle(xAxis, 0); + const qFinal = new THREE.Quaternion().setFromAxisAngle(xAxis, Math.PI); + const quaternionKF = new THREE.QuaternionKeyframeTrack( + '.quaternion', + [0, 1, 2], + [ + qInitial.x, + qInitial.y, + qInitial.z, + qInitial.w, + qFinal.x, + qFinal.y, + qFinal.z, + qFinal.w, + qInitial.x, + qInitial.y, + qInitial.z, + qInitial.w, + ], + ); + + // COLOR + const colorKF = new THREE.ColorKeyframeTrack( + '.material.color', + [0, 1, 2], + [1, 0, 0, 0, 1, 0, 0, 0, 1], + THREE.InterpolateDiscrete, + ); + + // OPACITY + const opacityKF = new THREE.NumberKeyframeTrack('.material.opacity', [0, 1, 2], [1, 0, 1]); + + // create an animation sequence with the tracks + // If a negative time value is passed, the duration will be calculated from the times of the passed tracks array + const clip = new THREE.AnimationClip('Action', 3, [scaleKF, positionKF, quaternionKF, colorKF, opacityKF]); + + // setup the THREE.AnimationMixer + mixer = new THREE.AnimationMixer(mesh); + + // create a ClipAction and set it to play + const clipAction = mixer.clipAction(clip); + clipAction.play(); + + // + + renderer = new THREE.WebGLRenderer({ antialias: true }); + renderer.setPixelRatio(window.devicePixelRatio); + renderer.setSize(window.innerWidth, window.innerHeight); + document.body.appendChild(renderer.domElement); + + // + + stats = new Stats(); + document.body.appendChild(stats.dom); + + // + + clock = new THREE.Clock(); + + // + + window.addEventListener('resize', onWindowResize); } function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); + renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { - requestAnimationFrame(animate); + requestAnimationFrame(animate); - render(); + render(); } function render() { - const delta = clock.getDelta(); + const delta = clock.getDelta(); - if (mixer) { - mixer.update(delta); - } + if (mixer) { + mixer.update(delta); + } - renderer.render(scene, camera); + renderer.render(scene, camera); - stats.update(); + stats.update(); } diff --git a/examples-testing/examples/misc_boxselection.ts b/examples-testing/examples/misc_boxselection.ts index ab31b0e58..a78c71b31 100644 --- a/examples-testing/examples/misc_boxselection.ts +++ b/examples-testing/examples/misc_boxselection.ts @@ -1,9 +1,9 @@ -import * as THREE from "three"; +import * as THREE from 'three'; -import Stats from "three/addons/libs/stats.module.js"; +import Stats from 'three/addons/libs/stats.module.js'; -import { SelectionBox } from "three/addons/interactive/SelectionBox.js"; -import { SelectionHelper } from "three/addons/interactive/SelectionHelper.js"; +import { SelectionBox } from 'three/addons/interactive/SelectionBox.js'; +import { SelectionHelper } from 'three/addons/interactive/SelectionHelper.js'; let container, stats; let camera, scene, renderer; @@ -12,140 +12,132 @@ init(); animate(); function init() { - container = document.createElement("div"); - document.body.appendChild(container); + container = document.createElement('div'); + document.body.appendChild(container); - camera = new THREE.PerspectiveCamera( - 70, - window.innerWidth / window.innerHeight, - 1, - 5000 - ); - camera.position.z = 1000; + 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 = new THREE.Scene(); + scene.background = new THREE.Color(0xf0f0f0); - scene.add(new THREE.AmbientLight(0x505050)); + 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; + 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; + 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); + scene.add(light); - const geometry = new THREE.BoxGeometry(20, 20, 20); + 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 }) - ); + 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.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.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.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; + object.castShadow = true; + object.receiveShadow = true; - scene.add(object); - } + scene.add(object); + } - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); + 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; + renderer.shadowMap.enabled = true; + renderer.shadowMap.type = THREE.PCFShadowMap; - container.appendChild(renderer.domElement); + container.appendChild(renderer.domElement); - stats = new Stats(); - container.appendChild(stats.dom); + stats = new Stats(); + container.appendChild(stats.dom); - window.addEventListener("resize", onWindowResize); + window.addEventListener('resize', onWindowResize); } function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); + renderer.setSize(window.innerWidth, window.innerHeight); } // function animate() { - requestAnimationFrame(animate); + requestAnimationFrame(animate); - render(); - stats.update(); + render(); + stats.update(); } function render() { - renderer.render(scene, camera); + renderer.render(scene, camera); } const selectionBox = new SelectionBox(camera, scene); -const helper = new SelectionHelper(renderer, "selectBox"); - -document.addEventListener("pointerdown", function (event) { - for (const item of selectionBox.collection) { - item.material.emissive.set(0x000000); - } - - selectionBox.startPoint.set( - (event.clientX / window.innerWidth) * 2 - 1, - -(event.clientY / window.innerHeight) * 2 + 1, - 0.5 - ); -}); +const helper = new SelectionHelper(renderer, 'selectBox'); -document.addEventListener("pointermove", function (event) { - if (helper.isDown) { - for (let i = 0; i < selectionBox.collection.length; i++) { - selectionBox.collection[i].material.emissive.set(0x000000); +document.addEventListener('pointerdown', function (event) { + for (const item of selectionBox.collection) { + item.material.emissive.set(0x000000); } - selectionBox.endPoint.set( - (event.clientX / window.innerWidth) * 2 - 1, - -(event.clientY / window.innerHeight) * 2 + 1, - 0.5 + selectionBox.startPoint.set( + (event.clientX / window.innerWidth) * 2 - 1, + -(event.clientY / window.innerHeight) * 2 + 1, + 0.5, ); +}); - const allSelected = selectionBox.select(); +document.addEventListener('pointermove', function (event) { + if (helper.isDown) { + for (let i = 0; i < selectionBox.collection.length; i++) { + selectionBox.collection[i].material.emissive.set(0x000000); + } - for (let i = 0; i < allSelected.length; i++) { - allSelected[i].material.emissive.set(0xffffff); + selectionBox.endPoint.set( + (event.clientX / window.innerWidth) * 2 - 1, + -(event.clientY / window.innerHeight) * 2 + 1, + 0.5, + ); + + const allSelected = selectionBox.select(); + + for (let i = 0; i < allSelected.length; i++) { + allSelected[i].material.emissive.set(0xffffff); + } } - } }); -document.addEventListener("pointerup", function (event) { - selectionBox.endPoint.set( - (event.clientX / window.innerWidth) * 2 - 1, - -(event.clientY / window.innerHeight) * 2 + 1, - 0.5 - ); +document.addEventListener('pointerup', function (event) { + selectionBox.endPoint.set( + (event.clientX / window.innerWidth) * 2 - 1, + -(event.clientY / window.innerHeight) * 2 + 1, + 0.5, + ); - const allSelected = selectionBox.select(); + const allSelected = selectionBox.select(); - for (let i = 0; i < allSelected.length; i++) { - allSelected[i].material.emissive.set(0xffffff); - } + for (let i = 0; i < allSelected.length; i++) { + allSelected[i].material.emissive.set(0xffffff); + } }); diff --git a/examples-testing/examples/misc_controls_arcball.ts b/examples-testing/examples/misc_controls_arcball.ts index 6deca2a80..f7ea233de 100644 --- a/examples-testing/examples/misc_controls_arcball.ts +++ b/examples-testing/examples/misc_controls_arcball.ts @@ -1,14 +1,14 @@ -import * as THREE from "three"; +import * as THREE from 'three'; -import { GUI } from "three/addons/libs/lil-gui.module.min.js"; +import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; -import { ArcballControls } from "three/addons/controls/ArcballControls.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"; +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 cameras = ['Orthographic', 'Perspective']; +const cameraType = { type: 'Perspective' }; const perspectiveDistance = 2.5; const orthographicDistance = 120; @@ -16,221 +16,197 @@ let camera, controls, scene, renderer, gui; let folderOptions, folderAnimations; 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, "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"); - }, + 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, '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); + 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 = 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); + 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)); + scene = new THREE.Scene(); + scene.add(new THREE.HemisphereLight(0x443333, 0x222233, 4)); - camera = makePerspectiveCamera(); - camera.position.set(0, 0, perspectiveDistance); + camera = makePerspectiveCamera(); + camera.position.set(0, 0, perspectiveDistance); - const material = new THREE.MeshStandardMaterial(); + 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/" - ); + 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; + material.roughness = 1; + material.metalness = 1; - const diffuseMap = textureLoader.load("Cerberus_A.jpg", render); - diffuseMap.colorSpace = THREE.SRGBColorSpace; - material.map = diffuseMap; + 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.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; + 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.isMesh) { - child.material = material; - } - }); + group.traverse(function (child) { + if (child.isMesh) { + child.material = material; + } + }); - group.rotation.y = Math.PI / 2; - group.position.x += 0.25; - scene.add(group); - render(); + 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; + new RGBELoader().setPath('textures/equirectangular/').load('venice_sunset_1k.hdr', function (hdrEquirect) { + hdrEquirect.mapping = THREE.EquirectangularReflectionMapping; - scene.environment = hdrEquirect; + scene.environment = hdrEquirect; - render(); + render(); }); - window.addEventListener("keydown", onKeyDown); - window.addEventListener("resize", onWindowResize); + window.addEventListener('keydown', onKeyDown); + window.addEventListener('resize', onWindowResize); - // + // - gui = new GUI(); - gui - .add(cameraType, "type", cameras) - .name("Choose Camera") - .onChange(function () { - setCamera(cameraType.type); - }); + 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"); + folderOptions = gui.addFolder('Arcball parameters'); + folderAnimations = folderOptions.addFolder('Animations'); - arcballGui.setArcballControls(); + arcballGui.setArcballControls(); - render(); + 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; + 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; + 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.left = -halfW; - camera.right = halfW; - camera.top = halfH; - camera.bottom = -halfH; - } else if (camera.type == "PerspectiveCamera") { - camera.aspect = window.innerWidth / window.innerHeight; - } + 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.left = -halfW; + camera.right = halfW; + camera.top = halfH; + camera.bottom = -halfH; + } else if (camera.type == 'PerspectiveCamera') { + camera.aspect = window.innerWidth / window.innerHeight; + } - camera.updateProjectionMatrix(); + camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); + renderer.setSize(window.innerWidth, window.innerHeight); - render(); + render(); } function render() { - renderer.render(scene, camera); + renderer.render(scene, camera); } function onKeyDown(event) { - if (event.key === "c") { - if (event.ctrlKey || event.metaKey) { - controls.copyState(); - } - } else if (event.key === "v") { - if (event.ctrlKey || event.metaKey) { - controls.pasteState(); + 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) { - if (type == "Orthographic") { - camera = makeOrthographicCamera(); - camera.position.set(0, 0, orthographicDistance); - } else if (type == "Perspective") { - camera = makePerspectiveCamera(); - camera.position.set(0, 0, perspectiveDistance); - } + 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); + controls.setCamera(camera); - render(); + render(); } diff --git a/examples-testing/examples/misc_controls_drag.ts b/examples-testing/examples/misc_controls_drag.ts index af1e3afbd..da4bd2431 100644 --- a/examples-testing/examples/misc_controls_drag.ts +++ b/examples-testing/examples/misc_controls_drag.ts @@ -1,6 +1,6 @@ -import * as THREE from "three"; +import * as THREE from 'three'; -import { DragControls } from "three/addons/controls/DragControls.js"; +import { DragControls } from 'three/addons/controls/DragControls.js'; let container; let camera, scene, renderer; @@ -10,148 +10,140 @@ let enableSelection = false; const objects = []; const mouse = new THREE.Vector2(), - raycaster = new THREE.Raycaster(); + raycaster = new THREE.Raycaster(); init(); function init() { - container = document.createElement("div"); - document.body.appendChild(container); + container = document.createElement('div'); + document.body.appendChild(container); - camera = new THREE.PerspectiveCamera( - 70, - window.innerWidth / window.innerHeight, - 1, - 5000 - ); - camera.position.z = 1000; + 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 = new THREE.Scene(); + scene.background = new THREE.Color(0xf0f0f0); - scene.add(new THREE.AmbientLight(0x505050)); + 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; + 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; + 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); + scene.add(light); - group = new THREE.Group(); - scene.add(group); + group = new THREE.Group(); + scene.add(group); - const geometry = new THREE.BoxGeometry(40, 40, 40); + 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 }) - ); + 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.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.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.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; + object.castShadow = true; + object.receiveShadow = true; - scene.add(object); + scene.add(object); - objects.push(object); - } + objects.push(object); + } - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); + 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; + renderer.shadowMap.enabled = true; + renderer.shadowMap.type = THREE.PCFShadowMap; - container.appendChild(renderer.domElement); + container.appendChild(renderer.domElement); - controls = new DragControls([...objects], camera, renderer.domElement); - controls.addEventListener("drag", render); + controls = new DragControls([...objects], camera, renderer.domElement); + controls.addEventListener('drag', render); - // + // - window.addEventListener("resize", onWindowResize); + window.addEventListener('resize', onWindowResize); - document.addEventListener("click", onClick); - window.addEventListener("keydown", onKeyDown); - window.addEventListener("keyup", onKeyUp); + document.addEventListener('click', onClick); + window.addEventListener('keydown', onKeyDown); + window.addEventListener('keyup', onKeyUp); - render(); + render(); } function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); + renderer.setSize(window.innerWidth, window.innerHeight); - render(); + render(); } function onKeyDown(event) { - enableSelection = event.keyCode === 16 ? true : false; + enableSelection = event.keyCode === 16 ? true : false; } function onKeyUp() { - enableSelection = false; + enableSelection = false; } function onClick(event) { - event.preventDefault(); + event.preventDefault(); - if (enableSelection === true) { - const draggableObjects = controls.getObjects(); - draggableObjects.length = 0; + if (enableSelection === true) { + const draggableObjects = controls.getObjects(); + draggableObjects.length = 0; - mouse.x = (event.clientX / window.innerWidth) * 2 - 1; - mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; + mouse.x = (event.clientX / window.innerWidth) * 2 - 1; + mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; - raycaster.setFromCamera(mouse, camera); + raycaster.setFromCamera(mouse, camera); - const intersections = raycaster.intersectObjects(objects, true); + const intersections = raycaster.intersectObjects(objects, true); - if (intersections.length > 0) { - const object = intersections[0].object; + if (intersections.length > 0) { + const object = intersections[0].object; - if (group.children.includes(object) === true) { - object.material.emissive.set(0x000000); - scene.attach(object); - } else { - object.material.emissive.set(0xaaaaaa); - group.attach(object); - } + if (group.children.includes(object) === true) { + object.material.emissive.set(0x000000); + scene.attach(object); + } else { + object.material.emissive.set(0xaaaaaa); + group.attach(object); + } - controls.transformGroup = true; - draggableObjects.push(group); - } + controls.transformGroup = true; + draggableObjects.push(group); + } - if (group.children.length === 0) { - controls.transformGroup = false; - draggableObjects.push(...objects); + if (group.children.length === 0) { + controls.transformGroup = false; + draggableObjects.push(...objects); + } } - } - render(); + render(); } function render() { - renderer.render(scene, camera); + renderer.render(scene, camera); } diff --git a/examples-testing/examples/misc_controls_map.ts b/examples-testing/examples/misc_controls_map.ts index 964bca835..35e03d2cf 100644 --- a/examples-testing/examples/misc_controls_map.ts +++ b/examples-testing/examples/misc_controls_map.ts @@ -1,8 +1,8 @@ -import * as THREE from "three"; +import * as THREE from 'three'; -import { GUI } from "three/addons/libs/lil-gui.module.min.js"; +import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; -import { MapControls } from "three/addons/controls/MapControls.js"; +import { MapControls } from 'three/addons/controls/MapControls.js'; let camera, controls, scene, renderer; @@ -11,97 +11,89 @@ init(); animate(); function init() { - scene = new THREE.Scene(); - scene.background = new THREE.Color(0xcccccc); - scene.fog = new THREE.FogExp2(0xcccccc, 0.002); + scene = new THREE.Scene(); + scene.background = new THREE.Color(0xcccccc); + scene.fog = new THREE.FogExp2(0xcccccc, 0.002); - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - document.body.appendChild(renderer.domElement); + renderer = new THREE.WebGLRenderer({ antialias: true }); + renderer.setPixelRatio(window.devicePixelRatio); + renderer.setSize(window.innerWidth, window.innerHeight); + document.body.appendChild(renderer.domElement); - camera = new THREE.PerspectiveCamera( - 60, - window.innerWidth / window.innerHeight, - 1, - 1000 - ); - camera.position.set(400, 200, 0); + camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000); + camera.position.set(400, 200, 0); - // controls + // controls - controls = new MapControls(camera, renderer.domElement); + controls = new MapControls(camera, renderer.domElement); - //controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop) + //controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop) - controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled - controls.dampingFactor = 0.05; + controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled + controls.dampingFactor = 0.05; - controls.screenSpacePanning = false; + controls.screenSpacePanning = false; - controls.minDistance = 100; - controls.maxDistance = 500; + controls.minDistance = 100; + controls.maxDistance = 500; - controls.maxPolarAngle = Math.PI / 2; + controls.maxPolarAngle = Math.PI / 2; - // world + // world - const geometry = new THREE.BoxGeometry(1, 1, 1); - geometry.translate(0, 0.5, 0); - const material = new THREE.MeshPhongMaterial({ - color: 0xeeeeee, - flatShading: true, - }); + const geometry = new THREE.BoxGeometry(1, 1, 1); + geometry.translate(0, 0.5, 0); + const material = new THREE.MeshPhongMaterial({ color: 0xeeeeee, flatShading: true }); - for (let i = 0; i < 500; i++) { - const mesh = new THREE.Mesh(geometry, material); - mesh.position.x = Math.random() * 1600 - 800; - mesh.position.y = 0; - mesh.position.z = Math.random() * 1600 - 800; - mesh.scale.x = 20; - mesh.scale.y = Math.random() * 80 + 10; - mesh.scale.z = 20; - mesh.updateMatrix(); - mesh.matrixAutoUpdate = false; - scene.add(mesh); - } + for (let i = 0; i < 500; i++) { + const mesh = new THREE.Mesh(geometry, material); + mesh.position.x = Math.random() * 1600 - 800; + mesh.position.y = 0; + mesh.position.z = Math.random() * 1600 - 800; + mesh.scale.x = 20; + mesh.scale.y = Math.random() * 80 + 10; + mesh.scale.z = 20; + mesh.updateMatrix(); + mesh.matrixAutoUpdate = false; + scene.add(mesh); + } - // lights + // lights - const dirLight1 = new THREE.DirectionalLight(0xffffff); - dirLight1.position.set(1, 1, 1); - scene.add(dirLight1); + const dirLight1 = new THREE.DirectionalLight(0xffffff); + dirLight1.position.set(1, 1, 1); + scene.add(dirLight1); - const dirLight2 = new THREE.DirectionalLight(0x002288); - dirLight2.position.set(-1, -1, -1); - scene.add(dirLight2); + const dirLight2 = new THREE.DirectionalLight(0x002288); + dirLight2.position.set(-1, -1, -1); + scene.add(dirLight2); - const ambientLight = new THREE.AmbientLight(0x222222); - scene.add(ambientLight); + const ambientLight = new THREE.AmbientLight(0x222222); + scene.add(ambientLight); - // + // - window.addEventListener("resize", onWindowResize); + window.addEventListener('resize', onWindowResize); - const gui = new GUI(); - gui.add(controls, "screenSpacePanning"); + const gui = new GUI(); + gui.add(controls, 'screenSpacePanning'); } function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); + renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { - requestAnimationFrame(animate); + requestAnimationFrame(animate); - controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true + controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true - render(); + render(); } function render() { - renderer.render(scene, camera); + renderer.render(scene, camera); } diff --git a/examples-testing/examples/misc_controls_orbit.ts b/examples-testing/examples/misc_controls_orbit.ts index e2e3500a9..28bc3c01e 100644 --- a/examples-testing/examples/misc_controls_orbit.ts +++ b/examples-testing/examples/misc_controls_orbit.ts @@ -1,6 +1,6 @@ -import * as THREE from "three"; +import * as THREE from 'three'; -import { OrbitControls } from "three/addons/controls/OrbitControls.js"; +import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; let camera, controls, scene, renderer; @@ -9,91 +9,83 @@ init(); animate(); function init() { - scene = new THREE.Scene(); - scene.background = new THREE.Color(0xcccccc); - scene.fog = new THREE.FogExp2(0xcccccc, 0.002); + scene = new THREE.Scene(); + scene.background = new THREE.Color(0xcccccc); + scene.fog = new THREE.FogExp2(0xcccccc, 0.002); - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - document.body.appendChild(renderer.domElement); + renderer = new THREE.WebGLRenderer({ antialias: true }); + renderer.setPixelRatio(window.devicePixelRatio); + renderer.setSize(window.innerWidth, window.innerHeight); + document.body.appendChild(renderer.domElement); - camera = new THREE.PerspectiveCamera( - 60, - window.innerWidth / window.innerHeight, - 1, - 1000 - ); - camera.position.set(400, 200, 0); + camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000); + camera.position.set(400, 200, 0); - // controls + // controls - controls = new OrbitControls(camera, renderer.domElement); - controls.listenToKeyEvents(window); // optional + controls = new OrbitControls(camera, renderer.domElement); + controls.listenToKeyEvents(window); // optional - //controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop) + //controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop) - controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled - controls.dampingFactor = 0.05; + controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled + controls.dampingFactor = 0.05; - controls.screenSpacePanning = false; + controls.screenSpacePanning = false; - controls.minDistance = 100; - controls.maxDistance = 500; + controls.minDistance = 100; + controls.maxDistance = 500; - controls.maxPolarAngle = Math.PI / 2; + controls.maxPolarAngle = Math.PI / 2; - // world + // world - const geometry = new THREE.CylinderGeometry(0, 10, 30, 4, 1); - const material = new THREE.MeshPhongMaterial({ - color: 0xffffff, - flatShading: true, - }); + const geometry = new THREE.CylinderGeometry(0, 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() * 1600 - 800; - mesh.position.y = 0; - mesh.position.z = Math.random() * 1600 - 800; - mesh.updateMatrix(); - mesh.matrixAutoUpdate = false; - scene.add(mesh); - } + for (let i = 0; i < 500; i++) { + const mesh = new THREE.Mesh(geometry, material); + mesh.position.x = Math.random() * 1600 - 800; + mesh.position.y = 0; + mesh.position.z = Math.random() * 1600 - 800; + mesh.updateMatrix(); + mesh.matrixAutoUpdate = false; + scene.add(mesh); + } - // lights + // lights - const dirLight1 = new THREE.DirectionalLight(0xffffff); - dirLight1.position.set(1, 1, 1); - scene.add(dirLight1); + const dirLight1 = new THREE.DirectionalLight(0xffffff); + dirLight1.position.set(1, 1, 1); + scene.add(dirLight1); - const dirLight2 = new THREE.DirectionalLight(0x002288); - dirLight2.position.set(-1, -1, -1); - scene.add(dirLight2); + const dirLight2 = new THREE.DirectionalLight(0x002288); + dirLight2.position.set(-1, -1, -1); + scene.add(dirLight2); - const ambientLight = new THREE.AmbientLight(0x222222); - scene.add(ambientLight); + const ambientLight = new THREE.AmbientLight(0x222222); + scene.add(ambientLight); - // + // - window.addEventListener("resize", onWindowResize); + window.addEventListener('resize', onWindowResize); } function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); + renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { - requestAnimationFrame(animate); + requestAnimationFrame(animate); - controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true + controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true - render(); + render(); } function render() { - renderer.render(scene, camera); + renderer.render(scene, camera); } diff --git a/examples-testing/examples/misc_controls_pointerlock.ts b/examples-testing/examples/misc_controls_pointerlock.ts index 53d565798..d29ffaff6 100644 --- a/examples-testing/examples/misc_controls_pointerlock.ts +++ b/examples-testing/examples/misc_controls_pointerlock.ts @@ -1,6 +1,6 @@ -import * as THREE from "three"; +import * as THREE from 'three'; -import { PointerLockControls } from "three/addons/controls/PointerLockControls.js"; +import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js'; let camera, scene, renderer, controls; @@ -24,259 +24,224 @@ 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", function () { - controls.lock(); - }); - - controls.addEventListener("lock", function () { - instructions.style.display = "none"; - blocker.style.display = "none"; - }); - - controls.addEventListener("unlock", function () { - blocker.style.display = "block"; - instructions.style.display = ""; - }); - - scene.add(controls.getObject()); - - const onKeyDown = function (event) { - 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 === true) velocity.y += 350; - canJump = false; - break; - } - }; - - const onKeyUp = function (event) { - 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; - } - }; + camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000); + camera.position.y = 10; - document.addEventListener("keydown", onKeyDown); - document.addEventListener("keyup", onKeyUp); + scene = new THREE.Scene(); + scene.background = new THREE.Color(0xffffff); + scene.fog = new THREE.Fog(0xffffff, 0, 750); - raycaster = new THREE.Raycaster( - new THREE.Vector3(), - new THREE.Vector3(0, -1, 0), - 0, - 10 - ); + const light = new THREE.HemisphereLight(0xeeeeff, 0x777788, 0.75); + light.position.set(0.5, 1, 0.75); + scene.add(light); - // floor + controls = new PointerLockControls(camera, document.body); - let floorGeometry = new THREE.PlaneGeometry(2000, 2000, 100, 100); - floorGeometry.rotateX(-Math.PI / 2); + const blocker = document.getElementById('blocker'); + const instructions = document.getElementById('instructions'); - // vertex displacement + instructions.addEventListener('click', function () { + controls.lock(); + }); - let position = floorGeometry.attributes.position; + controls.addEventListener('lock', function () { + instructions.style.display = 'none'; + blocker.style.display = 'none'; + }); - for (let i = 0, l = position.count; i < l; i++) { - vertex.fromBufferAttribute(position, i); + controls.addEventListener('unlock', function () { + blocker.style.display = 'block'; + instructions.style.display = ''; + }); - vertex.x += Math.random() * 20 - 10; - vertex.y += Math.random() * 2; - vertex.z += Math.random() * 20 - 10; + scene.add(controls.getObject()); - position.setXYZ(i, vertex.x, vertex.y, vertex.z); - } + const onKeyDown = function (event) { + switch (event.code) { + case 'ArrowUp': + case 'KeyW': + moveForward = true; + break; - floorGeometry = floorGeometry.toNonIndexed(); // ensure each face has unique vertices + case 'ArrowLeft': + case 'KeyA': + moveLeft = true; + break; - position = floorGeometry.attributes.position; - const colorsFloor = []; + case 'ArrowDown': + case 'KeyS': + moveBackward = true; + break; - 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, - THREE.SRGBColorSpace - ); - colorsFloor.push(color.r, color.g, color.b); - } + case 'ArrowRight': + case 'KeyD': + moveRight = true; + break; - floorGeometry.setAttribute( - "color", - new THREE.Float32BufferAttribute(colorsFloor, 3) - ); + case 'Space': + if (canJump === true) velocity.y += 350; + canJump = false; + break; + } + }; - const floorMaterial = new THREE.MeshBasicMaterial({ vertexColors: true }); + const onKeyUp = function (event) { + switch (event.code) { + case 'ArrowUp': + case 'KeyW': + moveForward = false; + break; - const floor = new THREE.Mesh(floorGeometry, floorMaterial); - scene.add(floor); + case 'ArrowLeft': + case 'KeyA': + moveLeft = false; + break; - // objects + case 'ArrowDown': + case 'KeyS': + moveBackward = false; + break; - const boxGeometry = new THREE.BoxGeometry(20, 20, 20).toNonIndexed(); + case 'ArrowRight': + case 'KeyD': + moveRight = false; + break; + } + }; - position = boxGeometry.attributes.position; - const colorsBox = []; + document.addEventListener('keydown', onKeyDown); + document.addEventListener('keyup', onKeyUp); - 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, - THREE.SRGBColorSpace - ); - colorsBox.push(color.r, color.g, color.b); - } + raycaster = new THREE.Raycaster(new THREE.Vector3(), new THREE.Vector3(0, -1, 0), 0, 10); - boxGeometry.setAttribute( - "color", - new THREE.Float32BufferAttribute(colorsBox, 3) - ); + // floor - 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, - THREE.SRGBColorSpace - ); + let 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); + } + + floorGeometry = floorGeometry.toNonIndexed(); // ensure each face has unique vertices + + position = floorGeometry.attributes.position; + const colorsFloor = []; - 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; + 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, THREE.SRGBColorSpace); + colorsFloor.push(color.r, color.g, color.b); + } + + floorGeometry.setAttribute('color', new THREE.Float32BufferAttribute(colorsFloor, 3)); + + const floorMaterial = new THREE.MeshBasicMaterial({ vertexColors: true }); + + const floor = new THREE.Mesh(floorGeometry, floorMaterial); + scene.add(floor); + + // objects + + const boxGeometry = new THREE.BoxGeometry(20, 20, 20).toNonIndexed(); + + position = boxGeometry.attributes.position; + const colorsBox = []; - scene.add(box); - objects.push(box); - } + 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, THREE.SRGBColorSpace); + 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, THREE.SRGBColorSpace); - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - document.body.appendChild(renderer.domElement); + 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); + } - // + // - window.addEventListener("resize", onWindowResize); + 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(); + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); + renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { - requestAnimationFrame(animate); + requestAnimationFrame(animate); - const time = performance.now(); + const time = performance.now(); - if (controls.isLocked === true) { - raycaster.ray.origin.copy(controls.getObject().position); - raycaster.ray.origin.y -= 10; + if (controls.isLocked === true) { + raycaster.ray.origin.copy(controls.getObject().position); + raycaster.ray.origin.y -= 10; - const intersections = raycaster.intersectObjects(objects, false); + const intersections = raycaster.intersectObjects(objects, false); - const onObject = intersections.length > 0; + const onObject = intersections.length > 0; - const delta = (time - prevTime) / 1000; + const delta = (time - prevTime) / 1000; - velocity.x -= velocity.x * 10.0 * delta; - velocity.z -= velocity.z * 10.0 * delta; + velocity.x -= velocity.x * 10.0 * delta; + velocity.z -= velocity.z * 10.0 * delta; - velocity.y -= 9.8 * 100.0 * delta; // 100.0 = mass + 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 + 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 (moveForward || moveBackward) velocity.z -= direction.z * 400.0 * delta; + if (moveLeft || moveRight) velocity.x -= direction.x * 400.0 * delta; - if (onObject === true) { - velocity.y = Math.max(0, velocity.y); - canJump = true; - } + if (onObject === true) { + velocity.y = Math.max(0, velocity.y); + canJump = true; + } - controls.moveRight(-velocity.x * delta); - controls.moveForward(-velocity.z * delta); + controls.moveRight(-velocity.x * delta); + controls.moveForward(-velocity.z * delta); - controls.getObject().position.y += velocity.y * delta; // new behavior + controls.getObject().position.y += velocity.y * delta; // new behavior - if (controls.getObject().position.y < 10) { - velocity.y = 0; - controls.getObject().position.y = 10; + if (controls.getObject().position.y < 10) { + velocity.y = 0; + controls.getObject().position.y = 10; - canJump = true; + canJump = true; + } } - } - prevTime = time; + prevTime = time; - renderer.render(scene, camera); + renderer.render(scene, camera); } diff --git a/examples-testing/examples/misc_controls_trackball.ts b/examples-testing/examples/misc_controls_trackball.ts index 73dece674..19c42c6a7 100644 --- a/examples-testing/examples/misc_controls_trackball.ts +++ b/examples-testing/examples/misc_controls_trackball.ts @@ -1,14 +1,14 @@ -import * as THREE from "three"; +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 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"; +import { TrackballControls } from 'three/addons/controls/TrackballControls.js'; let perspectiveCamera, orthographicCamera, controls, scene, renderer, stats; const params = { - orthographicCamera: false, + orthographicCamera: false, }; const frustumSize = 400; @@ -17,126 +17,120 @@ init(); animate(); function init() { - const aspect = window.innerWidth / window.innerHeight; + const aspect = window.innerWidth / window.innerHeight; - perspectiveCamera = new THREE.PerspectiveCamera(60, aspect, 1, 1000); - perspectiveCamera.position.z = 500; + 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; + orthographicCamera = new THREE.OrthographicCamera( + (frustumSize * aspect) / -2, + (frustumSize * aspect) / 2, + frustumSize / 2, + frustumSize / -2, + 1, + 1000, + ); + orthographicCamera.position.z = 500; - // world + // world - scene = new THREE.Scene(); - scene.background = new THREE.Color(0xcccccc); - scene.fog = new THREE.FogExp2(0xcccccc, 0.002); + scene = new THREE.Scene(); + scene.background = new THREE.Color(0xcccccc); + scene.fog = new THREE.FogExp2(0xcccccc, 0.002); - const geometry = new THREE.CylinderGeometry(0, 10, 30, 4, 1); - const material = new THREE.MeshPhongMaterial({ - color: 0xffffff, - flatShading: true, - }); + const geometry = new THREE.CylinderGeometry(0, 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); - } + 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 + // lights - const dirLight1 = new THREE.DirectionalLight(0xffffff); - dirLight1.position.set(1, 1, 1); - scene.add(dirLight1); + const dirLight1 = new THREE.DirectionalLight(0xffffff); + dirLight1.position.set(1, 1, 1); + scene.add(dirLight1); - const dirLight2 = new THREE.DirectionalLight(0x002288); - dirLight2.position.set(-1, -1, -1); - scene.add(dirLight2); + const dirLight2 = new THREE.DirectionalLight(0x002288); + dirLight2.position.set(-1, -1, -1); + scene.add(dirLight2); - const ambientLight = new THREE.AmbientLight(0x222222); - scene.add(ambientLight); + const ambientLight = new THREE.AmbientLight(0x222222); + scene.add(ambientLight); - // renderer + // renderer - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - document.body.appendChild(renderer.domElement); + renderer = new THREE.WebGLRenderer({ antialias: true }); + renderer.setPixelRatio(window.devicePixelRatio); + renderer.setSize(window.innerWidth, window.innerHeight); + document.body.appendChild(renderer.domElement); - stats = new Stats(); - document.body.appendChild(stats.dom); + stats = new Stats(); + document.body.appendChild(stats.dom); - // + // - const gui = new GUI(); - gui - .add(params, "orthographicCamera") - .name("use orthographic") - .onChange(function (value) { - controls.dispose(); + const gui = new GUI(); + gui.add(params, 'orthographicCamera') + .name('use orthographic') + .onChange(function (value) { + controls.dispose(); - createControls(value ? orthographicCamera : perspectiveCamera); - }); + createControls(value ? orthographicCamera : perspectiveCamera); + }); - // + // - window.addEventListener("resize", onWindowResize); + window.addEventListener('resize', onWindowResize); - createControls(perspectiveCamera); + createControls(perspectiveCamera); } function createControls(camera) { - controls = new TrackballControls(camera, renderer.domElement); + controls = new TrackballControls(camera, renderer.domElement); - controls.rotateSpeed = 1.0; - controls.zoomSpeed = 1.2; - controls.panSpeed = 0.8; + controls.rotateSpeed = 1.0; + controls.zoomSpeed = 1.2; + controls.panSpeed = 0.8; - controls.keys = ["KeyA", "KeyS", "KeyD"]; + controls.keys = ['KeyA', 'KeyS', 'KeyD']; } function onWindowResize() { - const aspect = window.innerWidth / window.innerHeight; + const aspect = window.innerWidth / window.innerHeight; - perspectiveCamera.aspect = aspect; - perspectiveCamera.updateProjectionMatrix(); + 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(); + 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); + renderer.setSize(window.innerWidth, window.innerHeight); - controls.handleResize(); + controls.handleResize(); } function animate() { - requestAnimationFrame(animate); + requestAnimationFrame(animate); - controls.update(); + controls.update(); - stats.update(); + stats.update(); - render(); + render(); } function render() { - const camera = params.orthographicCamera - ? orthographicCamera - : perspectiveCamera; + const camera = params.orthographicCamera ? orthographicCamera : perspectiveCamera; - renderer.render(scene, camera); + renderer.render(scene, camera); } diff --git a/examples-testing/examples/misc_controls_transform.ts b/examples-testing/examples/misc_controls_transform.ts index af9ed85c0..aa4de6f31 100644 --- a/examples-testing/examples/misc_controls_transform.ts +++ b/examples-testing/examples/misc_controls_transform.ts @@ -1,7 +1,7 @@ -import * as THREE from "three"; +import * as THREE from 'three'; -import { OrbitControls } from "three/addons/controls/OrbitControls.js"; -import { TransformControls } from "three/addons/controls/TransformControls.js"; +import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; +import { TransformControls } from 'three/addons/controls/TransformControls.js'; let cameraPersp, cameraOrtho, currentCamera; let scene, renderer, control, orbit; @@ -10,173 +10,161 @@ 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.colorSpace = THREE.SRGBColorSpace; - 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", function (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", function (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.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; - - case 27: // Esc - control.reset(); - break; - } - }); - - window.addEventListener("keyup", function (event) { - switch (event.keyCode) { - case 16: // Shift - control.setTranslationSnap(null); - control.setRotationSnap(null); - control.setScaleSnap(null); - break; - } - }); + 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.colorSpace = THREE.SRGBColorSpace; + 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', function (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', function (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.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; + + case 27: // Esc + control.reset(); + break; + } + }); + + window.addEventListener('keyup', function (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; + const aspect = window.innerWidth / window.innerHeight; - cameraPersp.aspect = aspect; - cameraPersp.updateProjectionMatrix(); + cameraPersp.aspect = aspect; + cameraPersp.updateProjectionMatrix(); - cameraOrtho.left = cameraOrtho.bottom * aspect; - cameraOrtho.right = cameraOrtho.top * aspect; - cameraOrtho.updateProjectionMatrix(); + cameraOrtho.left = cameraOrtho.bottom * aspect; + cameraOrtho.right = cameraOrtho.top * aspect; + cameraOrtho.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); + renderer.setSize(window.innerWidth, window.innerHeight); - render(); + render(); } function render() { - renderer.render(scene, currentCamera); + renderer.render(scene, currentCamera); } diff --git a/examples-testing/examples/misc_exporter_draco.ts b/examples-testing/examples/misc_exporter_draco.ts index 242a6a5ed..ce1e69673 100644 --- a/examples-testing/examples/misc_exporter_draco.ts +++ b/examples-testing/examples/misc_exporter_draco.ts @@ -1,125 +1,120 @@ -import * as THREE from "three"; +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"; +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, camera, renderer, exporter, mesh; const params = { - export: exportFile, + export: exportFile, }; init(); animate(); function init() { - camera = new THREE.PerspectiveCamera( - 45, - window.innerWidth / window.innerHeight, - 1, - 1000 - ); - camera.position.set(200, 100, 200); - - scene = new THREE.Scene(); - scene.background = new THREE.Color(0xa0a0a0); - scene.fog = new THREE.Fog(0xa0a0a0, 200, 1000); - - exporter = new DRACOExporter(); - - // - - const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444); - hemiLight.position.set(0, 200, 0); - scene.add(hemiLight); - - const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); - directionalLight.position.set(0, 200, 100); - directionalLight.castShadow = true; - directionalLight.shadow.camera.top = 180; - directionalLight.shadow.camera.bottom = -100; - directionalLight.shadow.camera.left = -120; - directionalLight.shadow.camera.right = 120; - scene.add(directionalLight); - - // ground - - const ground = new THREE.Mesh( - new THREE.PlaneGeometry(2000, 2000), - new THREE.MeshPhongMaterial({ color: 0xbbbbbb, depthWrite: false }) - ); - ground.rotation.x = -Math.PI / 2; - ground.position.y = -75; - ground.receiveShadow = true; - scene.add(ground); - - const grid = new THREE.GridHelper(2000, 20, 0x000000, 0x000000); - grid.material.opacity = 0.2; - grid.material.transparent = true; - grid.position.y = -75; - scene.add(grid); - - // export mesh - - const geometry = new THREE.TorusKnotGeometry(50, 15, 200, 30); - const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 }); - mesh = new THREE.Mesh(geometry, material); - mesh.castShadow = true; - mesh.position.y = 25; - scene.add(mesh); - - // - - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - renderer.shadowMap.enabled = true; - document.body.appendChild(renderer.domElement); - - // - - const controls = new OrbitControls(camera, renderer.domElement); - controls.target.set(0, 25, 0); - controls.update(); - - // - - window.addEventListener("resize", onWindowResize); - - const gui = new GUI(); - - gui.add(params, "export").name("Export DRC"); - gui.open(); + camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000); + camera.position.set(200, 100, 200); + + scene = new THREE.Scene(); + scene.background = new THREE.Color(0xa0a0a0); + scene.fog = new THREE.Fog(0xa0a0a0, 200, 1000); + + exporter = new DRACOExporter(); + + // + + const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444); + hemiLight.position.set(0, 200, 0); + scene.add(hemiLight); + + const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); + directionalLight.position.set(0, 200, 100); + directionalLight.castShadow = true; + directionalLight.shadow.camera.top = 180; + directionalLight.shadow.camera.bottom = -100; + directionalLight.shadow.camera.left = -120; + directionalLight.shadow.camera.right = 120; + scene.add(directionalLight); + + // ground + + const ground = new THREE.Mesh( + new THREE.PlaneGeometry(2000, 2000), + new THREE.MeshPhongMaterial({ color: 0xbbbbbb, depthWrite: false }), + ); + ground.rotation.x = -Math.PI / 2; + ground.position.y = -75; + ground.receiveShadow = true; + scene.add(ground); + + const grid = new THREE.GridHelper(2000, 20, 0x000000, 0x000000); + grid.material.opacity = 0.2; + grid.material.transparent = true; + grid.position.y = -75; + scene.add(grid); + + // export mesh + + const geometry = new THREE.TorusKnotGeometry(50, 15, 200, 30); + const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 }); + mesh = new THREE.Mesh(geometry, material); + mesh.castShadow = true; + mesh.position.y = 25; + scene.add(mesh); + + // + + renderer = new THREE.WebGLRenderer({ antialias: true }); + renderer.setPixelRatio(window.devicePixelRatio); + renderer.setSize(window.innerWidth, window.innerHeight); + renderer.shadowMap.enabled = true; + document.body.appendChild(renderer.domElement); + + // + + const controls = new OrbitControls(camera, renderer.domElement); + controls.target.set(0, 25, 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(); + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); + renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { - requestAnimationFrame(animate); - renderer.render(scene, camera); + requestAnimationFrame(animate); + renderer.render(scene, camera); } function exportFile() { - const result = exporter.parse(mesh); - saveArrayBuffer(result, "file.drc"); + const result = exporter.parse(mesh); + saveArrayBuffer(result, 'file.drc'); } -const link = document.createElement("a"); -link.style.display = "none"; +const link = document.createElement('a'); +link.style.display = 'none'; document.body.appendChild(link); function save(blob, filename) { - link.href = URL.createObjectURL(blob); - link.download = filename; - link.click(); + link.href = URL.createObjectURL(blob); + link.download = filename; + link.click(); } function saveArrayBuffer(buffer, filename) { - save(new Blob([buffer], { type: "application/octet-stream" }), filename); + save(new Blob([buffer], { type: 'application/octet-stream' }), filename); } diff --git a/examples-testing/examples/misc_exporter_obj.ts b/examples-testing/examples/misc_exporter_obj.ts index 7dce2e5d4..02ad9072b 100644 --- a/examples-testing/examples/misc_exporter_obj.ts +++ b/examples-testing/examples/misc_exporter_obj.ts @@ -1,205 +1,194 @@ -import * as THREE from "three"; +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"; +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, scene, renderer; const params = { - addTriangle: addTriangle, - addCube: addCube, - addCylinder: addCylinder, - addMultiple: addMultiple, - addTransformed: addTransformed, - addPoints: addPoints, - exportToObj: exportToObj, + addTriangle: addTriangle, + addCube: addCube, + addCylinder: addCylinder, + addMultiple: addMultiple, + addTransformed: addTransformed, + addPoints: addPoints, + exportToObj: exportToObj, }; init(); animate(); function init() { - renderer = new THREE.WebGLRenderer(); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - document.body.appendChild(renderer.domElement); + renderer = new THREE.WebGLRenderer(); + renderer.setPixelRatio(window.devicePixelRatio); + renderer.setSize(window.innerWidth, window.innerHeight); + document.body.appendChild(renderer.domElement); - camera = new THREE.PerspectiveCamera( - 70, - window.innerWidth / window.innerHeight, - 1, - 1000 - ); - camera.position.set(0, 0, 400); + camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000); + camera.position.set(0, 0, 400); - scene = new THREE.Scene(); + scene = new THREE.Scene(); - const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4); - scene.add(ambientLight); + const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4); + scene.add(ambientLight); - const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); - directionalLight.position.set(0, 1, 1); - scene.add(directionalLight); + const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); + directionalLight.position.set(0, 1, 1); + scene.add(directionalLight); - const gui = new GUI(); + 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"); + 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"); + h = gui.addFolder('Export'); + h.add(params, 'exportToObj').name('Export OBJ'); - gui.open(); + gui.open(); - addGeometry(1); + addGeometry(1); - window.addEventListener("resize", onWindowResize); + window.addEventListener('resize', onWindowResize); - const controls = new OrbitControls(camera, renderer.domElement); - controls.enablePan = false; + 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"); + const exporter = new OBJExporter(); + const result = exporter.parse(scene); + saveString(result, 'object.obj'); } function addGeometry(type) { - for (let i = 0; i < scene.children.length; i++) { - const child = scene.children[i]; - - if (child.isMesh || child.isPoints) { - child.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; + for (let i = 0; i < scene.children.length; i++) { + const child = scene.children[i]; + + if (child.isMesh || child.isPoints) { + child.geometry.dispose(); + scene.remove(child); + i--; + } } - } 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); - } + 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); + addGeometry(1); } function addCube() { - addGeometry(2); + addGeometry(2); } function addCylinder() { - addGeometry(3); + addGeometry(3); } function addMultiple() { - addGeometry(4); + addGeometry(4); } function addTransformed() { - addGeometry(5); + addGeometry(5); } function addPoints() { - addGeometry(6); + addGeometry(6); } -const link = document.createElement("a"); -link.style.display = "none"; +const link = document.createElement('a'); +link.style.display = 'none'; document.body.appendChild(link); function save(blob, filename) { - link.href = URL.createObjectURL(blob); - link.download = filename; - link.click(); + link.href = URL.createObjectURL(blob); + link.download = filename; + link.click(); } function saveString(text, filename) { - save(new Blob([text], { type: "text/plain" }), filename); + save(new Blob([text], { type: 'text/plain' }), filename); } function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); + renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { - requestAnimationFrame(animate); + requestAnimationFrame(animate); - renderer.render(scene, camera); + renderer.render(scene, camera); } function generateTriangleGeometry() { - const geometry = new THREE.BufferGeometry(); - const vertices = []; + const geometry = new THREE.BufferGeometry(); + const vertices = []; - vertices.push(-50, -50, 0); - vertices.push(50, -50, 0); - vertices.push(50, 50, 0); + 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(); + geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3)); + geometry.computeVertexNormals(); - return geometry; + return geometry; } diff --git a/examples-testing/examples/misc_exporter_stl.ts b/examples-testing/examples/misc_exporter_stl.ts index 07bd17450..673bad138 100644 --- a/examples-testing/examples/misc_exporter_stl.ts +++ b/examples-testing/examples/misc_exporter_stl.ts @@ -1,135 +1,130 @@ -import * as THREE from "three"; +import * as THREE from 'three'; -import { OrbitControls } from "three/addons/controls/OrbitControls.js"; -import { STLExporter } from "three/addons/exporters/STLExporter.js"; -import { GUI } from "three/addons/libs/lil-gui.module.min.js"; +import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; +import { STLExporter } from 'three/addons/exporters/STLExporter.js'; +import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; let scene, camera, renderer, exporter, mesh; const params = { - exportASCII: exportASCII, - exportBinary: exportBinary, + exportASCII: exportASCII, + exportBinary: exportBinary, }; init(); animate(); function init() { - camera = new THREE.PerspectiveCamera( - 45, - window.innerWidth / window.innerHeight, - 1, - 1000 - ); - camera.position.set(200, 100, 200); + camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000); + camera.position.set(200, 100, 200); - scene = new THREE.Scene(); - scene.background = new THREE.Color(0xa0a0a0); - scene.fog = new THREE.Fog(0xa0a0a0, 200, 1000); + scene = new THREE.Scene(); + scene.background = new THREE.Color(0xa0a0a0); + scene.fog = new THREE.Fog(0xa0a0a0, 200, 1000); - exporter = new STLExporter(); + exporter = new STLExporter(); - // + // - const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444); - hemiLight.position.set(0, 200, 0); - scene.add(hemiLight); + const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444); + hemiLight.position.set(0, 200, 0); + scene.add(hemiLight); - const directionalLight = new THREE.DirectionalLight(0xffffff); - directionalLight.position.set(0, 200, 100); - directionalLight.castShadow = true; - directionalLight.shadow.camera.top = 180; - directionalLight.shadow.camera.bottom = -100; - directionalLight.shadow.camera.left = -120; - directionalLight.shadow.camera.right = 120; - scene.add(directionalLight); + const directionalLight = new THREE.DirectionalLight(0xffffff); + directionalLight.position.set(0, 200, 100); + directionalLight.castShadow = true; + directionalLight.shadow.camera.top = 180; + directionalLight.shadow.camera.bottom = -100; + directionalLight.shadow.camera.left = -120; + directionalLight.shadow.camera.right = 120; + scene.add(directionalLight); - // ground + // ground - const ground = new THREE.Mesh( - new THREE.PlaneGeometry(2000, 2000), - new THREE.MeshPhongMaterial({ color: 0xbbbbbb, depthWrite: false }) - ); - ground.rotation.x = -Math.PI / 2; - ground.receiveShadow = true; - scene.add(ground); + const ground = new THREE.Mesh( + new THREE.PlaneGeometry(2000, 2000), + new THREE.MeshPhongMaterial({ color: 0xbbbbbb, depthWrite: false }), + ); + ground.rotation.x = -Math.PI / 2; + ground.receiveShadow = true; + scene.add(ground); - const grid = new THREE.GridHelper(2000, 20, 0x000000, 0x000000); - grid.material.opacity = 0.2; - grid.material.transparent = true; - scene.add(grid); + const grid = new THREE.GridHelper(2000, 20, 0x000000, 0x000000); + grid.material.opacity = 0.2; + grid.material.transparent = true; + scene.add(grid); - // export mesh + // export mesh - const geometry = new THREE.BoxGeometry(50, 50, 50); - const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 }); + const geometry = new THREE.BoxGeometry(50, 50, 50); + const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 }); - mesh = new THREE.Mesh(geometry, material); - mesh.castShadow = true; - mesh.position.y = 25; - scene.add(mesh); + mesh = new THREE.Mesh(geometry, material); + mesh.castShadow = true; + mesh.position.y = 25; + scene.add(mesh); - // + // - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - renderer.shadowMap.enabled = true; - document.body.appendChild(renderer.domElement); + renderer = new THREE.WebGLRenderer({ antialias: true }); + renderer.setPixelRatio(window.devicePixelRatio); + renderer.setSize(window.innerWidth, window.innerHeight); + renderer.shadowMap.enabled = true; + document.body.appendChild(renderer.domElement); - // + // - const controls = new OrbitControls(camera, renderer.domElement); - controls.target.set(0, 25, 0); - controls.update(); + const controls = new OrbitControls(camera, renderer.domElement); + controls.target.set(0, 25, 0); + controls.update(); - // + // - window.addEventListener("resize", onWindowResize); + window.addEventListener('resize', onWindowResize); - const gui = new GUI(); + const gui = new GUI(); - gui.add(params, "exportASCII").name("Export STL (ASCII)"); - gui.add(params, "exportBinary").name("Export STL (Binary)"); - gui.open(); + gui.add(params, 'exportASCII').name('Export STL (ASCII)'); + gui.add(params, 'exportBinary').name('Export STL (Binary)'); + gui.open(); } function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); + renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { - requestAnimationFrame(animate); - renderer.render(scene, camera); + requestAnimationFrame(animate); + renderer.render(scene, camera); } function exportASCII() { - const result = exporter.parse(mesh); - saveString(result, "box.stl"); + const result = exporter.parse(mesh); + saveString(result, 'box.stl'); } function exportBinary() { - const result = exporter.parse(mesh, { binary: true }); - saveArrayBuffer(result, "box.stl"); + const result = exporter.parse(mesh, { binary: true }); + saveArrayBuffer(result, 'box.stl'); } -const link = document.createElement("a"); -link.style.display = "none"; +const link = document.createElement('a'); +link.style.display = 'none'; document.body.appendChild(link); function save(blob, filename) { - link.href = URL.createObjectURL(blob); - link.download = filename; - link.click(); + link.href = URL.createObjectURL(blob); + link.download = filename; + link.click(); } function saveString(text, filename) { - save(new Blob([text], { type: "text/plain" }), filename); + save(new Blob([text], { type: 'text/plain' }), filename); } function saveArrayBuffer(buffer, filename) { - save(new Blob([buffer], { type: "application/octet-stream" }), filename); + save(new Blob([buffer], { type: 'application/octet-stream' }), filename); } diff --git a/examples-testing/examples/misc_lookat.ts b/examples-testing/examples/misc_lookat.ts index e450cc34d..f6241b9e1 100644 --- a/examples-testing/examples/misc_lookat.ts +++ b/examples-testing/examples/misc_lookat.ts @@ -1,105 +1,97 @@ -import * as THREE from "three"; +import * as THREE from 'three'; -import Stats from "three/addons/libs/stats.module.js"; +import Stats from 'three/addons/libs/stats.module.js'; let camera, scene, renderer, stats; let sphere; let mouseX = 0, - mouseY = 0; + mouseY = 0; let windowHalfX = window.innerWidth / 2; let windowHalfY = window.innerHeight / 2; -document.addEventListener("mousemove", onDocumentMouseMove); +document.addEventListener('mousemove', onDocumentMouseMove); init(); animate(); function init() { - camera = new THREE.PerspectiveCamera( - 40, - window.innerWidth / window.innerHeight, - 1, - 15000 - ); - camera.position.z = 3200; - - scene = new THREE.Scene(); - scene.background = new THREE.Color(0xffffff); - - sphere = new THREE.Mesh( - new THREE.SphereGeometry(100, 20, 20), - new THREE.MeshNormalMaterial() - ); - scene.add(sphere); - - const geometry = new THREE.CylinderGeometry(0, 10, 100, 12); - geometry.rotateX(Math.PI / 2); - - const material = new THREE.MeshNormalMaterial(); - - for (let i = 0; i < 1000; i++) { - const mesh = new THREE.Mesh(geometry, material); - mesh.position.x = Math.random() * 4000 - 2000; - mesh.position.y = Math.random() * 4000 - 2000; - mesh.position.z = Math.random() * 4000 - 2000; - mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 4 + 2; - scene.add(mesh); - } - - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - document.body.appendChild(renderer.domElement); - - stats = new Stats(); - document.body.appendChild(stats.dom); - - // - - window.addEventListener("resize", onWindowResize); + camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 15000); + camera.position.z = 3200; + + scene = new THREE.Scene(); + scene.background = new THREE.Color(0xffffff); + + sphere = new THREE.Mesh(new THREE.SphereGeometry(100, 20, 20), new THREE.MeshNormalMaterial()); + scene.add(sphere); + + const geometry = new THREE.CylinderGeometry(0, 10, 100, 12); + geometry.rotateX(Math.PI / 2); + + const material = new THREE.MeshNormalMaterial(); + + for (let i = 0; i < 1000; i++) { + const mesh = new THREE.Mesh(geometry, material); + mesh.position.x = Math.random() * 4000 - 2000; + mesh.position.y = Math.random() * 4000 - 2000; + mesh.position.z = Math.random() * 4000 - 2000; + mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 4 + 2; + scene.add(mesh); + } + + renderer = new THREE.WebGLRenderer({ antialias: true }); + renderer.setPixelRatio(window.devicePixelRatio); + renderer.setSize(window.innerWidth, window.innerHeight); + document.body.appendChild(renderer.domElement); + + stats = new Stats(); + document.body.appendChild(stats.dom); + + // + + window.addEventListener('resize', onWindowResize); } function onWindowResize() { - windowHalfX = window.innerWidth / 2; - windowHalfY = window.innerHeight / 2; + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); + renderer.setSize(window.innerWidth, window.innerHeight); } function onDocumentMouseMove(event) { - mouseX = (event.clientX - windowHalfX) * 10; - mouseY = (event.clientY - windowHalfY) * 10; + mouseX = (event.clientX - windowHalfX) * 10; + mouseY = (event.clientY - windowHalfY) * 10; } // function animate() { - requestAnimationFrame(animate); + requestAnimationFrame(animate); - render(); - stats.update(); + render(); + stats.update(); } function render() { - const time = Date.now() * 0.0005; + const time = Date.now() * 0.0005; - sphere.position.x = Math.sin(time * 0.7) * 2000; - sphere.position.y = Math.cos(time * 0.5) * 2000; - sphere.position.z = Math.cos(time * 0.3) * 2000; + sphere.position.x = Math.sin(time * 0.7) * 2000; + sphere.position.y = Math.cos(time * 0.5) * 2000; + sphere.position.z = Math.cos(time * 0.3) * 2000; - for (let i = 1, l = scene.children.length; i < l; i++) { - scene.children[i].lookAt(sphere.position); - } + for (let i = 1, l = scene.children.length; i < l; i++) { + scene.children[i].lookAt(sphere.position); + } - camera.position.x += (mouseX - camera.position.x) * 0.05; - camera.position.y += (-mouseY - camera.position.y) * 0.05; - camera.lookAt(scene.position); + camera.position.x += (mouseX - camera.position.x) * 0.05; + camera.position.y += (-mouseY - camera.position.y) * 0.05; + camera.lookAt(scene.position); - renderer.render(scene, camera); + renderer.render(scene, camera); } diff --git a/examples-testing/examples/misc_uv_tests.ts b/examples-testing/examples/misc_uv_tests.ts index 6dd3fbfc6..4f782d45f 100644 --- a/examples-testing/examples/misc_uv_tests.ts +++ b/examples-testing/examples/misc_uv_tests.ts @@ -1,6 +1,6 @@ -import * as THREE from "three"; +import * as THREE from 'three'; -import { UVsDebug } from "three/addons/utils/UVsDebug.js"; +import { UVsDebug } from 'three/addons/utils/UVsDebug.js'; /* * This is to help debug UVs problems in geometry, @@ -8,64 +8,37 @@ import { UVsDebug } from "three/addons/utils/UVsDebug.js"; */ function test(name, geometry) { - const d = document.createElement("div"); + const d = document.createElement('div'); - d.innerHTML = "

" + name + "

"; + d.innerHTML = '

' + name + '

'; - d.appendChild(UVsDebug(geometry)); + d.appendChild(UVsDebug(geometry)); - document.body.appendChild(d); + document.body.appendChild(d); } const points = []; for (let i = 0; i < 10; i++) { - points.push(new THREE.Vector2(Math.sin(i * 0.2) * 15 + 50, (i - 5) * 2)); + points.push(new THREE.Vector2(Math.sin(i * 0.2) * 15 + 50, (i - 5) * 2)); } // -test( - "new THREE.PlaneGeometry( 100, 100, 4, 4 )", - new THREE.PlaneGeometry(100, 100, 4, 4) -); - -test( - "new THREE.SphereGeometry( 75, 12, 6 )", - new THREE.SphereGeometry(75, 12, 6) -); - -test( - "new THREE.IcosahedronGeometry( 30, 1 )", - new THREE.IcosahedronGeometry(30, 1) -); - -test( - "new THREE.OctahedronGeometry( 30, 2 )", - new THREE.OctahedronGeometry(30, 2) -); - -test( - "new THREE.CylinderGeometry( 25, 75, 100, 10, 5 )", - new THREE.CylinderGeometry(25, 75, 100, 10, 5) -); - -test( - "new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 )", - new THREE.BoxGeometry(100, 100, 100, 4, 4, 4) -); - -test( - "new THREE.LatheGeometry( points, 8 )", - new THREE.LatheGeometry(points, 8) -); - -test( - "new THREE.TorusGeometry( 50, 20, 8, 8 )", - new THREE.TorusGeometry(50, 20, 8, 8) -); - -test( - "new THREE.TorusKnotGeometry( 50, 10, 12, 6 )", - new THREE.TorusKnotGeometry(50, 10, 12, 6) -); +test('new THREE.PlaneGeometry( 100, 100, 4, 4 )', new THREE.PlaneGeometry(100, 100, 4, 4)); + +test('new THREE.SphereGeometry( 75, 12, 6 )', new THREE.SphereGeometry(75, 12, 6)); + +test('new THREE.IcosahedronGeometry( 30, 1 )', new THREE.IcosahedronGeometry(30, 1)); + +test('new THREE.OctahedronGeometry( 30, 2 )', new THREE.OctahedronGeometry(30, 2)); + +test('new THREE.CylinderGeometry( 25, 75, 100, 10, 5 )', new THREE.CylinderGeometry(25, 75, 100, 10, 5)); + +test('new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 )', new THREE.BoxGeometry(100, 100, 100, 4, 4, 4)); + +test('new THREE.LatheGeometry( points, 8 )', new THREE.LatheGeometry(points, 8)); + +test('new THREE.TorusGeometry( 50, 20, 8, 8 )', new THREE.TorusGeometry(50, 20, 8, 8)); + +test('new THREE.TorusKnotGeometry( 50, 10, 12, 6 )', new THREE.TorusKnotGeometry(50, 10, 12, 6)); diff --git a/examples-testing/examples/svg_lines.ts b/examples-testing/examples/svg_lines.ts index badcf87e3..99b74c405 100644 --- a/examples-testing/examples/svg_lines.ts +++ b/examples-testing/examples/svg_lines.ts @@ -1,6 +1,6 @@ -import * as THREE from "three"; +import * as THREE from 'three'; -import { SVGRenderer } from "three/addons/renderers/SVGRenderer.js"; +import { SVGRenderer } from 'three/addons/renderers/SVGRenderer.js'; THREE.ColorManagement.enabled = false; @@ -10,86 +10,78 @@ init(); animate(); function init() { - camera = new THREE.PerspectiveCamera( - 33, - window.innerWidth / window.innerHeight, - 0.1, - 100 - ); - camera.position.z = 10; + camera = new THREE.PerspectiveCamera(33, window.innerWidth / window.innerHeight, 0.1, 100); + camera.position.z = 10; - scene = new THREE.Scene(); - scene.background = new THREE.Color(0, 0, 0); + scene = new THREE.Scene(); + scene.background = new THREE.Color(0, 0, 0); - renderer = new SVGRenderer(); - renderer.setSize(window.innerWidth, window.innerHeight); - document.body.appendChild(renderer.domElement); + renderer = new SVGRenderer(); + renderer.setSize(window.innerWidth, window.innerHeight); + document.body.appendChild(renderer.domElement); - // + // - const vertices = []; - const divisions = 50; + const vertices = []; + const divisions = 50; - for (let i = 0; i <= divisions; i++) { - const v = (i / divisions) * (Math.PI * 2); + for (let i = 0; i <= divisions; i++) { + const v = (i / divisions) * (Math.PI * 2); - const x = Math.sin(v); - const z = Math.cos(v); + const x = Math.sin(v); + const z = Math.cos(v); - vertices.push(x, 0, z); - } + vertices.push(x, 0, z); + } - const geometry = new THREE.BufferGeometry(); - geometry.setAttribute( - "position", - new THREE.Float32BufferAttribute(vertices, 3) - ); + const geometry = new THREE.BufferGeometry(); + geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3)); - // + // - for (let i = 1; i <= 3; i++) { - const material = new THREE.LineBasicMaterial({ - color: Math.random() * 0xffffff, - linewidth: 10, + for (let i = 1; i <= 3; i++) { + const material = new THREE.LineBasicMaterial({ + color: Math.random() * 0xffffff, + linewidth: 10, + }); + const line = new THREE.Line(geometry, material); + line.scale.setScalar(i / 3); + scene.add(line); + } + + const material = new THREE.LineDashedMaterial({ + color: 'blue', + linewidth: 1, + dashSize: 10, + gapSize: 10, }); const line = new THREE.Line(geometry, material); - line.scale.setScalar(i / 3); + line.scale.setScalar(2); scene.add(line); - } - - const material = new THREE.LineDashedMaterial({ - color: "blue", - linewidth: 1, - dashSize: 10, - gapSize: 10, - }); - const line = new THREE.Line(geometry, material); - line.scale.setScalar(2); - scene.add(line); - // + // - window.addEventListener("resize", onWindowResize); + window.addEventListener('resize', onWindowResize); } function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); + renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { - let count = 0; - const time = performance.now() / 1000; + let count = 0; + const time = performance.now() / 1000; - scene.traverse(function (child) { - child.rotation.x = count + time / 3; - child.rotation.z = count + time / 4; + scene.traverse(function (child) { + child.rotation.x = count + time / 3; + child.rotation.z = count + time / 4; - count++; - }); + count++; + }); - renderer.render(scene, camera); - requestAnimationFrame(animate); + renderer.render(scene, camera); + requestAnimationFrame(animate); } diff --git a/examples-testing/examples/svg_sandbox.ts b/examples-testing/examples/svg_sandbox.ts index e7221f350..e6be8386c 100644 --- a/examples-testing/examples/svg_sandbox.ts +++ b/examples-testing/examples/svg_sandbox.ts @@ -1,8 +1,8 @@ -import * as THREE from "three"; +import * as THREE from 'three'; -import Stats from "three/addons/libs/stats.module.js"; +import Stats from 'three/addons/libs/stats.module.js'; -import { SVGRenderer, SVGObject } from "three/addons/renderers/SVGRenderer.js"; +import { SVGRenderer, SVGObject } from 'three/addons/renderers/SVGRenderer.js'; THREE.ColorManagement.enabled = false; @@ -14,241 +14,199 @@ init(); animate(); function init() { - camera = new THREE.PerspectiveCamera( - 75, - window.innerWidth / window.innerHeight, - 1, - 10000 - ); - camera.position.z = 500; + camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000); + camera.position.z = 500; - scene = new THREE.Scene(); - scene.background = new THREE.Color(0xf0f0f0); + scene = new THREE.Scene(); + scene.background = new THREE.Color(0xf0f0f0); - // QRCODE + // QRCODE - const loader = new THREE.BufferGeometryLoader(); - loader.load("models/json/QRCode_buffergeometry.json", function (geometry) { - mesh = new THREE.Mesh( - geometry, - new THREE.MeshLambertMaterial({ vertexColors: true }) + const loader = new THREE.BufferGeometryLoader(); + loader.load('models/json/QRCode_buffergeometry.json', function (geometry) { + mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ vertexColors: true })); + mesh.scale.x = mesh.scale.y = mesh.scale.z = 2; + scene.add(mesh); + }); + + // CUBES + + const boxGeometry = new THREE.BoxGeometry(100, 100, 100); + + let mesh = new THREE.Mesh( + boxGeometry, + new THREE.MeshBasicMaterial({ color: 0x0000ff, opacity: 0.5, transparent: true }), ); + mesh.position.x = 500; + mesh.rotation.x = Math.random(); + mesh.rotation.y = Math.random(); mesh.scale.x = mesh.scale.y = mesh.scale.z = 2; scene.add(mesh); - }); - - // CUBES - - const boxGeometry = new THREE.BoxGeometry(100, 100, 100); - - let mesh = new THREE.Mesh( - boxGeometry, - new THREE.MeshBasicMaterial({ - color: 0x0000ff, - opacity: 0.5, - transparent: true, - }) - ); - mesh.position.x = 500; - mesh.rotation.x = Math.random(); - mesh.rotation.y = Math.random(); - mesh.scale.x = mesh.scale.y = mesh.scale.z = 2; - scene.add(mesh); - - mesh = new THREE.Mesh( - boxGeometry, - new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff }) - ); - mesh.position.x = 500; - mesh.position.y = 500; - mesh.rotation.x = Math.random(); - mesh.rotation.y = Math.random(); - mesh.scale.x = mesh.scale.y = mesh.scale.z = 2; - scene.add(mesh); - - // PLANE - - mesh = new THREE.Mesh( - new THREE.PlaneGeometry(100, 100), - new THREE.MeshBasicMaterial({ - color: Math.random() * 0xffffff, - side: THREE.DoubleSide, - }) - ); - mesh.position.y = -500; - mesh.scale.x = mesh.scale.y = mesh.scale.z = 2; - scene.add(mesh); - - // CYLINDER - - mesh = new THREE.Mesh( - new THREE.CylinderGeometry(20, 100, 200, 10), - new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff }) - ); - mesh.position.x = -500; - mesh.rotation.x = -Math.PI / 2; - mesh.scale.x = mesh.scale.y = mesh.scale.z = 2; - scene.add(mesh); - - // POLYFIELD - - const geometry = new THREE.BufferGeometry(); - const material = new THREE.MeshBasicMaterial({ - vertexColors: true, - side: THREE.DoubleSide, - }); - - const v = new THREE.Vector3(); - const v0 = new THREE.Vector3(); - const v1 = new THREE.Vector3(); - const v2 = new THREE.Vector3(); - const color = new THREE.Color(); - - const vertices = []; - const colors = []; - - for (let i = 0; i < 100; i++) { - v.set( - Math.random() * 1000 - 500, - Math.random() * 1000 - 500, - Math.random() * 1000 - 500 - ); - v0.set( - Math.random() * 100 - 50, - Math.random() * 100 - 50, - Math.random() * 100 - 50 - ); + mesh = new THREE.Mesh(boxGeometry, new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff })); + mesh.position.x = 500; + mesh.position.y = 500; + mesh.rotation.x = Math.random(); + mesh.rotation.y = Math.random(); + mesh.scale.x = mesh.scale.y = mesh.scale.z = 2; + scene.add(mesh); - v1.set( - Math.random() * 100 - 50, - Math.random() * 100 - 50, - Math.random() * 100 - 50 + // PLANE + + mesh = new THREE.Mesh( + new THREE.PlaneGeometry(100, 100), + new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff, side: THREE.DoubleSide }), ); + mesh.position.y = -500; + mesh.scale.x = mesh.scale.y = mesh.scale.z = 2; + scene.add(mesh); + + // CYLINDER - v2.set( - Math.random() * 100 - 50, - Math.random() * 100 - 50, - Math.random() * 100 - 50 + mesh = new THREE.Mesh( + new THREE.CylinderGeometry(20, 100, 200, 10), + new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff }), ); + mesh.position.x = -500; + mesh.rotation.x = -Math.PI / 2; + mesh.scale.x = mesh.scale.y = mesh.scale.z = 2; + scene.add(mesh); - v0.add(v); - v1.add(v); - v2.add(v); + // POLYFIELD - color.setHex(Math.random() * 0xffffff); + const geometry = new THREE.BufferGeometry(); + const material = new THREE.MeshBasicMaterial({ vertexColors: true, side: THREE.DoubleSide }); - // create a single triangle + const v = new THREE.Vector3(); + const v0 = new THREE.Vector3(); + const v1 = new THREE.Vector3(); + const v2 = new THREE.Vector3(); + const color = new THREE.Color(); - vertices.push(v0.x, v0.y, v0.z); - vertices.push(v1.x, v1.y, v1.z); - vertices.push(v2.x, v2.y, v2.z); + const vertices = []; + const colors = []; - colors.push(color.r, color.g, color.b); - colors.push(color.r, color.g, color.b); - colors.push(color.r, color.g, color.b); - } + for (let i = 0; i < 100; i++) { + v.set(Math.random() * 1000 - 500, Math.random() * 1000 - 500, Math.random() * 1000 - 500); - geometry.setAttribute( - "position", - new THREE.Float32BufferAttribute(vertices, 3) - ); - geometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3)); + v0.set(Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50); - group = new THREE.Mesh(geometry, material); - group.scale.set(2, 2, 2); - scene.add(group); + v1.set(Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50); - // SPRITES + v2.set(Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50); - for (let i = 0; i < 50; i++) { - const material = new THREE.SpriteMaterial({ - color: Math.random() * 0xffffff, - }); - const sprite = new THREE.Sprite(material); - sprite.position.x = Math.random() * 1000 - 500; - sprite.position.y = Math.random() * 1000 - 500; - sprite.position.z = Math.random() * 1000 - 500; - sprite.scale.set(64, 64, 1); - scene.add(sprite); - } + v0.add(v); + v1.add(v); + v2.add(v); + + color.setHex(Math.random() * 0xffffff); + + // create a single triangle + + vertices.push(v0.x, v0.y, v0.z); + vertices.push(v1.x, v1.y, v1.z); + vertices.push(v2.x, v2.y, v2.z); - // CUSTOM + colors.push(color.r, color.g, color.b); + colors.push(color.r, color.g, color.b); + colors.push(color.r, color.g, color.b); + } - const node = document.createElementNS("http://www.w3.org/2000/svg", "circle"); - node.setAttribute("stroke", "black"); - node.setAttribute("fill", "red"); - node.setAttribute("r", "40"); + geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3)); + geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3)); - for (let i = 0; i < 50; i++) { - const object = new SVGObject(node.cloneNode()); - object.position.x = Math.random() * 1000 - 500; - object.position.y = Math.random() * 1000 - 500; - object.position.z = Math.random() * 1000 - 500; - scene.add(object); - } + group = new THREE.Mesh(geometry, material); + group.scale.set(2, 2, 2); + scene.add(group); - // CUSTOM FROM FILE + // SPRITES - const fileLoader = new THREE.FileLoader(); - fileLoader.load("models/svg/hexagon.svg", function (svg) { - const node = document.createElementNS("http://www.w3.org/2000/svg", "g"); - const parser = new DOMParser(); - const doc = parser.parseFromString(svg, "image/svg+xml"); + for (let i = 0; i < 50; i++) { + const material = new THREE.SpriteMaterial({ color: Math.random() * 0xffffff }); + const sprite = new THREE.Sprite(material); + sprite.position.x = Math.random() * 1000 - 500; + sprite.position.y = Math.random() * 1000 - 500; + sprite.position.z = Math.random() * 1000 - 500; + sprite.scale.set(64, 64, 1); + scene.add(sprite); + } - node.appendChild(doc.documentElement); + // CUSTOM - const object = new SVGObject(node); - object.position.x = 500; - scene.add(object); - }); + const node = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); + node.setAttribute('stroke', 'black'); + node.setAttribute('fill', 'red'); + node.setAttribute('r', '40'); + + for (let i = 0; i < 50; i++) { + const object = new SVGObject(node.cloneNode()); + object.position.x = Math.random() * 1000 - 500; + object.position.y = Math.random() * 1000 - 500; + object.position.z = Math.random() * 1000 - 500; + scene.add(object); + } + + // CUSTOM FROM FILE + + const fileLoader = new THREE.FileLoader(); + fileLoader.load('models/svg/hexagon.svg', function (svg) { + const node = document.createElementNS('http://www.w3.org/2000/svg', 'g'); + const parser = new DOMParser(); + const doc = parser.parseFromString(svg, 'image/svg+xml'); + + node.appendChild(doc.documentElement); + + const object = new SVGObject(node); + object.position.x = 500; + scene.add(object); + }); - // LIGHTS + // LIGHTS - const ambient = new THREE.AmbientLight(0x80ffff); - scene.add(ambient); + const ambient = new THREE.AmbientLight(0x80ffff); + scene.add(ambient); - const directional = new THREE.DirectionalLight(0xffff00); - directional.position.set(-1, 0.5, 0); - scene.add(directional); + const directional = new THREE.DirectionalLight(0xffff00); + directional.position.set(-1, 0.5, 0); + scene.add(directional); - renderer = new SVGRenderer(); - renderer.setSize(window.innerWidth, window.innerHeight); - renderer.setQuality("low"); - document.body.appendChild(renderer.domElement); + renderer = new SVGRenderer(); + renderer.setSize(window.innerWidth, window.innerHeight); + renderer.setQuality('low'); + document.body.appendChild(renderer.domElement); - stats = new Stats(); - document.body.appendChild(stats.dom); + stats = new Stats(); + document.body.appendChild(stats.dom); - // + // - window.addEventListener("resize", onWindowResize); + window.addEventListener('resize', onWindowResize); } function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); + renderer.setSize(window.innerWidth, window.innerHeight); } // function animate() { - requestAnimationFrame(animate); + requestAnimationFrame(animate); - render(); - stats.update(); + render(); + stats.update(); } function render() { - const time = Date.now() * 0.0002; + const time = Date.now() * 0.0002; - camera.position.x = Math.sin(time) * 500; - camera.position.z = Math.cos(time) * 500; - camera.lookAt(scene.position); + camera.position.x = Math.sin(time) * 500; + camera.position.z = Math.cos(time) * 500; + camera.lookAt(scene.position); - group.rotation.x += 0.01; + group.rotation.x += 0.01; - renderer.render(scene, camera); + renderer.render(scene, camera); } diff --git a/examples-testing/examples/webaudio_orientation.ts b/examples-testing/examples/webaudio_orientation.ts index a86b8cbf1..8a74c4187 100644 --- a/examples-testing/examples/webaudio_orientation.ts +++ b/examples-testing/examples/webaudio_orientation.ts @@ -1,150 +1,141 @@ -import * as THREE from "three"; +import * as THREE from 'three'; -import { OrbitControls } from "three/addons/controls/OrbitControls.js"; -import { PositionalAudioHelper } from "three/addons/helpers/PositionalAudioHelper.js"; -import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js"; +import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; +import { PositionalAudioHelper } from 'three/addons/helpers/PositionalAudioHelper.js'; +import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; let scene, camera, renderer; -const startButton = document.getElementById("startButton"); -startButton.addEventListener("click", init); +const startButton = document.getElementById('startButton'); +startButton.addEventListener('click', init); function init() { - const overlay = document.getElementById("overlay"); - overlay.remove(); - - const container = document.getElementById("container"); - - // - - camera = new THREE.PerspectiveCamera( - 45, - window.innerWidth / window.innerHeight, - 0.1, - 100 - ); - camera.position.set(3, 2, 3); - - const reflectionCube = new THREE.CubeTextureLoader() - .setPath("textures/cube/SwedishRoyalCastle/") - .load(["px.jpg", "nx.jpg", "py.jpg", "ny.jpg", "pz.jpg", "nz.jpg"]); - - scene = new THREE.Scene(); - scene.background = new THREE.Color(0xa0a0a0); - scene.fog = new THREE.Fog(0xa0a0a0, 2, 20); - - // - - const hemiLight = new THREE.HemisphereLight(0xffffff, 0x8d8d8d); - hemiLight.position.set(0, 20, 0); - scene.add(hemiLight); - - const dirLight = new THREE.DirectionalLight(0xffffff); - dirLight.position.set(5, 5, 0); - dirLight.castShadow = true; - dirLight.shadow.camera.top = 1; - dirLight.shadow.camera.bottom = -1; - dirLight.shadow.camera.left = -1; - dirLight.shadow.camera.right = 1; - dirLight.shadow.camera.near = 0.1; - dirLight.shadow.camera.far = 20; - scene.add(dirLight); - - // scene.add( new THREE.CameraHelper( dirLight.shadow.camera ) ); - - // - - const mesh = new THREE.Mesh( - new THREE.PlaneGeometry(50, 50), - new THREE.MeshPhongMaterial({ color: 0xcbcbcb, depthWrite: false }) - ); - mesh.rotation.x = -Math.PI / 2; - mesh.receiveShadow = true; - scene.add(mesh); - - const grid = new THREE.GridHelper(50, 50, 0xc1c1c1, 0xc1c1c1); - scene.add(grid); - - // - - const listener = new THREE.AudioListener(); - camera.add(listener); - - const audioElement = document.getElementById("music"); - audioElement.play(); - - const positionalAudio = new THREE.PositionalAudio(listener); - positionalAudio.setMediaElementSource(audioElement); - positionalAudio.setRefDistance(1); - positionalAudio.setDirectionalCone(180, 230, 0.1); - - const helper = new PositionalAudioHelper(positionalAudio, 0.1); - positionalAudio.add(helper); - - // - - const gltfLoader = new GLTFLoader(); - gltfLoader.load("models/gltf/BoomBox.glb", function (gltf) { - const boomBox = gltf.scene; - boomBox.position.set(0, 0.2, 0); - boomBox.scale.set(20, 20, 20); - - boomBox.traverse(function (object) { - if (object.isMesh) { - object.material.envMap = reflectionCube; - object.geometry.rotateY(-Math.PI); - object.castShadow = true; - } - }); + const overlay = document.getElementById('overlay'); + overlay.remove(); + + const container = document.getElementById('container'); + + // + + camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100); + camera.position.set(3, 2, 3); + + const reflectionCube = new THREE.CubeTextureLoader() + .setPath('textures/cube/SwedishRoyalCastle/') + .load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']); + + scene = new THREE.Scene(); + scene.background = new THREE.Color(0xa0a0a0); + scene.fog = new THREE.Fog(0xa0a0a0, 2, 20); + + // + + const hemiLight = new THREE.HemisphereLight(0xffffff, 0x8d8d8d); + hemiLight.position.set(0, 20, 0); + scene.add(hemiLight); + + const dirLight = new THREE.DirectionalLight(0xffffff); + dirLight.position.set(5, 5, 0); + dirLight.castShadow = true; + dirLight.shadow.camera.top = 1; + dirLight.shadow.camera.bottom = -1; + dirLight.shadow.camera.left = -1; + dirLight.shadow.camera.right = 1; + dirLight.shadow.camera.near = 0.1; + dirLight.shadow.camera.far = 20; + scene.add(dirLight); + + // scene.add( new THREE.CameraHelper( dirLight.shadow.camera ) ); + + // - boomBox.add(positionalAudio); - scene.add(boomBox); - animate(); - }); + const mesh = new THREE.Mesh( + new THREE.PlaneGeometry(50, 50), + new THREE.MeshPhongMaterial({ color: 0xcbcbcb, depthWrite: false }), + ); + mesh.rotation.x = -Math.PI / 2; + mesh.receiveShadow = true; + scene.add(mesh); + + const grid = new THREE.GridHelper(50, 50, 0xc1c1c1, 0xc1c1c1); + scene.add(grid); + + // + + const listener = new THREE.AudioListener(); + camera.add(listener); + + const audioElement = document.getElementById('music'); + audioElement.play(); + + const positionalAudio = new THREE.PositionalAudio(listener); + positionalAudio.setMediaElementSource(audioElement); + positionalAudio.setRefDistance(1); + positionalAudio.setDirectionalCone(180, 230, 0.1); + + const helper = new PositionalAudioHelper(positionalAudio, 0.1); + positionalAudio.add(helper); + + // + + const gltfLoader = new GLTFLoader(); + gltfLoader.load('models/gltf/BoomBox.glb', function (gltf) { + const boomBox = gltf.scene; + boomBox.position.set(0, 0.2, 0); + boomBox.scale.set(20, 20, 20); + + boomBox.traverse(function (object) { + if (object.isMesh) { + object.material.envMap = reflectionCube; + object.geometry.rotateY(-Math.PI); + object.castShadow = true; + } + }); + + boomBox.add(positionalAudio); + scene.add(boomBox); + animate(); + }); - // sound is damped behind this wall + // sound is damped behind this wall - const wallGeometry = new THREE.BoxGeometry(2, 1, 0.1); - const wallMaterial = new THREE.MeshBasicMaterial({ - color: 0xff0000, - transparent: true, - opacity: 0.5, - }); + const wallGeometry = new THREE.BoxGeometry(2, 1, 0.1); + const wallMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, transparent: true, opacity: 0.5 }); - const wall = new THREE.Mesh(wallGeometry, wallMaterial); - wall.position.set(0, 0.5, -0.5); - scene.add(wall); + const wall = new THREE.Mesh(wallGeometry, wallMaterial); + wall.position.set(0, 0.5, -0.5); + scene.add(wall); - // + // - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setSize(window.innerWidth, window.innerHeight); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.shadowMap.enabled = true; - container.appendChild(renderer.domElement); + renderer = new THREE.WebGLRenderer({ antialias: true }); + renderer.setSize(window.innerWidth, window.innerHeight); + renderer.setPixelRatio(window.devicePixelRatio); + renderer.shadowMap.enabled = true; + container.appendChild(renderer.domElement); - // + // - const controls = new OrbitControls(camera, renderer.domElement); - controls.target.set(0, 0.1, 0); - controls.update(); - controls.minDistance = 0.5; - controls.maxDistance = 10; - controls.maxPolarAngle = 0.5 * Math.PI; + const controls = new OrbitControls(camera, renderer.domElement); + controls.target.set(0, 0.1, 0); + controls.update(); + controls.minDistance = 0.5; + controls.maxDistance = 10; + controls.maxPolarAngle = 0.5 * Math.PI; - // + // - window.addEventListener("resize", onWindowResize); + window.addEventListener('resize', onWindowResize); } function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); + renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { - requestAnimationFrame(animate); - renderer.render(scene, camera); + requestAnimationFrame(animate); + renderer.render(scene, camera); } diff --git a/examples-testing/index.js b/examples-testing/index.js index e8a56c0c6..0675a8569 100644 --- a/examples-testing/index.js +++ b/examples-testing/index.js @@ -1,7 +1,7 @@ import * as fs from 'node:fs'; import * as path from 'node:path'; -import { format } from 'prettier'; +import prettier from 'prettier'; const files = { webgl: [ @@ -437,7 +437,8 @@ for (const section of Object.values(files)) { encoding: 'utf-8', }); const results = re.exec(fileContents); - const formattedFile = format(results[1], { parser: 'babel' }); + const options = await prettier.resolveConfig(file); + const formattedFile = prettier.format(results[1], { ...options, parser: 'babel' }); fs.writeFileSync(path.join(outDir, `${file}.ts`), formattedFile); } }