CDN模型下使用three.js 加载glb模型

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="importmap">
        {
          "imports": {
            "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
            "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
          }
        }
    </script>
    <script type="module" src="/main.js"></script>
</head>
<body>
<div id="mymodel" style="width:500px; height: 600px;margin:100px auto;"> </div>
</body>
</html>

javascript 复制代码

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';



const elem = document.getElementById("mymodel");

const camera = new THREE.PerspectiveCamera(50,
    elem.clientWidth / elem.clientHeight,1, 1000);

const scene = new THREE.Scene();
//const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize(elem.clientWidth, elem.clientHeight);

renderer.setPixelRatio(window.devicePixelRatio);
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;

elem.appendChild(renderer.domElement);
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // 环境光
scene.add(ambientLight);

window.addEventListener('resize', function () {
    renderer.setSize(elem.clientWidth, elem.clientHeight);
    camera.aspect = elem.clientWidth/elem.clientHeight;
    camera.updateProjectionMatrix();
}, false);


const loader = new GLTFLoader();
loader.load( '/generated_1723538759.glb', function ( gltf ) {
    console.log( 'loaded',gltf)
    camera.position.set(4, 0, 0);
    gltf.scene.position.y = 0.2
    scene.add( gltf.scene );

}, undefined, function ( error ) {

    console.error( error );

} );

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 启用 damping 给控制器带来重量感
controls.dampingFactor = 0.1;  //动态系数因子 越小越灵敏
controls.rotateSpeed = 0.1;
controls.enableZoom = true; // 是否可以缩放
controls.autoRotate = false; // 是否自动旋转
controls.autoRotateSpeed = 5; // 自动旋转速度

controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set(0, 0.5, - 0.2);
// 决定了初始化时 模型在页面视野中的角度




function animate() {
    controls.update();
    renderer.render( scene, camera );
 }
renderer.setAnimationLoop( animate );