CDN模子下利用three.js 加载glb模子

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <meta charset="UTF-8">
5.     <title>Title</title>
6.     <script type="importmap">
7.         {
8.           "imports": {
9.             "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
10.             "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
11.           }
12.         }
13.     </script>
14.     <script type="module" src="/main.js"></script>
15. </head>
16. <body>
17. <div id="mymodel" style="width:500px; height: 600px;margin:100px auto;"> </div>
18. </body>
19. </html>

复制代码

1. import * as THREE from 'three';
2. import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
3. import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
5. const elem = document.getElementById("mymodel");
7. const camera = new THREE.PerspectiveCamera(50,
8.     elem.clientWidth / elem.clientHeight,1, 1000);
10. const scene = new THREE.Scene();
11. //const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
13. const renderer = new THREE.WebGLRenderer();
14. renderer.setSize(elem.clientWidth, elem.clientHeight);
16. renderer.setPixelRatio(window.devicePixelRatio);
17. renderer.toneMapping = THREE.ACESFilmicToneMapping;
18. renderer.toneMappingExposure = 1;
19. renderer.outputEncoding = THREE.sRGBEncoding;
21. elem.appendChild(renderer.domElement);
22. const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // 环境光
23. scene.add(ambientLight);
25. window.addEventListener('resize', function () {
26.     renderer.setSize(elem.clientWidth, elem.clientHeight);
27.     camera.aspect = elem.clientWidth/elem.clientHeight;
28.     camera.updateProjectionMatrix();
29. }, false);
31. const loader = new GLTFLoader();
32. loader.load( '/generated_1723538759.glb', function ( gltf ) {
33.     console.log( 'loaded',gltf)
34.     camera.position.set(4, 0, 0);
35.     gltf.scene.position.y = 0.2
36.     scene.add( gltf.scene );
38. }, undefined, function ( error ) {
40.     console.error( error );
42. } );
44. const controls = new OrbitControls(camera, renderer.domElement);
45. controls.enableDamping = true; // 启用 damping 给控制器带来重量感
46. controls.dampingFactor = 0.1;  //动态系数因子 越小越灵敏
47. controls.rotateSpeed = 0.1;
48. controls.enableZoom = true; // 是否可以缩放
49. controls.autoRotate = false; // 是否自动旋转
50. controls.autoRotateSpeed = 5; // 自动旋转速度
52. controls.minDistance = 2;
53. controls.maxDistance = 10;
54. controls.target.set(0, 0.5, - 0.2);
55. // 决定了初始化时 模型在页面视野中的角度
57. function animate() {
58.     controls.update();
59.     renderer.render( scene, camera );
60. }
61. renderer.setAnimationLoop( animate );

复制代码