Skip to content

Commit 85a8b90

Browse files
AndlerRLAndlerRL
committed
🚧 enviroment
1 parent 88507b1 commit 85a8b90

15 files changed

+228
-71
lines changed

‎.eslintrc.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
module.exports = {
2+
extends: ['next/core-web-vitals', '@blockmatic'],
3+
plugins: ['react-hooks'],
4+
rules: {
5+
'no-case-declarations': 0,
6+
'no-console': 'off',
7+
'@typescript-eslint/no-unused-vars': 0,
8+
'@typescript-eslint/indent': 0,
9+
'no-use-before-define': 'off',
10+
'no-shadow': 'off',
11+
'react-hooks/rules-of-hooks': 'warn', // Checks rules of Hooks
12+
'react-hooks/exhaustive-deps': 'warn', // Checks effect dependencies
13+
},
14+
env: {
15+
es2020: true,
16+
},
17+
}

‎components/Box.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export const Box: React.FC<MeshProps> = (props) => {
1616

1717
return (
1818
<>
19+
<ContactShadows smooth width={10} height={10} opacity={0.5} blur={2} resolution={1080} far={10} rotation={[Math.PI / 2, 0, 0]} />
1920
<mesh ref={ref} {...props} smoothShadow castShadow receiveShadow>\
2021
<boxBufferGeometry />
2122
<meshPhysicalMaterial

‎components/Floor.tsx

+14-4
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,30 @@
11
import { ContactShadows, Plane } from '@react-three/drei'
22
import type { MeshProps } from '@react-three/fiber'
33
import React from 'react'
4+
import { useTextures } from '../hooks/useTextures'
45
import { Orbit } from './Orbit'
56

67
export const Floor: React.FC<MeshProps> = (props) => {
7-
8+
const { setTextures } = useTextures()
9+
const floor_texture = setTextures('floor', { x: 10, y: 10 })
810

911
return (
1012
<>
1113
<Orbit />
1214
<axesHelper args={[5]} />
13-
<Plane args={[100, 100]} rotation={[-Math.PI / 2, 0, 0]} receiveShadow castShadow>
15+
<Plane
16+
args={[100, 100]}
17+
rotation={[-Math.PI / 2, 0, 0]}
18+
receiveShadow
19+
castShadow
20+
>
1421
<meshPhysicalMaterial
15-
color="#e0e0e0"
22+
clearcoat={0.5}
23+
roughness={1}
24+
clearcoatRoughness={1}
25+
{...floor_texture.assets}
1626
/>
1727
</Plane>
1828
</>
1929
)
20-
}
30+
}

‎components/Wall.tsx

+43-23
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,74 @@
1+
import { RoundedBox } from '@react-three/drei'
12
import { MeshProps, useLoader } from '@react-three/fiber'
23
import React from 'react'
34
import * as THREE from 'three'
5+
import { useTextures } from '../hooks/useTextures'
6+
7+
export const XGarageDoor: React.FC<MeshProps> = (props) => {
8+
const { setTextures } = useTextures()
9+
const x_garage_texture = setTextures('garage', { x: 5, y: 1 })
10+
const x_wall_texture = setTextures('wall', { x: 10, y: 1 })
11+
12+
return (
13+
<>
14+
<RoundedBox args={[1, 11, 27]} radius={0.05} smoothness={4} {...props} receiveShadow castShadow>
15+
<meshPhongMaterial
16+
attach="material"
17+
color="#12240e"
18+
clearcoat={1}
19+
metalness={1}
20+
roughness={1}
21+
clearcoatRoughness={1}
22+
/>
23+
</RoundedBox>
24+
<mesh {...props} receiveShadow castShadow>
25+
<boxBufferGeometry args={[1, 10, 25]} />
26+
<meshPhysicalMaterial
27+
clearcoat={1}
28+
metalness={0.83}
29+
roughness={1}
30+
clearcoatRoughness={1}
31+
{...x_garage_texture.assets}
32+
/>
33+
</mesh>
34+
</>
35+
)
36+
}
437

538
export const XWall: React.FC<MeshProps> = (props) => {
6-
const wall_texture_diff = useLoader(THREE.TextureLoader, '/assets/brickwall/textures/sandstone_brick_wall_01_diff_2k.jpg')
7-
const wall_texture_disp = useLoader(THREE.TextureLoader, '/assets/brickwall/textures/sandstone_brick_wall_01_disp_2k.png')
39+
const { setTextures } = useTextures()
40+
const x_wall_texture = setTextures('wall', { x: 10, y: 1 })
41+
42+
console.log(x_wall_texture, 'x_wall_texture')
843

9-
wall_texture_diff.wrapS = THREE.RepeatWrapping;
10-
wall_texture_diff.wrapT = THREE.RepeatWrapping;
11-
wall_texture_diff.repeat.set(10, 1)
12-
wall_texture_disp.repeat.set(10, 1)
1344
return (
1445
<mesh {...props} receiveShadow castShadow>
1546
<boxBufferGeometry args={[0.25, 20, 100]} />
1647
<meshPhysicalMaterial
1748
clearcoat={1}
1849
roughness={1}
1950
clearcoatRoughness={0.75}
20-
displacementMap={wall_texture_disp}
21-
map={wall_texture_diff}
51+
{...x_wall_texture.assets}
2252
/>
2353
</mesh>
2454
)
2555
}
2656

2757
export const YWall: React.FC<MeshProps> = (props) => {
28-
const wall_texture_diff = useLoader(
29-
THREE.TextureLoader,
30-
'/assets/brickwall/textures/sandstone_brick_wall_01_diff_2k.jpg'
31-
)
32-
const wall_texture_disp = useLoader(
33-
THREE.TextureLoader,
34-
'/assets/brickwall/textures/sandstone_brick_wall_01_disp_2k.png'
35-
)
58+
const { setTextures } = useTextures()
59+
const y_wall_texture = setTextures('wall', { x: 10, y: 1 })
3660

61+
console.log(y_wall_texture)
3762

38-
wall_texture_diff.wrapS = THREE.RepeatWrapping;
39-
wall_texture_diff.wrapT = THREE.RepeatWrapping;
40-
wall_texture_diff.repeat.set(10, 1)
41-
wall_texture_disp.repeat.set(10, 1)
4263
return (
4364
<mesh {...props} receiveShadow castShadow>
4465
<boxBufferGeometry args={[100, 20, 0.25]} />
4566
<meshPhysicalMaterial
4667
roughness={1}
4768
clearcoat={1}
4869
clearcoatRoughness={0.75}
49-
displacementMap={wall_texture_disp}
50-
map={wall_texture_diff}
70+
{...y_wall_texture.assets}
5171
/>
5272
</mesh>
5373
)
54-
}
74+
}

