Skip to content

Commit 8f103e6

Browse files
SobiechhSobiechh
committed
Trees generation
1 parent a6182de commit 8f103e6

File tree

5 files changed

+94
-30
lines changed

5 files changed

+94
-30
lines changed

‎src/components/Ground.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,13 @@ export default function Ground({
1515
calculateWaterCallback,
1616
calculateGroundHeightCallBack,
1717
buttonGenerate,
18-
getMapArray
18+
getMapArray,
19+
start
1920
}) {
2021

2122

2223
const mesh = useUpdate(({geometry}) => {
2324
generateTerrain(geometry, pointsSize, iterations, scaleMultiplier, erosionMultiplier, depositionMultiplier, evaporationMultiplier, calculateWaterCallback, calculateGroundHeightCallBack, getMapArray)
24-
2525
geometry.attributes.color.needsUpdate = true
2626
geometry.needsUpdate = true
2727
}, [buttonGenerate])

‎src/components/Sidebar.js‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,9 @@ function Sidebar({
2525
worldSizeScale,
2626
setWorldSizeScale,
2727
buttonGenerate,
28-
setButtonGenerate
28+
setButtonGenerate,
29+
objectDensity,
30+
setObjectDensity
2931
}) {
3032
const [sidebar, setSidebar] = useState(false);
3133

@@ -39,6 +41,17 @@ function Sidebar({
3941
</IconContext.Provider>
4042
</p>
4143
<Nav defaultActiveKey="/home" className={sidebar ? ['sidebar_hide','flex-column'] : ['sidebar_active','flex-column']}>
44+
<Nav.Item className="sliderDiv">
45+
<h3> Objects density </h3>
46+
<RangeSlider
47+
value={objectDensity}
48+
onChange={changeEvent => setObjectDensity(changeEvent.target.value)}
49+
tooltipPlacement="top"
50+
min={50}
51+
max={200}
52+
step={10}
53+
/>
54+
</Nav.Item>
4255
<Nav.Item className="sliderDiv">
4356
<h3> Point Size </h3>
4457
<RangeSlider

‎src/components/Tree.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ export default function Tree(props) {
197197
</group>
198198
)
199199
break;
200-
case 1:
200+
case 2:
201201
return (
202202
<group ref={group} {...props} dispose={null} scale={[0.0007, 0.0007, 0.0007]} position={new Vector3(props.x * props.scale, props.y * props.scale - 0.0004, props.z * props.scale)} >
203203
<group position={[-54.03, 237.2, 169.76]} rotation={[-2.91, 0.36, 3.06]}>
@@ -543,7 +543,7 @@ export default function Tree(props) {
543543
</group>
544544
)
545545
break;
546-
case 2:
546+
case 1:
547547
return (
548548
<group ref={group} {...props} dispose={null} rotation={[-2.82, -0.66, -2.94]} scale={[0.0007, 0.0007, 0.0007]} position={new Vector3(props.x * props.scale, props.y * props.scale - 0.0004, props.z * props.scale)} >
549549
<mesh material={materials.leaf1} geometry={nodes.leafplanes_2_196_0_leaf1_0.geometry} />
@@ -621,7 +621,7 @@ export default function Tree(props) {
621621
)
622622
break;
623623
default:
624-
console.log("Nie ma takiego dżewa")
624+
console.log("Nie ma takiego drzewa")
625625
}
626626
}
627627

‎src/containers/Home.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ function Home() {
1010
const [depositionMultiplier, setDepositionMultiplier] = useState(1);
1111
const [evaporationMultiplier, setEvaporationMultiplier] = useState(1);
1212
const [worldSizeScale, setWorldSizeScale] = useState(3);
13-
const [buttonGenerate, setButtonGenerate] = useState(true);
13+
const [objectDensity, setObjectDensity] = useState(50)
14+
const [buttonGenerate, setButtonGenerate] = useState(false);
1415

1516
return (
1617
<div className = 'home'>
@@ -31,6 +32,8 @@ function Home() {
3132
setWorldSizeScale={setWorldSizeScale}
3233
buttonGenerate={buttonGenerate}
3334
setButtonGenerate={setButtonGenerate}
35+
objectDensity={objectDensity}
36+
setObjectDensity={setObjectDensity}
3437
/>
3538
<Terrain
3639
pointSizeArg={pointSize}
@@ -41,6 +44,7 @@ function Home() {
4144
evaporationMultiplierArg={evaporationMultiplier}
4245
worldSizeScaleArg={worldSizeScale}
4346
buttonGenerate={buttonGenerate}
47+
objectDensityArg={objectDensity}
4448
/>
4549
</div>
4650
);

‎src/containers/Terrain.js‎

Lines changed: 70 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import {Stars} from '@react-three/drei'
88
import {Physics} from "use-cannon"
99
import Tree from "../components/Tree";
1010
import WaterPlane from "../components/WaterPlane";
11-
import { AmbientLight } from 'three';
1211

1312
export default function Terrain({ pointSizeArg,
1413
iterationsArg,
@@ -17,7 +16,8 @@ export default function Terrain({ pointSizeArg,
1716
evaporationMultiplierArg,
1817
depositionMultiplierArg,
1918
worldSizeScaleArg,
20-
buttonGenerate
19+
buttonGenerate,
20+
objectDensityArg
2121
}){
2222
var pointsSize = pointSizeArg/2;//256 // wielkość mapy przed skalowaniem jej ( czyli tak jakby jakość erozji)
2323
var iterations = iterationsArg; //300 ilość iteracji erozji
@@ -27,14 +27,17 @@ export default function Terrain({ pointSizeArg,
2727
var depositionMultiplier = depositionMultiplierArg;
2828
var worldSizeScale = worldSizeScaleArg; // skala wielkości terenu (wielkość skalowania np x4) (tutaj slider nie schodzący poniżej wartości 1)
2929

30+
objectDensityArg = parseInt(objectDensityArg)
31+
3032
const [WaterHeight, setWaterHeight] = useState(0);
3133
const [GroundHeight, setGroundHeight] = useState(0);
3234
const [MapArray, setMapArray] = useState([]);
3335
const [trees, setTrees] = useState([1])
3436

37+
3538
useEffect(() => {
36-
if(trees.length>51) setTrees([1])
37-
}, [trees])
39+
setTrees([1])
40+
}, [worldSizeScale])
3841

3942
let calculateWaterCallback = (waterLVL) => {
4043
setWaterHeight(waterLVL)
@@ -47,13 +50,28 @@ export default function Terrain({ pointSizeArg,
4750
let getMapArray = (mapArray) => {
4851
setMapArray(mapArray)
4952
}
53+
const { promisify } = require('util')
54+
const sleep = promisify(setTimeout)
55+
56+
const handleKeyPres = (event) => {
57+
if(event.key === 'l' || event.key == 'L'){
58+
59+
if( trees.length === 0 || trees.length>objectDensityArg ){
60+
setTrees([null])
61+
sleep(5000).then(() => {
62+
start()
63+
})
64+
}else{
65+
start()
66+
}
67+
}
68+
}
5069

51-
console.log("Map array w terrain:", MapArray)
52-
console.log("Drzwka", trees)
70+
console.log("taki jest suwak: ",objectDensityArg, 'a tyle jest treesów: ', trees.length)
5371
return (
5472
<Canvas
5573
camera={{position: [0, 0, 0], fov: 50 }}
56-
onClick={() => start()}
74+
onKeyPress={(x) => handleKeyPres(x)}
5775
>
5876
<spotLight position={[0, 2*worldSizeScale, -4*worldSizeScale]} angle={0.8} penumbra={1} intensity={0.6} visible={true}/>
5977
<pointLight
@@ -81,6 +99,7 @@ export default function Terrain({ pointSizeArg,
8199
calculateWaterCallback={calculateWaterCallback}
82100
calculateGroundHeightCallBack={calculateGroundHeightCallBack}
83101
getMapArray={getMapArray}
102+
start={start}
84103
/>
85104
<WaterPlane scale={worldSizeScale} waterHeight={WaterHeight}/>
86105
<CameraControls/>
@@ -96,40 +115,68 @@ export default function Terrain({ pointSizeArg,
96115
)
97116

98117
function start(){
99-
if( trees.length === 0 ) return
100-
101-
let newTrees = trees.map((props) => ({ ...props}))
102-
103-
for (var i=0; i<50; i++){
104-
generateNewTree(newTrees)
105-
console.log("wykonano po raz", i)
118+
if( MapArray.length>0){
119+
120+
121+
let newTrees = trees.map((props) => ({ ...props}))
122+
123+
124+
for (var i=0; i<objectDensityArg; i++){
125+
generateNewTree(newTrees)
126+
}
127+
128+
setTrees([...newTrees])
129+
106130
}
107-
108-
setTrees([...newTrees])
109131
}
110132

111133

112134

113135
function generateNewTree(newTrees) {
114-
const randomType = getRandomInt(3)
136+
const randomType = getRandomInt(2)
115137
const coordinates = getRandomCoordinate()
116138

117-
console.log("losowy typ", randomType)
118-
119139
newTrees.push({ x: coordinates.x, y: coordinates.y, z: coordinates.z, scale: worldSizeScale, type: randomType})
120140
}
121141

122142

123143
//random generators
124144
function getRandomCoordinate(){
125-
let ran = getRandomInt(30000)
126-
let x = MapArray[0 + 3*ran]
127-
let y = MapArray[1 + 3*ran]
128-
let z = MapArray[2 + 3*ran]
145+
let array = nestedList(MapArray)
146+
147+
array = getArrayGroundHeight(array)
148+
let ran = getRandomInt(array.length)
149+
let x = array[ran][0]
150+
let y = array[ran][1]
151+
let z = array[ran][2]
129152

130153
return {x,y,z}
131154
}
132155
function getRandomInt(max) {
133156
return Math.floor(Math.random() * Math.floor(max))
134157
}
158+
159+
function nestedList(oldList){
160+
let i=0
161+
let newList=[]
162+
while(i<oldList.length){
163+
newList.push([oldList[i], oldList[i+1], oldList[i+2]])
164+
i+=3
165+
}
166+
return newList
167+
}
168+
169+
// tylko dane z wysokoscia zieloną
170+
function getArrayGroundHeight(oldList){
171+
let i = 0
172+
let newList = []
173+
while(i<oldList.length){
174+
if(oldList[i][1] < GroundHeight && oldList[i][1] > WaterHeight){
175+
newList.push(oldList[i])
176+
}
177+
i+=1
178+
}
179+
180+
return newList
181+
}
135182
}

0 commit comments

Comments
 (0)