我刚刚使用 Blender 创建了一个随机网格，我想将其导出以通过 Three.js 在 HTML5 中使用。我还没有看到任何体面的教程来展示如何做到这一点。谁能帮我解决这个问题？我只希望 3D Mesh 在网络中显示，不包括动画。谢谢！
【问题讨论】：
标签： html canvas three.js blender
经过多次搜索和反复试验，我发现最简单的方法是Three.ColladaLoader。将.dae 文件放在/root 目录中名为models 的文件夹中。我发现 Blender JSON 导出器不太可靠。从 init() 函数中调用 PinaCollada 函数，如下所示：
function init(){
scene = new THREE.scene;
...
var object1 = new PinaCollada('model1', 1);
scene.add(object1);
var object2 = new PinaCollada('model2', 2);
scene.add(object2);
...
}
function PinaCollada(modelname, scale) {
var loader = new THREE.ColladaLoader();
var localObject;
loader.options.convertUpAxis = true;
loader.load( 'models/'+modelname+'.dae', function colladaReady( collada ) {
localObject = collada.scene;
localObject.scale.x = localObject.scale.y = localObject.scale.z = scale;
localObject.updateMatrix();
} );
return localObject;
}
【讨论】：
您需要 threejs 搅拌机导出器：read this
【讨论】：
var loader = new THREE.JSONLoader(true);
loader.load({
model: "model.js",
callback: function(geometry) {
mesh = new THREE.Mesh(geometry,new THREE.MeshFaceMaterial);
mesh.position.set(0,0,0);
mesh.scale.set(20,20,20);
scene.add(mesh);
renderer.render(scene, camera);
}
});
是 THREE.JS 的基本 json 加载器； 您还需要调查：
如何设置画布、场景、灯光和相机（如果您还没有使用搅拌器）
morphTargets（如果您正在制作动画）
材料（如果你想调整）
【讨论】：
选择的答案不返回承诺或回调，所以你不知道什么时候可以设置。我添加了一个小类，它会展示你如何使用它。它包装了 collada loader。
var ColladaLoaderBubbleWrapper = function() {
this.file = null;
this.loader = new THREE.ColladaLoader();
this.resolve = null;
this.reject = null;
this.colladaLoadedNotifier = this.colladaLoadedNotifier.bind(this);
this.onLoad = this.onLoad.bind(this);
};
ColladaLoaderBubbleWrapper.prototype.loadCollada = function(file) {
this.loader.load(file, this.onLoad, this.onDownloadProgress);
return new Promise(this.colladaLoadedNotifier);
};
ColladaLoaderBubbleWrapper.prototype.colladaLoadedNotifier = function(resolve, reject) {
this.resolve = resolve;
this.reject = reject;
};
ColladaLoaderBubbleWrapper.prototype.onLoad = function(collada) {
this.resolve(collada);
};
ColladaLoaderBubbleWrapper.prototype.onDownloadProgress = function(xhr) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
};
然后使用它包括 collada 加载器：
<script src="js/loaders/ColladaLoader2.js"></script>
<script src="js/blender/colladaBubbleWrap.js"></script>
在你的主 js 中
var colladaLoader = new ColladaLoaderBubbleWrapper();
var colladaLoaded = colladaLoader.loadCollada('colladas/brick/brick.dae');
colladaLoaded.then(function(collada) {
scene.add( collada.scene );
});
【讨论】：
我使用了： Blender3d ver 2.78，在three.js实用程序文件夹中找到的导出脚本插件 使用 three.js 版本 60，我将此脚本添加到 Blender 的附加组件文件夹中 设置搅拌机程序的地方。在 Sketchup 中建模，我导出为 model.dae （ Collada 文件），将其导入 Blender3d 版本 2.78 运行设置 附加导出器，将 Blender3d 导出为 Three.js 文件。我保存的这个 json 文件 作为 .js ( javascript-object ) 而不是 .json (JavaScript Notation 对象)
那个对象，（纹理正确）是这样运行的：
///// GROUND CHERRY MESH
var myShaderMaterial = new THREE.MeshPhongMaterial({
// ADDING TEXTURE
map: THREE.ImageUtils.loadTexture('models/MyBistro/ShelfTextures/ground_cherryTEX_001a1.png'),
specular: 0xFFFFFF,
shininess: 80,
});
// ADDING MODEL OBJ
var loader = new THREE.ObjectLoader( manager );
loader.load( 'models/MyBistro/ShelfTextures/MyShader1aTEST_TWO.js', function ( object ){
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
var geometry = child.geometry;
object = new THREE.Mesh(geometry, myShaderMaterial);
object.scale.set(1.60, 1.60, 1.60);
object.position.x = + 22.10;
object.position.y = - 84.0;
object.position.z = - 4.0;
object.rotation.y = Math.PI / 0.10;
object.castShadow = true;
object.receiveShadow = true;
child.material.map = myShaderMaterial;
child.material.needsUpdate = true;
}
});
scene.add( object );
});
【讨论】：
对于那些在 2021 年阅读这篇文章的人，希望以后也能阅读，我想详细说明所提供的答案和 cmets，它们通常都很棒。
首先，Three-to-Blender 导出器不再是有效选项，因为它已从 Three.js 代码库中删除。
其次，COLLADA 也不可行，因为这种格式有太多的极端情况，没有很好地针对 Web 进行优化。
所以现在推荐的方法是使用 Blender 的 glTF 2.0 导出器和 Three.js GLTFLoader 类。用法见this tutorial。
【讨论】：