ecsy框架（three.js ecs framework）在线示例：移动的物体

ecsy is a brand new entity-component-system architectured framework for building 2d 3d web applications, which is powered by mozilla

three, ecsy, example

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2851
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      html, body: {
        margin: 0;
        padding: 0;
      }
    </style>

const NUM_ELEMENTS = 50;
      const SPEED_MULTIPLIER = 0.3;
      const SHAPE_SIZE = 50;
      const SHAPE_HALF_SIZE = SHAPE_SIZE / 2;

// Initialize canvas
      let canvas = document.querySelector("canvas");
      let canvasWidth = canvas.width = window.innerWidth;
      let canvasHeight = canvas.height = window.innerHeight;
      let ctx = canvas.getContext("2d");

//----------------------
      // Components
      //----------------------

// Velocity component
      class Velocity {
        constructor() {
          this.x = this.y = 0;
        }
      }

// Position component
      class Position {
        constructor() {
          this.x = this.y = 0;
        }
      }

// Shape component
      class Shape {
        constructor() {
          this.primitive = 'box';
        }
      }

// Renderable component
      class Renderable extends TagComponent {}

//----------------------
      // Systems
      //----------------------

// MovableSystem
      class MovableSystem extends System {
        // This method will get called on every frame by default
        execute(delta, time) {
          // Iterate through all the entities on the query
          this.queries.moving.results.forEach(entity => {
            var velocity = entity.getComponent(Velocity);
            var position = entity.getMutableComponent(Position);
            position.x += velocity.x * delta;
            position.y += velocity.y * delta;

if (position.x > canvasWidth + SHAPE_HALF_SIZE) position.x = - SHAPE_HALF_SIZE;
            if (position.x < - SHAPE_HALF_SIZE) position.x = canvasWidth + SHAPE_HALF_SIZE;
            if (position.y > canvasHeight + SHAPE_HALF_SIZE) position.y = - SHAPE_HALF_SIZE;
            if (position.y < - SHAPE_HALF_SIZE) position.y = canvasHeight + SHAPE_HALF_SIZE;
          });
        }
      }

// Define a query of entities that have "Velocity" and "Position" components
      MovableSystem.queries = {
        moving: {
          components: [Velocity, Position]
        }
      }

// RendererSystem
      class RendererSystem extends System {
        // This method will get called on every frame by default
        execute(delta, time) {

ctx.fillStyle = "#d4d4d4";
          ctx.fillRect(0, 0, canvasWidth, canvasHeight);

// Iterate through all the entities on the query
          this.queries.renderables.results.forEach(entity => {
            var shape = entity.getComponent(Shape);
            var position = entity.getComponent(Position);
            if (shape.primitive === 'box') {
              this.drawBox(position);
            } else {
              this.drawCircle(position);
            }
          });
        }

drawCircle(position) {
          ctx.beginPath();
          ctx.arc(position.x, position.y, SHAPE_HALF_SIZE, 0, 2 * Math.PI, false);
          ctx.fillStyle= "#39c495";
          ctx.fill();
          ctx.lineWidth = 2;
          ctx.strokeStyle = "#0b845b";
          ctx.stroke();          
        }

drawBox(position) {
          ctx.beginPath();
          ctx.rect(position.x - SHAPE_HALF_SIZE, position.y - SHAPE_HALF_SIZE, SHAPE_SIZE, SHAPE_SIZE);
          ctx.fillStyle= "#e2736e";
          ctx.fill();
          ctx.lineWidth = 2;
          ctx.strokeStyle = "#b74843";
          ctx.stroke();                      
        }
      }

// Define a query of entities that have "Renderable" and "Shape" components
      RendererSystem.queries = {
        renderables: { components: [Renderable, Shape] }
      }

// Create world and register the systems on it
      var world = new World();
      world
        .registerSystem(MovableSystem)
        .registerSystem(RendererSystem);

// Some helper functions when creating the components
      function getRandomVelocity() {
        return {
          x: SPEED_MULTIPLIER * (2 * Math.random() - 1), 
          y: SPEED_MULTIPLIER * (2 * Math.random() - 1)
        };
      }

function getRandomPosition() {
        return { 
          x: Math.random() * canvasWidth, 
          y: Math.random() * canvasHeight
        };
      }

function getRandomShape() {
         return {
           primitive: Math.random() >= 0.5 ? 'circle' : 'box'
         };
      }

for (let i = 0; i < NUM_ELEMENTS; i++) {
        world
          .createEntity()
          .addComponent(Velocity, getRandomVelocity())
          .addComponent(Shape, getRandomShape())
          .addComponent(Position, getRandomPosition())
          .addComponent(Renderable)        
      }

// Run!
      function run() {
        // Compute delta and elapsed time
        var time = performance.now();
        var delta = time - lastTime;

// Run all the systems
        world.execute(delta, time);

lastTime = time;
        requestAnimationFrame(run);
      }

var lastTime = performance.now();
      run();      
    </script>
  </head>  
  <body>
    <canvas width="500" height="500"></canvas>
  </body>
</html>

ecsy is a brand new entity-component-system architectured framework for building 2d 3d web applications, which is powered by mozilla

three, ecsy, example

编辑器支持Emmet

快捷键

ecsy is a brand new entity-component-system architectured framework for building 2d 3d web applications, which is powered by mozilla

three, ecsy, example

three.js实例化几何体（InstancedBufferGeometry）代码示例

three.js光线行进（ray marching picking）代码示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：