Merging five gemetries

by José Roberto Lazzareschi

HTML

<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>

<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/[email protected]/build/three.module.js",
      "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
    }
  }
</script>
    
    <span id="spanA" style="left:10px;top:5px;">right click &rarr; inspect &rarr; source code</span>

CSS

body{margin:0px;border:0px;background-color:#002244;font-family:Monospace;overflow:hidden;}
span{position:absolute;color:#ff0;font-size:9pt;cursor:pointer;}

JavaScript

import * as THREE from 'three';
import Stats from 'three/addons/libs/stats.module.js';
import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';
import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js';
import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

var camera, scene, renderer, controls, material, ambLight, pointLight, mer;

var g=[];
var p=Math.PI;
var geometries=[];

function init(){
	camera=new THREE.PerspectiveCamera(80,window.innerWidth/window.innerHeight,1,1000);
	camera.position.set(0,20,60);

	scene=new THREE.Scene();

	renderer=new THREE.WebGLRenderer({antialias:true});
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(window.innerWidth,window.innerHeight);
	renderer.setClearColor(0x002244,1);

	document.body.appendChild(renderer.domElement);

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

	window.addEventListener('resize',onWindowResize);

	ambLight=new THREE.AmbientLight(0xffcc99,0.5);
	scene.add(ambLight);

	pointLight=new THREE.PointLight("#ff0",2.0);
	pointLight.position.set(-80,250,0);
	scene.add(pointLight);

	g[0]=new THREE.SphereGeometry(4,16,16)
	g[1]=new THREE.SphereGeometry(25,24,24,0,0.2,p/2,p/2);
	g[2]=g[1].clone();
	g[3]=g[1].clone();
	g[4]=g[1].clone();

	g[0].translate(-21,-2,-2);

	g[1].rotateX(-p);
	g[1].translate(3,0,0);

	g[2].rotateX(p/2);
	g[2].translate(3,0,0);

	g[3].rotateX(-p/2);
	g[3].translate(3,-5,0);

	g[4].rotateX(2*p);
	g[4].translate(3,0,-5);

	geometries[0]=g[0];
	geometries[1]=g[1];
	geometries[2]=g[2];
	geometries[3]=g[3];
	geometries[4]=g[4];

	const geometry=BufferGeometryUtils.mergeBufferGeometries(geometries);
	geometry.computeBoundingSphere();

	material=new THREE.MeshStandardMaterial({color:'#09c',side:THREE.DoubleSide}); 
	mer=new THREE.Mesh(geometry,material);
	scene.add(mer);
}

function...