查看 .glb 文件(GLB格式,一种3D模型文件)的多种方法

以下是查看 .glb 文件(GLB格式,一种3D模型文件)的多种方法,覆盖不同平台和需求:


一、在线工具(无需安装软件)

1. Google Model Viewer
  • 特点:直接在浏览器中查看.glb文件,支持旋转、缩放和自动旋转。
  • 步骤
    1. 访问 Google Model Viewer
    2. 上传你的.glb文件,或拖拽文件到网页。
  • 适合场景:快速预览,适合普通用户。
2. Babylon.js Sandbox
  • 特点:开源3D引擎的在线查看器,支持光照调整和动画播放。
  • 链接Sandbox.babylonjs.com
  • 步骤:拖拽.glb文件到页面即可查看。
3. Sketchfab
  • 特点:在线3D模型展示平台,支持材质和动画预览。
  • 链接Sketchfab.com
  • 步骤:注册账号后上传.glb文件即可生成在线预览链接。

二、桌面软件

1. Blender(免费开源)
  • 步骤
    1. 下载安装 Blender
    2. 打开Blender,点击 File > Import > glTF 2.0 (.glb/.gltf)
    3. 选择.glb文件即可导入查看和编辑。
  • 适合人群:3D设计师或开发者,需进一步编辑模型。
2. Windows 3D Viewer(Windows 10/11自带)
  • 步骤
### 加载 `.glb` 文件3D 模型 `.glb` 是 GL Transmission Format(GLTF)的二进制版本,是一种高效的 3D 模型文件格式,支持纹理、几何数据和动画等现代 3D 特性。以下是使用 **Three.js** 将 `.glb` 文件导入并展示在网页中的详细步骤。 #### 1. 准备工作 确保您已经引入了 **Three.js** 库以及 **GLTFLoader** 插件。GLTFLoader 是 Three.js 的扩展模块,专门用于加载 `.glb` 和 `.gltf` 格式模型文件。 ```html <!-- 在 HTML 文件中引入 Three.js 和 GLTFLoader --> <script src="https://cdn.jsdelivr.net/npm/three@0.155.0/build/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.155.0/examples/js/loaders/GLTFLoader.js"></script> ``` #### 2. 创建场景、相机和渲染器 在 JavaScript 文件中,初始化一个基本的 Three.js 场景。 ```javascript // 创建场景 const scene = new THREE.Scene(); // 创建相机 const camera = new THREE.PerspectiveCamera( 75, // 视野角度 window.innerWidth / window.innerHeight, // 宽高比 0.1, // 近裁剪面 1000 // 远裁剪面 ); camera.position.z = 5; // 设置相机位置 // 创建渲染器 const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); ``` #### 3. 加载 `.glb` 模型文件 使用 `GLTFLoader` 加载 `.glb` 文件,并将模型添加到场景中。 ```javascript // 创建 GLTFLoader 实例 const loader = new THREE.GLTFLoader(); // 模型文件路径 const modelUrl = 'path/to/your/model.glb'; // 加载模型 loader.load( modelUrl, function (gltf) { const model = gltf.scene; // 获取模型场景 scene.add(model); // 将模型添加到场景中 // 渲染循环 function animate() { requestAnimationFrame(animate); model.rotation.y += 0.01; // 旋转模型 renderer.render(scene, camera); } animate(); // 启动动画循环 }, undefined, function (error) { console.error('An error occurred while loading the model:', error); } ); ``` #### 4. 添加交互控制 可以通过引入 `OrbitControls` 实现鼠标交互,让用户能够旋转、缩放和移动模型。 ```javascript // 引入 OrbitControls import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.155.0/examples/jsm/controls/OrbitControls.js'; // 创建控制器 const controls = new OrbitControls(camera, renderer.domElement); // 启用阻尼效果(让控制更平滑) controls.enableDamping = true; // 在渲染循环中更新控制器 function animate() { requestAnimationFrame(animate); controls.update(); // 更新控制器 renderer.render(scene, camera); } animate(); ``` #### 5. 响应窗口大小变化 为了确保在窗口大小变化时,渲染器和相机的宽高比保持正确,可以添加以下代码: ```javascript window.addEventListener('resize', onWindowResize, false); function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } ``` #### 6. 完整代码示例 以下是完整的代码示例,整合了上述所有步骤: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Load .glb Model with Three.js</title> <style> body { margin: 0; overflow: hidden; } canvas { display: block; } </style> </head> <body> <script src="https://cdn.jsdelivr.net/npm/three@0.155.0/build/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.155.0/examples/js/loaders/GLTFLoader.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.155.0/examples/jsm/controls/OrbitControls.js"></script> <script> // 初始化场景 const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 加载模型 const loader = new THREE.GLTFLoader(); const modelUrl = 'path/to/your/model.glb'; // 替换为您的模型路径 loader.load( modelUrl, function (gltf) { const model = gltf.scene; scene.add(model); // 添加控制器 const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true; // 渲染循环 function animate() { requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); } animate(); }, undefined, function (error) { console.error('Failed to load model:', error); } ); // 响应窗口大小变化 window.addEventListener('resize', onWindowResize, false); function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } </script> </body> </html> ``` ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值