threejs/manual/resources/threejs-lots-of-objects.js

import * as THREE from 'three';
import {threejsLessonUtils} from './threejs-lesson-utils.js';
import {GUI} from '../../examples/jsm/libs/lil-gui.module.min.js';

{
  class DegRadHelper {
    constructor(obj, prop) {
      this.obj = obj;
      this.prop = prop;
    }
    get value() {
      return THREE.MathUtils.radToDeg(this.obj[this.prop]);
    }
    set value(v) {
      this.obj[this.prop] = THREE.MathUtils.degToRad(v);
    }
  }

  function scaleCube(zOffset) {
    const root = new THREE.Object3D();

    const size = 3;
    const geometry = new THREE.BoxGeometry(size, size, size);
    geometry.applyMatrix4(new THREE.Matrix4().makeTranslation(0, 0, zOffset * size));
    const material = new THREE.MeshBasicMaterial({
      color: 'red',
    });
    const cube = new THREE.Mesh(geometry, material);
    root.add(cube);
    cube.add(new THREE.LineSegments(
        new THREE.EdgesGeometry(geometry),
        new THREE.LineBasicMaterial({color: 'white'})));

    [[0, 0], [1, 0], [0, 1]].forEach((rot) => {
      const size = 10;
      const divisions = 10;
      const gridHelper = new THREE.GridHelper(size, divisions);
      root.add(gridHelper);
      gridHelper.rotation.x = rot[0] * Math.PI * .5;
      gridHelper.rotation.z = rot[1] * Math.PI * .5;
    });

    return {
      obj3D: root,
      update: (time) => {
        const s = THREE.MathUtils.lerp(0.5, 2, Math.sin(time) * .5 + .5);
        cube.scale.set(s, s, s);
      },
    };
  }

  threejsLessonUtils.addDiagrams({
    scaleCenter: {
      create() {
        return scaleCube(0);
      },
    },
    scalePositiveZ: {
      create() {
        return scaleCube(.5);
      },
    },
    lonLatPos: {
      create(info) {
        const {scene, camera, renderInfo} = info;
        const size = 10;
        const divisions = 10;
        const gridHelper = new THREE.GridHelper(size, divisions);
        scene.add(gridHelper);

        const geometry = new THREE.BoxGeometry(1, 1, 1);

        const lonHelper = new THREE.Object3D();
        scene.add(lonHelper);
        const latHelper = new THREE.Object3D();
        lonHelper.add(latHelper);
        const positionHelper = new THREE.Object3D();
        latHelper.add(positionHelper);

        {
          const lonMesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({color: 'green'}));
          lonMesh.scale.set(0.2, 1, 0.2);
          lonHelper.add(lonMesh);
        }
        {
          const latMesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({color: 'blue'}));
          latMesh.scale.set(1, 0.25, 0.25);
          latHelper.add(latMesh);
        }
        {
          const geometry = new THREE.SphereGeometry(0.1, 24, 12);
          const posMesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({color: 'red'}));
          posMesh.position.z = 1;
          positionHelper.add(posMesh);
        }

        camera.position.set(1, 1.5, 1.5);
        camera.lookAt(0, 0, 0);

        const gui = new GUI({autoPlace: false});
        renderInfo.elem.appendChild(gui.domElement);
        gui.add(new DegRadHelper(lonHelper.rotation, 'y'), 'value', -180, 180).name('lonHelper x rotation');
        gui.add(new DegRadHelper(latHelper.rotation, 'x'), 'value', -90, 90).name('latHelper y rotation');

        return {
          trackball: false,
        };
      },
    },
  });

}