Skip to content

Instantly share code, notes, and snippets.

@graemecode
Created October 25, 2020 23:48
Show Gist options
  • Save graemecode/032bd4f43cbf3cf37e8c2f2daabd3a12 to your computer and use it in GitHub Desktop.
Save graemecode/032bd4f43cbf3cf37e8c2f2daabd3a12 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
/>
<script type="module">
window.process = { env: { NODE_ENV: "development" } };
import { Component, System, Types } from 'https://unpkg.com/[email protected]?module';
import { initialize, Object3DComponent } from "https://unpkg.com/[email protected]?module";
import {
Mesh,
BoxBufferGeometry,
MeshBasicMaterial,
TextureLoader,
} from "https://unpkg.com/[email protected]?module";
class Rotating extends Component {}
Rotating.schema = {
speed: { default: 1, type: Types.Number }
};
class RotationSystem extends System {
execute(delta) {
this.queries.entities.results.forEach(entity => {
const rotation = entity.getObject3D().rotation;
rotation.y -= 3 * delta;
});
}
}
RotationSystem.queries = {
entities: {
components: [Rotating, Object3DComponent]
}
};
init();
function init() {
const { world, sceneEntity, camera } = initialize();
world.registerComponent(Rotating);
world.registerSystem(RotationSystem);
camera.position.z = 3;
const mesh = new Mesh(
new BoxBufferGeometry(),
new MeshBasicMaterial({
map: new TextureLoader().load("https://i.imgur.com/jsaA9na.png"),
})
);
mesh.rotation.x = 0.5;
world
.createEntity()
.addComponent(Rotating)
.addObject3DComponent(mesh, sceneEntity);
window.world = world;
}
</script>
</head>
<body></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment