JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://bitbucket.org/gootech/tutorials/downloads/require.js"></script>
CSS
canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
JavaScript
require({
waitSeconds: 30,
paths: {
goo: 'https://bitbucket.org/gootech/tutorials/downloads/goo.0.5.0'
}
}, ['goo'], function () {
require([
'goo/entities/GooRunner',
'goo/entities/EntityUtils',
'goo/renderer/Material',
'goo/renderer/Camera',
'goo/entities/components/CameraComponent',
'goo/shapes/ShapeCreator',
'goo/entities/components/ScriptComponent',
'goo/renderer/shaders/ShaderLib',
'goo/entities/World',
'goo/renderer/light/PointLight',
'goo/entities/components/LightComponent',
'goo/entities/components/PortalComponent',
'goo/entities/systems/PortalSystem',
'goo/math/Vector3',
'goo/scripts/OrbitCamControlScript'], function (
GooRunner,
EntityUtils,
Material,
Camera,
CameraComponent,
ShapeCreator,
ScriptComponent,
ShaderLib,
World,
PointLight,
LightComponent,
PortalComponent,
PortalSystem,
Vector3,
OrbitCamControlScript) {
"use strict";
function addPortalSystem(goo) {
var renderingSystem = goo.world.getSystem('RenderSystem');
var renderer = goo.renderer;
goo.world.setSystem(new PortalSystem(renderer, renderingSystem));
}
function addPortal(goo, camera, x, y, z, dim, options) {
var quadMeshData = ShapeCreator.createQuad(dim, dim);
var quadMaterial = Material.createMaterial(ShaderLib.textured, '');
var quadEntity = EntityUtils.createTypicalEntity(goo.world, quadMeshData, quadMaterial);
quadEntity.transformComponent.transform.translation.set(x, y, z);
var portalComponent = new PortalComponent(camera, 500, options);
quadEntity.setComponent(portalComponent);
quadEntity.addToWorld();
return portalComponent;
}
function addSpheres(goo, nSpheres) {
...