three.js引入obj文件及纹理

作为一名网站建设的工程师，每天要学习的东西真的是太多了，只有新鲜的血液注入我们才能够提升自己，通俗来讲，自然$也会越来越多，那下面就让成都网站建设工程师讲解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文件及纹理
转载来源：https://www.cdcxhl.com/news12/317262.html

成都网站建设公司_创新互联，为您提供标签优化、定制开发、动态网站、软件开发、品牌网站建设、响应式网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联