使用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 );
} );
// 輔助坐標系 參數(shù)250表示坐標系大小，可以根據(jù)場景大小去設置
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...
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
bootstarp modal框居中顯示的實現(xiàn)代碼
這篇文章主要介紹了bootstarp modal框居中顯示的實現(xiàn)代碼,需要的朋友可以參考下2017-02-02
這篇文章主要為大家詳細介紹了純js+css實現(xiàn)在線時鐘，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
JavaScript循環(huán)鏈表實現(xiàn)方法
這篇文章主要給大家介紹了關于JavaScript循環(huán)鏈表實現(xià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顯示布局錯亂問題的解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
這幾天一直在看js動畫，今天又get到了一個輪播圖，使用純js實現(xiàn)的，但是外觀樣式不是很好看，如果大家有需要可以美化下，具體實現(xiàn)代碼還是很完整的，大家可以參考下2017-02-02
在前端開發(fā)過程中,通過使用JS的正則表達式來校驗輸入的郵箱或者手機號是否正確,這也是一個非常常見的業(yè)務情景需求,下面這篇文章主要給大家介紹了關于利用JS正則表達式驗證郵箱和手機號的相關資料,需要的朋友可以參考下2022-08-08
JavaScript中call,apply,bind的區(qū)別與實現(xiàn)
這篇文章主要介紹了JavaScript中call,apply,bind的區(qū)別與實現(xiàn),文章通過圍繞主題思想展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)MUI數(shù)字輸入框效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
這篇文章談談JavaScript的隱式類型轉換，我們知道在JavaScript中聲明變量不需指定類型， 對變量賦值也沒有類型檢查，同時JavaScript允許隱式類型轉換。這些特征說明JavaScript屬于弱類型的語言。2016-08-08