WASM version
<canvas id="canvas" width="640" height="480"></canvas>
<script src="three.min.js"></script>
<script src="effekseer.min.js"></script>or
asm.js version
<canvas id="canvas" width="640" height="480"></canvas>
<script src="three.min.js"></script>
<script src="effekseer_asmjs.js"></script>function main()
{
// Setup WebGLRenderer
var canvas = document.getElementById("canvas");
// There is a bug in the old three.js resetState. It is recommended to use a newer version.
var renderer = new THREE.WebGLRenderer({ canvas: canvas });
renderer.setSize(canvas.width, canvas.height);
var clock = new THREE.Clock();
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(30.0, canvas.width / canvas.height, 1, 1000);
camera.position.set(20, 20, 20);
camera.lookAt(new THREE.Vector3(0, 0, 0));
// Create a context
context = effekseer.createContext();
// Initialize by WebGLRenderingContext
context.init(renderer.getContext());
// fast rendering by skipping state fetching.
// If there is a problem with the drawing, please set this flag to false.
var fastRenderMode = true;
if (fastRenderMode) {
context.setRestorationOfStatesFlag(false);
}
// Load effect data
var effect = context.loadEffect("Laser01.efkefc", 1.0, function(){
// Play the loaded effect
var handle = context.play(effect);
// Change a position
handle.setLocation(0,0,0);
});
(function renderLoop() {
requestAnimationFrame( renderLoop );
// Effekseer Update
context.update(clock.getDelta() * 60.0);
// Three.js Rendering
renderer.render(scene, camera);
// Rendering Settings
context.setProjectionMatrix(camera.projectionMatrix.elements);
context.setCameraMatrix(camera.matrixWorldInverse.elements);
// Effekseer Rendering
context.draw();
// Effekseer makes states dirtied. So reset three.js states
if (fastRenderMode) {
renderer.resetState();
}
})();
}
useWASM = true;
if(useWASM) {
// if you use wasm version
effekseer.initRuntime('effekseer.wasm', () => {
main();
});
} else {
// if you use asmjs version
main();
}For more information