उदाहरण डेटा: मेष प्रारूप (mw/1):

{
    "Tid": 6,
    "frameNumber": 580,
    "Mesh": [[0.52147865, 0.35447019, -1.05268724], [1.02147865, 0.35447019, -1.05268724], [0.52147865, 0.35447019, -1.05268724], [0.52147865, 0.85447019, -1.05268724], [0.52147865, 0.35447019, -1.05268724], [0.52147865, 0.35447019, -0.05268724], [1.02147865, 0.85447019, -1.05268724], [1.02147865, 0.35447019, -1.05268724], [1.02147865, 0.85447019, -1.05268724], [0.52147865, 0.85447019, -1.05268724], [1.02147865, 0.85447019, -1.05268724], [1.02147865, 0.85447019, -0.05268724], [1.02147865, 0.35447019, -0.05268724], [0.52147865, 0.35447019, -0.05268724], [1.02147865, 0.35447019, -0.05268724], [1.02147865, 0.85447019, -0.05268724], [1.02147865, 0.35447019, -0.05268724], [1.02147865, 0.35447019, -1.05268724], [0.52147865, 0.85447019, -0.05268724], [0.52147865, 0.85447019, -1.05268724], [0.52147865, 0.85447019, -0.05268724], [0.52147865, 0.35447019, -0.05268724], [0.52147865, 0.85447019, -0.05268724], [1.02147865, 0.85447019, -0.05268724]]
}

वे [x,y,z] प्रत्येक हैं और कुल 24 बिंदुओं के साथ एक घन/बॉक्स आकार बनाते हैं।

मैं अपने मेष डेटा के साथ तीन.जेएस के साथ एक आकृति प्रस्तुत करने के बारे में कैसे जा सकता हूं?

संपादित करें: मैंने अपने डेटा को .BoxGeometry() उदाहरण में जोड़ने का प्रयास किया है, हालांकि यह इसके बजाय एक 2D बॉक्स बनाता है, जो गलत है।

<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>Three.js</title>
<style>
    body { margin: 0; }
</style>
</head>
<body>
    <script src="../SdCardFiles/js/three.min.js"></script>
    <script>
      const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera( );

        const renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

        const geometry = new THREE.BoxGeometry([[0.52147865, 0.35447019, -1.05268724], [1.02147865, 0.35447019, -1.05268724], [0.52147865, 0.35447019, -1.05268724], [0.52147865, 0.85447019, -1.05268724], [0.52147865, 0.35447019, -1.05268724], [0.52147865, 0.35447019, -0.05268724], [1.02147865, 0.85447019, -1.05268724], [1.02147865, 0.35447019, -1.05268724], [1.02147865, 0.85447019, -1.05268724], [0.52147865, 0.85447019, -1.05268724], [1.02147865, 0.85447019, -1.05268724], [1.02147865, 0.85447019, -0.05268724], [1.02147865, 0.35447019, -0.05268724], [0.52147865, 0.35447019, -0.05268724], [1.02147865, 0.35447019, -0.05268724], [1.02147865, 0.85447019, -0.05268724], [1.02147865, 0.35447019, -0.05268724], [1.02147865, 0.35447019, -1.05268724], [0.52147865, 0.85447019, -0.05268724], [0.52147865, 0.85447019, -1.05268724], [0.52147865, 0.85447019, -0.05268724], [0.52147865, 0.35447019, -0.05268724], [0.52147865, 0.85447019, -0.05268724], [1.02147865, 0.85447019, -0.05268724]]);
        const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        const cube = new THREE.Mesh( geometry, material );
        scene.add( cube );

        camera.position.z = 5;

        const animate = function () {
            requestAnimationFrame( animate );

            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            cube.rotation.z += 0.01;

            renderer.render( scene, camera );
        };

        animate();
    </script>
</body>

थ्री.जेएस रेंडर्ड इमेज रोटेटिंग

1
Sikandar Malik 17 अगस्त 2021, 05:48

1 उत्तर

सबसे बढ़िया उत्तर

