Merge pull request #21 from galacean/feat/particle-case

Fix: align particle params
galacean · May 23, 2024 · 26fe0ea · 26fe0ea
2 parents 1f79ee7 + 9e738d4
commit 26fe0ea
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 13 deletions.
diff --git a/src/babylon/particle-benchmark.ts b/src/babylon/particle-benchmark.ts
@@ -34,7 +34,7 @@ const createScene = function () {
   // Camera
   var camera = new UniversalCamera(
     "ArcRotateCamera",
-    new Vector3(0, 0, -180),
+    new Vector3(0, 0, -220),
     scene
   );
 
@@ -47,7 +47,7 @@ const createScene = function () {
 
   // Fire!
   const xCount = 25;
-  const yCount = 30;
+  const yCount = 20;
   const xSpacing = 3;
   const ySpacing = 5;
 

diff --git a/src/galacean/particle-benchmark.ts b/src/galacean/particle-benchmark.ts
@@ -34,14 +34,13 @@ WebGLEngine.create({
 
   // Create camera
   const cameraEntity = rootEntity.createChild("camera_entity");
-  cameraEntity.transform.position = new Vector3(0, 0, 180);
+  cameraEntity.transform.position = new Vector3(0, 0, 220);
 
   const camera = cameraEntity.addComponent(Camera);
-  camera.farClipPlane = 200;
-  camera.fieldOfView = 60;
+  camera.farClipPlane = 500;
 
   const xCount = 25;
-  const yCount = 30;
+  const yCount = 20;
   const xSpacing = 3;
   const ySpacing = 5;
 

diff --git a/src/three/particle-benchmark.ts b/src/three/particle-benchmark.ts
@@ -21,21 +21,25 @@ import ParticleSystem, {
   Color,
   RandomDrift,
 } from "three-nebula";
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
 
 // Initialize scene, camera, and renderer
 const scene = new THREE.Scene();
 const camera = new THREE.PerspectiveCamera(
-  75,
+  45,
   window.innerWidth / window.innerHeight,
   0.1,
   1000
 );
-camera.position.z = 180;
+camera.position.z = 220;
 
-const canvas = document.getElementById("canvas");
-const renderer = new THREE.WebGLRenderer({ canvas: canvas });
-renderer.setSize(window.innerWidth, window.innerHeight);
+const canvas = <HTMLCanvasElement>document.getElementById("canvas");
+canvas.width = canvas.clientWidth * window.devicePixelRatio;
+canvas.height = canvas.clientHeight * window.devicePixelRatio;
+
+const renderer = new THREE.WebGLRenderer({
+  canvas: canvas,
+  antialias: true,
+});
 
 // Load texture for particles
 
@@ -79,7 +83,7 @@ loader.load(
     const system = new ParticleSystem();
 
     const xCount = 25;
-    const yCount = 30;
+    const yCount = 20;
     const xSpacing = 3;
     const ySpacing = 5;