使用Threejs加載外部glb文件
更新時(shí)間：2024年04月26日 10:03:12 作者：bangbang給你兩錘
這篇文章主要介紹了使用Threejs加載外部glb文件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
Threejs加載外部glb文件
頁(yè)面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)建場(chǎng)景對(duì)象
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)光源添加到場(chǎng)景中
//環(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ī)方向(指向的場(chǎng)景對(duì)象)
// 加載模型
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ù)場(chǎng)景大小去設(shè)置
var axisHelper = new THREE.AxesHelper(250);
scene.add(axisHelper);
// 創(chuàng)建渲染對(duì)象
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)建控件對(duì)象
var controls = new THREE.OrbitControls(camera,renderer.domElement);
animate();
// setInterval("animate()",2000);完美運(yùn)行
其余操作正在探索中ing...
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
bootstarp modal框居中顯示的實(shí)現(xiàn)代碼
這篇文章主要介紹了bootstarp modal框居中顯示的實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-02-02
這篇文章主要為大家詳細(xì)介紹了純js+css實(shí)現(xiàn)在線時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
JavaScript循環(huán)鏈表實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于JavaScript循環(huán)鏈表實(shí)現(xiàn)的相關(guān)資料,循環(huán)鏈表和單向鏈表很相似,唯一的區(qū)別是循環(huán)鏈表的尾節(jié)點(diǎn)是指向頭節(jié)點(diǎn)的,需要的朋友可以參考下2023-07-07
uniapp微信小程序無(wú)法使用本地靜態(tài)資源圖片(背景圖在真機(jī)不顯示)的解決方法
寫(xiě)微信小程序的時(shí)候,難免會(huì)為了趕進(jìn)度而直接使用本地的圖片,在模擬器上的時(shí)候可以正確顯示圖片,但是到手機(jī)上就無(wú)法顯示圖片了,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序無(wú)法使用本地靜態(tài)資源圖片(背景圖在真機(jī)不顯示)的方法,需要的朋友可以參考下2022-12-12
js style.display=block顯示布局錯(cuò)亂問(wèn)題的解決方法
下面小編就為大家?guī)?lái)一篇js style.display=block顯示布局錯(cuò)亂問(wèn)題的解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
這幾天一直在看js動(dòng)畫(huà)，今天又get到了一個(gè)輪播圖，使用純js實(shí)現(xiàn)的，但是外觀樣式不是很好看，如果大家有需要可以美化下，具體實(shí)現(xiàn)代碼還是很完整的，大家可以參考下2017-02-02
最新JS正則表達(dá)式驗(yàn)證郵箱和手機(jī)號(hào)實(shí)例(2022)
在前端開(kāi)發(fā)過(guò)程中,通過(guò)使用JS的正則表達(dá)式來(lái)校驗(yàn)輸入的郵箱或者手機(jī)號(hào)是否正確,這也是一個(gè)非常常見(jiàn)的業(yè)務(wù)情景需求,下面這篇文章主要給大家介紹了關(guān)于利用JS正則表達(dá)式驗(yàn)證郵箱和手機(jī)號(hào)的相關(guān)資料,需要的朋友可以參考下2022-08-08
JavaScript中call,apply,bind的區(qū)別與實(shí)現(xiàn)
這篇文章主要介紹了JavaScript中call,apply,bind的區(qū)別與實(shí)現(xiàn),文章通過(guò)圍繞主題思想展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
微信小程序?qū)崿F(xiàn)MUI數(shù)字輸入框效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)MUI數(shù)字輸入框效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
總結(jié)Javascript中的隱式類(lèi)型轉(zhuǎn)換
這篇文章談?wù)凧avaScript的隱式類(lèi)型轉(zhuǎn)換，我們知道在JavaScript中聲明變量不需指定類(lèi)型， 對(duì)變量賦值也沒(méi)有類(lèi)型檢查，同時(shí)JavaScript允許隱式類(lèi)型轉(zhuǎn)換。這些特征說(shuō)明JavaScript屬于弱類(lèi)型的語(yǔ)言。2016-08-08