上面案例加载比较慢，等待一会儿

three加载指定3d模型案例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://www.hl0109.cn/webapp/web-js-lib/babel/7.28.3/babel.min.js" ></script>
    <style>
      html,body{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: none;
      }
    </style>
  </head>
  <body>
    <div style="position: absolute;top:0;left: 0;z-index: 9999;">
      大概等待一会儿，加载比较慢
    </div>
    <div id="app">
      
    </div>
    <script type="importmap">
    	{
    		"imports": {
    			"three": "https://www.hl0109.cn/webapp/web-js-lib/three/0.154.0/three.module.min.js",
    			"three/addons/": "https://www.hl0109.cn/webapp/web-js-lib/three/0.154.0/jsm/"
    		}
    	}
    </script>
    <script type="text/babel" data-type="module">
      import * as THREE from 'three';
      import Stats from 'three/addons/libs/stats.module.js';
      
      import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
      import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';

      import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
      import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';

      let mixer;

      const clock = new THREE.Clock();
      const container = document.getElementById('app');

      const stats = new Stats();
      container.appendChild(stats.dom);

      const renderer = new THREE.WebGLRenderer({
        antialias: true
      });
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.useLegacyLights = false;
      container.appendChild(renderer.domElement);

      const pmremGenerator = new THREE.PMREMGenerator(renderer);

      const scene = new THREE.Scene();
      scene.background = new THREE.Color(0xbfe3dd);
      scene.environment = pmremGenerator.fromScene(new RoomEnvironment(renderer), 0.04).texture;

      const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 100);
      camera.position.set(5, 2, 8);

      const controls = new OrbitControls(camera, renderer.domElement);
      controls.target.set(0, 0.5, 0);
      controls.update();
      controls.enablePan = false;
      controls.enableDamping = true;

      const dracoLoader = new DRACOLoader();
      dracoLoader.setDecoderPath('https://www.hl0109.cn/webapp/web-js-lib/three/0.154.0/jsm/libs/draco/gltf/');

      const loader = new GLTFLoader();
      loader.setDRACOLoader(dracoLoader);
      loader.load('https://www.hl0109.cn/webapp/web-data/three/models/gltf/LittlestTokyo.glb', function(gltf) {

        const model = gltf.scene;
        model.position.set(1, 1, 0);
        model.scale.set(0.01, 0.01, 0.01);
        scene.add(model);

        mixer = new THREE.AnimationMixer(model);
        mixer.clipAction(gltf.animations[0]).play();

        animate();

      }, undefined, function(e) {

        console.error(e);

      });


      window.onresize = function() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);

      };


      function animate() {

        requestAnimationFrame(animate);

        const delta = clock.getDelta();

        mixer.update(delta);

        controls.update();

        stats.update();

        renderer.render(scene, camera);

      }
    </script>
  </body>
</html>