Threejs 从高度图变形网格

Question

如何使用 three.js 中的高度图对已创建的网格进行变形？我做了一些搜索，但找不到任何东西，所以我在这里问。

Answer 1

你很幸运，three.js-r72在MeshPhongMaterial中引入了顶点位移。您将置换贴图设置为 normalMap:

var displacementMap = THREE.ImageUtils.loadTexture( "textures/ninja/displacement.jpg" );

var material = new THREE.MeshPhongMaterial( {
                color: 0x0a0100,
                //...
                displacementMap: displacementMap,
                displacementScale: 2.436143,
                displacementBias: - 0.428408,
            } );

scale：位移量，"how tall are your spikes"

bias: 将中心向上或向下移动

官方示例：http://threejs.org/examples/#webgl_materials_displacementmap

Threejs 从高度图变形网格

Threejs deform mesh from heightmap

mesh

three.js

heightmap