<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, BoxGeometry, MeshLambertMaterial, DirectionalLight, AmbientLight } from 'three';
import { Main, PerspectiveCameraAuto } from '@three.ez/main';

const draggableBox = new Mesh(new BoxGeometry(0.2, 0.2, 0.2), new MeshLambertMaterial({ color: 'green' }));
draggableBox.draggable = true;
draggableBox.on(['pointerenter', 'pointerleave'], function(e) {
  this.material.color.set(e.type === 'pointerenter' ? 'yellow' : 'green');
  this.needsRender = true; // necessary because color change cannot be auto detected
});

const scene = new Scene();
scene.activeSmartRendering(); // renders a frame only if it detects a change
scene.add(new AmbientLight(), new DirectionalLight().translateZ(1), draggableBox);

const main = new Main();
main.createView({ scene, camera: new PerspectiveCameraAuto(70).translateZ(1) });
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.