three.js引入obj文件及纹理

发布时间：2019-03-07 热度：

　　作为一名网站建设的工程师，每天要学习的东西真的是太多了，只有新鲜的血液注入我们才能够提升自己，通俗来讲，自然$也会越来越多，那下面就让石家庄网站建设工程师讲解three.js中引入obj文件和纹理的。希望这篇文章对大家能有所帮助。

首先引入这么多js

然后.....

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图已经有了一定的了解。如果大家还有什么问题可以在尚武科技π留言，我们会在下期的文章更新中为您解答您的问题。如果大家对有什么技术方面的问题，可以关注石家庄做网站的尚武科技官方公众号“尚武科技π”，其中会有大量关于”互联网+”的相关的内容供大家互相学习了解，同时欢迎大家一起讨论技术问题。

　　如果大家觉得尚武科技π写的文章对大家有用的话别忘了分享给朋友，万分感谢大家对尚武科技π的支持。

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