Untitled

mail@pastecode.io avatar
unknown
javascript
a year ago
7.7 kB
2
Indexable
Never
	<!DOCTYPE html>
	<!-- html lang="en" -->
		<head>
			<meta charset="utf-8" />
			<meta name="viewport" content="width=device-width, initial-scale=1" />
			<title>SBROTHY</title>
			<style>
				html, body {
				   margin: 0;
				   height: 100%;
				}
			</style>
		</head>

		<body>
			<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>			

			<script type="importmap">	
			{
				"imports": {
					"three": "./js/three/",
					"three/addons":  "./js/three/examples/jsm/"
				}
			}
			</script>

			<!-- ---------------------------------------------------------------------------------------------- -->
			<script type="module">
				import * as THREE from './js/three/three.module.js';
				import { OBJLoader } from './js/three/examples/jsm/loaders/OBJLoader.js';
				import { MTLLoader } from './js/three/examples/jsm/loaders/MTLLoader.js';
				import { OrbitControls } from './js/three/examples/jsm/controls/OrbitControls.js';
				
				/* *************************************************************************************************** 
				*/ 
				let renderer, camera, scene, controls;

				let mouseX = 0, mouseY = 0;

				let windowHalfX = window.innerWidth / 2;
				let windowHalfY = window.innerHeight / 2;


				init();
				animate();


				/* *************************************************************************************************** 
				*/
				function onWindowResize() {
					windowHalfX = window.innerWidth / 2;
					windowHalfY = window.innerHeight / 2;

					camera.aspect = window.innerWidth / window.innerHeight;
					camera.updateProjectionMatrix();

					renderer.setSize(window.innerWidth, window.innerHeight);
				}

				/* *************************************************************************************************** 
				*/
				function onDocumentMouseMove( event ) {
					mouseX = ( event.clientX - windowHalfX ) / 2;
					mouseY = ( event.clientY - windowHalfY ) / 2;
				}

				/* *************************************************************************************************** 
				*/
				function init() {
					const container = document.createElement('div');
					document.body.appendChild(container);					

					/* *************************************************************************************************** 
					* create camera
					*/
					const fieldOfView = 45;
					const aspect = window.innerWidth / window.InnerHeight;
					const near = 1;
					const far = 2000;
					camera = new THREE.PerspectiveCamera(fieldOfView, aspect, near, far);
					camera.position.z = 250;

					console.log('camera created');

					/* *************************************************************************************************** 
					* create scene
					*/
					scene = new THREE.Scene();

					const ambientLight = new THREE.AmbientLight(0xcccccc, 1);
					scene.add(ambientLight);
		
					const pointLight = new THREE.PointLight(0xffffff, 0.8);
					camera.add(pointLight);
					scene.add(camera);

					console.log('scene and light created');

					/* *************************************************************************************************** 
					* load model
					*/
					const onProgress = function(xhr) {
						console.log('onProgress: \r\n[' + JSON.stringify(xhr, null, 4) + ']\r\n');
						if(xhr.lengthComputable) {
							const percentComplete = xhr.loaded / xhr.total * 100;
							console.log('onProgress: ' + Math.round(percentComplete, 2) + '% downloaded');
						}
					};

					/* *************************************************************************************************** 
					*/
					const onError = function(err) {
						console.log('onError: \r\n[' + JSON.stringify(err, null, 4) + ']\r\n');						
						console.error('Error happened loading ' + err + ': ' + err);					
					};
					

					/* *************************************************************************************************** 
					*/
					
					new MTLLoader()
						.setPath( './obj/' )
						.load( 
							'male02.mtl', 
							function ( materials ) {
								materials.preload();

								new OBJLoader()
									.setMaterials( materials )
									.setPath( './obj/' )
									.load(
										'male02.obj', 
										function ( object ) {
											object.position.y = - 95;
											scene.add( object );
										}, 
										function(xhr1) {
											if(xhr1.lengthComputable) {
												const percentComplete = xhr1.loaded / xhr1.total * 100;
												console.log('onProgress: ' + Math.round(percentComplete, 2) + '% downloaded');
											}
										},
										function(err1) {
											console.log('onError: \r\n[' + JSON.stringify(err, null, 4) + ']\r\n');						
											console.error('Error happened loading ' + err1);
										}
									);
								},
								function(xhr2) {
									if(xhr2.lengthComputable) {
										const percentComplete = xhr2.loaded / xhr2.total * 100;
										console.log('onProgress: ' + Math.round(percentComplete, 2) + '% downloaded');
									}
								},
								function(err2) {
									console.error('Error happened loading ' + err2);
								}
							);
							

					/* *************************************************************************************************** 
					* create renderer
					*/
					renderer = new THREE.WebGLRenderer( {antialiasing: true} );

					renderer.outputEncoding = THREE.sRGBEncoding;
					renderer.setPixelRatio(window.devicePixelRatio);
					renderer.setSize(window.innerWidth, window.innerHeight);
					container.appendChild(renderer.domElement);					

					console.log('renderer created');

					//document.addEventListener( 'mousemove', onDocumentMouseMove );
					window.addEventListener('resize', onWindowResize);


					controls = new OrbitControls(camera, renderer.domElement);
					controls.update();
					
					console.log('controls created');					
				}


				/* *************************************************************************************************** 
				* animate
				*/
				function animate() {
					requestAnimationFrame(animate);
					
					controls.update();
					
					render();
				}


				/* *************************************************************************************************** 
				* render
				*/
				function render() {
					camera.position.x += ( mouseX - camera.position.x ) * .05;
					camera.position.y += ( - mouseY - camera.position.y ) * .05;
					camera.lookAt( scene.position );
					
					renderer.render(scene, camera);
				}

				
				/* *************************************************************************************************** 
				*/
				function frameArea(sizeToFitOnScreen, boxSize, boxCenter, camera) {
					const halfSizeToFitOnScreen = sizeToFitOnScreen * 0.5;
					const halfFovY = THREE.MathUtils.degToRad(camera.fov * .5);
					const distance = halfSizeToFitOnScreen / Math.tan(halfFovY);

					// compute a unit vector that points in the direction the camera is now
					// from the center of the box
					const direction = (new THREE.Vector3()).subVectors(camera.position, boxCenter).normalize();

					// move the camera to a position distance units way from the center
					// in whatever direction the camera was from the center already
					camera.position.copy(direction.multiplyScalar(distance).add(boxCenter));

					// pick some near and far values for the frustum that
					// will contain the box.
					camera.near = boxSize / 100;
					camera.far = boxSize * 100;

					camera.updateProjectionMatrix();

					// point the camera to look at the center of the box
					camera.lookAt(boxCenter.x, boxCenter.y, boxCenter.z);
				}
			
			</script>

		</body>
	</html>