Hello,
im trying to get the ShaderParticleEngine running, in a project using npm/webpack.
Doing so, I get an Error TypeError: material.onBeforeCompile is undefined
. This happens after I add the particle mesh to the scene (scene.add( particleGroup.mesh );
).
I’ve tested several things to track down the Error, however throwing three.js r107 at the SPE Examples, using the <script src="">
-Syntax works. So maybe Im doing something wrong somewhere, and someone has already figured out how to bundle this.
Code is on gh in this spetest
-branch, Im not aware how to provide this more easily:
The init file (init.js):
Summary
import * as THREE from 'three';
import { SPE } from "shader-particle-engine/build/SPE";
import Controls from './classes/controls';
import Renderer from './classes/renderer';
import Camera from './classes/camera';
export default function () {
var emitter, particleGroup;
const clock = new THREE.Clock();
let delta = 0;
const scene = new THREE.Scene();
const renderer = new Renderer(document.body);
const camera = new Camera(renderer.threeRenderer);
const controls = new Controls(camera.threeCamera, renderer.threeRenderer.domElement);
var gridHelper = new THREE.GridHelper( 10, 10 );
scene.add( gridHelper );
// SPE Default Example "clouds"
// Create particle group and emitter
var loader = new THREE.TextureLoader().load("./img/cloud.png", (texture) => {
particleGroup = new SPE.Group({
texture: {
// value: THREE.ImageUtils.loadTexture('./img/cloud.png')
value: texture
},
blending: THREE.NormalBlending,
maxParticleCount: 750
// fog: true
});
emitter = new SPE.Emitter({
particleCount: 750,
maxAge: {
value: 3,
},
position: {
value: new THREE.Vector3( 0, 0, 0 ),
spread: new THREE.Vector3( 100, 30, 100 )
},
velocity: {
value: new THREE.Vector3( 0, 0, 30 )
},
wiggle: {
spread: 10
},
size: {
value: 75,
spread: 50
},
opacity: {
value: [ 0, 1, 0 ]
},
color: {
value: new THREE.Color( 1, 1, 1 ),
spread: new THREE.Color( 0.1, 0.1, 0.1 )
},
angle: {
value: [ 0, Math.PI * 0.125 ]
}
});
particleGroup.addEmitter( emitter );
scene.add( particleGroup.mesh );
// particleGroup.mesh.frustumCulled = false;
});
function update(delta) {
if( particleGroup ) {
particleGroup.tick( delta );
}
controls.threeControls.update();
}
const animate = function animate() {
requestAnimationFrame(animate);
delta = clock.getDelta();
update(delta);
renderer.render(scene, camera.threeCamera);
};
animate();
}