three.js - ब्लेंडर से बनावट के साथ एक सरल मॉडल को तीन। Js में निर्यात करना



export textures (1)

नोट: मैं जावास्क्रिप्ट कोड में मॉडल को संशोधित करने से बचाना चाहता हूं और ब्लेंडर के अंदर सभी मॉडल डिज़ाइन करना चाहता हूं।

नोट # 2: जबकि यह प्रश्न लंबा है, यह वास्तव में एक बुनियादी समस्या है (शीर्षक सभी इसे कहते हैं)। नीचे समस्या "चलना" है।

मैं निर्यात ब्लेंडर मॉडलों को डीएई मॉडल के रूप में threejs.org पर चला रहा हूं, लेकिन बनावट के साथ मॉडल के साथ समस्या है (मैंने भी JSON और ओबीजे + एमटीएल प्रारूप की कोशिश की है):

चीजों को सरल बनाने के लिए, यहां दिए गए कदम मैं "स्टार्टअप फ़ाइल" में बनावट को जोड़ने के लिए (और विफल) कर रहा हूं जिसमें एक घन, कैमरा, और प्रकाश होता है:

  1. क्यूब का चयन करें
  2. सामग्री पैनल में, सुनिश्चित करें कि क्यूब के लिए डिफ़ॉल्ट सामग्री का चयन किया गया है।
  3. बनावट पैनल में, सुनिश्चित करें कि "टेक्स" (सामग्री के लिए डिफ़ॉल्ट बनावट) का चयन किया गया है।
  4. इस बनावट के लिए, "छवि या मूवी" टाइप करें
  5. पैनल के छवि अनुभाग में, बनावट के रूप में एक घास 1.जेपीजी (512x512 छवि) खोलें।
  6. मैपिंग अनुभाग में, समन्वय को यूवी में बदलें।
  7. मॉडल कोलाडा मॉडल के रूप में निर्यात करें, "यूवी बनावट शामिल करें", "सामग्री बनावट शामिल करें" और "प्रतिलिपि" चेकबॉक्स को चेक करें।

आप इन चरणों में उल्लिखित मिश्रण, डेटा और बनावट फ़ाइल डाउनलोड कर सकते हैं

तब मैं डीएई मॉडल लोड करने के लिए निम्न कोड का उपयोग करता हूं, लेकिन मुझे यह त्रुटि मिलती है और क्यूब नहीं दिखाया जाता है:

256 [.वेबएलआरेंडिंगकॉन्टेक्स्ट] जीएल त्रुटि: GL_INVALID_OPERATION: glDrawElements: विशेषता 2 WebGL में श्रेणी के कोने से बाहर निकलने का प्रयास: बहुत अधिक त्रुटियां, इस संदर्भ के लिए कंसोल में कोई और त्रुटियां नहीं भेजी जाएंगी

<script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/ColladaLoader.js"></script>
<script>
    var scene, camera, renderer;
    init();
    animate();

    function init() {
        scene = new THREE.Scene();
        var WIDTH = window.innerWidth,
            HEIGHT = window.innerHeight;

        renderer = new THREE.WebGLRenderer({antialias:true});
        renderer.setSize(WIDTH, HEIGHT);
        document.body.appendChild(renderer.domElement);

        camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 10000);
        camera.position.set(10,10,10);
        scene.add(camera);

        window.addEventListener('resize', function() {
        var WIDTH = window.innerWidth,
            HEIGHT = window.innerHeight;
            renderer.setSize(WIDTH, HEIGHT);
            camera.aspect = WIDTH / HEIGHT;
            camera.updateProjectionMatrix();
        });  

        var loader = new THREE.ColladaLoader();

        loader.load( 'models/untitled.dae', function(geometry) {
            dae = geometry.scene;
            scene.add(dae);
            var gridXZ = new THREE.GridHelper(100, 10);
            gridXZ.setColors( new THREE.Color(0x8f8f8f), new THREE.Color(0x8f8f8f) );
            gridXZ.position.set(0,0,0);
            scene.add(gridXZ);
        });

        controls = new THREE.OrbitControls(camera, renderer.domElement);
    }

    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
      controls.update();
    }
</script>

और यहां ब्लेंडर का स्क्रीनशॉट 7 चरणों का उल्लेख किया गया है:

अद्यतन: ब्लेंडर के लिए JSON निर्यातक का उपयोग कर जेएस फाइल के रूप में निर्यात करना या तो काम नहीं करता है और इसी त्रुटि के परिणामस्वरूप

अपडेट 2: ओबीजे + एमटीएल को निर्यात करने और ओबीजेएमएलएल लोडर के साथ लोड करने के बाद एक ही त्रुटि।


समस्या यह है कि आपने अपने मॉडल के लिए यूवी समन्वय स्थापित नहीं किया है डिफ़ॉल्ट रूप से, प्रत्येक चेहरा पूरे बनावट पर लागू होता है, लेकिन ब्लेंडर में यूवी रिक्त होते हैं जब निर्यात होता है

आप विशेष रूप से अपने यूवी समन्वय स्थापित करना चाहते हैं। ये निर्देशांक हैं जो दिखाते हैं कि प्रत्येक चेहरे पर बनावट कैसे लागू किया जाए

सुनिश्चित करें कि यूवी अपने मॉडल ब्लेंडर में खोल देना। मोड (टैब) को संपादित करने के लिए जाओ, सभी चेहरों को चुनें, "यू" दबाएं, और "खोलना" पर क्लिक करें। फिर पुनः निर्यात करने का प्रयास करें

Unwrap सिर्फ एक तरीका है, वहाँ कई हैं आप चाहते हैं कि परिणाम प्राप्त करने के लिए ब्लेंडर में विभिन्न तरीकों के साथ प्रयोग (संभवतः "रीसेट" विकल्प)।