2

我正在使用three.js 并尝试创建可以存储然后在会话稍后应用于对象的程序纹理。

理想情况下，我希望每个纹理只创建一次。

我希望能够从现有资产中进行采样以创建新纹理。

在 three.js 示例中，显示了一个版本，其中纹理每帧都重新渲染。 http://threejs.org/examples/webgl_rtt.html

我创建了一个我希望在这里实现的示例： http ://www.forsako.com/ThreeJS/RenderTest.html

不幸的是，为了完成这项工作，我不得不在每一帧重新渲染纹理。

有没有办法执行此渲染，以便纹理在多个帧上持续存在，直到我告诉它被释放？来自我的主程序的源代码如下。

    <html>
    <head>
    <title>Render Test</title>
    </head>
    <style>
        #mycontainer {
            background: #000;
            width: 800px;
            height: 600px;
        }
    </style>
    <body>
        <div id="mycontainer"></div>
    </body>
    <script src="js/three.min.js"></script>
    <script src="js/TrackballControls.js"></script>
    <script src="js/stats.min.js"></script>
    <script src="js/PlaneGeomUV.js"></script>
    <script type="text/javascript">
        var Renderer, Container, Scene, Camera, Quad1, Quad2, Plane, MaterialRTT, TextureRTT, LightAmb;
        var SceneRTT, CameraRTT, Q1RTT, Q2RTT, Q3RTT, Q4RTT, MaterialFromFile, TextureFromFile;
        var isRenderingTex = true;
        var WidthWin = 800;
        var HeightWin = 640;
        var WidthTile = 428;
        var HeightTile = 683;

        Init();
        Animate();

        function Init(){
            var CAngle    = 45;
            var CAspect   = WidthWin / HeightWin;
            var CNearCut  = 0.1;
            var CFarCut   = 10000;

            // Set up the main rendering object and attach it to an element on the page
            Renderer = new THREE.WebGLRenderer();
            Renderer.setSize( WidthWin, HeightWin );

            Container = document.getElementById( "mycontainer" );
            Container.appendChild( Renderer.domElement );

            // Set up the textures and materials for rendering
            TextureFromFile = THREE.ImageUtils.loadTexture( "Assets/Map_Tiles.png" );
            TextureRTT      = MakeTex( Renderer, TextureFromFile, WidthTile, HeightTile );

            MaterialFromFile = new THREE.MeshBasicMaterial( { color: 0xffffff, map: TextureFromFile } );
            MaterialRTT      = new THREE.MeshBasicMaterial( { color: 0xffffff, map: TextureRTT } );

            MaterialFromFile.side = THREE.DoubleSide;
            MaterialRTT.side = THREE.DoubleSide;

            // Set up the main renderable scene
            Scene = new THREE.Scene();

            Plane = new THREE.PlaneGeometry( WidthTile, HeightTile );
            Quad1 = new THREE.Mesh( Plane, MaterialFromFile );
            Quad1.position.x = WidthTile*0.5;
            Scene.add( Quad1 );
            Quad2 = new THREE.Mesh( Plane, MaterialRTT );
            Quad2.position.x = -WidthTile*0.5;
            Scene.add( Quad2 );

            LightAmb = new THREE.AmbientLight( 0xffffff );
            Scene.add( LightAmb );

            Camera = new THREE.PerspectiveCamera( CAngle, CAspect, CNearCut, CFarCut );
            Camera.position.z = 1200;
            Scene.add( Camera );

            // Create controls using the TrackballControls library to easily manipulate our camera
            Controls = new THREE.TrackballControls( Camera );
            Controls.target = new THREE.Vector3( 0, 0, 0 );

            Controls.rotateSpeed          = 4.0;
            Controls.zoomSpeed            = 6.0;
            Controls.panSpeed             = 1.0;
            Controls.noZoom               = false;
            Controls.noPan                = false;
            Controls.staticMoving         = true;
            Controls.dynamicDampingFactor = 0.3;
            Controls.keys                 = [ 65, 83, 68 ];

            // Add the Three.js stats object so we can track fps
            stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.top = '0px';
            Container.appendChild( stats.domElement );
        }

        function MakeTex( Renderer_in, Texture_in, Width_in, Height_in ){
            var ParamsTex = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
            var Tex_out  = new THREE.WebGLRenderTarget( WidthWin, HeightWin, ParamsTex );

            var tMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff, map: Texture_in } );

            // Set up the scene for rendering to texture
            SceneRTT = new THREE.Scene();

            var tPlane = new THREE.PlaneGeometry( WidthTile*0.5, HeightTile*0.5 );
            Q1RTT = new THREE.Mesh( tPlane, tMaterial );
            Q1RTT.position.x = WidthTile*0.25;
            Q1RTT.position.y = HeightTile*0.25;
            SceneRTT.add( Q1RTT );
            Q2RTT = new THREE.Mesh( tPlane, tMaterial );
            Q2RTT.position.x = -WidthTile*0.25;
            Q2RTT.position.y = HeightTile*0.25;
            SceneRTT.add( Q2RTT );
            Q3RTT = new THREE.Mesh( tPlane, tMaterial );
            Q3RTT.position.x = -WidthTile*0.25;
            Q3RTT.position.y = -HeightTile*0.25;
            SceneRTT.add( Q3RTT );
            Q4RTT = new THREE.Mesh( tPlane, tMaterial );
            Q4RTT.position.x = WidthTile*0.25;
            Q4RTT.position.y = -HeightTile*0.25;
            SceneRTT.add( Q4RTT );

            tLightAmb = new THREE.AmbientLight( 0xffffff );
            SceneRTT.add( tLightAmb );

            CameraRTT = new THREE.OrthographicCamera( -Width_in / 2, Width_in / 2, Height_in / 2, -Height_in / 2, 0.1, 10000 );
            CameraRTT.position.z = 600;
            SceneRTT.add( CameraRTT );

            //Renderer.clear();
            //Renderer.render( SceneRTT, CameraRTT, Tex_out, true );

            return Tex_out;
        }

        function Animate(){
            requestAnimationFrame( Animate );
            Controls.update();
            stats.update();
            Render();
        }

        function Render(){
            Renderer.clear();
            if( isRenderingTex ){
                Renderer.render( SceneRTT, CameraRTT, TextureRTT, true );
                //isRenderingTex = false;
            }
            Renderer.render( Scene, Camera );
        }
    </script>
    </html>
4

0 回答 0