Threejs从高度图变形网格 [英] Threejs deform mesh from heightmap

问题描述

如何在Three.js中使用高度图变形已创建的网格?我做了几次搜索，却找不到任何东西，所以我在这里问.

How can I go about deforming an already created mesh with a heightmap in three.js? I did a few searches and couldn't find anything, so I'm asking here.

推荐答案

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

You are lucky, three.js-r72 introduced vertex displacement in the MeshPhongMaterial. You set the displacement map like a 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:位移量，尖峰有多高"

scale: The amount of displacement, "how tall are your spikes"

bias:向上或向下移动中心

bias: Shift the center up or down

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

这篇关于Threejs从高度图变形网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！