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 );
相关推荐
wheeldown2 小时前
【Linux】为什么死循环卡不死 Linux?3 个核心逻辑看懂进程优先级与 CPU 调度密码
linux·运维·服务器·开发语言·c++·unix·进程
xxy.c2 小时前
嵌入式解谜日志-网络编程(udp,tcp,(while循环原理))
linux·运维·c语言·开发语言·数据结构
Want5952 小时前
C/C++哆啦A梦
c语言·开发语言·c++
Nexmoe3 小时前
我踩过最深的 React 数据沉钻坑,以及我现在偷懒写法
开发语言·javascript·ecmascript
D11_3 小时前
【React】Redux
前端·javascript·react.js
dreams_dream4 小时前
vue2滑块验证
前端·javascript·css
计算机毕业设计木哥4 小时前
计算机Python毕业设计推荐:基于Django的酒店评论文本情感分析系统【源码+文档+调试】
开发语言·hadoop·spring boot·python·spark·django·课程设计
飞天小蜈蚣5 小时前
python - ( js )object对象、json对象、字符串对象的相关方法、数组对象的相关方法、BOM对象、BOM模型中 Navigator 对象
javascript·python·json
一枝小雨5 小时前
【C++】编写通用模板代码的重要技巧:T()
开发语言·c++·笔记·学习笔记