BoxGeometry (जो एक बॉक्स बनाएगा) का उपयोग करने के बजाय, आपको यह करना होगा BufferGeometry का उपयोग करें, जिससे आप अपनी खुद की कस्टम शीर्ष स्थिति घोषित कर सकते हैं। उस दस्तावेज़ीकरण पृष्ठ में एक संक्षिप्त कोड डेमो है, आपको बस इतना करना है कि vertices सरणी में डेटा को 3 संख्याओं के अपने समूहों के साथ स्वैप करें:

const geometry = new THREE.BufferGeometry();

// Here we put in your own custom vertex positions
const vertices = new Float32Array( [
0.52147865, 0.35447019, -1.05268724, 
1.02147865, 0.35447019, -1.05268724, 
0.52147865, 0.35447019, -1.05268724, 
0.52147865, 0.85447019, -1.05268724, 
0.52147865, 0.35447019, -1.05268724, 
0.52147865, 0.35447019, -0.05268724, 
1.02147865, 0.85447019, -1.05268724, 
1.02147865, 0.35447019, -1.05268724, 
1.02147865, 0.85447019, -1.05268724, 
0.52147865, 0.85447019, -1.05268724, 
1.02147865, 0.85447019, -1.05268724, 
1.02147865, 0.85447019, -0.05268724, 
1.02147865, 0.35447019, -0.05268724, 
0.52147865, 0.35447019, -0.05268724, 
1.02147865, 0.35447019, -0.05268724, 
1.02147865, 0.85447019, -0.05268724, 
1.02147865, 0.35447019, -0.05268724, 
1.02147865, 0.35447019, -1.05268724, 
0.52147865, 0.85447019, -0.05268724, 
0.52147865, 0.85447019, -1.05268724, 
0.52147865, 0.85447019, -0.05268724, 
0.52147865, 0.35447019, -0.05268724, 
0.52147865, 0.85447019, -0.05268724, 
1.02147865, 0.85447019, -0.05268724
] );

// itemSize = 3 because there are 3 values (components) per vertex
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
const mesh = new THREE.Mesh( geometry, material );
1
Marquizzo 17 अगस्त 2021, 06:53
मैंने आपके कदमों का पालन किया और फिर भी मुझे एक 3D क्यूब दिखने वाला आकार नहीं मिला। इसके बजाय मेरे पास एक गलत आकार है जैसा कि चल रहे कोड के साथ दिखाया गया है: jsfiddle.net/ya83edzv
 – 
Sikandar Malik
17 अगस्त 2021, 09:02
प्रत्येक सरणी में 3 स्थितीय निर्देशांक [x, y, z] होते हैं और 24 सरणियाँ होती हैं। एक घन की प्रत्येक भुजा 4 बिन्दुओं पर एक सीधी रेखा से जुड़ी होती है। 3D शेप में 6 भुजाएँ * 4 अंक = 24 अंक होते हैं। इसलिए, 24 सरणियाँ, प्रत्येक में स्थितीय समन्वय [x, y, z] होते हैं।
 – 
Sikandar Malik
17 अगस्त 2021, 09:32
मार्क्विज़ो हैलो, आप वहाँ कली हैं?
 – 
Sikandar Malik
18 अगस्त 2021, 04:58
WebGL केवल त्रिभुज बना सकता है, 4 बिंदुओं वाले वर्ग नहीं। आपको अपना डेटा संशोधित करना होगा ताकि प्रत्येक वर्ग का फलक 2 त्रिभुजों से बना हो, एक प्लेन की तरह। ध्यान रखें कि त्रिभुज में शीर्षों का क्रम भी मायने रखता है। यदि वे वामावर्त दिशा में हवा करते हैं, तो आप त्रिकोण देखेंगे, लेकिन यदि वे दक्षिणावर्त हैं, तो वे "पीछे की ओर" होंगे, और आप इसे नहीं देख पाएंगे। वाइंडिंग ऑर्डर विवरण के लिए यहां देखें
 – 
Marquizzo
18 अगस्त 2021, 06:09