Question

演示可见here

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

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 );

有什么想法吗？

Answer 1

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

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 );

three.js r.59

WebGL中的skybox网格中使用的Three.JS平铺图像？

1 个答案: