0

現在、ゲーム パッド用の 3D ビューアーを開発しています。目標は、さまざまな色と素材でパッドをパーソナライズすることです。

まずはシンプルな「.bin .js」ローダーをサンプル素材で実現。Threejs r62 を使用して、ビジュアライザーのプロトタイプを作成しました。クール、それは動作します。しかし、IE の場合は、IEWEBGL を使用してアクセスしやすくしたいと考えていました。クール、それは動作します...

しかし ...

ここで私の問題：

問題は、プラグインを使用すると、IE と firefox (および chrome も) の両方が同じ奇妙な結果を出力することです。オブジェクト モデルには、IEWEBGL のモフィケーションのないコードの初期バージョンと比較して、UV テクスチャの配置が間違っています。

ここでの私の質問: 画像がいつ、なぜ垂直に反転されるのか誰か知っていますか?

ここで 3d ビューアーを参照してください: IEWEBGL ヘルパーを使用しない場合

そして今： IE WEBGLで

コードは、投稿後に以下で入手できます。私の要求が十分に正確でない場合、または何かを再定式化する必要がある場合は教えてください. 事前に感謝します。threejs または iewebgl の達人が「クールなヒント」を提供してくれることを願っています。

じゅ

ノート ：

私のページの Threejs 自然サンプル コード:

        <script>

// MAIN

// standard global variables
var container, scene, camera, renderer, controls, stats;
//var keyboard = new THREEx.KeyboardState();
var clock = new THREE.Clock();

// Vars


init();
animate();

