Html Blender 导出到 Three.js
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9783458/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Blender export to Three.js
提问by AJ Naidas
I just created a random mesh using Blender and I want to export it to be used in HTML5 via the Three.js. I haven't seen any decent tutorials that shows how to do this. Can anyone help me out with this? I just want the 3D Mesh to display in the web, no animations included. Thanks!
我刚刚使用 Blender 创建了一个随机网格，我想通过 Three.js 将其导出以在 HTML5 中使用。我还没有看到任何像样的教程来展示如何做到这一点。谁能帮我解决这个问题？我只是想让 3D 网格显示在网络中，不包括动画。谢谢！
回答by Orbiting Eden
The easiest way I found after many searches and trial and error was Three.ColladaLoader. Place your .daefiles in a folder titled modelsin your /rootdirectory. I found the Blender JSON exporter less reliable. Call the PinaCollada function from within the init()function, somthing like this:
经过多次搜索和反复试验，我找到的最简单的方法是Three.ColladaLoader. 将您的.dae文件放在目录中标题为的文件夹models中/root。我发现 Blender JSON 导出器不太可靠。从函数内部调用 PinaCollada 函数init()，如下所示：
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;
}
回答by Wyccant
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);
}
});
Is a basic json loader for THREE.JS; you also need to look into:
是 THREE.JS 的基本 json 加载器；您还需要查看：
How to set up the canvas, scene, lights and camera (if you haven't already and aren't using the blender ones)
如何设置画布、场景、灯光和相机（如果您还没有并且不使用搅拌机）
morphTargets (if you are animating)
morphTargets（如果您正在制作动画）
materials (if you want to tweak)
材料（如果你想调整）
回答by newshorts
The selected answer doesn't return a promise or a callback, so you don't know when you can set things. I've added a small class that will and shown how you can use it. It wraps collada loader.
选定的答案不会返回承诺或回调，因此您不知道何时可以进行设置。我添加了一个小类，它将展示如何使用它。它包装了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' );
};
Then to use it include the collada loader:
然后使用它包括 collada 加载器：
<script src="js/loaders/ColladaLoader2.js"></script>
<script src="js/blender/colladaBubbleWrap.js"></script>
and in your main js
并在您的主要 js 中
var colladaLoader = new ColladaLoaderBubbleWrapper();
var colladaLoaded = colladaLoader.loadCollada('colladas/brick/brick.dae');
colladaLoaded.then(function(collada) {
scene.add( collada.scene );
});
回答by logic error
I used the: Blender3d ver 2.78, export script add-on found in three.js utilities folder with the three.js version 60, I added this script to my Blender's add-ons folder where the blender program was setup. Modeling in Sketchup, I exported as a model.dae ( Collada file ), imported that into Blender3d version 2.78 ran the setup for the add-on exporter, exporting Blender3d as a Three.js file. This json file I saved as a .js ( javascript-object ) and not as a .json (JavaScript Notation object)
我使用了：Blender3d 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 对象)
that object, ( textured correctly ) was ran like this:
该对象（纹理正确）是这样运行的：
///// 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 );
});
