three.js dev template - module

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

import * as THREE from "https://threejs.org/build/three.module.js";
import { DragControls } from "https://threejs.org/examples/jsm/controls/DragControls.js";

let renderer, scene, camera;

let helper;

init();
render();

function init() {

    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setPixelRatio( window.devicePixelRatio );
    document.body.appendChild( renderer.domElement );

    scene = new THREE.Scene();
    
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.1, 100 );
    camera.position.set( 10, 10, 10 );
		camera.lookAt( scene.position );
   
    scene.add( new THREE.AxesHelper( 20 ) );

    const geometry = new THREE.BoxBufferGeometry();
    const material = new THREE.MeshNormalMaterial();
    
    const mesh = new THREE.Mesh( geometry, material );
		mesh.rotation.y = Math.PI * 0.25;
    scene.add( mesh );
		
		var helper = new THREE.BoxHelper( mesh );
		scene.add( helper );
		
    const controls = new DragControls( [ mesh ], camera, renderer.domElement );
		
		controls.addEventListener( 'drag', () => {
		
			helper.update( mesh );
			render();
		
		} );
    
}

function render() {

    renderer.render( scene, camera );

}