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
|
<html>
<head>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="three.min.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( 5, 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: 0x007f00 }));
tablePlot.receiveShadow = true;
tablePlot.position.y = -0.05;
table.add(tablePlot);
var ball = new THREE.Mesh(new THREE.SphereGeometry(0.05, 32, 32), new THREE.MeshPhongMaterial({ color: 0xffffff }));
ball.castShadow = true;
table.add(ball);
var racket = new THREE.Group();
var paddle = new THREE.Mesh(new THREE.CylinderGeometry(0.15, 0.15, 0.03, 32), new THREE.MeshPhongMaterial({ color: 0xb32d25 }));
paddle.castShadow = true;
paddle.rotation.x = Math.PI / 2;
racket.add(paddle);
var handle = new THREE.Mesh(new THREE.BoxGeometry(0.3, 0.06, 0.04), new THREE.MeshPhongMaterial({ color: 0x775a28 }));
handle.castShadow = true;
handle.position.set(-0.15, -0.15, 0);
handle.rotation.z = Math.PI / 4;
racket.add(handle);
racket.position.y = 0.5;
racket.position.z = tableLen / 2 + 0.015;
table.add(racket.clone());
racket.position.z *= -1;
racket.rotation.z = Math.PI / 2;
table.add(racket);
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 amp = 0.5;
function drawFrame()
{
ball.position.z += 0.02 * direction;
ball.position.y = amp * Math.abs(Math.sin((ball.position.z / (tableLen / 2)) * Math.PI / 2));
if (Math.abs(ball.position.z) + 0.025 >= tableLen / 2) direction *= -1;
table.rotation.y += 0.005;
renderer.render( scene, camera );
}
</script>
</body>
</html>
|
