使用Threejs加載外部glb文件

更新時間：2024年04月26日 10:03:12 作者：bangbang給你兩錘

這篇文章主要介紹了使用Threejs加載外部glb文件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

Threejs加載外部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>

js代碼

我的命名是3dmodel.js

 
let junying = document.getElementById("junying");
//創(chuàng)建場景對象
let scene = new THREE.Scene();
// 設(shè)置光源
//點(diǎn)光源
let point = new THREE.PointLight(0xffffff);
point.position.set(500, 300, 300); //點(diǎn)光源位置
scene.add(point); //點(diǎn)光源添加到場景中
//環(huán)境光
let light = new THREE.AmbientLight(0x444444);
scene.add(light);
//相機(jī)設(shè)置
let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);//透視攝像機(jī)
camera.position.set(0,50,350);//設(shè)置相機(jī)位置
camera.lookAt(scene.position);//設(shè)置相機(jī)方向(指向的場景對象)
// 加載模型
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 );
} );
 
// 輔助坐標(biāo)系  參數(shù)250表示坐標(biāo)系大小，可以根據(jù)場景大小去設(shè)置
var axisHelper = new THREE.AxesHelper(250);
scene.add(axisHelper);
 
 
// 創(chuàng)建渲染對象
let renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);//設(shè)置渲染區(qū)域尺寸
renderer.setClearColor(0xb9d3ff, 1); //設(shè)置背景顏色
junying.appendChild(renderer.domElement)
// 執(zhí)行渲染操作
function animate() {
    requestAnimationFrame(animate)
  renderer.render(scene,camera);//執(zhí)行渲染操作
}
 
//創(chuàng)建控件對象
var controls = new THREE.OrbitControls(camera,renderer.domElement);
 
 
animate();
// setInterval("animate()",2000);

完美運(yùn)行