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/three@v0.167.1/build/three.module.js",
            "three/addons/": "https://cdn.jsdelivr.net/npm/three@v0.167.1/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 );
相关推荐
Eiceblue27 分钟前
使用 C# 设置 Excel 单元格格式
开发语言·后端·c#·.net·excel
GDAL34 分钟前
Knockout-ES5 入门教程
javascript·knockout
正义的大古34 分钟前
OpenLayers数据源集成 -- 章节八:天地图集成详解
开发语言·javascript·ecmascript·openlayers
LDM>W<43 分钟前
Electron下载失败
前端·javascript·electron
EndingCoder1 小时前
Electron 新特性:2025 版本更新解读
前端·javascript·缓存·electron·前端框架·node.js·桌面端
zhangfeng11331 小时前
R geo 然后读取数据的时候 make.names(vnames, unique = TRUE): invalid multibyte string 9
开发语言·chrome·r语言·生物信息
Sally璐璐1 小时前
Go组合式继承:灵活替代方案
开发语言·后端·golang
zzzsde1 小时前
【c++】类和对象(4)
开发语言·c++
码熔burning1 小时前
从 new 到 GC:一个Java对象的内存分配之旅
java·开发语言·jvm
晨非辰1 小时前
#C语言——刷题攻略:牛客编程入门训练(十二):攻克 循环控制(四)、循环输出图形(一),轻松拿捏!
c语言·开发语言·经验分享·笔记·其他·学习方法·visual studio