Skip to content

Commit

Permalink
Update examples (#921)
Browse files Browse the repository at this point in the history 
* Update three.js

* Add examples

* Update patch

* Delete examples
  • Loading branch information
@Methuselah96
Methuselah96 authored Apr 24, 2024
1 parent ffa8ecb commit 7d90237
Show file tree
Hide file tree
Showing 2 changed files with 123 additions and 122 deletions.
243 changes: 122 additions & 121 deletions examples-testing/changes.patch
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10463,127 +10463,6 @@ index 0bfb6550..89c4a5c1 100644
return [
prefix + 'px' + postfix,
prefix + 'nx' + postfix,
diff --git a/examples-testing/examples/webgl_postprocessing_crossfade.ts b/examples-testing/examples/webgl_postprocessing_crossfade.ts
index 711be871..ec52f236 100644
--- a/examples-testing/examples/webgl_postprocessing_crossfade.ts
+++ b/examples-testing/examples/webgl_postprocessing_crossfade.ts
@@ -7,10 +7,10 @@ import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderTransitionPass } from 'three/addons/postprocessing/RenderTransitionPass.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';

-let stats;
-let renderer, composer, renderTransitionPass;
+let stats: Stats;
+let renderer: THREE.WebGLRenderer, composer: EffectComposer, renderTransitionPass: RenderTransitionPass;

-const textures = [];
+const textures: THREE.Texture[] = [];
const clock = new THREE.Clock();

const params = {
@@ -23,6 +23,55 @@ const params = {
threshold: 0.1,
};

+class FXScene {
+ rotationSpeed: THREE.Vector3;
+
+ scene: THREE.Scene;
+ camera: THREE.PerspectiveCamera;
+ mesh: THREE.InstancedMesh;
+
+ render: (delta: number) => void;
+ resize: () => void;
+
+ constructor(geometry: THREE.BufferGeometry, rotationSpeed: THREE.Vector3, backgroundColor: number) {
+ const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100);
+ camera.position.z = 20;
+
+ // Setup scene
+ const scene = new THREE.Scene();
+ scene.background = new THREE.Color(backgroundColor);
+ scene.add(new THREE.AmbientLight(0xaaaaaa, 3));
+
+ const light = new THREE.DirectionalLight(0xffffff, 3);
+ light.position.set(0, 1, 4);
+ scene.add(light);
+
+ this.rotationSpeed = rotationSpeed;
+
+ const color = geometry.type === 'BoxGeometry' ? 0x0000ff : 0xff0000;
+ const material = new THREE.MeshPhongMaterial({ color: color, flatShading: true });
+ const mesh = generateInstancedMesh(geometry, material, 500);
+ scene.add(mesh);
+
+ this.scene = scene;
+ this.camera = camera;
+ this.mesh = mesh;
+
+ this.render = function (delta) {
+ if (params.sceneAnimate) {
+ mesh.rotation.x += this.rotationSpeed.x * delta;
+ mesh.rotation.y += this.rotationSpeed.y * delta;
+ mesh.rotation.z += this.rotationSpeed.z * delta;
+ }
+ };
+
+ this.resize = function () {
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+ };
+ }
+}
+
const fxSceneA = new FXScene(new THREE.BoxGeometry(2, 2, 2), new THREE.Vector3(0, -0.4, 0), 0xffffff);
const fxSceneB = new FXScene(new THREE.IcosahedronGeometry(1, 1), new THREE.Vector3(0, 0.2, 0.1), 0x000000);

@@ -139,45 +188,7 @@ function render() {
}
}

