कैसे दो कैनवस की आवश्यकता के बिना Three.js में एक mapboxgl मानचित्र डाल करने के लिए?

वोट
0

मैं एक साथ Three.js में एक सतह पर एक mapboxgl नक्शा डालने का एक सरल उदाहरण डाल दिया है। यह रेखापुंज आधारित नक्शे से एक बेहतर प्रतिक्रिया देता है। हम यह करने के लिए नक्शे एक मोबाइल डिवाइस का मानना ​​है कि हमेशा 'डाउन' होता है जब आप नीचे की ओर फ़ोन के (इस उदाहरण है कि यहाँ नहीं है) में एक सतह पर होने की अनुमति देने के लिए करना चाहता था।

हालांकि, वहाँ है अभी भी स्मृति भी पर्याप्त मात्रा में चारों ओर फेरबदल किया जा रहा है - और अगर नक्शा Three.js रूप में एक ही WebGL संदर्भ में सीधे तैयार किया जा रहा था अधिक तार्किक हो सकता है - तो सवाल उन पंक्तियों के साथ कोड में सुधार के आसपास है।

भी नीचे दिए गए उदाहरण threes में एक सतह पर एक वीडियो डाल करने के लिए एक ऐसी ही तकनीक से पता चलता, लेकिन दुर्भाग्य से मोबाइल उपकरणों पर अच्छी तरह से काम नहीं करता है - तो इसी तरह, उन पंक्तियों के साथ किसी भी विचार भी सराहना की।

<!doctype html>
<html lang=en>
<head>
    <title>Texture from Canvas (Three.js)</title>
    <meta charset=utf-8>
    <meta name=viewport content=width=device-width, user-scalable=no, minimum-scale=0.3, maximum-scale=0.3>
</head>
<body>

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.20.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.20.1/mapbox-gl.css' rel='stylesheet' />

<script src=js/threejs/three.min.js></script>
<script src=js/threejs/Detector.js></script>

<!-- jQuery code to display an information button and box when clicked. -->
<script src=js/jquery/jquery.min.js></script>
<script src=js/jquery/jquery-ui.js></script>

<!-- ------------------------------------------------------------ -->
<div id=three style=position: absolute; left:0px; top:0px></div>
<div id=map style=position: fixed; left:0px; top:0px; width:512px; height:512px;></div>
<video id=video style=position: fixed; left:0px; top:512px; src=/videos/Big_Buck_Bunny_small.ogv controls=false></video>
<script>
/*
    Three.js tutorials by example
    Original Author: Lee Stemkoski
    Modified by: Dr. Roy Davies to show mapboxgl
    Date: July 2013 (three.js v59dev)
*/
// MAIN
// standard global variables
var container, scene, camera, renderer;
var mapcanvas;
var mapmaterial;
var videocanvas;
var videomaterial;

// custom global variables
init();
animate();
// FUNCTIONS        
function init() 
{

    // SCENE
    scene = new THREE.Scene();
    // CAMERA
    var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
    var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
    camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
    scene.add(camera);
    camera.position.set(0,150,400);
    camera.lookAt(scene.position);  
    // RENDERER
    if ( Detector.webgl )
        renderer = new THREE.WebGLRenderer( {antialias:true} );
    else
        renderer = new THREE.CanvasRenderer(); 
    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    container = document.getElementById( 'three' );
    container.appendChild( renderer.domElement );

    // LIGHT
    var light = new THREE.PointLight(0xffffff);
    light.position.set(0,250,0);
    scene.add(light);

    // SKYBOX/FOG
    var skyBoxGeometry = new THREE.CubeGeometry( 10000, 10000, 10000 );
    var skyBoxMaterial = new THREE.MeshBasicMaterial( { color: 0x9999ff, side: THREE.BackSide } );
    var skyBox = new THREE.Mesh( skyBoxGeometry, skyBoxMaterial );
    // scene.add(skyBox);
    scene.fog = new THREE.FogExp2( 0x9999ff, 0.00025 );

    ////////////
    // CUSTOM //
    ////////////

    DoMapTexture();

    DoVideoTexture();

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

function DoMapTexture()
{
    // Using Mapbox GL
    mapboxgl.accessToken = '<YOUR MAPBOX ACCESS TOKEN>';
    map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/bright-v9',
        zoom: 1,
        center: [180,0],
        pitch: 0
    });

    // When it has finished loading, set up the sources and layers
    map.on(load, function ()
    {     
        // Find the newly created WebGL map canvas
        mapcanvas = document.getElementsByClassName('mapboxgl-canvas')[0];

        // A loader for the image
        var maploader = new THREE.TextureLoader();

        // load a resource
        maploader.load(
            // Convert the webgl 'image' to a 'url'
            mapcanvas.toDataURL(),

            // Load the map image
            function ( texture ) {
                // Place the material on a mesh
                mapmaterial = new THREE.MeshBasicMaterial( {map: texture, side:THREE.DoubleSide} );
                mapmaterial.transparent = true;
                var mapmesh = new THREE.Mesh( new THREE.PlaneGeometry(500, 500), mapmaterial );
                mapmesh.rotation.x = -Math.PI / 2;
                scene.add( mapmesh );
            }
        );
    });

    // Whenever it renders, redraw the texture
    map.on('render', function(e) {

        if (mapcanvas)
        {
            var maploader = new THREE.TextureLoader();

            // Reload the material
            maploader.load(
                mapcanvas.toDataURL(),

                function ( texture ) {
                    mapmaterial.map = texture;
                    mapmaterial.map.needsUpdate = true;
                }
            );
        }
    });
}

function DoVideoTexture()
{
    // Create a temporary 2D canvas as an intermediary for the texture
    var videocanvas = document.createElement('canvas');

    var ctx = videocanvas.getContext('2d');
    var video = document.getElementById('video');

    // set canvas size = video size when known
    video.addEventListener('loadedmetadata', function() {
      videocanvas.width = video.videoWidth;
      videocanvas.height = video.videoHeight;
    });

    video.addEventListener('play', function() {
      var $this = this; //cache
      (function loop() {
        if (!$this.paused && !$this.ended) {
          ctx.drawImage($this, 0, 0);
            if (videocanvas)
            {
                var videoloader = new THREE.TextureLoader();

                // Reload the material
                videoloader.load(
                    videocanvas.toDataURL(),

                    function ( texture ) {
                        videomaterial.map = texture;
                        videomaterial.map.needsUpdate = true;
                    }
                );
            }
          setTimeout(loop, 1000 / 30); // drawing at 30fps
        }
      })();
    }, 0);

    // A loader for the image
    var videoloader = new THREE.TextureLoader();

    // load a resource
    videoloader.load(
        // Convert the webgl 'image' to a 'url'
        videocanvas.toDataURL(),

        // Load the map image
        function ( texture ) {
            // Place the material on a mesh
            videomaterial = new THREE.MeshBasicMaterial( {map: texture, side:THREE.DoubleSide} );
            videomaterial.transparent = false;
            var videomesh = new THREE.Mesh( new THREE.PlaneGeometry(200, 100), videomaterial );
            videomesh.position.set(100,100,0);
            scene.add( videomesh );
        }
    );
}
</script>

</body>
</html>
12/07/2016 को 21:38
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more