web-dev-qa-db-ja.com

Three.jsへのBlenderのエクスポート

Blenderを使用してランダムメッシュを作成し、それをThree.js経由でHTML5で使用するためにエクスポートしたいと思います。これを行う方法を示す適切なチュートリアルを見たことがありません。誰かがこれを手伝ってくれる？ 3DメッシュをWebに表示するだけで、アニメーションは含まれません。ありがとう！

htmlcanvasthree.jsblender
27
AJ Naidas

多くの検索と試行錯誤の後で私が見つけた最も簡単な方法は_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;
}
_
30
Orbiting Eden

あなたは3つのjsブレンダーエクスポーターが必要です： これを読む

12
Brad Himelstein
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（アニメーションしている場合）

マテリアル（微調整する場合）

11
Wyccant

選択された回答は、Promiseやコールバックを返さないため、いつ設定できるかわかりません。小さなクラスを追加して、その使い方を示しました。 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 );
});
0
newshorts