-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path5-threejs-cube-light-shadow.html
127 lines (111 loc) · 3.43 KB
/
5-threejs-cube-light-shadow.html
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
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html>
<head>
<title>THREE.js Cube Demo</title>
<meta charset="utf-8" />
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
#container {
width: 100vw;
height: 100vh;
display: flex;
}
#gui {
position: absolute;
top: 10px;
left: 10px;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="gui"></div>
<script src="./assets/js/three.min.js"></script>
<script src="./assets/js/dat.gui.min.js"></script>
<script>
// Create a renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
// Add the renderer to the page
const container = document.querySelector("#container");
container.appendChild(renderer.domElement);
// Create a scene
const scene = new THREE.Scene();
scene.background = new THREE.Color("#fff");
// Add a camera
const camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
1,
1000
);
camera.position.z = 5;
camera.position.set(1, 1, 5);
camera.lookAt(new THREE.Vector3(0, 0, 0));
// camera.position.x = 1;
// camera.position.y = 1;
scene.add(camera);
// Create a light
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(-10, 10, 10);
light.castShadow = true;
const shadowSize = 20;
light.shadow.camera.left = -shadowSize;
light.shadow.camera.right = shadowSize;
light.shadow.camera.top = shadowSize;
light.shadow.camera.bottom = -shadowSize;
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
scene.add(light);
// Create a plane
const planeGeometry = new THREE.PlaneGeometry(10, 10, 0);
const planeMaterial = new THREE.MeshPhongMaterial({
color: new THREE.Color("red"),
});
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
plane.rotation.x = -Math.PI / 2;
scene.add(plane);
// Create a cube
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;
cube.position.y = 1;
cube.position.z = 0.5;
scene.add(cube);
// Add controls to GUI
const controls = {
rotationX: 0,
rotationY: 0,
rotationZ: 0,
};
const gui = new dat.GUI();
gui
.add(controls, "rotationX", -Math.PI / 2, Math.PI / 2, 0.01)
.name("Rotation X");
gui
.add(controls, "rotationY", -Math.PI / 2, Math.PI / 2, 0.01)
.name("Rotation Y");
gui
.add(controls, "rotationZ", -Math.PI / 2, Math.PI / 2, 0.01)
.name("Rotation Z");
// Render the scene
function render() {
cube.rotation.x = controls.rotationX;
cube.rotation.y = controls.rotationY;
cube.rotation.z = controls.rotationZ;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
</script>
</body>
</html>