three.js ट्यूटोरियल
शुरुआत तीन.जैस से हुई

aframe Angular 2 CSS HTML html5-canvas JavaScript jQuery Node.js SVG TypeScript
खोज…


टिप्पणियों

परियोजना का उद्देश्य बहुत कम स्तर की जटिलता के साथ एक हल्के 3 डी पुस्तकालय का निर्माण करना है - दूसरे शब्दों में, डमी के लिए। पुस्तकालय कैनवास, svg, CSS3D और WebGL रेंडरर्स प्रदान करता है।

संस्करण

संस्करण बदलाव का रिलीज़ की तारीख
R85 संपर्क 2017/04/25
R84 संपर्क 2017/01/19
R83 संपर्क 2016/12/15
R82 संपर्क 2016/12/15
R81 संपर्क 2016/09/16
R80 संपर्क 2016/08/23
R79 संपर्क 2016/07/14
R78 संपर्क 2016/06/20

स्थापना या सेटअप

  • आप npm के माध्यम से तीन.js स्थापित कर सकते हैं: 
npm install three
  • आप इसे अपने HTML में CDN से जोड़ सकते हैं: 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"></script>
  • आप इसे एक कोशिश देने और परियोजना को एक उदाहरण या शुरुआती बिंदु के रूप में डाउनलोड करने के लिए तीन.जेएस संपादक का उपयोग कर सकते हैं।

सरल बॉयलरप्लेट: भिगोना के साथ कताई घन और कक्षा नियंत्रण

यह मूल HTML फ़ाइल है जिसका उपयोग प्रोजेक्ट शुरू करते समय बॉयलरप्लेट के रूप में किया जा सकता है। यह बायलरप्लेट भिगोना (कैमरा जो कि एक वस्तु के साथ चारों ओर गति कर सकता है) के साथ कक्षा नियंत्रण का उपयोग करता है और एक कताई घन बनाता है। 

<!DOCTYPE html>
<html>
    <head>
        <title>Three.js Boilerplate</title>

        <!--This is important to get a correct canvas size on mobile-->
        <meta name='viewport' content='width=device-width, user-scalable=no'/>

        <style>
            body{
                margin:0;
                overflow:hidden;
            }

            /*
              Next 2 paragraphs are a good practice. 
              In IE/Edge you have to provide the cursor images.
            */
            canvas{
                cursor:grab;
                cursor:-webkit-grab;
                cursor:-moz-grab;
            }
            canvas:active{
                cursor:grabbing;
                cursor:-webkit-grabbing;
                cursor:-moz-grabbing;
            }
        </style>
    </head>
    <body>
        
        <script src='three.js/build/three.js'></script>
        <script src='three.js/examples/js/controls/OrbitControls.js'></script>

        <script>
            var scene, renderer, camera, controls, cube;
        
            init();

            function init () {
                renderer = new THREE.WebGLRenderer();
                
                //this is to get the correct pixel detail on portable devices
                renderer.setPixelRatio( window.devicePixelRatio );

                //and this sets the canvas' size.
                renderer.setSize( window.innerWidth, window.innerHeight );
                document.body.appendChild( renderer.domElement );

                scene = new THREE.Scene();

                camera = new THREE.PerspectiveCamera( 
                    70,                                         //FOV
                    window.innerWidth / window.innerHeight,     //aspect
                    1,                                          //near clipping plane
                    100                                         //far clipping plane
                );
                camera.position.set( 1, 3, 5 );

                controls = new THREE.OrbitControls( camera, renderer.domElement );
                controls.rotateSpeed = .07;
                controls.enableDamping = true;
                controls.dampingFactor = .05;

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

                cube = new THREE.Mesh(
                    new THREE.BoxGeometry( 1, 1, 1 ),
                    new THREE.MeshBasicMaterial()
                   );
                scene.add( cube );

                animate();
            }

            function animate () {
                requestAnimationFrame( animate );
                controls.update();
                renderer.render( scene, camera );
                
                cube.rotation.x += 0.01;
            }
        </script>
    </body>
</html>

नमस्ते दुनिया!

इसका उदाहरण थ्रीजे वेबसाइट से लिया गया है ।

आप तीन.js डाउनलोड कर सकते हैं और नीचे स्क्रिप्ट स्रोत को बदल सकते हैं।

इस लिंक के तहत कई और उन्नत उदाहरण हैं।

HTML: 

<html>
<head>
    <meta charset=utf-8>
    <title>My first Three.js app</title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"></script>
    <script>
        // Our JavaScript will go here.
    </script>
</body>

जावास्क्रिप्ट में एक स्थिर घन के साथ मूल दृश्य: 

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

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

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

वास्तव में कुछ भी देखने के लिए, हमें एक रेंडर () लूप चाहिए: 

function render() {
    requestAnimationFrame( render );
    renderer.render( scene, camera );
}
render();


Modified text is an extract of the original Stack Overflow Documentation
के तहत लाइसेंस प्राप्त है CC BY-SA 3.0
से संबद्ध नहीं है Stack Overflow