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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
|
<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 garden = new THREE.Group();
/*
* Ground
*/
const groundSize = 10;
var groundPlatform = new THREE.Mesh(new THREE.BoxGeometry(groundSize, 0.1, groundSize), new THREE.MeshPhongMaterial({ color: 0x5bab3a }));
groundPlatform.receiveShadow = true;
groundPlatform.position.y = -0.05;
garden.add(groundPlatform);
/*
* Trees
*/
const treeHeight = 1;
const treeLeafsRadius = 0.18;
const treeRadius = 0.11;
const treeSegments = 12;
const treeRootRadius = 0.15;
var trunkMaterial = new THREE.MeshPhongMaterial({color: 0x5d3b0b});
var leafMaterial = new THREE.MeshPhongMaterial({color: 0x526E2A });
trunkMaterial.flatShading = leafMaterial.flatShading = true; // Изглежда по-добре така според мене
var treeCSG = new CSG();
// Trunk
var roots = new THREE.Mesh(new THREE.CylinderGeometry(treeRadius, treeRootRadius, treeHeight * 0.05, treeSegments));
roots.position.y = treeHeight * 0.025
var bottomHalfTrunk = new THREE.Mesh(new THREE.CylinderGeometry(treeRadius * 0.8, treeRadius, treeHeight * 0.45, treeSegments));
bottomHalfTrunk.position.y = treeHeight * 0.05 + treeHeight * 0.225;
var topHalfTrunk = new THREE.Mesh(new THREE.CylinderGeometry(treeRadius, treeRadius * 0.8, treeHeight * 0.1, treeSegments));
topHalfTrunk.position.y = treeHeight * 0.05 + treeHeight * 0.45 + treeHeight * 0.05;
treeCSG.union([roots, bottomHalfTrunk, topHalfTrunk]);
var tree = treeCSG.toMesh();
tree.material = trunkMaterial;
// Leafs
var leafs = new THREE.Mesh(new THREE.SphereGeometry(treeLeafsRadius, treeSegments, treeSegments), leafMaterial);
leafs.position.y = treeHeight * 0.05 + treeHeight * 0.45 + treeHeight * 0.1 + treeLeafsRadius / 2;
tree.add(leafs);
tree.castShadow = leafs.castShadow = true;
// Positioning
tree.position.z = -0.5;
garden.add(tree);
var secondTree = tree.clone();
secondTree.position.z = 0.5;
garden.add(secondTree);
/*
* Hammock
*/
var hammockMaterial = new THREE.MeshPhongMaterial({ color: 'red' });
hammockMaterial.flatShading = true;
var topCylinder = new THREE.Mesh(new THREE.CylinderGeometry(1, 1, 0.2, 64));
var minusBox = new THREE.Mesh(new THREE.BoxGeometry(2, 2, 2));
minusBox.position.x = 0.075;
var minusCylinder = new THREE.Mesh(new THREE.CylinderGeometry(1, 1, 0.2, 64));
minusCylinder.position.x = 0.01;
var hammockCSG = new CSG();
hammockCSG.subtract([topCylinder, minusBox, minusCylinder]);
var hammock = hammockCSG.toMesh();
hammock.material = hammockMaterial;
hammock.position.y = 1.15;
hammock.rotation.z = Math.PI / 2;
hammock.castShadow = true;
garden.add(hammock);
var strings = [
new THREE.Vector3(-0.09, 0.225, -0.37), new THREE.Vector3(0, 0.28, -0.41),
new THREE.Vector3(-0.07, 0.225, -0.37), new THREE.Vector3(0, 0.28, -0.41),
new THREE.Vector3(-0.05, 0.225, -0.37), new THREE.Vector3(0, 0.28, -0.41),
new THREE.Vector3(-0.03, 0.225, -0.37), new THREE.Vector3(0, 0.28, -0.41),
new THREE.Vector3( 0 , 0.225, -0.37), new THREE.Vector3(0, 0.28, -0.41),
new THREE.Vector3( 0.03, 0.225, -0.37), new THREE.Vector3(0, 0.28, -0.41),
new THREE.Vector3( 0.05, 0.225, -0.37), new THREE.Vector3(0, 0.28, -0.41),
new THREE.Vector3( 0.07, 0.225, -0.37), new THREE.Vector3(0, 0.28, -0.41),
new THREE.Vector3( 0.09, 0.225, -0.37), new THREE.Vector3(0, 0.28, -0.41),
new THREE.Vector3(0, 0.28, 0.41), new THREE.Vector3(-0.09, 0.225, 0.37),
new THREE.Vector3(0, 0.28, 0.41), new THREE.Vector3(-0.07, 0.225, 0.37),
new THREE.Vector3(0, 0.28, 0.41), new THREE.Vector3(-0.05, 0.225, 0.37),
new THREE.Vector3(0, 0.28, 0.41), new THREE.Vector3(-0.03, 0.225, 0.37),
new THREE.Vector3(0, 0.28, 0.41), new THREE.Vector3( 0 , 0.225, 0.37),
new THREE.Vector3(0, 0.28, 0.41), new THREE.Vector3( 0.03, 0.225, 0.37),
new THREE.Vector3(0, 0.28, 0.41), new THREE.Vector3( 0.05, 0.225, 0.37),
new THREE.Vector3(0, 0.28, 0.41), new THREE.Vector3( 0.07, 0.225, 0.37),
new THREE.Vector3(0, 0.28, 0.41), new THREE.Vector3( 0.09, 0.225, 0.37),
];
var hammockStrings = new THREE.LineSegments(new THREE.BufferGeometry().setFromPoints(strings), new THREE.LineBasicMaterial({color: 'white'}));
garden.add(hammockStrings);
scene.add(garden);
var sun = new THREE.DirectionalLight(0xE3A857);
sun.position.set( 3, 1.5, -3 );
sun.target = groundPlatform;
sun.castShadow = true;
scene.add( sun );
var ambient = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambient);
function drawFrame()
{
scene.rotation.y += 0.005;
renderer.render( scene, camera );
}
</script>
</body>
</html>
|
