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
|
<html>
<head>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="three.min.js"></script>
<script src="CSG.js"></script>
<script>
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( drawFrame );
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();
var aspect = window.innerWidth/window.innerHeight;
var camera = new THREE.PerspectiveCamera( 30, aspect );
camera.position.set( 4, 3, 0 );
camera.lookAt( new THREE.Vector3(0, 0.35, 0) );
var table = new THREE.Group();
const tableLen = 3;
var tablePlot = new THREE.Mesh(new THREE.BoxGeometry(2, 0.05, tableLen), new THREE.MeshPhongMaterial({ color: 0x966F33 }));
tablePlot.receiveShadow = true;
tablePlot.position.y = -0.05;
table.add(tablePlot);
var cupCSG = new CSG();
var cupOuter = new THREE.Mesh(new THREE.CylinderGeometry(0.25, 0.25, 0.5, 32));
var cupInner = new THREE.Mesh(new THREE.CylinderGeometry(0.2, 0.2, 0.5, 32));
cupInner.position.y = 0.05;
cupCSG.subtract([cupOuter, cupInner]);
var cup = cupCSG.toMesh();
cup.material = new THREE.MeshLambertMaterial({ color: 0xf6feff, transparent: true, opacity: 0.7 });
cup.position.y = 0.25;
var water = new THREE.Mesh(new THREE.CylinderGeometry(0.2, 0.2, 0.35, 32),
new THREE.MeshLambertMaterial({ color: 0x40a4df, transparent: true, opacity: 0.8 }));
water.position.y = 0.05 + 0.175;
var iceCube = new THREE.Mesh(new THREE.BoxGeometry(0.1, 0.1, 0.1),
new THREE.MeshLambertMaterial({ color: 'white', transparent: true, opacity: 0.9 }));
iceCube.position.y = 0.05 + 0.35;
var cup1 = new THREE.Group();
cup1.add(cup.clone());
cup1.add(water.clone());
var iceCube1 = iceCube.clone();
cup1.add(iceCube1);
cup1.position.z = tableLen / 2 - 0.25;
var cup2 = new THREE.Group();
cup2.add(cup);
cup2.add(water);
var iceCube2 = iceCube;
cup2.add(iceCube2);
cup2.position.z = -cup1.position.z;
scene.add(cup1);
scene.add(cup2);
scene.add(table);
var light = new THREE.PointLight(0xffffff, 0.25);
light.position.set(1,4,0);
light.castShadow = true;
light.target = table;
scene.add(light);
var ambient = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambient);
var direction = 1;
const movementFrames = 200;
var cup1Vec = -0.03;
var cup2Vec = cup1Vec * -1;
var iceCubeCup1Vec = 0.005;
var iceCubeCup2Vec = iceCubeCup1Vec * -1;
scene.rotation.y = Math.PI / 8;
var frame = 0;
function drawFrame()
{
cup1.position.z += cup1Vec;
if ((0.01 < iceCube1.position.z && iceCubeCup1Vec < 0) || (iceCube1.position.z < 0.13 && iceCubeCup1Vec > 0))
iceCube1.position.z += iceCubeCup1Vec;
if (cup1.position.z <= 0.25) {
cup1Vec *= -1;
iceCubeCup1Vec *= -1;
}
if (cup1Vec > 0)
cup1Vec *= Math.exp((-frame % movementFrames) / movementFrames / 2);
if (iceCubeCup1Vec < 0)
iceCubeCup1Vec *= Math.exp((-frame % movementFrames) / movementFrames / 7);
cup2.position.z += cup2Vec;
if ((0.01 > iceCube2.position.z && iceCubeCup2Vec > 0) || (iceCube2.position.z > -0.13 && iceCubeCup2Vec < 0))
iceCube2.position.z += iceCubeCup2Vec;
if (cup2.position.z >= -0.25) {
cup2Vec *= -1;
iceCubeCup2Vec *= -1;
}
if (cup2Vec < 0)
cup2Vec *= Math.exp((-frame % movementFrames) / movementFrames / 2);
if (iceCubeCup2Vec > 0)
iceCubeCup2Vec *= Math.exp((-frame % movementFrames) / movementFrames / 7);
// scene.rotation.y += 0.005;
renderer.render( scene, camera );
frame++;
}
</script>
</body>
</html>
|
