2

我需要制作一个带有纹理的球。我是 WebGL 和 Three.js 的新手。问题是我看到了一个白色球体，但没有看到上面的纹理。作为新用户，我无法提交图片。

代码部分是这样的：

function init() {

            canvas = document.getElementById( 'canvas' ); 


            camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 1, 10000 );
            camera.position.z = 1000;



            scene = new THREE.Scene();

                            camera.lookAt (scene.position); 


                            var llum = new THREE.DirectionalLight();
                            llum.intensity=50;


                            llum.position.x=camera.position.x;
                            llum.position.y=camera.position.y;
                            llum.position.z=camera.position.z;

                            llum.lookAt(scene.position);

                            scene.add(llum);



                            var texture = THREE.ImageUtils.loadTexture('ull.jpg');


            texture.needsUpdate = true;

            var material = new THREE.MeshBasicMaterial( texture );

            var quality = 16, step = 1024 / quality;

            var geom = new THREE.SphereGeometry(500,100,100);



            mesh = new THREE.Mesh( geom, material );


            scene.add( mesh );


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

            canvas.innerHTML = ""; 

                            //Afegim al canvas el que hem de renderitzar
            canvas.appendChild( renderer.domElement );



            document.addEventListener( 'mousemove', onDocumentMouseMove, false );


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

        }

提前致谢。

4

2 回答 2

3

它应该是这样的：

var material = new THREE.MeshBasicMaterial( { map: texture } );
于 2012-12-29T12:32:14.703 回答
1

由于这是显示在 Google 搜索结果中的第一页，因此我将发布针对我的解决方案的解决方案。我在正方形上绘制纹理，但正方形实际上是向后旋转的，所以相机看到正方形的背面没有纹理，在固定旋转后一切正常。

   var geometry = new THREE.PlaneGeometry(FLOOR_SIZE, FLOOR_SIZE, 10, 10);

    var loader = new THREE.TextureLoader();
    loader.load('images/floor.jpg', function ( texture ) {
        var material = new THREE.MeshBasicMaterial({
            map: texture, 
            overdraw: 0.5
        });

        var floor = new THREE.Mesh( geometry, material );

        // ROTATION THAT MADE SQUARE INVISIBLE WAS Math.PI/2

        floor.rotation.x = -Math.PI/2;
        floor.position.y = -0.1;
        scene.add(floor);
     });
于 2016-11-14T17:43:32.293 回答