作為一名網站建設的工程師，每天要學習的東西真的是太多了，只有新鮮的血液注入我們才能夠提升自己，通俗來講，自然$也會越來越多，那下面就讓成都網站建設工程師講解three.js中引入obj文件和紋理的。希望這篇文章對大家能有所幫助。

首先引入這么多js

<script src="js/three.js"></script>

<script src="js/ObJLoader.js"></script>

<script src="js/MTLLoader.js"></script>

<script src="js/OrbitControls.js"></script>

<script src="js/stats.min.js"></script>

<script src="js/dat.gui.min.js"></script>

然后.....

<script type="text/javascript">

var scene,camera,renderer;//scene(場景)，camera(相機)，renderer(渲染器);

var name;

scene=new THREE.Scene();//創建場景

camera=new THREE.PerspectiveCamera(100,800/800,0.5, 2500);

C mera.lookAt(new THREE.Vector3);//拍攝方位

camera.position.z = 50;//視窗位置

scene.add(camera);//吧相機放入場景中

renderer=new THREE.WebGLRenderer({antialias:true,alpha:true});

renderer.setSize(800, 800);

//告訴渲染器需要陰影效果

renderer.setClearColor("顏色");

//渲染器放入頁面內

document.body.appendChild(renderer.domElement);

//畫布與相機放入渲染器中

renderer.render(scene, camera);

//環境燈

var amd=new THREE.AmbientLight("顏色",1)

//燈光放入場景內

scene.add(amd);

var mtlLoaders = new THREE.MTLLoader();//紋理

var loaders = new THREE.ObJLoader();//3D文件

//添加紋理的路徑

mtlLoaders.setPath('img/');

mtlLoaders.load('名稱.mtl',function(data){

if(data==''||data==undefined||data==null){

return console.log('mtl為空')

}else{

//設置當前加載的紋理

loaders.setMaterials(data) ;

//添加3d圖片的路徑

loaders.setPath('img/');

loaders.load('名稱.obj',function(imgs){

name= imgs;//儲存到全局變量中

scene.add(imgs);

renderer.render( scene, camera );

})

}

})

</script>

通過以上內容的說明，大家對three.js引入3D圖已經有了一定的了解。如果大家還有什么問題可以在創新互聯π留言，我們會在下期的文章更新中為您解答您的問題。 如果大家對有什么技術方面的問題，可以關注成都做網站的創新互聯官方公眾號“創新互聯π”，其中會有大量關于”互聯網+”的相關的內容供大家互相學習了解，同時歡迎大家一起討論技術問題。

如果大家覺得創新互聯π寫的文章對大家有用的話別忘了分享給朋友，萬分感謝大家對創新互聯π的支持。

碼字不易，且看且珍惜......

分享標題：three.js引入obj文件及紋理
轉載來源：http://www.js-pz168.com/news12/317262.html

成都網站建設公司_創新互聯，為您提供標簽優化、定制開發、動態網站、軟件開發、品牌網站建設、響應式網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