-function FXScene(geometry, rotationSpeed, backgroundColor) {
- const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100);
- camera.position.z = 20;
-
- // Setup scene
- const scene = new THREE.Scene();
- scene.background = new THREE.Color(backgroundColor);
- scene.add(new THREE.AmbientLight(0xaaaaaa, 3));
-
- const light = new THREE.DirectionalLight(0xffffff, 3);
- light.position.set(0, 1, 4);
- scene.add(light);
-
- this.rotationSpeed = rotationSpeed;
-
- const color = geometry.type === 'BoxGeometry' ? 0x0000ff : 0xff0000;
- const material = new THREE.MeshPhongMaterial({ color: color, flatShading: true });
- const mesh = generateInstancedMesh(geometry, material, 500);
- scene.add(mesh);
-
- this.scene = scene;
- this.camera = camera;
- this.mesh = mesh;
-
- this.render = function (delta) {
- if (params.sceneAnimate) {
- mesh.rotation.x += this.rotationSpeed.x * delta;
- mesh.rotation.y += this.rotationSpeed.y * delta;
- mesh.rotation.z += this.rotationSpeed.z * delta;
- }
- };
-
- this.resize = function () {
- camera.aspect = window.innerWidth / window.innerHeight;
- camera.updateProjectionMatrix();
- };
-}
-
-function generateInstancedMesh(geometry, material, count) {
+function generateInstancedMesh(geometry: THREE.BufferGeometry, material: THREE.MeshPhongMaterial, count: number) {
const mesh = new THREE.InstancedMesh(geometry, material, count);

const dummy = new THREE.Object3D();
diff --git a/examples-testing/examples/webgl_postprocessing_fxaa.ts b/examples-testing/examples/webgl_postprocessing_fxaa.ts
index 14b6a357..c6e40d56 100644
--- a/examples-testing/examples/webgl_postprocessing_fxaa.ts
Expand Down Expand Up @@ -11345,6 +11224,128 @@ index b2a12b53..b1efc76c 100644

renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
diff --git a/examples-testing/examples/webgl_postprocessing_transition.ts b/examples-testing/examples/webgl_postprocessing_transition.ts
index 711be871..39bdfe31 100644
--- a/examples-testing/examples/webgl_postprocessing_transition.ts
+++ b/examples-testing/examples/webgl_postprocessing_transition.ts
@@ -7,10 +7,10 @@ import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderTransitionPass } from 'three/addons/postprocessing/RenderTransitionPass.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';

-let stats;
-let renderer, composer, renderTransitionPass;
+let stats: Stats;
+let renderer: THREE.WebGLRenderer, composer: EffectComposer, renderTransitionPass: RenderTransitionPass;

-const textures = [];
+const textures: THREE.Texture[] = [];
const clock = new THREE.Clock();

const params = {
@@ -23,6 +23,56 @@ const params = {
threshold: 0.1,
};

+class FXScene {
+ rotationSpeed: THREE.Vector3;
+
+ scene: THREE.Scene;
+ camera: THREE.PerspectiveCamera;
+ mesh: THREE.InstancedMesh;
+
+ render: (delta: number) => void;
+
+ resize: () => void;
+
+ constructor(geometry: THREE.BufferGeometry, rotationSpeed: THREE.Vector3, backgroundColor: number) {
+ const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100);
+ camera.position.z = 20;
+
+ // Setup scene
+ const scene = new THREE.Scene();
+ scene.background = new THREE.Color(backgroundColor);
+ scene.add(new THREE.AmbientLight(0xaaaaaa, 3));
+
+ const light = new THREE.DirectionalLight(0xffffff, 3);
+ light.position.set(0, 1, 4);
+ scene.add(light);
+
+ this.rotationSpeed = rotationSpeed;
+
+ const color = geometry.type === 'BoxGeometry' ? 0x0000ff : 0xff0000;
+ const material = new THREE.MeshPhongMaterial({ color: color, flatShading: true });
+ const mesh = generateInstancedMesh(geometry, material, 500);
+ scene.add(mesh);
+
+ this.scene = scene;
+ this.camera = camera;
+ this.mesh = mesh;
+
+ this.render = function (delta) {
+ if (params.sceneAnimate) {
+ mesh.rotation.x += this.rotationSpeed.x * delta;
+ mesh.rotation.y += this.rotationSpeed.y * delta;
+ mesh.rotation.z += this.rotationSpeed.z * delta;
+ }
+ };
+
+ this.resize = function () {
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+ };
+ }
+}
+
const fxSceneA = new FXScene(new THREE.BoxGeometry(2, 2, 2), new THREE.Vector3(0, -0.4, 0), 0xffffff);
const fxSceneB = new FXScene(new THREE.IcosahedronGeometry(1, 1), new THREE.Vector3(0, 0.2, 0.1), 0x000000);

@@ -139,45 +189,7 @@ function render() {
}
}

