html5 - तीन.जेएस को ब्लेंडर निर्यात




canvas three.js (3)

आपको तीनjs ब्लेंडर निर्यातक की आवश्यकता है: इसे पढ़ें

मैंने अभी ब्लेंडर का उपयोग करके एक यादृच्छिक जाल बनाया है और मैं इसे थ्रू.जेएस के माध्यम से एचटीएमएल 5 में इस्तेमाल करने के लिए निर्यात करना चाहता हूं। मैंने कोई सभ्य ट्यूटोरियल नहीं देखा है जो दिखाता है कि यह कैसे करें। क्या कोई भी इस के साथ मेरी मदद कर सकता है? मैं बस 3 डी मेष वेब पर प्रदर्शित करना चाहता हूं, कोई एनिमेशन शामिल नहीं है। धन्यवाद!


चयनित उत्तर एक वादा या कॉलबैक वापस नहीं करता है, इसलिए आप नहीं जानते कि आप चीजें कब सेट कर सकते हैं। मैंने एक छोटी सी कक्षा को जोड़ा है जो दिखाएगा और दिखाएगा कि आप इसका उपयोग कैसे कर सकते हैं। यह कोलाडा लोडर लपेटता है।

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

इसके बाद इसका उपयोग करने के लिए कोलाडा लोडर शामिल है:

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

और आपके मुख्य जेएस में

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

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

तीन। जेएस के लिए एक मूल जेसन लोडर है; आपको यह भी देखने की आवश्यकता है:

कैनवास, दृश्य, रोशनी और कैमरा कैसे स्थापित करें (यदि आप पहले से नहीं हैं और ब्लेंडर वाले का उपयोग नहीं कर रहे हैं)

morphTargets (यदि आप एनिमेट कर रहे हैं)

सामग्री (यदि आप ट्विक करना चाहते हैं)