// FUNCTIONS        
function init() 
{
    // SCENE
    scene = new THREE.Scene();

    // CAMERA
    //~ var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
    //~ var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerWidth;

            var SCREEN_WIDTH = window.innerWidth;
            var SCREEN_HEIGHT = window.innerHeight;         
            var scale = 100;    

    var VIEW_ANGLE = 65, 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,0,4);
    //~ camera.lookAt(scene.position);

    // RENDERER
    if ( Detector.webgl )
        renderer = new THREE.WebGLRenderer({antialias: true});
    else
    renderer = new THREE.CanvasRenderer(); 

    // RENDERER OTHER SETUP

        renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
        // CAST SHADOWS             
        //~ renderer.shadowMapEnabled   = true;
        //~ renderer.sortObjects = false;
        //~ renderer.shadowCameraNear = 2;
        //~ renderer.shadowCameraFar = 1500;
        //~ renderer.shadowCameraFov = 50;
        //~ renderer.physicallyBasedShading = true;
        //~ renderer.setClearColorHex( 0x000000, 0 );

        container = document.createElement( 'div' );
        document.body.appendChild( container );
        container.appendChild( renderer.domElement );


    // EVENTS
    //~ THREEx.WindowResize(renderer, camera);
    //~ THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) });

    // CONTROLS
    controls = new THREE.TrackballControls( camera );
    //~ controls = new THREE.OrbitControls( camera );

    // LIGHT

                // add spot lighting
                var spot = new THREE.SpotLight( 0xffffff, 1 );

                spot.position.set( 5,5, 5 );
                spot.lookAt( scene.position );
                spot.castShadow = true;
                spot.shadowCameraVisible = true;
                spot.shadowMapBias = 1;
                spot.shadowMapWidth = 1024;
                spot.shadowMapHeight    = 1024;
                spot.shadowMapSoft      = true; 
                spot.shadowMapDarkness = 1;
                scene.add( spot );

                // create a point light // set its position // add to the scene

                var pointLightOne = new THREE.PointLight( 0xffffff );
                pointLightOne.position.set( -5,-5, -5 );
                scene.add(pointLightOne);

                var pointLightTwo = new THREE.PointLight( 0xffffff );
                pointLightTwo.position.set( 5,5, 5 );
                scene.add(pointLightTwo);


                //~ // add ambient lighting
                var ambientLight = new THREE.AmbientLight(0x0b0b0b);
                scene.add(ambientLight);



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

    // axes
    //~ var axes = new THREE.AxisHelper(100);
    //~ scene.add( axes );



                // ENVAMP
                var r = "../data/envmap/";
                var urls = [ r + "px.jpg", r + "nx.jpg",
                             r + "py.jpg", r + "ny.jpg",
                             r + "pz.jpg", r + "nz.jpg" ];
                var textureCube = THREE.ImageUtils.loadTextureCube( urls );


                // 3D LOADER                
                var loader = new THREE.BinaryLoader();  

                // OBJECT Dragon
                loader.load( "../data/3d//33.js", function( geometry ) { createScene( geometry, new THREE.MeshLambertMaterial({color: 0xf5ffba,shading: THREE.SmoothShading,envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.10,map: THREE.ImageUtils.loadTexture( "../data/2d/84.jpg" )}) ) } );  

                // OBJECT Classique
                loader.load( "../data/3d//34.js", function( geometry ) { createScene( geometry, new THREE.MeshLambertMaterial({color: 0xfcf9fc,shading: THREE.SmoothShading,map: THREE.ImageUtils.loadTexture( "../data/2d/55.jpg" )}) ) } );   

                // OBJECT Classique
                loader.load( "../data/3d//40.js", function( geometry ) { createScene( geometry, new THREE.MeshLambertMaterial({color: 0x242224,shading: THREE.SmoothShading,envMap: textureCube, combine: THREE.MultiplyOperation, reflectivity: 0.1}) ) } );   

                // OBJECT Noir Classique
                loader.load( "../data/3d//35.js", function( geometry ) { createScene( geometry, new THREE.MeshLambertMaterial({color: 0x242224,shading: THREE.SmoothShading,envMap: textureCube, combine: THREE.MultiplyOperation, reflectivity: 0.1}) ) } );   

                // OBJECT Noir
                loader.load( "../data/3d//36.js", function( geometry ) { createScene( geometry, new THREE.MeshLambertMaterial({color: 0x242224,shading: THREE.SmoothShading,envMap: textureCube, combine: THREE.MultiplyOperation, reflectivity: 0.1}) ) } );   

                // OBJECT Noir
                loader.load( "../data/3d//37.js", function( geometry ) { createScene( geometry, new THREE.MeshLambertMaterial({color: 0x242224,shading: THREE.SmoothShading,envMap: textureCube, combine: THREE.MultiplyOperation, reflectivity: 0.1}) ) } );   

                // OBJECT Noires
                loader.load( "../data/3d//39.js", function( geometry ) { createScene( geometry, new THREE.MeshLambertMaterial({color: 0x242224,shading: THREE.SmoothShading,envMap: textureCube, combine: THREE.MultiplyOperation, reflectivity: 0.1}) ) } );   

                // OBJECT Noires
                loader.load( "../data/3d//38.js", function( geometry ) { createScene( geometry, new THREE.MeshLambertMaterial({color: 0x242224,shading: THREE.SmoothShading,envMap: textureCube, combine: THREE.MultiplyOperation, reflectivity: 0.1}) ) } );   

                // OBJECT Noir
                loader.load( "../data/3d//41.js", function( geometry ) { createScene( geometry, new THREE.MeshLambertMaterial({color: 0x242224,shading: THREE.SmoothShading,envMap: textureCube, combine: THREE.MultiplyOperation, reflectivity: 0.1}) ) } );   

                // OBJECT XBPLUG
                loader.load( "../data/3d//42.js", function( geometry ) { createScene( geometry, new THREE.MeshLambertMaterial({color: 0xffffff,shading: THREE.SmoothShading,envMap: textureCube, combine: THREE.MultiplyOperation, reflectivity: 0.9}) ) } );   


                var texture, material, ground;

                texture = THREE.ImageUtils.loadTexture( "../data/2d/images/shadow.png" );
                //~ texture.wrapT = THREE.RepeatWrapping;  // This doesnt seem to work;
                material = new THREE.MeshLambertMaterial({ map : texture });
                ground = new THREE.Mesh(new THREE.PlaneGeometry(6, 6), material);
                ground.doubleSided = true;
                //~ ground.rotation.set(-1.5707963267949,0,0);
                ground.rotation.set(-1.5707963267949,0,0);
                ground.position.set(0,-2,0);
                //~ ground.scale.set( 5, 5, 5);
                ground.overdraw = true;
                ground.receiveShadow = true;
                ground.rotation.z = 2;  // Not sure what this number represents.
                scene.add(ground);


}

