three.js 中的建筑物

Question

我正在开发网页游戏并使用 three.js 制作游戏的 3d。我正在建造一座城市，我希望建筑物看起来与下图完全一样。

我希望它们是基础 material，没有纹理或颜色，因为稍后我会根据建筑状态添加颜色（如下面的游戏）。

这是我现在拥有的：

如你所见，我只有一堆大小不一的盒子，没有任何细节。我如何实现游戏中看到的细节？

这是我当前的代码：

export default function Map() {
  const RenderBuildings = () => {
    const buildings = []
    for (let i = 0; i < 10; i++) {
      buildings.push(<Box color="#dad3cb" width={1} height={1} depth={1} />)
    }

    return buildings
  }

  return (
    <Canvas>
      <CameraController />
      <ambientLight intensity={1} />
      <Ground color="#b0aa9d" width={40} height={1} depth={40} />
      {RenderBuildings()}
    </Canvas>
  )
}

export const Box = (props: Props) => {
  const { color, width, height, depth, ...rest } = props

  const mesh = useRef<THREE.Mesh>()
  const boxRef = useRef<THREE.Mesh>()

  useEffect(() => {
    if (!mesh.current) return

    const _mesh = mesh.current

    _mesh.position.x = Math.floor(Math.random() * 20)
    _mesh.position.z = Math.floor(Math.random() * 20)
    _mesh.scale.x =
      Math.random() * Math.random() * Math.random() * Math.random() * 5 + 3
    _mesh.scale.z = _mesh.scale.x
    _mesh.scale.y =
      Math.random() * Math.random() * Math.random() * _mesh.scale.x * 5 + 3
  }, [mesh])

  useEffect(() => {
    if (!boxRef.current) return

    const _boxRef = boxRef.current

    _boxRef.applyMatrix4(new Matrix4().makeTranslation(0, 0.5, 0))
  }, [boxRef])

  return (
    <mesh {...rest} ref={mesh}>
      <boxGeometry args={[width, height, depth]} ref={boxRef} />
      <meshToonMaterial color={color} />
    </mesh>
  )
}

Answer 1

您的第一步应该是查看场景的照明。这将使您的建筑物有更好的深度。半球灯可能是您最好的选择：https://threejs.org/examples/#webgl_lights_hemisphere. You can learn more about lights here: https://threejs.org/manual/#en/lights.

接下来，看看几何。您希望这些建筑物在几何级别具有一定程度的细节。您可以使用像这样的基元：https://threejs.org/manual/#en/primitives 或在任何建模软件中构建模型并将其导入。到那时，也许制作一些模型然后随机实例化它们。

根据您处理几何的方式，您需要选择合适的 material：https://threejs.org/manual/#en/materials。这应该会给你很多选择。

我还会添加一些动画来保持生动：https://threejs.org/examples/#webgl_animation_keyframes

最后，有点雾总是有助于营造氛围：https://threejs.org/manual/#en/fog

更多灵感：https://demos.littleworkshop.fr/infinitown

最终，构建这样的场景将是一种爱的劳动。没有简单的捷径。坚持下去！

Answer 2

使用纹理图块来协调布局（类似于 QR 码但未加密）。也就是说，具有对应于场景逻辑的 RGB 值的 ~64x64 图像。这种方法将更容易阻止功能。您可以在 R 中存储高度，在 G 中输入，在 B 中存储所有者。也许有一个包含更多原始数据（即账单或水平）的边车文件，由所有者和 x/y.

引用

地图生成可以定义为：矩阵、随机森林、演化……具有相邻图块和最小区域的规则。那么一旦你有了一个满意的系统，它就可以被解析为一个Three.js场景。几何可以像你做的一样简单或困难。挤出连续的像素组并细化。

同步数据时不要忘记添加尘云以掩盖视觉伪影。从强制的角度来看，您可能可以在多样性方面对纹理偏移做很多事情。

three.js 中的建筑物

Buildings in three.js

three.js

react-three-fiber