2024-02-12 分类: 网站建设
作为一名网站建设的工程师,每天要学习的东西真的是太多了,只有新鲜的血液注入我们才能够提升自己,通俗来讲,自然$也会越来越多,那下面就让成都网站建设工程师讲解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文件及纹理
转载来源:/news12/317262.html
成都网站建设公司_创新互联,为您提供标签优化、定制开发、动态网站、软件开发、品牌网站建设、响应式网站
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联
猜你还喜欢下面的内容