Question

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

首先，我意识到一个简单的＆＃34; .bin .js＆＃34;装载机，带样品材料。我用Threejs r62制作了可视化器的原型。很酷，很有效。但对于IE，我想使用IEWEBGL使其更易于访问。很酷，它有效...

但......

我的问题在这里：

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

我的问题在这里： 有人知道图像垂直翻转的时间和原因吗？

在此处查看3d查看器：without the use of IEWEBGL helper

现在： with IE WEBGL

该帖子后面的代码可用。告诉我，如果我的要求不够准确，或者我应该重新制定一些东西。对于所有人来说，坦克，我希望有些trijs或者iewebgl Guru会有一些＆＃34;很酷的提示＆＃34;。

菊

注意：

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

Answer 1

已解决：好的首先是感谢你的评论。暂时，我制作了一个imagemagick脚本来动态反转图像。

并且要完成，因为IE11已经发布，所以不再需要使用IEWEBGL（实际上这样，它可能对其他东西有用）。 IE11带有本地webgl上下文。

为什么webgl +三个js垂直翻转我的uv映射纹理？

1 个答案: