我尝试在三个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 );
}
最后,这是一张结果的图片,x1c 0d1x树应该位于第一个浅紫色平面上。我真的不知道这里的问题是什么,所以任何帮助都是非常感谢的!此外,该项目是在React和TS。
1条答案
按热度按时间fjaof16o1#
不管出于什么原因,采样器确实没有从应用平移的平面上采样。通过对点应用相同的平移,我能够得到有效的点。