Untitled
unknown
javascript
2 years ago
7.7 kB
2
Indexable
<!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>