0

演示可以在这里看到

我正在使用一个相当小的图像来制作天空盒，并且由于某种原因它被拉伸而不是平铺。我找到了有关如何图案化纹理的本教程。我注意到这些行

var crateTexture = new THREE.ImageUtils.loadTexture( 'images/crate.gif' );
crateTexture.wrapS = crateTexture.wrapT = THREE.RepeatWrapping;
crateTexture.repeat.set( 5, 5 );
var crateMaterial = new THREE.MeshBasicMaterial( { map: crateTexture } );
var crate = new THREE.Mesh( cubeGeometry.clone(), crateMaterial );
crate.position.set(60, 50, -100);
scene.add( crate );

所以我尝试对天空盒使用这种方法，但没有产生任何变化

var path = "/images/";

            var urls = [
                path + 'startile.png', path + 'startile.png',
                path + 'startile.png', path + 'startile.png',
                path + 'startile.png', path + 'startile.png'
            ];

            var textureCube = THREE.ImageUtils.loadTextureCube( urls , new THREE.CubeRefractionMapping() );
                            textureCube.wrapS = textureCube.wrapT = THREE.RepeatWrapping;
textureCube.repeat.set( 10, 10 );
            var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube, refractionRatio: 0.95 } );



            // Skybox

            var shader = THREE.ShaderLib[ "cube" ];
            shader.uniforms[ "tCube" ].value = textureCube;

            var material = new THREE.ShaderMaterial( {

                fragmentShader: shader.fragmentShader,
                vertexShader: shader.vertexShader,
                uniforms: shader.uniforms,
                side: THREE.BackSide

            } ),

            mesh = new THREE.Mesh( new THREE.CubeGeometry( 1200, 1200, 1200 ), material );
                            //mesh.overdraw = false;
                            // mesh.rotation.x = Math.PI * 0.1;
            scene.add( mesh );

有任何想法吗？

4

1 回答 1

2

纹理立方体不支持平铺。但是，在您的情况下，由于立方体的所有面都是相同的，您可以执行以下操作：

var geometry = new THREE.CubeGeometry( 1000, 1000, 1000 );

var texture = THREE.ImageUtils.loadTexture(  "startile.png" );
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 10, 10 );

var material = new THREE.MeshBasicMaterial( {
    color: 0xffffff, 
    map: texture,
    side: THREE.BackSide
} );

var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

三.js r.59

于 2013-07-19T00:22:25.863 回答