loading texture issue, works with animation, blank

2019-09-02 05:54发布

站内问答 / 后端开发
1126 0 5

I am new to three.js, but am just coming off of a project using Java and JMonkeyEngine, so I know my way around 3d.

My issue comes with loading a texture. I'm sure this question has come up quite a few times coming from the topics I've read, however the topics I have seen are older, and it didn't work with what I needed.

I took an example from the site and tried editing it to my own needs. I was able to load my texture fine, and it spun around just like the example....

HOWEVER, when I removed the animation from the rendering process my image poofed. I can use a regular square with color just fine, but no texture.

          <!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>

I read up something here Using textures in THREE.js stating I needed to call the render after the texture loads. Sure, no problem, but it doesn't work. I assumed this could be the case, but I think about the animation. Did it load and since the animation is constant it just loaded after a render pass and then was okay during the rest of it, or something else?

Next I saw Texture from hard disk not loading in three.js - showing black

Now the user says he cannot see anything doing all sorts of things, I haven't tried any of that, but I'm using Netbeans 8.0 and it calls from the LocalHost, and I can see the animated textures, so I'm assuming this isn't the issue.

I saw another forum like this as well, with similar answers to the 2 above."

Any thoughts to think? Hopefully it's something simple.

Thanks for the help all, hopefully this library works out great!

EDIT: I found a post here ThreeJS texture issue saying there is an issue with chrome (which I was using as the browser to test). I tried the internal netbeans browser (it just gave me an error with webgl so meh) and ie didn;t work either...

I also tried to use a loader as suggested but his method gives off an "undefined" error.

I saw another post stating R58 -> R59 had changes to thw ImageLoader, so idk :(

EDIT2: Trying out the starting example of Three.JS I cannot get the texture to work stationary or during the animation.... weird..

<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: Thought about this last night as I was going to sleep, and realized today that there is no NPOT... I tried another image that was 184x184 with no luck :(

0条回答
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)