‎hooks/useTextures.ts

+132-24
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,160 @@
1-
import { MeshProps, useLoader } from '@react-three/fiber'
1+
import {
2+
MeshPhysicalMaterialProps,
3+
MeshProps,
4+
useLoader,
5+
} from '@react-three/fiber'
26
import create from 'zustand'
37
import * as THREE from 'three'
48

5-
import { Texture, TextureName } from '../types/textures'
9+
import { Texture, TextureName, TextureRepeat } from '../types/textures'
610

711
interface TextureState {
812
textures: Texture[]
9-
setTextures: (name: TextureName) => Texture
10-
changeTexture: (name: TextureName, assets: MeshProps[]) => Texture | null
13+
setTextures: (name: TextureName, repeat?: TextureRepeat) => Texture
14+
changeTexture: (
15+
name: TextureName,
16+
assets: Partial<MeshPhysicalMaterialProps>,
17+
repeat?: TextureRepeat,
18+
) => Texture | null
1119
}
1220

13-
const useTextures = create<TextureState>((set, get) => {
14-
const wall_texture_diff = useLoader(THREE.TextureLoader, '/assets/brickwall/textures/sandstone_brick_wall_01_diff_2k.jpg')
15-
const wall_texture_disp = useLoader(THREE.TextureLoader, '/assets/brickwall/textures/sandstone_brick_wall_01_disp_2k.png')
21+
export const useTextures = (): TextureState => {
22+
const wall_texture_diff = useLoader(
23+
THREE.TextureLoader,
24+
'/assets/brickwall/textures/sandstone_brick_wall_01_diff_2k.jpg',
25+
)
26+
const wall_texture_disp = useLoader(
27+
THREE.TextureLoader,
28+
'/assets/brickwall/textures/sandstone_brick_wall_01_disp_2k.png',
29+
)
1630

17-
const setTextures = (name: TextureName) => {
18-
const texture: Texture = { name }
31+
const factory_wall_texture_diff = useLoader(
32+
THREE.TextureLoader,
33+
'/assets/factorywall/factory_wall_diff_2k.jpg',
34+
)
35+
const factory_wall_texture_disp = useLoader(
36+
THREE.TextureLoader,
37+
'/assets/factorywall/factory_wall_disp_2k.png',
38+
)
39+
// const factory_wall_texture_nor_gl = useLoader(THREE.TextureLoader, '/assets/factorywall/factory_wall_nor_gl_2k.exr')
40+
const factory_wall_texture_rough = useLoader(
41+
THREE.TextureLoader,
42+
'/assets/factorywall/factory_wall_rough_2k.jpg',
43+
)
1944

20-
set((state) => ({
21-
textures: [...state.textures, texture]
22-
}))
45+
const concrete_floor_texture_diff = useLoader(
46+
THREE.TextureLoader,
47+
'/assets/concretefloor/concrete_floor_02_diff_2k.jpg',
48+
)
49+
const concrete_floor_texture_disp = useLoader(
50+
THREE.TextureLoader,
51+
'/assets/concretefloor/concrete_floor_02_disp_2k.png',
52+
)
53+
// const concrete_floor_texture_nor_gl = useLoader(THREE.TextureLoader, '/assets/concretefloor/concrete_floor_02_nor_gl_2k.exr')
54+
const concrete_floor_texture_rough = useLoader(
55+
THREE.TextureLoader,
56+
'/assets/concretefloor/concrete_floor_02_rough_2k.jpg',
57+
)
58+
59+
const asphalt_texture_diff = useLoader(
60+
THREE.TextureLoader,
61+
'/assets/asphalt/asphalt_02_diff_2k.jpg',
62+
)
63+
const asphalt_texture_disp = useLoader(
64+
THREE.TextureLoader,
65+
'/assets/asphalt/asphalt_02_disp_2k.png',
66+
)
67+
// const asphalt_texture_nor_gl = useLoader(THREE.TextureLoader, '/assets/asphalt/asphalt_02_nor_gl_2k.exr')
68+
const asphalt_texture_rough = useLoader(
69+
THREE.TextureLoader,
70+
'/assets/asphalt/asphalt_02_rough_2k.jpg',
71+
)
72+
73+
const setTextures = (name: TextureName, repeat?: TextureRepeat) => {
74+
const texture: Texture = { name, assets: {}, repeat }
75+
76+
switch (name) {
77+
case 'asphalt':
78+
texture.assets = {
79+
map: asphalt_texture_diff,
80+
displacementMap: asphalt_texture_disp,
81+
// envMap: asphalt_texture_nor_gl,
82+
roughnessMap: asphalt_texture_rough,
83+
}
84+
break
85+
case 'floor':
86+
texture.assets = {
87+
map: concrete_floor_texture_diff,
88+
displacementMap: concrete_floor_texture_disp,
89+
// envMap: concrete_floor_texture_nor_gl,
90+
roughnessMap: concrete_floor_texture_rough,
91+
}
92+
break
93+
case 'garage':
94+
texture.assets = {
95+
map: factory_wall_texture_diff,
96+
displacementMap: factory_wall_texture_disp,
97+
// envMap: factory_wall_texture_nor_gl,
98+
roughnessMap: factory_wall_texture_rough,
99+
}
100+
break
101+
case 'wall':
102+
default:
103+
texture.assets = {
104+
map: wall_texture_diff,
105+
displacementMap: wall_texture_disp,
106+
}
107+
break
108+
}
109+
110+
Object.keys(texture.assets).forEach((asset: string) => {
111+
const key = asset as keyof MeshPhysicalMaterialProps
112+
113+
texture.assets[key].wrapS = THREE.RepeatWrapping
114+
texture.assets[key].wrapT = THREE.RepeatWrapping
115+
116+
if (repeat) {
117+
texture.assets[key].repeat.set(repeat.x, repeat.y)
118+
}
119+
})
120+
121+
// set((state) => ({
122+
// textures: [...state.textures, texture]
123+
// }))
23124

24125
return texture
25126
}
26127

27-
const changeTexture = (name: TextureName, assets: MeshProps) => {
128+
const changeTexture = (
129+
name: TextureName,
130+
assets: Partial<MeshPhysicalMaterialProps>,
131+
) => {
28132
let texture: Texture | null = null
29133

30-
set((state) => {
31-
const mutable_texture_state = state.textures
32-
texture = state.textures.find((tx: Texture) => tx.name === name) || null
134+
// set((state) => {
135+
// const mutable_texture_state = state.textures
136+
// texture = state.textures.find((tx: Texture) => tx.name === name) || null
33137

34-
if (!texture) return state
138+
// if (!texture) return state
35139

36-
const texture_index = state.textures.findIndex((tx: Texture) => tx.name === name)
140+
// const texture_index = state.textures.findIndex((tx: Texture) => tx.name === name)
37141

38-
// TODO: ASSETS!
39-
mutable_texture_state.splice(texture_index, 1, texture)
142+
// texture = {
143+
// ...texture,
144+
// assets
145+
// }
40146

41-
return { textures: mutable_texture_state }
42-
})
147+
// mutable_texture_state.splice(texture_index, 1, texture)
148+
149+
// return { textures: mutable_texture_state }
150+
// })
43151

44152
return texture
45153
}
46154

47155
return {
48156
textures: [],
49157
setTextures,
50-
changeTexture
158+
changeTexture,
51159
}
52-
})
160+
}

0 commit comments

Comments
 (0)