使用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();
// 設置光源
//點光源
let point = new THREE.PointLight(0xffffff);
point.position.set(500, 300, 300); //點光源位置
scene.add(point); //點光源添加到場景中
//環(huán)境光
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);
 
 
// 創(chuàng)建渲染對象
let renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);//設置渲染區(qū)域尺寸
renderer.setClearColor(0xb9d3ff, 1); //設置背景顏色
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);

完美運行

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

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

bootstarp modal框居中顯示的實現代碼
這篇文章主要介紹了bootstarp modal框居中顯示的實現代碼,需要的朋友可以參考下
2017-02-02
純js+css實現在線時鐘
這篇文章主要為大家詳細介紹了純js+css實現在線時鐘，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08
JavaScript循環(huán)鏈表實現方法
這篇文章主要給大家介紹了關于JavaScript循環(huán)鏈表實現的相關資料,循環(huán)鏈表和單向鏈表很相似,唯一的區(qū)別是循環(huán)鏈表的尾節(jié)點是指向頭節(jié)點的,需要的朋友可以參考下
2023-07-07
uniapp微信小程序無法使用本地靜態(tài)資源圖片(背景圖在真機不顯示)的解決方法
寫微信小程序的時候,難免會為了趕進度而直接使用本地的圖片,在模擬器上的時候可以正確顯示圖片,但是到手機上就無法顯示圖片了,下面這篇文章主要給大家介紹了關于uniapp微信小程序無法使用本地靜態(tài)資源圖片(背景圖在真機不顯示)的方法,需要的朋友可以參考下
2022-12-12
js style.display=block顯示布局錯亂問題的解決方法
下面小編就為大家?guī)硪黄猨s style.display=block顯示布局錯亂問題的解決方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-09-09
純JS實現輪播圖
這幾天一直在看js動畫，今天又get到了一個輪播圖，使用純js實現的，但是外觀樣式不是很好看，如果大家有需要可以美化下，具體實現代碼還是很完整的，大家可以參考下
2017-02-02
最新JS正則表達式驗證郵箱和手機號實例(2022)
在前端開發(fā)過程中,通過使用JS的正則表達式來校驗輸入的郵箱或者手機號是否正確,這也是一個非常常見的業(yè)務情景需求,下面這篇文章主要給大家介紹了關于利用JS正則表達式驗證郵箱和手機號的相關資料,需要的朋友可以參考下
2022-08-08
JavaScript中call,apply,bind的區(qū)別與實現
這篇文章主要介紹了JavaScript中call,apply,bind的區(qū)別與實現,文章通過圍繞主題思想展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-09-09
微信小程序實現MUI數字輸入框效果
這篇文章主要為大家詳細介紹了微信小程序實現MUI數字輸入框效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-01-01
總結Javascript中的隱式類型轉換
這篇文章談談JavaScript的隱式類型轉換，我們知道在JavaScript中聲明變量不需指定類型，對變量賦值也沒有類型檢查，同時JavaScript允許隱式類型轉換。這些特征說明JavaScript屬于弱類型的語言。
2016-08-08