0

我目前正在为游戏手柄开发 3D 查看器。目标是用不同的颜色和材料个性化垫。

首先，我实现了一个简单的“.bin .js”加载器，带有示例材料。我使用 Threejs r62 制作了可视化工具的原型。酷，它的工作原理。但对于 IE，我想使用 IEWEBGL 使其更易于访问。酷，它的工作...

但 ...

我的问题在这里：

问题是，当我使用插件时，IE 和 firefox（以及 chrome）都输出同样奇怪的东西：与没有 IEWEBGL 修改的代码的初始版本相比，对象模型的UV 纹理放置错误。

我的问题是： 有人知道图像何时以及为什么垂直翻转？

在这里查看 3d 查看器：不使用 IEWEBGL 助手

现在： 使用 IE WEBGL

代码发布后在下面可用。告诉我我的要求是否不够精确，或者我是否应该重新制定一些内容。提前谢谢大家，我希望一些threejs或iewebgl Guru会有一些“酷提示”。

鞠

注意事项：

我的页面的 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 回答