Doni/ModelHandle
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Minor modifications.

Browse Source
This commit is contained in:
kovacsv 2023-05-05 20:16:13 +02:00
parent d44776f9bd
commit 8f3d579c83
1 changed files with 62 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
sandbox/three_shadow2.html
View File

@ -14,12 +14,59 @@
</style>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/helpers/CameraHelper.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/shaders/HorizontalBlurShader.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/shaders/VerticalBlurShader.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/controls/OrbitControls.js"></script>
<script type='text/javascript'>
class ShadowPlane
class ThreeBlurEffect
{
constructor (parentGroup, renderTarget, sizeX, sizeY)
{
this.parentGroup = parentGroup;
this.renderTarget = renderTarget;
this.blurGroup = new THREE.Object3D ();
this.parentGroup.add (this.blurGroup);
this.blurPlaneGeometry = new THREE.PlaneGeometry (sizeX, sizeY);
this.blurPlaneMesh = new THREE.Mesh (this.blurPlaneGeometry);
this.blurPlaneMesh.visible = false;
this.blurGroup.add (this.blurPlaneMesh);
this.blurCamera = new THREE.OrthographicCamera (-sizeX / 2.0, sizeX / 2.0, sizeY / 2.0, -sizeY / 2.0, 0.0, 1.0);
this.blurGroup.add (this.blurCamera);
this.blurRenderTarget = new THREE.WebGLRenderTarget (renderTarget.width, renderTarget.height);
this.blurRenderTarget.texture.generateMipmaps = false;
this.horizontalBlurMaterial = new THREE.ShaderMaterial (THREE.HorizontalBlurShader);
this.horizontalBlurMaterial.depthTest = false;
this.verticalBlurMaterial = new THREE.ShaderMaterial (THREE.VerticalBlurShader);
this.verticalBlurMaterial.depthTest = false;
}
Render (renderer, amount)
{
this.blurPlaneMesh.visible = true;
this.blurPlaneMesh.material = this.horizontalBlurMaterial;
this.blurPlaneMesh.material.uniforms.tDiffuse.value = this.renderTarget.texture;
this.horizontalBlurMaterial.uniforms.h.value = amount * 1 / 256;
renderer.setRenderTarget (this.blurRenderTarget);
renderer.render (this.blurPlaneMesh, this.blurCamera);
this.blurPlaneMesh.material = this.verticalBlurMaterial;
this.blurPlaneMesh.material.uniforms.tDiffuse.value = this.blurRenderTarget.texture;
this.verticalBlurMaterial.uniforms.v.value = amount * 1 / 256;
renderer.setRenderTarget (this.renderTarget);
renderer.render (this.blurPlaneMesh, this.blurCamera);
this.blurPlaneMesh.visible = false;
}
}
class ThreeShadowPlane
{
constructor (parentGroup, size, position, up)
{
@ -50,18 +97,27 @@
let helper = new THREE.CameraHelper( this.camera );
this.parentGroup.add (helper);
this.shadowMaterial = new THREE.MeshBasicMaterial ({
color : '#00cc00'
});
}
Render (renderer, scene)
{
this.planeMesh.visible = false;
scene.overrideMaterial = this.shadowMaterial;
renderer.setRenderTarget (this.renderTarget);
renderer.render (scene, this.camera);
renderer.setRenderTarget (null);
scene.overrideMaterial = null;
this.planeMesh.visible = true;
}
}
class ContactShadow
class ThreeContactShadow
{
constructor (renderer, scene, size, position, up)
{
@ -71,18 +127,12 @@
this.shadowGroup = new THREE.Object3D ();
this.scene.add (this.shadowGroup);
this.shadowPlane = new ShadowPlane (this.shadowGroup, size, position, up);
this.shadowMaterial = new THREE.MeshBasicMaterial ({
color : '#00cc00'
});
this.shadowPlane = new ThreeShadowPlane (this.shadowGroup, size, position, up);
}
Render ()
{
this.scene.overrideMaterial = this.shadowMaterial;
this.shadowPlane.Render (this.renderer, this.scene);
this.scene.overrideMaterial = null;
this.renderer.setRenderTarget (null);
}
}
@ -100,6 +150,7 @@
let renderer = new THREE.WebGLRenderer (parameters);
renderer.setClearColor ('#ffffff', 1);
renderer.setSize (width, height);
renderer.localClippingEnabled = true;
let scene = new THREE.Scene ();
@ -131,7 +182,7 @@
let size = new THREE.Vector3 (100.0, 100.0, 100.0);
let position = new THREE.Vector3 (0.0, 0.0, -20.0);
let upVector = new THREE.Vector3 (0.0, 0.0, 1.0);
let shadow = new ContactShadow (renderer, scene, size, position, upVector);
let shadow = new ThreeContactShadow (renderer, scene, size, position, upVector);
scene.background = new THREE.Color (0.8, 0.8, 0.8);
renderer.setAnimationLoop ((time) => {