-function FXScene(geometry, rotationSpeed, backgroundColor) {
- const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100);
- camera.position.z = 20;
-
- // Setup scene
- const scene = new THREE.Scene();
- scene.background = new THREE.Color(backgroundColor);
- scene.add(new THREE.AmbientLight(0xaaaaaa, 3));
-
- const light = new THREE.DirectionalLight(0xffffff, 3);
- light.position.set(0, 1, 4);
- scene.add(light);
-
- this.rotationSpeed = rotationSpeed;
-
- const color = geometry.type === 'BoxGeometry' ? 0x0000ff : 0xff0000;
- const material = new THREE.MeshPhongMaterial({ color: color, flatShading: true });
- const mesh = generateInstancedMesh(geometry, material, 500);
- scene.add(mesh);
-
- this.scene = scene;
- this.camera = camera;
- this.mesh = mesh;
-
- this.render = function (delta) {
- if (params.sceneAnimate) {
- mesh.rotation.x += this.rotationSpeed.x * delta;
- mesh.rotation.y += this.rotationSpeed.y * delta;
- mesh.rotation.z += this.rotationSpeed.z * delta;
- }
- };
-
- this.resize = function () {
- camera.aspect = window.innerWidth / window.innerHeight;
- camera.updateProjectionMatrix();
- };
-}
-
-function generateInstancedMesh(geometry, material, count) {
+function generateInstancedMesh(geometry: THREE.BufferGeometry, material: THREE.MeshPhongMaterial, count: number) {
const mesh = new THREE.InstancedMesh(geometry, material, count);

const dummy = new THREE.Object3D();
diff --git a/examples-testing/examples/webgl_postprocessing_unreal_bloom.ts b/examples-testing/examples/webgl_postprocessing_unreal_bloom.ts
index 886f77fd..00666b29 100644
--- a/examples-testing/examples/webgl_postprocessing_unreal_bloom.ts
Expand Down
2 changes: 1 addition & 1 deletion three.js
Submodule three.js updated 23 files
+1 −1 docs/examples/en/postprocessing/EffectComposer.html
+1 −1 docs/examples/zh/postprocessing/EffectComposer.html
+1 −1 editor/js/Loader.js
+8 −1 editor/js/libs/app/index.html
+1 −1 examples/files.json
+31 −0 examples/jsm/nodes/functions/ShadowMaskModel.js
+5 −1 examples/jsm/nodes/lighting/AnalyticLightNode.js
+2 −1 examples/jsm/nodes/lighting/DirectionalLightNode.js
+2 −1 examples/jsm/nodes/lighting/PointLightNode.js
+2 −1 examples/jsm/nodes/lighting/SpotLightNode.js
+1 −0 examples/jsm/nodes/materials/Materials.js
+2 −0 examples/jsm/nodes/materials/NodeMaterial.js
+34 −0 examples/jsm/nodes/materials/ShadowNodeMaterial.js
+2 −2 examples/jsm/renderers/common/Renderer.js
+0 −1 examples/jsm/renderers/webgpu/nodes/WGSLNodeBuilder.js
+ − examples/screenshots/webgl_postprocessing_transition.jpg
+0 −0 examples/webgl_postprocessing_transition.html
+2 −7 examples/webgpu_tsl_editor.html
+1 −1 examples/webgpu_tsl_transpiler.html
+1 −1 playground/elements/CodeEditorElement.js
+1 −1 playground/index.html
+23 −19 src/renderers/WebGLRenderer.js
+1 −1 test/e2e/puppeteer.js

0 comments on commit 7d90237

Please sign in to comment.