ThreeJS 不显示 dae 3D 模型
Posted
技术标签:
【中文标题】ThreeJS 不显示 dae 3D 模型【英文标题】：ThreeJS doesn't display dae 3D model 【发布时间】：2016-02-25 00:48:11 【问题描述】：我是 WebGL 和 Three.js 的新手。我正在尝试导入我在 Blender 中创建的简单 3D 模型并保存为 .dae。我正在使用 Python http 服务器进行本地测试。背景颜色没问题，但我无法在场景中显示我的 3D 模型。在 Chrome 中，我在控制台中看到错误：
Uncaught TypeError: THREE.UV is not a function - ColladaLoader.js:2413
Mesh.handlePrimitive @ ColladaLoader.js:2413
Mesh.parse @ ColladaLoader.js:2317
Geometry.parse @ ColladaLoader.js:2233
parseLib @ ColladaLoader.js:235
parse @ ColladaLoader.js:130
req.onreadystatechange @ ColladaLoader.js:73
<html>
<head>
<title>3D object.js</title>
</head>
<body>
<script src="js/three.min.js"></script>
<script src="js/ColladaLoader.js"></script>
<script>
var renderer = new THREE.WebGLRenderer();
renderer.setSize(800, 600);
document.body.appendChild(renderer.domElement);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
35, // Field of view
800 / 600, // Aspect ratio
0.1, // Near plane
1000 // Far plane
);
camera.position.set(-15, 1000, 10);
camera.lookAt(scene.position);
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load('models/MyModel.dae', function(collada)
var dae = collada.scene;
var skin = collada.skins[0];
dae.position.set(0,0,0);
dae.scale.set(1,1,1);
scene.add(dae);
);
var dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(100, 100, 50);
scene.add(dirLight);
Render();
function Render()
renderer.setClearColor(0xffe5e5, 1);
renderer.render(scene, camera);
</script>
</body>
</html>有人可以告诉我该怎么做吗？我已经花了几个小时试图找到解决方案但没有成功。
编辑： 我下载了另一个 ColladaLoader.js，现在我没有错误了。但我仍然无法在现场看到 3D 模型。
【问题讨论】：
loader.load() 是异步的。这就是为什么你有一个回调函数。您在模型加载之前进行渲染。
@WestLangley 感谢您解释它是如何工作的。
【参考方案1】：
看起来您只渲染场景一次。 渲染函数中缺少 requestAnimationFrame( func )
在“渲染场景”下查看 http://threejs.org/docs/#Manual/Introduction/Creating_a_scene
【讨论】：
@WestLangley 谢谢！我添加了 requestAnimationFrame(render);到我的函数 Render()，现在我在场景中看到了我的模型。以上是关于ThreeJS 不显示 dae 3D 模型的主要内容，如果未能解决你的问题，请参考以下文章
使用fabric js canvas作为threejs 3d模型纹理