<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
    <script type="importmap">
        {
            "imports": {
              "three": "https://unpkg.com/three@0.156.1/build/three.module.js",
              "three/addons/": "https://unpkg.com/three@0.156.1/examples/jsm/",
              "@three.ez/main": "https://unpkg.com/@three.ez/main@0.3.2/bundle.js"
            }
        }
    </script>
html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  user-select: none;
}
import { Scene, Mesh, CircleGeometry, PlaneGeometry, MeshBasicMaterial, MathUtils } from 'three';
import { Main, OrthographicCameraAuto } from '@three.ez/main';

class Elflock extends Mesh {
  static geoDrag = new PlaneGeometry(60, 60);
  static geoNoDrag = new CircleGeometry(30);

  constructor(draggable) {
    const geometry = draggable ? Elflock.geoDrag : Elflock.geoNoDrag;
    const material = new MeshBasicMaterial({ color: Math.random() * 0xffffff });

    super(geometry, material);
    this.draggable = draggable; // set draggable state
    this.cursor = draggable ? 'grab' : 'default';
    
    this.position.x = MathUtils.randFloat(-innerWidth / 3, innerWidth / 3);
    this.position.y = MathUtils.randFloat(-innerHeight / 3, innerHeight / 3);

    for (let i = 0; i < 4; i++) {
      const sub = new Mesh(geometry, material);
      sub.cursor = draggable ? 'grab' : 'default';
      sub.scale.setScalar(0.3);
      sub.position.setFromSphericalCoords(45, (i * Math.PI) / 2, Math.PI / 2);
      sub.draggable = draggable; // set sub draggable state
      sub.dragTarget = this; // specify which object will be drag
      this.add(sub);
    }
  }
}

const scene = new Scene();
scene.activeSmartRendering(); // render only if necessary

for (let i = 0; i < 10; i++) {
  const draggable = i % 2 == 0;
  scene.add(new Elflock(draggable));
}

const main = new Main();
main.createView({ scene, camera: new OrthographicCameraAuto(1200).translateZ(1), backgroundColor: 'gainsboroS' });
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.