function createScene( geometry, materials ) {
    var mesh = new THREE.Mesh( geometry, materials );

    // POSITION                         
    mesh.position.set(0,0.5,0);
    mesh.scale.set( 1, 1, 1 );

    scene.add( mesh );
}


function animate() 
{
    requestAnimationFrame( animate );
    render();       
    update();
}

function update()
{
    /*if ( keyboard.pressed("z") ) 
    { 
        // do something
    }*/

    controls.update();
    stats.update();

camera.position.x = 15 * Math.cos( theta );
camera.position.y = 10;
camera.position.z = 15 * Math.sin( theta );

}

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

        </script>

そして、これは IEWEBGL 用にほとんど変更されていないコードです

<script>


        // stub for "console" object, because IE does not have it, when page is not under debugger.
        var console = console || {
            'warn': function (msg) { },
            'log': function (msg) { },
            'error': function (msg) { }
        };

        var container, stats;

        var camera, controls, scene, renderer;


        var clock;

        function start() {
            require(["../core/vues/plugin/threejs62_ie/js/Three.js"], function () {
                init();
                animate();
            });
        }

        function init() {


            container = document.getElementById('container');
            //~ clock = new THREE.Clock();

            // RENDERER
            var externalCanvas = document.getElementById('renderCanvas');


            if ( Detector.webgl ) {
                //~ renderer = new THREE.WebGLRenderer();
                Detector.addGetWebGLMessage();
                renderer = new THREE.WebGLRenderer({ 'canvas': externalCanvas });
            }
            else {
                Detector.addGetWebGLMessage();
                renderer = new THREE.WebGLRenderer({ 'canvas': externalCanvas });

                //~ renderer = new THREE.CanvasRenderer({ 'canvas': externalCanvas }); 
                if ($.browser.msie) {
                    //~ alert('IE');    
                    }

            }


            renderer.setSize(window.innerWidth, window.innerHeight);

            scene = new THREE.Scene();

// CAMERA


            var SCREEN_WIDTH = window.innerWidth;
            var SCREEN_HEIGHT = window.innerHeight;         
            var scale = 100;    


            var VIEW_ANGLE = 65, 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, 0, 5);

        // CONTROLS
        controls = new THREE.TrackballControls( camera );


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


