src/index.ts

import * as THREE from 'three';

const scene = new THREE.Scene();
scene.background = new THREE.Color(0xcccccc);
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000);
camera.position.set(0, 30, 50);
camera.lookAt(0, 3, 0);
const controls = new (<any>THREE).OrbitControls(camera);
const ambientLight = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambientLight);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const stats = new Stats();
document.body.appendChild(stats.dom);

class Assets {
	private static loadEggMtl(): Promise<THREE.Material[]> {
		return new Promise((resolve, reject) => {
			const loader: THREE.AnyLoader = new (<any>THREE).MTLLoader();
			loader.load(
				`models/Egg_from_Poly_uovo/Egg from Poly uovo.mtl`,
				(materials) => {
					materials.preload();
					resolve(materials);
				},
				(xhr) => {},
				reject
			);
		});
	}
	private static loadEggObj(materials: THREE.Material[]): Promise<THREE.Object3D> {
		return new Promise((resolve, reject) => {
			const loader: THREE.AnyLoader = new (<any>THREE).OBJLoader();
			(<any>loader).setMaterials(materials);
			loader.load(
				`models/Egg_from_Poly_uovo/Egg from Poly uovo.obj`,
				(object: THREE.Object3D) => {
					resolve(object);
				},
				(xhr) => {
					// c.log(`${ xhr.loaded / xhr.total * 100 }% loaded`);
				},
				(error) => {
					c.error(error);
					reject(error);
				}
			);
		});
	}
	static async loadEgg(): Promise<THREE.Object3D> {
		const materialCreator = await this.loadEggMtl();
		return this.loadEggObj(materialCreator);
	}
}
class Utils {
	static boundingBox(o: THREE.Object3D): [THREE.Vector3, THREE.Vector3] {
		const bbox = new THREE.Box3().setFromObject(o);
		/// vv Just unpack it for easier console logging.
		return [bbox.min, bbox.max];
	}
}
(async () => {
	/**
	 * scene construction
	 */
	const gridHelper = new THREE.GridHelper(100, 100);
	scene.add(gridHelper);
	const axesHelper = new THREE.AxesHelper(50);
	scene.add(axesHelper);
	
	const cube = new THREE.Mesh(
		new THREE.BoxGeometry(1, 1, 1),
		new THREE.MeshBasicMaterial({ color: 0x00ff00 })
	);
	cube.position.x = 7;
	scene.add(cube);
	
	{
		const egg = await Assets.loadEgg();
		c.log(egg);
		egg.scale.setScalar(.2);
		egg.rotateX(-Math.PI / 2);
		// c.log(egg.rotation);
		// c.log(Utils.boundingBox(egg));
		const box = new THREE.BoxHelper(egg);
		scene.add(box);
		scene.add(egg);
		///// Manually set the material, for fun.
		// const eggFace = egg.getObjectByName("CallKit-IconMask") as THREE.Mesh;
		// c.log(eggFace.material);
		// (<THREE.MeshPhongMaterial>(eggFace.material)).color.set(0x000000);
	}
	
	
	// const geometry = new THREE.CylinderBufferGeometry( 0, 10, 30, 4, 1 );
	// const material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
	// for ( let i = 0; i < 500; i ++ ) {
	// 	const mesh = new THREE.Mesh( geometry, material );
	// 	mesh.position.x = Math.random() * 1600 - 800;
	// 	mesh.position.y = 0;
	// 	mesh.position.z = Math.random() * 1600 - 800;
	// 	mesh.updateMatrix();
	// 	mesh.matrixAutoUpdate = false;
	// 	scene.add( mesh );
	// }
})();

/**
 * MAIN()
 */
function render() {
	// const delta = clock.getDelta();
	renderer.render( scene, camera );
}
function animate() {
	requestAnimationFrame(animate);
	render();
	stats.update();
}
animate();