三个 JS MeshSurfaceSampler 不采样翻译点答案

【问题标题】：Three JS MeshSurfaceSampler not sampling translated points三个 JS MeshSurfaceSampler 不采样翻译点
【发布时间】：2023-01-18 08:01:48
【问题描述】：

我正在尝试使用平面几何在三个 JS 中创建一个随机地形，并使用此方法随机化 pos 数组：

let side = 200;
const geometry = new PlaneGeometry(80, 20, side, 100);
// const material = new MeshStandardMaterial({ color: '#271033'});
let material = new THREE.MeshStandardMaterial({
    roughness: 1,
    color: new THREE.Color('#271033'),
    flatShading: true,
});

const plane = new Mesh(geometry, material);

plane.rotation.x = - Math.PI / 2 - Math.PI / 20;
plane.position.y = - 4;
plane.position.z = - 5;

plane.castShadow = true;
plane.receiveShadow = true;

let pos = geometry.getAttribute("position");
let pa = pos.array as any;
const hVerts = geometry.parameters.heightSegments + 1;
const wVerts = geometry.parameters.widthSegments + 1;

let noise2D = createNoise2D();

for (let j = 0; j < hVerts; j++) {
    for (let i = 0; i < wVerts; i++) {
        const ex = 1.1;
        pa[3 * (j * wVerts + i) + 2] =
        ( noise2D(i / 100, j / 100) + noise2D((i + 100) / 50, j / 50) * Math.pow(ex, 0) );
    }
}

当我尝试在网格上采样点（以便我可以在所述点放置树或其他任何东西）时，这些点似乎不是网格上的有效点。我相信它可能是未接收到旋转/位置变换的平面的返回点，但我不确定。
这是采样代码：

const plane = createPlane();
plane1Sampler = new MeshSurfaceSampler(plane).build();

// add plane to scene etc...

for ( let i = 0; i < 10; i ++ ) {

    const tree = await loadTree();

    const _position = new THREE.Vector3();
    const _normal = new THREE.Vector3();
    plane1Sampler.sample( _position, _normal );

    tree.scale.set(0.1, 0.1, 0.1);
    tree.position.set(_position.x, _position.y, _position.z);

    this.scene.add( tree );

}

最后，这是结果的图片，树应该位于第一个浅紫色平面上。我不太确定这里的问题是什么，所以非常感谢您的帮助！此外，该项目在 React 和 TS 中。

【问题讨论】：

发生这种情况是因为您对网格进行了采样，即尚未应用变换。在plane.position.z = - 5;之后尝试添加plane.updateMatrixWorld();
据我所知，这不会改变输出，并且第一个代码 sn-p 是第二个中的 createPlane() 方法的一部分，所以不会从最近的网格创建样本吗？

标签： reactjs typescript three.js

【解决方案1】：

无论出于何种原因，采样器确实没有从应用了翻译的平面上采样。通过对这些点应用相同的翻译，我能够得到有效的点。

// translation applied to the plane, which for some reason the sampler doesn't take into account
_position.applyAxisAngle(new Vector3(1, 0, 0), - Math.PI / 2 - Math.PI / 20);
_position.y -= 6.1;
_position.z -= 5;

【讨论】：