three.js dev template - module

HTML

<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three/build/three.module.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';

let mesh, renderer, scene, camera, controls;

init();

addBatchedMesh();

function addBatchedMesh() {
  const box = new THREE.BoxGeometry( 1, 1, 1 );
  const sphere = new THREE.SphereGeometry( 1, 12, 12 );
  
    const startCol = new THREE.Color( 0x00ff00 );

  
  const material = new THREE.MeshBasicMaterial( { wireframe:false, color:startCol } );

  // initialize and add geometries into the batched mesh
  const batchedMesh = new THREE.BatchedMesh( 10, 5000, 10000, material );
  const boxGeometryId = batchedMesh.addGeometry( box );
  const sphereGeometryId = batchedMesh.addGeometry( sphere );

  // create instances of those geometries
  const boxInstancedId1 = batchedMesh.addInstance( boxGeometryId );
  const boxInstancedId2 = batchedMesh.addInstance( boxGeometryId );

  const sphereInstancedId1 = batchedMesh.addInstance( sphereGeometryId );
  const sphereInstancedId2 = batchedMesh.addInstance( sphereGeometryId );


// position the geometries
  batchedMesh.setMatrixAt( boxInstancedId1, new THREE.Matrix4().setPosition(-2,0,0) );
  batchedMesh.setMatrixAt( boxInstancedId2, new THREE.Matrix4().setPosition(2,0,0) );

  batchedMesh.setMatrixAt( sphereInstancedId1, new THREE.Matrix4().setPosition(0,-2,0) );
  batchedMesh.setMatrixAt( sphereInstancedId2, new THREE.Matrix4().setPosition(0,2,0) );

  scene.add( batchedMesh );
  
  const col = new THREE.Color( 0xff0000 );
  
  batchedMesh.setColorAt(boxInstancedId1, col);
  batchedMesh.setColorAt(boxInstancedId2, col);
  batchedMesh.setColorAt(sphereInstancedId1, col);
  batchedMesh.setColorAt(sphereInstancedId2, col);


	batchedMesh.setColorAt(boxInstancedId1, startCol);
  batchedMesh.setColorAt(boxInstancedId2, startCol);
    
}

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setPixelRatio( window.devicePixelRatio...