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 );
相关推荐
qq_433554543 分钟前
C++ 面向对象编程:+号运算符重载,左移运算符重载
开发语言·c++
数据小爬虫@22 分钟前
如何高效利用Python爬虫按关键字搜索苏宁商品
开发语言·爬虫·python
ZJ_.24 分钟前
WPSJS:让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
Narutolxy30 分钟前
深入探讨 Go 中的高级表单验证与翻译:Gin 与 Validator 的实践之道20241223
开发语言·golang·gin
Hello.Reader37 分钟前
全面解析 Golang Gin 框架
开发语言·golang·gin
禁默1 小时前
深入浅出:AWT的基本组件及其应用
java·开发语言·界面编程
Code哈哈笑1 小时前
【Java 学习】深度剖析Java多态:从向上转型到向下转型,解锁动态绑定的奥秘,让代码更优雅灵活
java·开发语言·学习
joan_851 小时前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui
程序猿进阶1 小时前
深入解析 Spring WebFlux:原理与应用
java·开发语言·后端·spring·面试·架构·springboot
qq_433618441 小时前
shell 编程(二)
开发语言·bash·shell