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
125
126
|
<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( 2, 1.5, 0 );
camera.lookAt( new THREE.Vector3(0, 0.35, 0) );
var statue = new THREE.Group();
var statueMaterial = new THREE.MeshPhongMaterial({ color: 0xa3a39f, flatShading: true });
var darkStatueMaterial = new THREE.MeshPhongMaterial({ color: 0x525456, flatShading: true });
var base = new THREE.Mesh(new THREE.BoxGeometry(0.2, 0.25, 0.2), statueMaterial);
base.position.y = -0.125;
statue.add(base);
var body = new THREE.Mesh(new THREE.BoxGeometry(0.15, 0.6, 0.09, 10), statueMaterial);
body.position.y = 0.3;
statue.add(body);
var robeFoldLong = new THREE.Mesh(new THREE.BoxGeometry(0.04, 0.45, 0.08), statueMaterial);
robeFoldLong.position.set(-0.03, 0.23, 0.08 - 0.05);
robeFoldLong.rotation.z = Math.PI / 96;
statue.add(robeFoldLong.clone());
robeFoldLong.position.x = 0.03;
robeFoldLong.rotation.z = -Math.PI / 96;
statue.add(robeFoldLong.clone());
var robeFoldShoulder = new THREE.Mesh(new THREE.BoxGeometry(0.045, 0.15, 0.09), statueMaterial);
robeFoldShoulder.position.set(-0.04, 0.4 + 0.13, 0.09 - 0.05);
robeFoldShoulder.rotation.set(-Math.PI / 32, 0 , Math.PI / 64);
statue.add(robeFoldShoulder.clone());
robeFoldShoulder.position.x *= -1;
robeFoldShoulder.rotation.z *= -1;
statue.add(robeFoldShoulder);
var arm = new THREE.Mesh(new THREE.CylinderGeometry(0.05, 0.015, 0.21), statueMaterial);
arm.position.set(-0.1, 0.65, 0.01);
arm.rotation.set(-Math.PI / 100, 0, Math.PI / 8 - Math.PI);
var armRobeFold = new THREE.Mesh(new THREE.BoxGeometry(0.04, 0.18, 0.04), statueMaterial);
armRobeFold.position.set(0, 0, 0.02);
armRobeFold.rotation.x = Math.PI / 16;
armRobeFold.rotation.z = Math.PI / 60;
arm.add(armRobeFold);
var hand = new THREE.Mesh(new THREE.BoxGeometry(0.03, 0.03, 0.03), darkStatueMaterial);
hand.position.set(0, -0.115, 0);
var torch = new THREE.Mesh(new THREE.BoxGeometry(0.025, 0.13, 0.025), darkStatueMaterial);
torch.rotation.x = -Math.PI / 2;
torch.position.y = -0.025;
hand.add(torch);
hand.rotation.x = -Math.PI / 2.2;
hand.rotation.y = Math.PI / 16;
arm.add(hand);
statue.add(arm.clone());
arm.position.x *= -1;
arm.rotation.z *= -1;
armRobeFold.rotation.z *= -1;
hand.rotation.y *= -1;
statue.add(arm);
var head = new THREE.Mesh(new THREE.BoxGeometry(0.05, 0.08, 0.05), darkStatueMaterial);
head.position.set(0, 0.6 + 0.04, 0);
statue.add(head);
var foot = new THREE.Mesh(new THREE.BoxGeometry(0.04, 0.04, 0.05), darkStatueMaterial);
foot.rotation.y = -Math.PI / 8;
foot.position.set(-0.05, 0, 0.05);
statue.add(foot.clone());
foot.rotation.y *= -1;
foot.position.x *= -1;
statue.add(foot);
scene.add(statue);
var light = new THREE.PointLight(0xffffff, 0.25);
light.position.set(1,2,3);
light.castShadow = true;
light.target = statue;
scene.add(light.clone());
light.position.x = -1;
light.position.y = 0;
scene.add(light);
var ambient = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambient);
var count = 0;
var rotationCoef = 200;
scene.rotation.y = Math.PI / 6;
function drawFrame()
{
if (count < rotationCoef)
scene.rotation.y += 0.009;
else if (count > 2 * rotationCoef)
count = 0;
else
scene.rotation.y -= 0.009;
count += 1;
renderer.render( scene, camera );
}
</script>
</body>
</html>
|
