1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118 | import Polyhedron from './Polyhedron'
import * as THREE from 'three'
import { Canvas } from '@react-three/fiber'
import { Stats, OrbitControls } from '@react-three/drei'
import { useControls } from 'leva'
import Floor from './Floor'
function Lights() {
const ambientCtl = useControls('Ambient Light', {
visible: false,
intensity: {
value: 1.0,
min: 0,
max: 1.0,
step: 0.1,
},
})
const directionalCtl = useControls('Directional Light', {
visible: true,
position: {
x: 3.3,
y: 1.0,
z: 4.4,
},
castShadow: true,
})
const pointCtl = useControls('Point Light', {
visible: false,
position: {
x: 2,
y: 0,
z: 0,
},
castShadow: true,
})
const spotCtl = useControls('Spot Light', {
visible: false,
position: {
x: 3,
y: 2.5,
z: 1,
},
castShadow: true,
})
return (
<>
<ambientLight
visible={ambientCtl.visible}
intensity={ambientCtl.intensity}
/>
<directionalLight
visible={directionalCtl.visible}
position={[
directionalCtl.position.x,
directionalCtl.position.y,
directionalCtl.position.z,
]}
castShadow={directionalCtl.castShadow}
/>
<pointLight
visible={pointCtl.visible}
position={[
pointCtl.position.x,
pointCtl.position.y,
pointCtl.position.z,
]}
castShadow={pointCtl.castShadow}
/>
<spotLight
visible={spotCtl.visible}
position={[spotCtl.position.x, spotCtl.position.y, spotCtl.position.z]}
castShadow={spotCtl.castShadow}
/>
</>
)
}
export default function App() {
return (
<Canvas camera={{ position: [4, 4, 1.5] }} shadows>
<Lights />
<Polyhedron
name="meshBasicMaterial"
position={[-3, 1, 0]}
material={new THREE.MeshBasicMaterial({ color: 'yellow' })}
/>
<Polyhedron
name="meshNormalMaterial"
position={[-1, 1, 0]}
material={new THREE.MeshNormalMaterial({ flatShading: true })}
/>
<Polyhedron
name="meshPhongMaterial"
position={[1, 1, 0]}
material={
new THREE.MeshPhongMaterial({ color: 'lime', flatShading: true })
}
/>
<Polyhedron
name="meshStandardMaterial"
position={[3, 1, 0]}
material={
new THREE.MeshStandardMaterial({
color: 0xff0033,
flatShading: true,
})
}
/>
<Floor />
<OrbitControls target={[2, 2, 0]} />
<axesHelper args={[5]} />
<Stats />
</Canvas>
)
}
|