mirror of
https://github.com/peter-tanner/peter-tanner.github.io.git
synced 2024-11-30 20:10:18 +08:00
127 lines
4.4 KiB
HTML
127 lines
4.4 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<title>METHANOS</title>
|
|
<link href='./main.css' rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
|
|
<div id="info"><a>METHANOS</a><br/>
|
|
<b>x</b> = <span id=x></span><br/>
|
|
<b>y</b> = <span id=y></span><br/>
|
|
<b>z</b> = <span id=z></span><br/>
|
|
<a>r</a> to reset camera.<br/>
|
|
<a>t</a> to toggle text.
|
|
</div>
|
|
|
|
<div class="meme" id="meme">
|
|
<meme class="top">METHANOS</meme>
|
|
<meme class="bottom">METHANOS</meme>
|
|
</div>
|
|
|
|
<!-- Three.js, and orbit controls -->
|
|
<script src="./js/threejs/three.min.js" ></script>
|
|
<!-- <script src="js/three.js"></script> -->
|
|
<script src="./js/threejs/controls/OrbitControls.js" ></script>
|
|
<script src="./js/threejs/loaders/GLTFLoader.js" ></script>
|
|
<script type="module">
|
|
|
|
var renderer = new THREE.WebGLRenderer({ antialias: true });
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
// renderer.setClearColor(0xff0000, 1);
|
|
renderer.gammaOutput = true;
|
|
document.body.appendChild( renderer.domElement );
|
|
|
|
// Scene
|
|
var scene = new THREE.Scene();
|
|
|
|
// Camera
|
|
var camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
|
|
camera.position.set( 1.6, 0.5, 1.8 );
|
|
|
|
// Orbit Controls
|
|
var controls = new THREE.OrbitControls( camera, renderer.domElement );
|
|
|
|
// Load
|
|
var loader = new THREE.GLTFLoader();
|
|
loader.load(
|
|
// resource URL
|
|
'./model/methanos.glb',
|
|
//'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Fox/glTF/Fox.gltf',
|
|
// called when the resource is loaded
|
|
function ( gltf ) {
|
|
|
|
scene.add( gltf.scene );
|
|
|
|
gltf.animations; // Array<THREE.AnimationClip>
|
|
gltf.scene; // THREE.Group
|
|
gltf.scenes; // Array<THREE.Group>
|
|
gltf.cameras; // Array<THREE.Camera>
|
|
gltf.asset; // Object
|
|
|
|
},
|
|
// called while loading is progressing
|
|
function ( xhr ) {
|
|
|
|
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
|
|
|
|
},
|
|
// called when loading has errors
|
|
function ( error ) {
|
|
|
|
console.log( 'An error happened' );
|
|
|
|
}
|
|
);
|
|
|
|
var geometry = new THREE.BoxGeometry();
|
|
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
|
|
// var cube = new THREE.Mesh( geometry, material );
|
|
// scene.add( cube );
|
|
|
|
var directionalLight = new THREE.DirectionalLight( 0xffffff, 1.0 );
|
|
directionalLight.position.set( 4.07625, 5.90386, 1.00545 );
|
|
scene.add( directionalLight );
|
|
|
|
var light = new THREE.AmbientLight( 0x404040, 0.7 ); // soft white light
|
|
scene.add( light );
|
|
|
|
var animate = function () {
|
|
requestAnimationFrame( animate );
|
|
|
|
// cube.rotation.x += 0.01;
|
|
// cube.rotation.y += 0.01;
|
|
|
|
var pos = camera.position
|
|
document.getElementById("x").textContent=pos.x;
|
|
document.getElementById("y").textContent=pos.y;
|
|
document.getElementById("z").textContent=pos.z;
|
|
|
|
renderer.render( scene, camera );
|
|
};
|
|
|
|
document.addEventListener( 'keydown',
|
|
function(event) {
|
|
switch(event.keyCode) {
|
|
case 82: // r
|
|
controls.reset()
|
|
break;
|
|
case 84:
|
|
var div = document.getElementById("meme")
|
|
div.style.display = div.style.display == "none" ? "block" : "none";
|
|
}
|
|
},
|
|
false );
|
|
|
|
window.addEventListener( 'resize',
|
|
function(event) {
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.updateProjectionMatrix();
|
|
},
|
|
false );
|
|
|
|
animate();
|
|
</script>
|
|
</body>
|
|
</html> |