Я просто создал случайную сетку с помощью Blender, и я хочу экспортировать ее для использования в HTML5 через Three.js. Я не видел никаких достойных учебников, которые показывают, как это сделать. Может ли кто-нибудь помочь мне с этим? Я просто хочу, чтобы 3D-сетка отображалась в Интернете, а анимация не включалась. Спасибо!
Экспорт блендера в Three.js
Ответ 1
Самый простой способ, который я нашел после многих поисков и проб и ошибок, - 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;
}
Ответ 2
вам нужен экспортер блендера threejs: прочитать это
Ответ 3
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);
}
});
Является основным загрузчиком json для THREE.JS; вам также нужно изучить:
Как настроить холст, сцену, подсветку и камеру (если вы еще не используете блендер)
morphTargets (если вы анимируете)
материалы (если вы хотите настроить)
Ответ 4
Выбранный ответ не возвращает обещание или обратный вызов, поэтому вы не знаете, когда вы можете установить что-то. Я добавил небольшой класс, который будет показан и показан, как вы можете его использовать. Он обертывает загрузчик collada.
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 );
});