文章/答案/技术大牛

发布

社区首页 >问答首页 >重复凹凸图

问重复凹凸图
EN

Stack Overflow用户

提问于 2013-02-15 00:07:02

回答 1查看 3K关注 0票数 3

我正试图将一张凹凸贴图应用于一架飞机上，用Three.js r55创建一个模糊感觉的表面。

这是我的密码：

var mapHeight = THREE.ImageUtils.loadTexture("images/felt.png");
mapHeight.repeat.set(2, 2);
mapHeight.wrapS = mapHeight.wrapT = THREE.RepeatWrapping;
mapHeight.format = THREE.RGBFormat;

var groundMaterial = new THREE.MeshPhongMaterial({
    ambient: 0x008800, color: 0x008800, specular: 0x888888,
    shininess: 25, bumpMap: mapHeight, bumpScale: 10, metal: false
} );

scene.add(new THREE.Mesh(new THREE.PlaneGeometry(0.3, 0.3), groundMaterial));

请注意，我是如何将纹理设置为沿x/y轴重复两次。然而，我所看到的只适用于一个象限的纹理：

我希望这与夹子/重复包装(或任何称为)，但我已经请求RepeatWrapping在这里。

怎样才能让凹凸图在飞机上正确地重复任意次数。

编辑-完整代码

我开始做一个简单的复制案例。这是相当小的，并复制了下面的图像(从一个稍微不同的相机角度)。输出有相同的问题。

<!DOCTYPE html>
<html>
<head>
    <script src="scripts/libs/three.min.js" type="text/javascript"></script>
</head>
<body>
<div id="scene-container"></div>

<script>

    init();

    function init() {
        var camera, scene, renderer;

        scene = new THREE.Scene();
        scene.add( new THREE.AmbientLight( 0x555555 ) );

        var light = new THREE.DirectionalLight( 0x555555 );
        light.position.set( 0, 0, 10 );
        scene.add( light );

        var bumpMapTexture = THREE.ImageUtils.loadTexture( "images/felt.png", undefined, function () {
            requestAnimationFrame( function () {
                // render once texture has loaded
                renderer.render( scene, camera );
            } );
        } );
        bumpMapTexture.repeat.set( 2, 2 );
        bumpMapTexture.wrapS = bumpMapTexture.wrapT = THREE.RepeatWrapping;

        var groundMaterial = new THREE.MeshPhongMaterial( {
            ambient: 0x00AA00,
            color: 0x00AA00,
            bumpMap: bumpMapTexture
        } );

        scene.add( new THREE.Mesh( new THREE.PlaneGeometry( 3, 3 ), groundMaterial ) );

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.01, 100000 );
        camera.position.set( 0, 0, 3 );
        camera.lookAt( new THREE.Vector3( 0, 0, 0 ) );

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

        document.getElementById( 'scene-container' ).appendChild( renderer.domElement );
    }

</script>

</body>
</html>

这链接到Three.js r55 (小型化)。

任何帮助都很感激。

javascript

three.js

webgl

bump-mapping

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-02-15 01:32:55

如果要重复纹理，则每个维度中的像素大小必须是2的幂(例如，512 x 256 )。

如果您有一个漫射map和一个bumpMap，它们必须具有相同的offset/repeat设置。例如，请参见this答案。

three.js r.55

票数 6

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/14886337

复制

相似问题

问重复凹凸图
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问重复凹凸图EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问重复凹凸图
EN