Init Commit

2026-05-26 08:27:41 +08:00
commit 83647f6e77
20 changed files with 367 additions and 0 deletions
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Mabulig Web App</title>
+    <script type="importmap">
+      {
+        "imports": {
+          "three": "https://cdn.jsdelivr.net/npm/three@v0.184.0/build/three.module.js",
+          "three/addons/": "https://cdn.jsdelivr.net/npm/three@v0.184.0/examples/jsm/"
+        }
+      }
+    </script>
+    <style>
+      body { margin: 0; }
+    </style>
+  </head>
+  <body>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
@@ -0,0 +1,228 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - GLTFloader</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="main.css">
+	</head>
+
+	<body>
+		<div id="info">
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - GLTFLoader<br />
+			<a href="https://hdrihaven.com/hdri/?h=royal_esplanade" target="_blank" rel="noopener">Royal Esplanade</a> from <a href="https://hdrihaven.com/" target="_blank" rel="noopener">HDRI Haven</a>
+		</div>
+
+		<script type="importmap">
+			{
+				"imports": {
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
+				}
+			}
+		</script>
+
+		<script type="module">
+
+			import * as THREE from 'three';
+
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+			import { UltraHDRLoader } from 'three/addons/loaders/UltraHDRLoader.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+
+			let camera, scene, renderer, controls;
+			let currentModel, mixer;
+			let currentLoadId = 0;
+
+			const timer = new THREE.Timer();
+
+			init();
+
+			function init() {
+
+				const container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
+				camera.position.set( - 1.8, 0.6, 2.7 );
+
+				scene = new THREE.Scene();
+
+				new UltraHDRLoader()
+					.setPath( 'textures/equirectangular/' )
+					.load( 'royal_esplanade_2k.hdr.jpg', function ( texture ) {
+
+						texture.mapping = THREE.EquirectangularReflectionMapping;
+
+						scene.background = texture;
+						scene.environment = texture;
+
+						render();
+
+						// model
+
+						fetch( 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Assets/main/Models/model-index.json' )
+							.then( response => response.json() )
+							.then( models => {
+
+								const gui = new GUI();
+								const modelNames = models.map( m => m.name );
+								const params = { model: 'DamagedHelmet' };
+
+								if ( ! modelNames.includes( params.model ) && modelNames.length > 0 ) {
+
+									params.model = modelNames[ 0 ];
+
+								}
+
+								gui.add( params, 'model', modelNames ).onChange( name => {
+
+									const modelInfo = models.find( m => m.name === name );
+									loadModel( modelInfo );
+
+								} );
+
+								gui.add( scene, 'backgroundBlurriness', 0, 1 );
+
+								const initialModel = models.find( m => m.name === params.model );
+								if ( initialModel ) loadModel( initialModel );
+
+							} );
+
+					} );
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( render );
+				renderer.toneMapping = THREE.ACESFilmicToneMapping;
+				container.appendChild( renderer.domElement );
+
+				controls = new OrbitControls( camera, renderer.domElement );
+				controls.enableDamping = true;
+				controls.minDistance = 2;
+				controls.maxDistance = 10;
+				controls.target.set( 0, 0, - 0.2 );
+				controls.update();
+
+				window.addEventListener( 'resize', onWindowResize );
+
+			}
+
+			function loadModel( modelInfo ) {
+
+				const variants = modelInfo.variants;
+				const variant = variants[ 'glTF-Binary' ] || variants[ 'glTF' ];
+				const url = `https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Assets/main/Models/${ modelInfo.name }/${ variant.endsWith( '.glb' ) ? 'glTF-Binary' : 'glTF' }/${ variant }`;
+
+				if ( currentModel ) {
+
+					scene.remove( currentModel );
+					currentModel = null;
+
+				}
+
+				if ( mixer ) {
+
+					mixer.stopAllAction();
+					mixer = null;
+
+				}
+
+				const loadId = ++ currentLoadId;
+
+				const loader = new GLTFLoader();
+				loader.load( url, async function ( gltf ) {
+
+					if ( loadId !== currentLoadId ) return;
+
+					currentModel = gltf.scene;
+
+					// wait until the model can be added to the scene without blocking due to shader compilation
+
+					await renderer.compileAsync( currentModel, camera, scene );
+
+					if ( loadId !== currentLoadId ) return;
+
+					scene.add( currentModel );
+
+					fitCameraToSelection( camera, controls, currentModel );
+
+					// animations
+
+					if ( gltf.animations.length > 0 ) {
+
+						mixer = new THREE.AnimationMixer( currentModel );
+
+						for ( const animation of gltf.animations ) {
+
+							mixer.clipAction( animation ).play();
+
+						}
+
+					}
+
+				} );
+
+			}
+
+			function fitCameraToSelection( camera, controls, selection, fitOffset = 1.3 ) {
+
+				const box = new THREE.Box3();
+				box.setFromObject( selection );
+
+				const size = box.getSize( new THREE.Vector3() );
+				const center = box.getCenter( new THREE.Vector3() );
+
+				const maxSize = Math.max( size.x, size.y, size.z );
+				const fitHeightDistance = maxSize / ( 2 * Math.atan( Math.PI * camera.fov / 360 ) );
+				// const fitWidthDistance = fitHeightDistance / camera.aspect;
+				// const distance = fitOffset * Math.max( fitHeightDistance, fitWidthDistance );
+				const distance = fitOffset * fitHeightDistance;
+
+				const direction = controls.target.clone().sub( camera.position ).normalize().multiplyScalar( distance );
+
+				controls.maxDistance = distance * 10;
+				controls.minDistance = distance / 10;
+				controls.target.copy( center );
+
+				camera.near = distance / 100;
+				camera.far = distance * 100;
+				camera.updateProjectionMatrix();
+
+				camera.position.copy( controls.target ).sub( direction );
+
+				controls.update();
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				render();
+
+			}
+
+			//
+
+			function render() {
+
+				timer.update();
+
+				controls.update();
+
+				if ( mixer ) mixer.update( timer.getDelta() );
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>
@@ -0,0 +1,118 @@
+import * as THREE from 'three';
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import { UltraHDRLoader } from 'three/addons/loaders/UltraHDRLoader.js';
+import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+
+
+const scene = new THREE.Scene();
+
+const sizes = {
+    width: window.innerWidth,
+    height: window.innerHeight,
+  }
+
+//console.log(sizes.width + "x" + sizes.height);
+
+//RENDERER
+const renderer = new THREE.WebGLRenderer({antialias:true});
+renderer.setSize( sizes.width, sizes.height );
+renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+renderer.toneMapping = THREE.ACESFilmicToneMapping;
+renderer.toneMappingExposure = 1.5;
+renderer.outputColorSpace = THREE.SRGBColorSpace;
+renderer.shadowMap.enabled = true;
+renderer.shadowMap.type = THREE.PCFShadowMap;
+document.body.appendChild( renderer.domElement );
+
+//CAMERA
+const camera = new THREE.PerspectiveCamera( 65, sizes.width / sizes.height, 0.1, 1000 );
+camera.position.x = 0;
+camera.position.y = 2;
+camera.position.z = 7.5;
+
+const controls = new OrbitControls( camera, renderer.domElement );
+controls.enableDamping = true;
+controls.dampingFactor = 0.05; // Friction
+controls.screenSpacePanning = false; // Vertical panning along screen
+controls.update();
+
+
+
+
+//RESIZING
+function handleResize(){
+  sizes.width = window.innerWidth;
+  sizes.height = window.innerHeight;
+  camera.aspect = sizes.width/sizes.height;
+  camera.updateProjectionMatrix();
+  renderer.setSize( sizes.width, sizes.height );
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+}
+window.addEventListener("resize", handleResize);
+
+
+
+//MODEL LOADER
+let core_logo_mesh;
+const loader = new GLTFLoader();
+loader.load( 'models/MBS-2408 Oreophryne anulata.glb', function ( glb ) {
+  core_logo_mesh = glb.scene;
+  scene.add( glb.scene );
+
+}, undefined, function ( error ) {
+
+  console.error( error );
+
+} );
+
+//ENVIRONMENT
+const env_loader = new UltraHDRLoader();
+const env_texture = await env_loader.loadAsync( 'assets/studio_small_08_4k.jpg' );
+env_texture.mapping = THREE.EquirectangularReflectionMapping;
+scene.background = new THREE.Color(0xe6e6e6);
+// scene.background = env_texture;
+// scene.backgroundBlurriness = 0.5;
+scene.environment = env_texture;
+// console.log(scene.environment);
+
+
+//LIGHTS
+const ambient_light = new THREE.AmbientLight( 0xFFFFFF , 0.1); // soft white light
+scene.add( ambient_light );
+const sun = new THREE.DirectionalLight( 0xFFFFFF, 0.5);
+sun.castShadow = true;
+scene.add( sun );
+// const helper = new THREE.DirectionalLightHelper( sun, 5 );
+// scene.add( helper );
+
+
+//EFFECTS PASS
+// const composer = new EffectComposer( renderer );
+// const renderPass = new RenderPass(scene, camera);
+// composer.addPass(renderPass);
+// const bloomPass = new UnrealBloomPass(
+//     new THREE.Vector2(sizes.width, sizes.height), 
+//     0.35,  // strength
+//     1,  // radius
+//     1  // threshold
+// );
+// composer.addPass(bloomPass);
+
+
+
+renderer.setAnimationLoop( animate );
+
+function animate( time ) {
+
+  //cube.rotation.x = time / 2000;
+  //cube.rotation.y = time / 1000;
+  controls.update();
+  //core_logo_mesh.rotation.y = time / 1000;
+  renderer.render( scene, camera );
+  //console.log(camera.position);
+//   if (core_logo_mesh){
+//     core_logo_mesh.rotation.y = time / 1500;
+//   }
+  //composer.render();
+}