Question

我是three.js的新手，但我刚刚使用Java和JMonkeyEngine离开了一个项目，所以我知道我在3d的方式。

我的问题是加载纹理。我确定这个问题已经出现了很多次来自我已经阅读的主题，但是我看到的主题已经过时了，而且它并没有与我需要的东西一起工作。

我从网站上做了一个例子，并尝试根据自己的需要进行编辑。我能够很好地加载我的纹理，它就像示例一样旋转......

然而，当我从渲染过程中移除动画时，我的图像变得愚蠢。我可以使用颜色很好的普通方形，但没有纹理。

          <!DOCTYPE html>
       <html lang="en">
            <head>
    <title>three.js webgl - geometries</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,
              user-scalable=no,  minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            font-family: Monospace;
            background-color: #000;
            margin: 0px;
            overflow: hidden;
        }
    </style>
</head>
<body>

    <script src="three.min.js"></script>
    <script>



        var container, stats;

        var camera, scene, renderer;

        init();
        animate();

        function init() {

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

            camera = new THREE.PerspectiveCamera( 
                        45, window.innerWidth  / window.innerHeight, 1, 2000 );
            camera.position.y = 400;

            scene = new THREE.Scene();

            var light, object;

            scene.add( new THREE.AmbientLight( 0x404040 ) );

            light = new THREE.DirectionalLight( 0xffffff );
            light.position.set( 0, 1, 0 );
            scene.add( light );

            var map = THREE.ImageUtils.loadTexture( 'butter.jpg' );
            map.wrapS = map.wrapT = THREE.RepeatWrapping;
            map.anisotropy = 16;

            var material = 
                             new THREE.MeshLambertMaterial( 
                         { ambient:  0xbbbbbb, map: map, side: THREE.DoubleSide } );


            //

            object = new THREE.Mesh( 
                      new THREE.PlaneGeometry(100, 100, 4, 4 ), material );
            object.position.set( -400, 0, 0 );
            scene.add( object );



            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setSize( window.innerWidth, window.innerHeight );

            container.appendChild( renderer.domElement );



            //

            window.addEventListener( 'resize', onWindowResize, false );

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

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

        }

        //

        function animate() {

            requestAnimationFrame( animate );

            render();


        }

        function render() {

            var timer = Date.now() * 0.0001;

            camera.position.x = Math.cos( timer ) * 800;
            camera.position.z = Math.sin( timer ) * 800;

            camera.lookAt( scene.position );

            for ( var i = 0, l = scene.children.length; i < l; i ++ ) {

                var object = scene.children[ i ];

                object.rotation.x = timer * 5;
                object.rotation.y = timer * 2.5;

            }

            renderer.render( scene, camera );

        }

    </script>

</body>

我在这里阅读了一些内容Using textures in THREE.js，说明我需要在纹理加载后调用渲染。当然，没问题，但它不起作用。我认为可能是这种情况，但我想到动画。它是否加载，因为动画是常量的，它只是在渲染过程之后加载，然后在剩下的时候还可以，还是别的？

接下来我看到了Texture from hard disk not loading in three.js - showing black

现在用户说他看不到任何做各种各样的事情，我还没有尝试过任何一种，但我使用的是Netbeans 8.0并且它从LocalHost调用，我可以看到动画纹理，所以我假设这不是问题。

我也看到了这样的另一个论坛，对上面的2有类似的答案。＆＃34;

有什么想法吗？希望它简单。

感谢所有人的帮助，希望这个图书馆效果很好！

编辑：我在这里发现了一条帖子ThreeJS texture issue，说Chrome存在问题（我用它作为浏览器进行测试）。我尝试了内部netbeans浏览器（它只是给了我一个webgl的错误，所以meh），即没有工作要么......

我也尝试按照建议使用加载程序，但是他的方法发出了一个未定义的＃34;错误。

我看到另一篇帖子说R58 - ＆gt; R59改变了ImageLoader，所以idk :(

EDIT2：试用Three.JS的起始示例我无法让纹理在静止或动画期间工作......很奇怪..

<html>
<head>
    <title>My first Three.js app</title>
    <style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
    <script src="three.min.js"></script>
    <script>
        var scene = new THREE.Scene();
                var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

                    var renderer = new THREE.WebGLRenderer();
                 renderer.setSize( window.innerWidth, window.innerHeight );
              document.body.appendChild( renderer.domElement );

                var geometry = new THREE.BoxGeometry(1,1,1);
              var map = THREE.ImageUtils.loadTexture('butter.jpg', {}, function() {render();});
                          //  render();
            map.wrapS = map.wrapT = THREE.RepeatWrapping;
            map.anisotropy = 16;

            var material = new THREE.MeshLambertMaterial( { ambient:  0xbbbbbb, map: map, side: THREE.DoubleSide } );
          //var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
                var cube = new THREE.Mesh( geometry, material );
              scene.add( cube );

                   camera.position.z = 5;

    function render()
    {
requestAnimationFrame(render);

    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;

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

EDIT3：昨晚想到这个，因为我要睡觉，今天意识到没有NPOT ......我尝试了另一张184x184没有运气的图像:(

加载纹理问题，使用动画，空白没有

0 个答案: