Xuất khẩu máy xay sinh tố thành Three.js

Question

Tôi vừa tạo một lưới ngẫu nhiên bằng Blender và tôi muốn xuất nó ra để sử dụng trong HTML5 thông qua Three.js. Tôi đã không nhìn thấy bất kỳ hướng dẫn phong nha cho thấy làm thế nào để làm điều này. bất cứ ai có thể giúp tôi ra với điều này? Tôi chỉ muốn 3D Mesh hiển thị trên web, không bao gồm hình động. Cảm ơn!

Answer 1

Cách đơn giản nhất tôi tìm thấy sau nhiều tìm kiếm và thử và sai là Three.ColladaLoader. Đặt các tệp .dae của bạn vào một thư mục có tiêu đề models trong thư mục /root của bạn. Tôi thấy nhà xuất khẩu Máy xay sinh tố JSON kém đáng tin cậy hơn. Gọi hàm PinaCollada từ bên trong init() chức năng, somthing như thế này:

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; 
} 

Answer 2

bạn cần nước xuất khẩu máy xay sinh tố threejs: read this

Answer 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); 
    } 
}); 

Là một bộ nạp json cơ bản cho Three.js; bạn cũng cần phải xem xét:

Làm thế nào để thiết lập khung hình, khung cảnh, đèn và camera (nếu bạn chưa có và không sử dụng những cái máy xay sinh tố)

morphTargets (nếu bạn đang tạo hiệu ứng động)

vật liệu (nếu bạn muốn tinh chỉnh)

Answer 4

Câu trả lời được lựa chọn không trả lại một lời hứa hay một callback, vì vậy bạn không biết khi nào bạn có thể đặt mọi thứ. Tôi đã thêm một lớp học nhỏ và sẽ thể hiện cách bạn có thể sử dụng nó. Nó kết thúc tốt nhất bộ nạp 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'); 
}; 

Sau đó, để sử dụng nó bao gồm bộ nạp collada:

<script src="js/loaders/ColladaLoader2.js"></script> 
<script src="js/blender/colladaBubbleWrap.js"></script> 

và trong js chính của bạn

var colladaLoader = new ColladaLoaderBubbleWrapper(); 
var colladaLoaded = colladaLoader.loadCollada('colladas/brick/brick.dae'); 
colladaLoaded.then(function(collada) { 
    scene.add(collada.scene); 
});