three.js dev template - module

by farazshaikh

HTML

<script type="importmap">
	{
		"imports": {
			"three/webgpu": "https://unpkg.com/three/build/three.webgpu.js",
			"three/tsl": "https://unpkg.com/three/build/three.tsl.js",
      "three/addons/": "https://unpkg.com/three/examples/jsm/"
		}
	}
</script>

CSS

body {
	margin: 0px;
}

JavaScript

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import * as SkeletonUtils from 'three/addons/utils/SkeletonUtils.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);
camera.position.z = 10;

const renderer = new THREE.WebGLRenderer( {
    antialias: true,
    alpha: true,
} );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial();

geometry.setAttribute(
    'skinIndex',
    new THREE.Uint16BufferAttribute(
        new Uint16Array( geometry.attributes.position.count * 4 ).fill( 0 ),
        4
    )
);

geometry.setAttribute(
    'skinWeight',
    new THREE.Uint16BufferAttribute(
        new Uint16Array( geometry.attributes.position.count * 4 ).fill( 1 ),
        4
    )
);

const bones = [];
const shoulder = new THREE.Bone();
bones.push( shoulder );
const armSkeleton = new THREE.Skeleton( bones );

const mesh = new THREE.SkinnedMesh( geometry, material );
mesh.bind( armSkeleton );
scene.add( SkeletonUtils.clone( mesh ) );

const controls = new OrbitControls( camera, renderer.domElement );

function animate() {

    requestAnimationFrame( animate );

    renderer.render( scene, camera );
    controls.update();

}

animate();