如何用Babylon.js导入一个.obj模型
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用Babylon.js导入一个.obj模型相关的知识，希望对你有一定的参考价值。
参考技术A 直接写在html页面把，不要写onload事件。在js里面首行写$(document).ready(function())，然后把一些需要页面一加载就执行的代码写在function（）里面，也可以在页面刚加载时执行。 参考技术B file协议无法访问本地资源，需要使用http协议，跑个服务吧用Babylon.js如何加载obj模型
我想用Babylon.js加载一个Obj模型，首先我不知道我的方法是否正确。目录结构和代码都在图里面，按照这个代码运行之后结果报错如图四。我不知道用Babylon.js加载.obj类型的模型时，报错中提到的.mainfest文件是否必要？希望有研究的大神能指导一下。
第一张图放错了。。。。。
<html>
<head>
<script type="text/javascript" src="libs/three.js"></script>
<script type="text/javascript" src="libs/OBJLoader.js"></script>
<script type="text/javascript">
var scene = null;
var camera = null;
var renderer = null;
var mesh = null;
var id = null;
function init()
renderer = new THREE.WebGLRenderer(//渲染器
canvas: document.getElementById('mainCanvas')//画布
);
renderer.setClearColor(0x000000);//画布颜色
scene = new THREE.Scene();//创建场景
camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);//正交投影照相机
camera.position.set(15, 25, 25);//相机位置
camera.lookAt(new THREE.Vector3(0, 2, 0));//lookAt()设置相机所看的位置
scene.add(camera);//把相机添加到场景中
var loader = new THREE.OBJLoader();//在init函数中，创建loader变量，用于导入模型
loader.load('libs/port.obj', function(obj) //第一个表示模型路径，第二个表示完成导入后的回调函数，一般我们需要在这个回调函数中将导入的模型添加到场景中
obj.traverse(function(child)
if (child instanceof THREE.Mesh)
child.material.side = THREE.DoubleSide;
);
mesh = obj;//储存到全局变量中
scene.add(obj);//将导入的模型添加到场景中
);
var light = new THREE.DirectionalLight(0xffffff);//光源颜色
light.position.set(20, 10, 5);//光源位置
scene.add(light);//光源添加到场景中
id = setInterval(draw, 20);//每隔20s重绘一次
function draw() //们在重绘函数中让茶壶旋转：
renderer.render(scene, camera);//调用WebGLRenderer的render函数刷新场景
mesh.rotation.y += 0.01;//添加动画
if (mesh.rotation.y > Math.PI * 2)
mesh.rotation.y -= Math.PI * 2;
</script>
</head>
<body onload="init()">
<canvas id="mainCanvas" width="800px" height="600px" ></canvas>
</body>
</html>
以上是关于如何用Babylon.js导入一个.obj模型的主要内容，如果未能解决你的问题，请参考以下文章