React+three实现三维城市建筑生成器代码-html代码-BFW代码库

React+three实现三维城市建筑生成器代码

代码语言：html

所属分类：三维

代码描述：React+three实现三维城市建筑生成器代码，可修改参数生成各种城市效果。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  
  
  
<style>
* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

canvas {
	display: block;
}
</style>


  
  
</head>

<body translate="no">
  <div id="root"></div>
  
    <script type="module">
import React, { StrictMode, useEffect, useEffectEvent, useMemo, useReducer, useRef } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
import * as THREE from "https://esm.sh/three";
import { OrbitControls } from "https://esm.sh/three/addons/controls/OrbitControls.js";
import { GUI } from "https://esm.sh/dat.gui";
createRoot(document.getElementById("root")).render(React.createElement(StrictMode, null,
    React.createElement(VoxelCity, null)));
const DEFAULT_CITY_CONFIG = {
    seed: 77345,
    daylight: 12,
    gridChaos: 0.25,
    commercialDensity: 0.65,
    residentialDensity: 0.7,
    blocks: 16,
    lotsPerBlock: 3,
    lotSize: 6,
    lotMargin: 2,
    streetWidth: 5,
    padOverhang: 1,
    padThickness: 0.5,
    maxHeight: 32,
    minBuildingHeight: 3,
    heightVariance: 0.6,
    setbackFrequency: 0.55,
    vacantLotChance: 0.1,
    minResidentialScale: 3,
    residentialHeightFactor: 0.3,
    windowDensity: 0.85,
    windowLitChance: 0.25,
    windowFloorHeight: 2,
    treeMin: 3,
    treeSpread: 5,
    neighborhoodPaletteSync: true
};
const DISTRICT_PALETTES = [
    // steel & slate
    [
        "hsl(220, 25%, 90%)",
        "hsl(220, 25%, 60%)",
        "hsl(220, 25%, 45%)",
        "hsl(220, 25%, 30%)"
    ],
    // brick & sand
    [
        "hsl(25, 55%, 85%)",
        "hsl(25, 55%, 60%)",
        "hsl(25, 55%, 50%)",
        "hsl(25, 55%, 35%)"
    ],
    // verdigris
    [
        "hsl(130, 25%, 90%)",
        "hsl(130, 25%, 70%)",
        "hsl(130, 25%, 40%)",
        "hsl(130, 25%, 25%)"
    ],
    // dusk violet
    [
        "hsl(260, 30%, 90%)",
        "hsl(260, 30%, 65%)",
        "hsl(260, 30%, 45%)",
        "hsl(260, 30%, 30%)"
    ],
    // limestone
    [
        "hsl(30, 20%, 90%)",
        "hsl(30, 20%, 70%)",
        "hsl(30, 20%, 50%)",
        "hsl(30, 20%, 30%)"
    ]
];
const PARK_GREEN = new THREE.Color("hsl(105, 30%, 40%)");
const TREE_GREEN = new THREE.Color("hsl(105, 30%, 30%)");
const SIDEWALK = new THREE.Color("hsl(60, 5%, 60%)");
const AMBIENT_DAY = new THREE.Color("hsl(210, 40%, 75%)");
const AMBIENT_NIGHT = new THREE.Color("hsl(235, 55%, 22%)");
const SKY_DAY = new THREE.Color("hsl(200, 70%, 70%)");
const SKY_DUS.........完整代码请登录后点击上方下载按钮下载查看