fix FollowEmitter position bug

drawcall · Jul 29, 2020 · fef1707 · fef1707
1 parent fa2ce78
commit fef1707
Show file tree

Hide file tree

Showing 6 changed files with 175 additions and 21 deletions.
diff --git a/build/three.proton.js b/build/three.proton.js
@@ -398,6 +398,7 @@
                 distance = -camera.position.z / dir.z;
                 vector.copy(camera.position);
                 vector.add(dir.multiplyScalar(distance));
+
                 return vector;
             }
         }(),
@@ -2731,7 +2732,9 @@
         this.mouseTarget = Proton.Util.initValue(mouseTarget, window);
         this.ease = Proton.Util.initValue(ease, .7);
         this._allowEmitting = false;
+        this.mouse = new Proton.Vector3D();
         this.initEventHandler();
+
         FollowEmitter._super_.call(this, pObj);
     };
 
@@ -2774,19 +2777,28 @@
         this.canvas = canvas;
     }
 
-    FollowEmitter.prototype.mousemove = function(e) {
-        if (e.layerX || e.layerX == 0) {
-            this.p.x += (e.layerX - this.p.x) * this.ease;
-            this.p.y += (e.layerY - this.p.y) * this.ease;
-        } else if (e.offsetX || e.offsetX == 0) {
-            this.p.x += (e.offsetX - this.p.x) * this.ease;
-            this.p.y += (e.offsetY - this.p.y) * this.ease;
-        }
+    FollowEmitter.prototype.setCameraAndRenderer = function(camera, renderer) {
+        this.camera = camera;
+        this.renderer = renderer;
+        this.canvas = renderer.domElement;
+    }
 
-        this.p.copy(Proton.THREEUtil.toSpacePos(this.p, this.camera, this.canvas));
+    FollowEmitter.prototype.mousemove = function(e) {
+        var rect = this.canvas.getBoundingClientRect();
+        var x = e.clientX - rect.left;
+        var y = e.clientY - rect.top;
+        var ratio = this.renderer? this.renderer.getPixelRatio() : 1;
+        x *= ratio;
+        y *= ratio;
+
+        this.mouse.x += (x - this.mouse.x) * this.ease;
+        this.mouse.y += (y - this.mouse.y) * this.ease;
+
+        this.p.copy(Proton.THREEUtil.toSpacePos(this.mouse, this.camera, this.canvas, this.renderer));
 
-        if (this._allowEmitting)
+        if (this._allowEmitting){
             FollowEmitter._super_.prototype.emit.call(this, 'once');
+        }
     };
 
     /**

diff --git a/build/three.proton.min.js b/build/three.proton.min.js
diff --git a/example/followemitter.html b/example/followemitter.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>three.proton - eightdiagrams</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
+    <style type="text/css">
+      body {
+        font-family: Monospace;
+        background-color: #fff;
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="container"></div>
+    <script src="../lib/three.min.js"></script>
+    <script src="../lib/require.js"></script>
+    <script src="../lib/config.js"></script>
+    <script src="./js/lib/TrackballControls.js"></script>
+    <script>
+      var proton, emitter, R, particles;
+      var camera, scene, renderer, clock;
+
+      function init() {
+        addScene();
+        addLights();
+        addStars();
+        addProton();
+        animate();
+      }
+
+      function addScene() {
+        camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
+        camera.position.z = 500;
+        scene = new THREE.Scene();
+        scene.fog = new THREE.Fog(0xffffff, 1, 10000);
+
+        renderer = new THREE.WebGLRenderer();
+        renderer.setPixelRatio(window.devicePixelRatio);
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        document.body.appendChild(renderer.domElement);
+        window.addEventListener("resize", onWindowResize, false);
+      }
+
+      function addLights() {
+        var ambientLight = new THREE.AmbientLight(0x101010);
+        scene.add(ambientLight);
+
+        var pointLight = new THREE.PointLight(0xffffff, 2, 1000, 1);
+        pointLight.position.set(0, 200, 200);
+        scene.add(pointLight);
+      }
+
+      function addStars() {
+        var geometry = new THREE.Geometry();
+        for (var i = 0; i < 10000; i++) {
+          var vertex = new THREE.Vector3();
+          vertex.x = THREE.Math.randFloatSpread(2000);
+          vertex.y = THREE.Math.randFloatSpread(2000);
+          vertex.z = THREE.Math.randFloatSpread(2000);
+          geometry.vertices.push(vertex);
+        }
+
+        particles = new THREE.Points(
+          geometry,
+          new THREE.PointsMaterial({
+            color: 0x888888
+          })
+        );
+
+        scene.add(particles);
+      }
+
+      function addProton() {
+        proton = new Proton();
+        emitter = new Proton.FollowEmitter();
+        emitter.rate = new Proton.Rate(new Proton.Span(5, 7), new Proton.Span(0.01, 0.02));
+        emitter.addInitialize(new Proton.Mass(1));
+        emitter.addInitialize(new Proton.Life(2));
+        emitter.addInitialize(new Proton.Body(createSprite()));
+        emitter.addInitialize(new Proton.Radius(40));
+        emitter.addInitialize(new Proton.V(200, new Proton.Vector3D(0, 0, -1), 0));
+
+        emitter.addBehaviour(new Proton.Alpha(1, 0));
+        emitter.addBehaviour(new Proton.Color("#4F1500", "#0029FF"));
+        emitter.addBehaviour(new Proton.Scale(1, 0.5));
+        emitter.addBehaviour(new Proton.CrossZone(new Proton.ScreenZone(camera, renderer), "dead"));
+
+        emitter.addBehaviour(new Proton.Force(0, 0, -20));
+        emitter.setCameraAndRenderer(camera, renderer);
+
+        emitter.emit();
+
+        proton.addEmitter(emitter);
+        proton.addRender(new Proton.SpriteRender(scene));
+      }
+
+      function createSprite() {
+        var map = new THREE.TextureLoader().load("./img/dot.png");
+        var material = new THREE.SpriteMaterial({
+          map: map,
+          color: 0xff0000,
+          blending: THREE.AdditiveBlending,
+          fog: true
+        });
+        return new THREE.Sprite(material);
+      }
+
+      function animate() {
+        requestAnimationFrame(animate);
+        render();
+      }
+
+      function render() {
+        proton.update();
+        renderer.render(scene, camera);
+        camera.lookAt(scene.position);
+        particles.rotation.y += 0.01;
+
+        Proton.Debug.renderInfo(proton, 3);
+      }
+
+      function onWindowResize() {}
+    </script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "three.proton.js",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "three.proton is a magical 3d particle engine using [three.js]",
   "main": "./build/three.proton.min.js",
   "directories": {

diff --git a/src/emitter/FollowEmitter.js b/src/emitter/FollowEmitter.js
@@ -15,7 +15,9 @@
         this.mouseTarget = Proton.Util.initValue(mouseTarget, window);
         this.ease = Proton.Util.initValue(ease, .7);
         this._allowEmitting = false;
+        this.mouse = new Proton.Vector3D();
         this.initEventHandler();
+
         FollowEmitter._super_.call(this, pObj);
     };
 
@@ -58,19 +60,28 @@
         this.canvas = canvas;
     }
 
+    FollowEmitter.prototype.setCameraAndRenderer = function(camera, renderer) {
+        this.camera = camera;
+        this.renderer = renderer;
+        this.canvas = renderer.domElement;
+    }
+
     FollowEmitter.prototype.mousemove = function(e) {
-        if (e.layerX || e.layerX == 0) {
-            this.p.x += (e.layerX - this.p.x) * this.ease;
-            this.p.y += (e.layerY - this.p.y) * this.ease;
-        } else if (e.offsetX || e.offsetX == 0) {
-            this.p.x += (e.offsetX - this.p.x) * this.ease;
-            this.p.y += (e.offsetY - this.p.y) * this.ease;
-        }
+        var rect = this.canvas.getBoundingClientRect();
+        var x = e.clientX - rect.left;
+        var y = e.clientY - rect.top;
+        var ratio = this.renderer? this.renderer.getPixelRatio() : 1;
+        x *= ratio;
+        y *= ratio;
 
-        this.p.copy(Proton.THREEUtil.toSpacePos(this.p, this.camera, this.canvas));
+        this.mouse.x += (x - this.mouse.x) * this.ease;
+        this.mouse.y += (y - this.mouse.y) * this.ease;
+
+        this.p.copy(Proton.THREEUtil.toSpacePos(this.mouse, this.camera, this.canvas, this.renderer));
 
-        if (this._allowEmitting)
+        if (this._allowEmitting){
             FollowEmitter._super_.prototype.emit.call(this, 'once');
+        }
     };
 
     /**

diff --git a/src/utils/THREEUtil.js b/src/utils/THREEUtil.js
@@ -29,6 +29,7 @@
                 distance = -camera.position.z / dir.z;
                 vector.copy(camera.position);
                 vector.add(dir.multiplyScalar(distance));
+
                 return vector;
             }
         }(),