Kusanagi-System/Untitled-1.html at main

Fork: 0
Subaru / Kusanagi-System
Find file
Newer
Older
Kusanagi-System / Untitled-1.html
Kusanagi Subaru on 18 Jun 2024 3 KB Add files via upload
Raw Blame History
<!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%);
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="instructions">
    クリックして操作を開始
  </div>
  <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
  <script type="importmap">
    {
      "imports": {
        "three": "https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.module.js",
        "MTLLoader": "https://cdn.jsdelivr.net/npm/three@0.132.2/examples/jsm/loaders/MTLLoader.js",
        "OBJLoader": "https://cdn.jsdelivr.net/npm/three@0.132.2/examples/jsm/loaders/OBJLoader.js",
        "PointerLockControls": "https://cdn.jsdelivr.net/npm/three@0.132.2/examples/jsm/controls/PointerLockControls.js"
      }
    }
  </script>
  <script type="module">
    import * as THREE from 'three';
    import { MTLLoader } from 'MTLLoader';
    import { OBJLoader } from 'OBJLoader';
    import { PointerLockControls } from 'PointerLockControls';

    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);

    document.body.appendChild(renderer.domElement);

    const ambientLight = new THREE.AmbientLight(0xcccccc, 1);
    scene.add(ambientLight);

    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);

    const controls = new PointerLockControls(camera, document.body);
    scene.add(controls.getObject());

    const instructions = document.getElementById('instructions');
    instructions.addEventListener('click', () => {
      controls.lock();
    });

    controls.addEventListener('lock', () => {
      instructions.style.display = 'none';
    });

    controls.addEventListener('unlock', () => {
      instructions.style.display = '';
    });

    new MTLLoader()
      .setPath('models/rouka/')
      .load('rouka.mtl', function (materials) {
        materials.preload();

        new OBJLoader()
          .setPath('models/rouka/')
          .setMaterials(materials)
          .load('rouka.obj', function (object) {
            object.position.y = 0;
            scene.add(object);
          }, 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();
      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>