Threejs載入外部glb檔案模型不顯示

2021-10-17 23:17:53 字數 3581 閱讀 5211

二.問題分析

三、後期補充總結 

<


!doctype html>


"en"


>


"utf-8"


>


"viewport" content=


"width=device-width, initial-scale=1.0"


>


軍營展示<


/title>zhuyemian


<


!--引入three.js三維引擎--


>


"../build/three.js"


>


<


/script>


<


!--引入軌道控制項orbitcontrols.js--


>


"../js/orbitcontrols.js"


>


<


/script>


<


!-- 引入global載入器 --


>


"../js/gltfloader.js"


>


<


/script>


<


/head>


"junying"


>


<


/div>


<


!-- 載入模型檔案 --


>


"../js/junying2.js"


>


<


/script>


<


/script>


body 


<


/style>


<


/body>


<


/html>


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.25


,1000);


//透視攝像機


camera.position.


set(


500,


100,0)


;//設定相機位置


camera.


lookat


(scene.position)


;//設定相機方向(指向的場景物件)


// 載入模型


var loader = new three.


gltfloader()


;loader.


load


('../model/yqnew.glb'


,function


( glb )


, undefined,


function


( error ));


// 建立渲染物件


let renderer = new three.


webglrenderer()


;renderer.


setsize


(window.innerwidth, window.innerheight)


;//設定渲染區域尺寸


renderer.


setclearcolor


(0xb9d3ff,1


);//設定背景顏色


junying.


(renderer.domelement)


// 執行渲染操作


function animate()


animate()


;
通過上面的**，引入的模型資料可以列印出來，但是模型沒有顯示，把引入的外部模型換成自己**生成的模型可以正常顯示

例如：把**中的

var loader = new three.


gltfloader()


;loader.


load


('../model/yqnew.glb'


,function


( glb )


, undefined,


function


( error )


);
替換為
// 立方體網格模型


var geometry1 = new three.


boxgeometry


(100


,100


,100);


var material1 = new three.


meshlambertmaterial()


;//材質物件material


var mesh1 = new three.


mesh


(geometry1, material1)


;//網格模型物件mesh


scene.


add(mesh1)


;//網格模型新增到場景中
模型可以正常顯示，模型有資料列印，那麼問題就定位到渲染處，在函式animate()中加入requestanimationframe( animate );模型可以正常顯示，然後把requestanimationframe( animate );注釋，新增乙個定時器，設定為2秒，2秒後模型展示。
function animate()


animate()


;setinterval


("animate()"


,2000


);
又遇到一種情況。。。。。無資料列印，模型不顯示，原因是：

模型需要放在public的static下面

並且引入路徑要寫成如下圖的格式

注：這裡沒有寫成『二、問題分析』中的「var loader = new three.gltfloader();」，

是因為採用的寫法：

import from 「three/examples/jsm/loaders/gltfloader」;

記錄學習中遇到的問題：threejs引入外部模型第一次呼叫render()不會載入模型，需要加入requestanimationframe()進行週期性渲染。

THREEJS載入必要五要素

threejs載入3d模型 就像人的眼睛去看這個世界，需要有所處的環境，眼睛，看的物體，有光等等 場景就像人所處的環境一樣，所有的模型 都是在這個場景中去展示 去活動 this scene newthree.scene 攝像機就像人的眼睛 var k width height 視窗寬高比 建立相機物...

cesium載入管道glb模型如何改變紋理

求幫助 cesium載入glb模型後，想要為其貼圖，且在管道內沿路徑運動。目前只能做到改變其顏色，且動畫效果也沒有實現 你好！這是你第一次使用markdown編輯器所展示的歡迎頁。如果你想學習如何使用markdown編輯器,可以仔細閱讀這篇文章，了解一下markdown的基本語法知識。全新的介面設計...

spring boot啟動時載入外部配置檔案的方法

前言 相信很多人選擇spring boot主要是考慮到它既能兼顧spring的強大功能，還能實現快速開發的便捷。本文主要給大家介紹了關於spring boot啟動時載入外部配置檔案的相關內容，下面話不多說了，來隨著小編一起學習學習吧。業務需求 載入外部配置檔案，部署時更改比較方便。先上 spring...