作为一名网站建设的工程师,每天要学习的东西真的是太多了,只有新鲜的血液注入我们才能够提升自己,通俗来讲,自然$也会越来越多,那下面就让石家庄网站建设工程师讲解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图已经有了一定的了解。如果大家还有什么问题可以在尚武科技π留言,我们会在下期的文章更新中为您解答您的问题。 如果大家对有什么技术方面的问题,可以关注石家庄做网站的尚武科技官方公众号“尚武科技π”,其中会有大量关于”互联网+”的相关的内容供大家互相学习了解,同时欢迎大家一起讨论技术问题。
如果大家觉得尚武科技π写的文章对大家有用的话别忘了分享给朋友,万分感谢大家对尚武科技π的支持。
码字不易,且看且珍惜......