Skip to content

Commit 0ef04d2

Browse files
Mugen87Mugen87
committed
Examples: Improve refraction demo.
1 parent a7f8e88 commit 0ef04d2

File tree

4 files changed

+93
-49
lines changed

4 files changed

+93
-49
lines changed

‎examples/js/shaders/WaterRefractionShader.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
6363
void main() {
6464
65-
float waveStrength = 0.1;
65+
float waveStrength = 0.5;
6666
float waveSpeed = 0.03;
6767
6868
// simple distortion (ripple) via dudv map (see https://www.youtube.com/watch?v=6B7IF6GOu7s)

‎examples/jsm/shaders/WaterRefractionShader.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ const WaterRefractionShader = {
6565
6666
void main() {
6767
68-
float waveStrength = 0.1;
68+
float waveStrength = 0.5;
6969
float waveSpeed = 0.03;
7070
7171
// simple distortion (ripple) via dudv map (see https://www.youtube.com/watch?v=6B7IF6GOu7s)

‎examples/screenshots/webgl_refraction.jpg‎

8.09 KB
Loading

‎examples/webgl_refraction.html‎

Lines changed: 91 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,14 @@
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
77
<link type="text/css" rel="stylesheet" href="main.css">
8+
<style>
9+
body {
10+
color: #444;
11+
}
12+
a {
13+
color: #08f;
14+
}
15+
</style>
816
</head>
917
<body>
1018

@@ -21,37 +29,40 @@
2129
import { Refractor } from './jsm/objects/Refractor.js';
2230
import { WaterRefractionShader } from './jsm/shaders/WaterRefractionShader.js';
2331

24-
let scene, camera, clock, renderer, refractor;
32+
let camera, scene, renderer, clock;
33+
34+
let refractor, smallSphere;
2535

2636
init();
2737

2838
function init() {
2939

30-
// scene
31-
32-
scene = new THREE.Scene();
33-
34-
// camera
35-
36-
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 200 );
37-
camera.position.set( - 10, 0, 15 );
38-
camera.lookAt( scene.position );
39-
40-
// clock
40+
const container = document.getElementById( 'container' );
4141

4242
clock = new THREE.Clock();
4343

44-
// mesh
44+
// renderer
45+
renderer = new THREE.WebGLRenderer( { antialias: true } );
46+
renderer.setPixelRatio( window.devicePixelRatio );
47+
renderer.setSize( window.innerWidth, window.innerHeight );
48+
container.appendChild( renderer.domElement );
4549

46-
const geometry = new THREE.TorusKnotGeometry( 3, 1, 256, 32 );
47-
const material = new THREE.MeshStandardMaterial( { color: 0x6083c2 } );
50+
// scene
51+
scene = new THREE.Scene();
52+
53+
// camera
54+
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
55+
camera.position.set( 0, 75, 160 );
4856

49-
const mesh = new THREE.Mesh( geometry, material );
50-
scene.add( mesh );
57+
const controls = new OrbitControls( camera, renderer.domElement );
58+
controls.target.set( 0, 40, 0 );
59+
controls.maxDistance = 400;
60+
controls.minDistance = 10;
61+
controls.update();
5162

5263
// refractor
5364

54-
const refractorGeometry = new THREE.PlaneGeometry( 10, 10 );
65+
const refractorGeometry = new THREE.PlaneGeometry( 90, 90 );
5566

5667
refractor = new Refractor( refractorGeometry, {
5768
color: 0x999999,
@@ -60,7 +71,7 @@
6071
shader: WaterRefractionShader
6172
} );
6273

63-
refractor.position.set( 0, 0, 5 );
74+
refractor.position.set( 0, 50, 0 );
6475

6576
scene.add( refractor );
6677

@@ -73,32 +84,60 @@
7384
} );
7485

7586
dudvMap.wrapS = dudvMap.wrapT = THREE.RepeatWrapping;
76-
refractor.material.uniforms[ "tDudv" ].value = dudvMap;
77-
78-
// light
79-
80-
const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
81-
scene.add( ambientLight );
82-
83-
const pointLight = new THREE.PointLight( 0xffffff, 0.8 );
84-
camera.add( pointLight );
85-
scene.add( camera );
86-
87-
// renderer
88-
89-
renderer = new THREE.WebGLRenderer( { antialias: true } );
90-
renderer.setSize( window.innerWidth, window.innerHeight );
91-
renderer.setClearColor( 0x20252f );
92-
renderer.setPixelRatio( window.devicePixelRatio );
93-
document.body.appendChild( renderer.domElement );
87+
refractor.material.uniforms.tDudv.value = dudvMap;
9488

9589
//
9690

97-
const controls = new OrbitControls( camera, renderer.domElement );
98-
controls.minDistance = 10;
99-
controls.maxDistance = 100;
100-
101-
//
91+
const geometry = new THREE.IcosahedronGeometry( 5, 0 );
92+
const material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x333333, flatShading: true } );
93+
smallSphere = new THREE.Mesh( geometry, material );
94+
scene.add( smallSphere );
95+
96+
// walls
97+
const planeGeo = new THREE.PlaneGeometry( 100.1, 100.1 );
98+
99+
const planeTop = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0xffffff } ) );
100+
planeTop.position.y = 100;
101+
planeTop.rotateX( Math.PI / 2 );
102+
scene.add( planeTop );
103+
104+
const planeBottom = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0xffffff } ) );
105+
planeBottom.rotateX( - Math.PI / 2 );
106+
scene.add( planeBottom );
107+
108+
const planeBack = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0x7f7fff } ) );
109+
planeBack.position.z = - 50;
110+
planeBack.position.y = 50;
111+
scene.add( planeBack );
112+
113+
const planeRight = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0x00ff00 } ) );
114+
planeRight.position.x = 50;
115+
planeRight.position.y = 50;
116+
planeRight.rotateY( - Math.PI / 2 );
117+
scene.add( planeRight );
118+
119+
const planeLeft = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0xff0000 } ) );
120+
planeLeft.position.x = - 50;
121+
planeLeft.position.y = 50;
122+
planeLeft.rotateY( Math.PI / 2 );
123+
scene.add( planeLeft );
124+
125+
// lights
126+
const mainLight = new THREE.PointLight( 0xcccccc, 1.5, 250 );
127+
mainLight.position.y = 60;
128+
scene.add( mainLight );
129+
130+
const greenLight = new THREE.PointLight( 0x00ff00, 0.25, 1000 );
131+
greenLight.position.set( 550, 50, 0 );
132+
scene.add( greenLight );
133+
134+
const redLight = new THREE.PointLight( 0xff0000, 0.25, 1000 );
135+
redLight.position.set( - 550, 50, 0 );
136+
scene.add( redLight );
137+
138+
const blueLight = new THREE.PointLight( 0x7f7fff, 0.25, 1000 );
139+
blueLight.position.set( 0, 50, 550 );
140+
scene.add( blueLight );
102141

103142
window.addEventListener( 'resize', onWindowResize );
104143

@@ -108,6 +147,7 @@
108147

109148
camera.aspect = window.innerWidth / window.innerHeight;
110149
camera.updateProjectionMatrix();
150+
111151
renderer.setSize( window.innerWidth, window.innerHeight );
112152

113153
}
@@ -116,13 +156,17 @@
116156

117157
requestAnimationFrame( animate );
118158

119-
render();
120-
121-
}
159+
refractor.material.uniforms.time.value += clock.getDelta();
122160

123-
function render() {
161+
const timer = Date.now() * 0.01;
124162

125-
refractor.material.uniforms[ "time" ].value += clock.getDelta();
163+
smallSphere.position.set(
164+
Math.cos( timer * 0.1 ) * 30,
165+
Math.abs( Math.cos( timer * 0.2 ) ) * 20 + 5,
166+
Math.sin( timer * 0.1 ) * 30
167+
);
168+
smallSphere.rotation.y = ( Math.PI / 2 ) - timer * 0.1;
169+
smallSphere.rotation.z = timer * 0.8;
126170

127171
renderer.render( scene, camera );
128172

0 commit comments

Comments
 (0)