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 (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 { return new Promise((resolve, reject) => { const loader: THREE.AnyLoader = new (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 { return new Promise((resolve, reject) => { const loader: THREE.AnyLoader = new (THREE).OBJLoader(); (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 { const materialCreator = await this.loadEggMtl(); return this.loadEggObj(materialCreator); } static loadEggGltf(): Promise { return new Promise((resolve, reject) => { const loader: THREE.AnyLoader = new (THREE).GLTFLoader(); loader.load( `models/Egg_gltf/Egg from Poly uovo copy.gltf`, (gltf) => { c.log(gltf); resolve(gltf.scene); } ); }); } } 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); // ((eggFace.material)).color.set(0x000000); } { const egg = await Assets.loadEggGltf(); c.log(egg); egg.scale.setScalar(100); egg.position.x = -10; egg.remove(egg.getObjectByName('Camera')!); scene.add(egg); // c.log(Utils.boundingBox(egg)); const box = new THREE.BoxHelper(egg, new THREE.Color('red')); scene.add(box); } // 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();