three.js
थ्री.जेएस में कैमरा नियंत्रण

aframe Angular 2 CSS HTML html5-canvas JavaScript jQuery Node.js SVG TypeScript

परिचय

यह दस्तावेज़ बताता है कि आप अपने दृश्य में कुछ मौजूदा कैमरा नियंत्रणों को आसानी से कैसे जोड़ सकते हैं, साथ ही साथ कस्टम नियंत्रण बनाने के लिए मार्गदर्शन भी प्रदान कर सकते हैं। ध्यान दें, पूर्व-निर्मित नियंत्रण स्क्रिप्ट लाइब्रेरी के /examples/js/controls फ़ोल्डर में पाई जा सकती है।

कक्षा नियंत्रण

एक ऑर्बिट कैमरा वह है जो उपयोगकर्ता को एक केंद्रीय बिंदु के चारों ओर घूमने की अनुमति देता है, लेकिन एक विशेष अक्ष को बंद रखते हुए। यह बेहद लोकप्रिय है क्योंकि यह दृश्य को "झुका हुआ" ऑफ-अक्ष प्राप्त करने से रोकता है। यह संस्करण वाई (ऊर्ध्वाधर) अक्ष को लॉक करता है, और उपयोगकर्ताओं को बाएं, मध्य और दाएं माउस बटन (या विशिष्ट स्पर्श घटनाओं) के साथ ऑर्बिट, ज़ूम और पैन की अनुमति देता है।

index.html

<html>
    <head>
        <title>Three.js Orbit Controller Example</title>
        <script src="/javascripts/three.js"></script>
        <script src="/javascripts/OrbitControls.js"></script>
    </head>
    <body>
        <script src="javascripts/scene.js"></script>
    </body>
</html>

scene.js

var scene, renderer, camera;
var cube;
var controls;

init();
animate();

function init()
{
    renderer = new THREE.WebGLRenderer( {antialias:true} );
    var width = window.innerWidth;
    var height = window.innerHeight;
    renderer.setSize (width, height);
    document.body.appendChild (renderer.domElement);

    scene = new THREE.Scene();
    
    var cubeGeometry = new THREE.BoxGeometry (10,10,10);
    var cubeMaterial = new THREE.MeshBasicMaterial ({color: 0x1ec876});
    cube = new THREE.Mesh (cubeGeometry, cubeMaterial);

    cube.position.set (0, 0, 0);
    scene.add (cube);

    camera = new THREE.PerspectiveCamera (45, width/height, 1, 10000);
    camera.position.y = 160;
    camera.position.z = 400;
    camera.lookAt (new THREE.Vector3(0,0,0));

    controls = new THREE.OrbitControls (camera, renderer.domElement);
    
    var gridXZ = new THREE.GridHelper(100, 10);
    gridXZ.setColors( new THREE.Color(0xff0000), new THREE.Color(0xffffff) );
    scene.add(gridXZ);

}

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

OrbitControls स्क्रिप्ट में कई सेटिंग्स हैं जिन्हें संशोधित किया जा सकता है। कोड अच्छी तरह से प्रलेखित है, इसलिए OrbitControls.js में देखें। एक उदाहरण के रूप में, यहां एक कोड स्निपेट है, जिसमें से कुछ को एक नए ऑर्बिटकंट्रोल ऑब्जेक्ट पर संशोधित किया जा रहा है।

controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true;
controls.autoRotate = true;

कस्टम कैमरा नियंत्रण - माउस-आधारित स्लाइडिंग

यहाँ एक कस्टम कैमरा नियंत्रक का एक उदाहरण है। यह क्लाइंट विंडो के भीतर माउस की स्थिति को पढ़ता है, और फिर कैमरे को इस तरह से स्लाइड करता है मानो वह विंडो पर माउस का अनुसरण कर रहा हो।

index.html

<html>
    <head>
        <title>Three.js Custom Mouse Camera Control Example</title>
        <script src="/javascripts/three.js"></script>
    </head>
    <body>
        <script src="javascripts/scene.js"></script>
    </body>
</html>

scene.js

var scene, renderer, camera;
var cube;
var cameraCenter = new THREE.Vector3();
var cameraHorzLimit = 50;
var cameraVertLimit = 50;
var mouse = new THREE.Vector2();

init();
animate();

function init()
{
    renderer = new THREE.WebGLRenderer( {antialias:true} );
    var width = window.innerWidth;
    var height = window.innerHeight;
    renderer.setSize (width, height);
    document.body.appendChild (renderer.domElement);
  
    scene = new THREE.Scene();
    
    var cubeGeometry = new THREE.BoxGeometry (10,10,10);
    var cubeMaterial = new THREE.MeshBasicMaterial ({color: 0x1ec876});
    cube = new THREE.Mesh (cubeGeometry, cubeMaterial);

    cube.position.set (0, 0, 0);
    scene.add (cube);

    camera = new THREE.PerspectiveCamera (45, width/height, 1, 10000);
    camera.position.y = 160;
    camera.position.z = 400;
    camera.lookAt (new THREE.Vector3(0,0,0));
    cameraCenter.x = camera.position.x;
    cameraCenter.y = camera.position.y;

    //set up mouse stuff
    document.addEventListener('mousemove', onDocumentMouseMove, false);
    window.addEventListener('resize', onWindowResize, false);
    
    var gridXZ = new THREE.GridHelper(100, 10);
    gridXZ.setColors( new THREE.Color(0xff0000), new THREE.Color(0xffffff) );
    scene.add(gridXZ);
}

function onWindowResize ()
{
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize (window.innerWidth, window.innerHeight);
}

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

function updateCamera() {
    //offset the camera x/y based on the mouse's position in the window
    camera.position.x = cameraCenter.x + (cameraHorzLimit * mouse.x);
    camera.position.y = cameraCenter.y + (cameraVertLimit * mouse.y);
}

function onDocumentMouseMove(event) {
    event.preventDefault();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

जैसा कि आप देख सकते हैं, यहां हम रेंडरिंग के animate चरण के दौरान केवल कैमरा स्थिति को अपडेट कर रहे हैं, जैसे हम दृश्य में किसी भी वस्तु के लिए कर सकते हैं। इस स्थिति में, हम साधारण X और Y निर्देशांक से ऑफसेट बिंदु पर कैमरे को पुनः स्थिति दे रहे हैं। यह आसानी से एक्स और जेड निर्देशांक हो सकता है, या एक मार्ग के साथ एक बिंदु, या कुछ और पूरी तरह से अलग हो सकता है जो बिल्कुल भी माउस की स्थिति से संबंधित नहीं है।

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow