mirror of
https://github.com/EthanPisani/ethanpisani.com.git
synced 2025-07-02 18:15:18 -04:00
99 lines
2.4 KiB
HTML
99 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>{{model}} Model</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
}
|
|
canvas{
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<script type="module">
|
|
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r125/build/three.module.js';
|
|
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r125/examples/jsm/controls/OrbitControls.js';
|
|
import {GLTFLoader} from 'https://threejsfundamentals.org/threejs/resources/threejs/r125/examples/jsm/loaders/GLTFLoader.js';
|
|
let camera, scene, renderer;
|
|
|
|
init();
|
|
render();
|
|
|
|
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();
|
|
|
|
const loader = new GLTFLoader().setPath('../../static/models/organic/' );
|
|
var obj;
|
|
//loader.load( 'propan-2-ol.glb', function ( gltf ) {
|
|
loader.load( '{{model}}.glb', function ( gltf ) {
|
|
//loader.load( 'Box.gltf', function ( gltf ) {
|
|
obj = gltf.scene;
|
|
scene.add( gltf.scene );
|
|
|
|
|
|
render();
|
|
|
|
} );
|
|
var light = new THREE.HemisphereLight(0xffffff, 0x000000, 1.5)
|
|
scene.add(light);
|
|
camera.position.set(0, 0, 10)
|
|
scene.background = new THREE.Color(0x2c2c2c)
|
|
//Object.rotation.y += 0.01;
|
|
renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
container.appendChild( renderer.domElement );
|
|
window.addEventListener( 'resize', onWindowResize );
|
|
|
|
function animate(){
|
|
requestAnimationFrame(animate);
|
|
obj.rotation.y +=0.01;
|
|
obj.rotation.x +=0.01;
|
|
obj.rotation.z +=0.01;
|
|
render();
|
|
}
|
|
animate();
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
function onWindowResize() {
|
|
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.updateProjectionMatrix();
|
|
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
render();
|
|
|
|
}
|
|
|
|
//
|
|
|
|
function render() {
|
|
|
|
renderer.render( scene, camera );
|
|
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |