Three.js 加载外部 GLB 模型文件实战

作者：智能手札时间：2026-10-31 13:20:18浏览：551

本文介绍如何使用 Three.js 在网页中加载并展示外部 GLB 格式的 3D 模型。通过引入 three.js、OrbitControls 和 GLTFLoader，配置场景、光源与相机，并结合 OrbitControls 实现交互控制。文中提供了完整的 HTML 结构与核心 JavaScript 代码示例，帮助开发者快速实现 3D 模型在浏览器中的渲染与展示。

Three.js 加载外部 GLB 文件

页面 HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>pb展示</title>
  <!--引入three.js三维引擎-->
  <script src="./js/three.js"></script>
  <!--引入轨道控件OrbitControls.js-->
  <script src="./js//OrbitControls.js"></script>
  <!-- 引入global加载器 -->
  <script src="./js/GLTFLoader.js"></script>
  
</head>
<body>
  <div id="junying"></div>
 
  <!-- 加载模型文件 -->
  <script src="./js/3dmodel.js"></script>
  <script>
 
  </script>
  <style>
    body { margin: 0;overflow: hidden;}
  </style>
</body>
</html>

JavaScript 代码

我的命名是 3dmodel.js

 
let junying = document.getElementById("junying");
//创建场景对象
let scene = new THREE.Scene();
// 设置光源
//点光源
let point = new THREE.PointLight(0xffffff);
point.position.set(500, 300, 300); //点光源位置
scene.add(point); //点光源添加到场景中
//环境光
let light = new THREE.AmbientLight(0x444444);
scene.add(light);
//相机设置
let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);//透视摄像机
camera.position.set(0,50,350);//设置相机位置
camera.lookAt(scene.position);//设置相机方向(指向的场景对象)
// 加载模型
var loader = new THREE.GLTFLoader();
loader.load( '../glb/db.glb', function ( glb ) {
	console.log(glb.scene);
	glb.scene.position.set(120,-400,0)
	scene.add(glb.scene);
}, undefined, function ( error ) {
	console.error( error );
} );
 
// 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
var axisHelper = new THREE.AxesHelper(250);
scene.add(axisHelper);
 
 
// 创建渲染对象
let renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);//设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
junying.appendChild(renderer.domElement)
// 执行渲染操作
function animate() {
    requestAnimationFrame(animate)
  renderer.render(scene,camera);//执行渲染操作
}
 
//创建控件对象
var controls = new THREE.OrbitControls(camera,renderer.domElement);
 
 
animate();
// setInterval("animate()",2000);

完美运行

Three.js 加载外部 GLB 文件

其余操作正在探索中ing...

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。

作者最新文章

怎么在 Babylon.js 中加载 glb/gltf 3D 模型

2026-11-03 09:08:47

JavaScript 盒模型尺寸深入理解

2026-10-26 22:57:30

JavaScript实现带AI权值算法的井字棋游戏

2026-10-22 14:36:06