Skip to content

Commit 0b42fd1

Browse files
kovacsvkovacsv
committed
Add another contact shadow experiment.
1 parent 46b7e3f commit 0b42fd1

File tree

1 file changed

+182
-0
lines changed

1 file changed

+182
-0
lines changed

‎sandbox/three_shadow3.html

+182
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta http-equiv="content-type" content="text/html;charset=utf-8">
6+
<meta name="viewport" content="width=device-width, user-scalable=no">
7+
8+
<title>Online 3D Viewer</title>
9+
<style>
10+
canvas
11+
{
12+
border: 1px solid #cccccc;
13+
}
14+
</style>
15+
16+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
17+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/shaders/HorizontalBlurShader.js"></script>
18+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/shaders/VerticalBlurShader.js"></script>
19+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
20+
<script type='text/javascript'>
21+
class ThreeShadowPlane
22+
{
23+
constructor (shadowGroup)
24+
{
25+
let size = new THREE.Vector2 (10.0, 5.0);
26+
27+
this.shadowCamera = new THREE.OrthographicCamera (-size.x / 2.0, size.x / 2.0, size.y / 2.0, -size.y / 2.0, 0.0, 10.0);
28+
this.shadowCamera.position.z = -5;
29+
this.shadowCamera.scale.z *= -1;
30+
shadowGroup.add (this.shadowCamera);
31+
32+
this.shadowRenderTarget = new THREE.WebGLRenderTarget (1024, 1024);
33+
this.shadowRenderTarget.texture.generateMipmaps = false;
34+
35+
let planeGeometry = new THREE.PlaneGeometry (size.x, size.y);
36+
let planeMaterial = new THREE.MeshBasicMaterial ({
37+
map : this.shadowRenderTarget.texture,
38+
transparent: true,
39+
depthWrite : false
40+
});
41+
42+
let helper = new THREE.CameraHelper (this.shadowCamera);
43+
shadowGroup.add (helper);
44+
45+
this.shadowOverrideMaterial = new THREE.MeshDepthMaterial ();
46+
this.shadowOverrideMaterial.userData.darkness = { value: 1 };
47+
this.shadowOverrideMaterial.onBeforeCompile = (shader) => {
48+
shader.uniforms.darkness = this.shadowOverrideMaterial.userData.darkness;
49+
shader.fragmentShader = /* glsl */`
50+
uniform float darkness;
51+
${shader.fragmentShader.replace (
52+
'gl_FragColor = vec4( vec3( 1.0 - fragCoordZ ), opacity );',
53+
'gl_FragColor = vec4( vec3( 0.0 ), ( 1.0 - fragCoordZ ) * darkness );'
54+
)}
55+
`;
56+
};
57+
58+
this.shadowPlaneMesh = new THREE.Mesh (planeGeometry, planeMaterial);
59+
shadowGroup.add (this.shadowPlaneMesh);
60+
}
61+
62+
Render (renderer, scene)
63+
{
64+
this.shadowPlaneMesh.visible = false;
65+
scene.overrideMaterial = this.shadowOverrideMaterial;
66+
renderer.setRenderTarget (this.shadowRenderTarget);
67+
68+
renderer.render (scene, this.shadowCamera);
69+
scene.overrideMaterial = null;
70+
this.shadowPlaneMesh.visible = true;
71+
72+
renderer.setRenderTarget (null);
73+
}
74+
}
75+
76+
class ThreeContactShadow
77+
{
78+
constructor (renderer, scene)
79+
{
80+
this.renderer = renderer;
81+
this.scene = scene;
82+
83+
this.shadowGroup = new THREE.Object3D ();
84+
this.scene.add (this.shadowGroup);
85+
86+
this.shadowPlane = new ThreeShadowPlane (this.shadowGroup);
87+
}
88+
89+
Render ()
90+
{
91+
this.shadowPlane.Render (this.renderer, this.scene);
92+
}
93+
}
94+
95+
function Sandbox3D ()
96+
{
97+
let canvas = document.getElementById ('canvas');
98+
99+
let parameters = {
100+
canvas : canvas,
101+
antialias : true
102+
};
103+
104+
let width = 800;
105+
let height = 600;
106+
let renderer = new THREE.WebGLRenderer (parameters);
107+
renderer.setClearColor ('#ffffff', 1);
108+
renderer.setSize (width, height);
109+
renderer.localClippingEnabled = true;
110+
111+
let scene = new THREE.Scene ();
112+
113+
let ambientLight = new THREE.AmbientLight (0x888888);
114+
scene.add (ambientLight);
115+
116+
let light = new THREE.DirectionalLight (0x888888);
117+
light.position.set (5, 10, 3);
118+
scene.add (light);
119+
120+
let camera = new THREE.PerspectiveCamera (45.0, width / height, 0.1, 1000.0);
121+
camera.position.set (5, 10, 3);
122+
camera.up.set (0.0, 0.0, 1.0);
123+
camera.lookAt (new THREE.Vector3 (0.0, 0.0, 0.0));
124+
scene.add (camera);
125+
126+
let meshes = new THREE.Object3D ();
127+
let box1 = new THREE.BoxGeometry (4.0, 2.0, 1.0);
128+
let box2 = new THREE.BoxGeometry (2.0, 2.0, 1.0);
129+
let boxMaterial = new THREE.MeshPhongMaterial ({
130+
color : 0xcc0000,
131+
side : THREE.DoubleSide
132+
});
133+
let boxMesh1 = new THREE.Mesh (box1, boxMaterial);
134+
let boxMesh2 = new THREE.Mesh (box2, boxMaterial);
135+
boxMesh1.position.z = 4;
136+
boxMesh2.position.x = 1;
137+
boxMesh2.position.y = 1;
138+
boxMesh2.position.z = 2;
139+
140+
boxMesh1.updateMatrixWorld (true);
141+
boxMesh2.updateMatrixWorld (true);
142+
143+
//boxMesh1.rotation.y = Math.PI / 2.0;
144+
145+
meshes.add (boxMesh1);
146+
meshes.add (boxMesh2);
147+
scene.add (meshes);
148+
149+
new THREE.OrbitControls (camera, renderer.domElement);
150+
151+
let size = new THREE.Vector3 (100.0, 100.0, 100.0);
152+
let position = new THREE.Vector3 (0.0, 0.0, -20.0);
153+
let upVector = new THREE.Vector3 (0.0, 0.0, 1.0);
154+
155+
let axesHelper = new THREE.AxesHelper (5.0);
156+
scene.add (axesHelper);
157+
158+
scene.background = new THREE.Color (0.8, 0.8, 0.8);
159+
160+
let shadow = new ThreeContactShadow (renderer, scene);
161+
renderer.setAnimationLoop ((time) => {
162+
// boxMesh1.rotation.x = time / 3000;
163+
// boxMesh1.rotation.y = time / 3000;
164+
// boxMesh1.rotation.z = time / 3000;
165+
// boxMesh1.updateMatrixWorld (true);
166+
// boxMesh2.updateMatrixWorld (true);
167+
shadow.Render ();
168+
renderer.render (scene, camera);
169+
});
170+
}
171+
172+
window.onload = function () {
173+
Sandbox3D ();
174+
};
175+
</script>
176+
</head>
177+
178+
<body>
179+
<canvas id="canvas"></canvas>
180+
</body>
181+
182+
</html>

0 commit comments

Comments
 (0)