drawcall / three.proton Goto Github PK
View Code? Open in Web Editor NEWthree.proton is a magical 3d particle engine using three.js library. It is based on the Proton engine library.
Home Page: https://drawcall.github.io/three.proton/
three.proton is a magical 3d particle engine using three.js library. It is based on the Proton engine library.
Home Page: https://drawcall.github.io/three.proton/
Hi,
I was hoping to spawn particles from a mesh (teapot example), but seems that the .json exporter for Blender has been deprecated in favour of the gltf workflow.
But when I try to pass the mesh data I get the below error:
three.proton.min.js:10 Uncaught (in promise) TypeError: Right-hand side of 'instanceof' is not an object at new ba (three.proton.min.js:10:882) at createEmitter ((index):136:55) at initProton ((index):112:31) at initAll ((index):51:13) at (index):128:17 at GLTFLoader.js:127:7 at GLTFLoader.js:2239:6
Using your example code I have changed the loadModel function to the below:
function loadModel(callback) { // var objectLoader = new THREE.ObjectLoader(); // objectLoader.load("assets/teapot.json", function (obj) { // mesh = obj; // console.log(obj); // callback(); // }); var loader = new THREE.GLTFLoader(); loader.load('./models/logo.glb', function(gltf) { mesh = gltf.scene.children[0]; console.log(gltf.scene.children[0]); callback(); }) }
Any help on getting this working is much appreciated.
Thanks
For example,
particle_engine_proton.addEventListener(Proton.PARTICLE_CREATED, function(particle) { let num = particle_engine_proton.getCount(); }
It works in proton, but not three.proton.
Thanks.
I noticed that three.proton has not been updated since Jul 2020, compared to Proton, which has been actively maintained. Will three.proton ever get upstream fixes/changes/updates?
Hi thanks for the great library!
I'm using this library in Vuejs(Nuxt.js) project, and I'm getting error of the subject.
When I put
const THREE = require("three");
on top of the /project/node_modules/three.proton.js/build/proton.min.js
, everything works well, but... its a weird kind of solution.
does anyone has any idea to solve it?
Hello, this is less of a direct support question as I am aware of - since I can't find a good place to ask Proton-with-three related questions though, here it is:
Basically I am trying to link a particle emitter to a THREE.3DObject
(linking a jet-stream to an airplane in this case), to have it organised as a child of the object and follow its movement etc. Using airplane.add(particleEmitter)
fails, since the emitters are not 3DObjects. Creating a new THREE.Group
and adding both the airplane and the emitter fails for the very same reason. Currently I am setting the particles' x/y/z to the airplanes' x/y/z each frame in the update function, this seems like an awfully hacky way of doing things, though?
Any comments appreciated!
Hey @drawcall!
Very cool particle engine you have here.
I'm trying to achieve a hit effect on an enemy target, but based on the docs I'm not sure how to do it, and all the examples are endlessly emitting particles.
I want a simple and small explosion like effect to be played once.
Do you have any instructions on how could I do it?
var the should be var tha. Causing an error when using SphereZone
Hi, thanks for this beautiful project!
I am trying to use a MeshZone as CrossZone for the emitter, basically the goal is to have the particles destroyed as soon as they go outside of the MeshZone (defined through a threejs geometry).
My current attempt does not work, the particles are not destroyed even if when they are outside the mesh.
This is the live plunker:
If I code:
let THREE = require('three');
let Proton = require('three.proton.js');
It reports:
Uncaught ReferenceError: THREE is not defined
at eval (three.proton.min.js:13)
And I can't use import
in nodejs(unless using babel).
Awesome work!
Is this now the new Proton.js?
Hello! This is really cool!
Suppose I want to make a stream of particles, like this one, but infinite so that it seems like it streams forever from one spot to the other spot.
Is this possible to do with three.proton?
Proton's code is very interesting. After I have learned a lot about three.js and am now able to understand and use shaders and buffer geometries, it is particle's turn.
I quickly realized that adding particle geometries dynamically in three.js is the big challenge.
I study the code of proton, because proton can process particle body calls much better than is possible with three.js alone. I found out that proton use own renderers.
I created a shader material and chose the spriter renderer in proton. The result is very nice. Now to the problem. With shader I lever out certain behaviors like the scale and alpha. These values are easy to manipulate using shader uniform values. The problem is that changes in uniform values are not updated, only the new particles are always initialized with the new values. Existing particles ignore changes in uniform. This will be because the proton renderers do not pay attention to changes in the material parameters such as the uniforms.
It will take me a while until I understand the code better. Can an update lister be integrated into the renderer which like three.js pays attention to and updates changes in the material parameters?
In the repo readme example, the emitter is position is set to a position given by pointZone and that position only have two parameters.
I played with these parameters and found that only the first one works, but the position change in a very unexpected way. I thought pointZone parameters were for X and Y coordinates, but instead when changing the first parameter, the emitter moves in the vertical axis and the horizontal axis at the same time (it goes up, to the front and to the right).
Any ideas?
Not working with Input Fields
I've currently added define(['./three'], function (THREE) {
on top, and return Proton; });
at the end of the file, also commented out the outer closure wrapping window and the window.Proton = Proton;
to get this to work as a workaround.
What is the proper way to remove a proton instance (along with all its emitters) from a THREE.js scene, so that all existing particles will be removed from the scene object as well?
Will
// create proton instance
var proton = new Proton();
....
// add it to scene
proton.addRender(new Proton.MeshRender(scene));
....
....
// remove it from scene
proton.destroy();
do the job?
Btw, proton.destroy() crashes on this.particlePool.destroy();
. The particlePool
is undefined and looking at the code, it is not set anywhere.
Hey @drawcall!
Getting the above warning when my scene loads.
Don't even using anything from Proton, I'm only importing it and some class from three that I'm using:
import { Object3D, Vector3 } from "three"
// @ts-ignore
import Proton from "three.proton.js"
Tried with import * as THREE from "three"
as well, same result.
My three version is 0.166.1
I added the snow example to my scene. It looks great! Although particles are rendering behind all of my 3D objects. Any thoughts?
Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.