graemecode/example-ecs-avatar-world.html

## example-ecs-avatar-world.html
<!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/ecsy@0.4.2?module';
        import { initialize, Object3DComponent } from "https://unpkg.com/ecsy-three@0.1.3?module";

        import {
            Mesh,
            BoxBufferGeometry,
            MeshBasicMaterial,
            TextureLoader,
        } from "https://unpkg.com/three@0.120.1?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>
	<!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/ecsy@0.4.2?module';
	import { initialize, Object3DComponent } from "https://unpkg.com/ecsy-three@0.1.3?module";

	import {
	Mesh,
	BoxBufferGeometry,
	MeshBasicMaterial,
	TextureLoader,
	} from "https://unpkg.com/three@0.120.1?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>