three.js引入obj文件及紋理

發(fā)布時(shí)間：2019-03-07 熱度：

　　作為一名網(wǎng)站建設(shè)的工程師，每天要學(xué)習(xí)的東西真的是太多了，只有新鮮的血液注入我們才能夠提升自己，通俗來(lái)講，自然$也會(huì)越來(lái)越多，那下面就讓石家莊網(wǎng)站建設(shè)工程師講解three.js中引入obj文件和紋理的。希望這篇文章對(duì)大家能有所幫助。

首先引入這么多js

然后.....

var scene,camera,renderer;//scene(場(chǎng)景)，camera(相機(jī))，renderer(渲染器);

var name;

scene=new THREE.Scene();//創(chuàng)建場(chǎng)景

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

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

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

scene.add(camera);//吧相機(jī)放入場(chǎng)景中

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

renderer.setSize(800, 800);

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

renderer.setClearColor("顏色");

//渲染器放入頁(yè)面內(nèi)

document.body.appendChild(renderer.domElement);

//畫布與相機(jī)放入渲染器中

renderer.render(scene, camera);

//環(huán)境燈

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

//燈光放入場(chǎng)景內(nèi)

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{

//設(shè)置當(dāng)前加載的紋理

loaders.setMaterials(data) ;

//添加3d圖片的路徑

loaders.setPath('img/');

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

name= imgs;//儲(chǔ)存到全局變量中

scene.add(imgs);

renderer.render( scene, camera );

})

}

})

</script>

　　通過(guò)以上內(nèi)容的說(shuō)明，大家對(duì)three.js引入3D圖已經(jīng)有了一定的了解。如果大家還有什么問(wèn)題可以在尚武科技π留言，我們會(huì)在下期的文章更新中為您解答您的問(wèn)題。如果大家對(duì)有什么技術(shù)方面的問(wèn)題，可以關(guān)注石家莊做網(wǎng)站的尚武科技官方公眾號(hào)“尚武科技π”，其中會(huì)有大量關(guān)于”互聯(lián)網(wǎng)+”的相關(guān)的內(nèi)容供大家互相學(xué)習(xí)了解，同時(shí)歡迎大家一起討論技術(shù)問(wèn)題。

　　如果大家覺得尚武科技π寫的文章對(duì)大家有用的話別忘了分享給朋友，萬(wàn)分感謝大家對(duì)尚武科技π的支持。

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