<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Load a 3D model</title>
<style>
body {
margin: 0;
overflow: hidden;
}
#instructions {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
color: white;
font-family: Arial, sans-serif;
font-size: 24px;
user-select: none;
transform: translateY(-50%);
}
</style>
</head>
<body>
<script src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js" defer></script>
<script type="importmap">
{
"imports": {
"three": "./three.module.js",
"GLTFLoader": "./GLTFLoader.js",
"OrbitControls": "./OrbitControls.js",
"FirstPersonControls": "./FirstPersonControls.js",
"BufferGeometry.js": "./BufferGeometry.js"
}
}
</script>
<script type="module" defer>
import * as THREE from './three.module.js';
import { GLTFLoader } from './GLTFLoader.js';
import { FirstPersonControls } from './FirstPersonControls.js';
import { BufferGeometry } from './BufferGeometry.js';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 1.6, 3);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.physicallyCorrectLights = true;
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
document.body.appendChild(renderer.domElement);
const ambientLight = new THREE.AmbientLight(0xcccccc, 4);
scene.add(ambientLight);
const controls = new FirstPersonControls(camera, renderer.domElement);
controls.lookSpeed = 0.1;
controls.movementSpeed = 1.2;
controls.noFly = true;
controls.lookVertical = true;
controls.constrainVertical = false;
controls.activeLook = false;
renderer.domElement.addEventListener('mousemove', () => {
controls.activeLook = true;
});
let timeout;
const resetActiveLook = () => {
clearTimeout(timeout);
timeout = setTimeout(() => {
controls.activeLook = false;
}, 70);
};
renderer.domElement.addEventListener('mousemove', resetActiveLook);
const loader = new GLTFLoader();
loader.load('https://www.yatex.org/gitbucket/Subaru/Kusanagi-System/pages/koeki3D.gltf', function(gltf) {
gltf.scene.position.y = 0;
scene.add(gltf.scene);
}, onProgress, onError);
function onProgress(xhr) {
if (xhr.lengthComputable) {
const percentComplete = (xhr.loaded / xhr.total) * 100;
console.log('モデル読み込み ' + Math.round(percentComplete, 2) + '% 終了');
}
}
function onError(error) {
console.error('モデル読み込みエラー: ', error);
}
const animate = function() {
requestAnimationFrame(animate);
controls.update(0.1);
renderer.render(scene, camera);
};
animate();
window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
</script>
</body>
</html>