// LIGHT

            // add spot lighting
            var spot = new THREE.SpotLight( 0xffffff, 1 );

            spot.position.set( 5,5, 5 );
            spot.lookAt( scene.position );
            spot.castShadow = true;
            spot.shadowCameraVisible = true;
            spot.shadowMapBias = 1;
            spot.shadowMapWidth = 1024;
            spot.shadowMapHeight    = 1024;
            spot.shadowMapSoft      = true; 
            spot.shadowMapDarkness = 1;
            scene.add( spot );

            // create a point light // set its position // add to the scene

            var pointLightOne = new THREE.PointLight( 0xffffff );
            pointLightOne.position.set( -5,-5, -5 );
            scene.add(pointLightOne);

            var pointLightTwo = new THREE.PointLight( 0xffffff );
            pointLightTwo.position.set( 5,5, 5 );
            scene.add(pointLightTwo);


            //~ // add ambient lighting
            var ambientLight = new THREE.AmbientLight(0x0b0b0b);
            scene.add(ambientLight);



            // axes
            var axes = new THREE.AxisHelper(100);
            scene.add( axes );

            // ENVAMP
            var r = "../data/envmap/";
            var urls = [ r + "px.jpg", r + "nx.jpg",
                         r + "py.jpg", r + "ny.jpg",
                         r + "pz.jpg", r + "nz.jpg" ];
            var textureCube = THREE.ImageUtils.loadTextureCube( urls );


            // 3D LOADER                
            var loader = new THREE.BinaryLoader();  

            // OBJECT Dragon
            loader.load( "../data/3d//33.js", function( geometry ) { createScene( geometry, new THREE.MeshLambertMaterial({color: 0xf5ffba,shading: THREE.SmoothShading,envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.10,map: THREE.ImageUtils.loadTexture( "../data/2d/84.jpg" )}) ) } );  

            // OBJECT Classique
            loader.load( "../data/3d//34.js", function( geometry ) { createScene( geometry, new THREE.MeshLambertMaterial({color: 0xfcf9fc,shading: THREE.SmoothShading,map: THREE.ImageUtils.loadTexture( "../data/2d/55.jpg" )}) ) } );   

            // OBJECT Classique
            loader.load( "../data/3d//40.js", function( geometry ) { createScene( geometry, new THREE.MeshLambertMaterial({color: 0x242224,shading: THREE.SmoothShading,envMap: textureCube, combine: THREE.MultiplyOperation, reflectivity: 0.1}) ) } );   

            // OBJECT Noir Classique
            loader.load( "../data/3d//35.js", function( geometry ) { createScene( geometry, new THREE.MeshLambertMaterial({color: 0x242224,shading: THREE.SmoothShading,envMap: textureCube, combine: THREE.MultiplyOperation, reflectivity: 0.1}) ) } );   

            // OBJECT Noir
            loader.load( "../data/3d//36.js", function( geometry ) { createScene( geometry, new THREE.MeshLambertMaterial({color: 0x242224,shading: THREE.SmoothShading,envMap: textureCube, combine: THREE.MultiplyOperation, reflectivity: 0.1}) ) } );   

            // OBJECT Noir
            loader.load( "../data/3d//37.js", function( geometry ) { createScene( geometry, new THREE.MeshLambertMaterial({color: 0x242224,shading: THREE.SmoothShading,envMap: textureCube, combine: THREE.MultiplyOperation, reflectivity: 0.1}) ) } );   

            // OBJECT Noires
            loader.load( "../data/3d//39.js", function( geometry ) { createScene( geometry, new THREE.MeshLambertMaterial({color: 0x242224,shading: THREE.SmoothShading,envMap: textureCube, combine: THREE.MultiplyOperation, reflectivity: 0.1}) ) } );   

            // OBJECT Noires
            loader.load( "../data/3d//38.js", function( geometry ) { createScene( geometry, new THREE.MeshLambertMaterial({color: 0x242224,shading: THREE.SmoothShading,envMap: textureCube, combine: THREE.MultiplyOperation, reflectivity: 0.1}) ) } );   

            // OBJECT Noir
            loader.load( "../data/3d//41.js", function( geometry ) { createScene( geometry, new THREE.MeshLambertMaterial({color: 0x242224,shading: THREE.SmoothShading,envMap: textureCube, combine: THREE.MultiplyOperation, reflectivity: 0.1}) ) } );   

            // OBJECT XBPLUG
            loader.load( "../data/3d//42.js", function( geometry ) { createScene( geometry, new THREE.MeshLambertMaterial({color: 0xffffff,shading: THREE.SmoothShading,envMap: textureCube, combine: THREE.MultiplyOperation, reflectivity: 0.9}) ) } );   



            stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.top = '10px';
            container.appendChild( stats.domElement );

        }

        //

        function createScene( geometry, materials ) {
            var mesh = new THREE.Mesh( geometry, materials );

            // POSITION                         
            mesh.position.set(0,0.5,0);
            mesh.scale.set( 1, 1, 1 );

            scene.add( mesh );
        }


        function animate() 
        {
            requestAnimationFrame( animate );
            render();       
            update();
        }

        function update()
        {
            /*if ( keyboard.pressed("z") ) 
            { 
                // do something
            }*/

            controls.update();
            stats.update();
        }

        function render() 
        {

            renderer.render( scene, camera );
        }
    </script>
4

1 に答える 1

0

解決済み : まず、コメントに感謝します。一時的に、その場で画像を反転するための imagemagick スクリプトを作成しました。

そして最後に、IE11 がリリースされたので、IEWEBGL を使用する必要がなくなりました (実際には、このように他の用途に役立つ可能性があります)。IE11 には、ネイティブの webgl コンテキストが付属しています。

于 2013-12-13T10:57:41.827 に答える