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
|
// Задача: Създайте четиъгълна пирамида с един
// вертикален ръб
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( drawFrame );
document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();
scene.background = new THREE.Color( 'lavender' );
var aspect = window.innerWidth/window.innerHeight;
var camera = new THREE.PerspectiveCamera( 30, aspect );
camera.position.set( 0, 30, 60 );
camera.lookAt( new THREE.Vector3() );
// създаваме най-обща форма (геометрия)
var geometry = new THREE.BufferGeometry();
// в масива vertices[] слагаме координати на върховете
// на триъгълници
var vertices = new Float32Array([
5, 0, 5, // bottom right
-5, 0, 5, // bottom left
-5, 0, -5, // top left
-5, 0, -5, // top left
5, 0, -5, // top right
5, 0, 5, // bottom right
-5, 0, -5, // top left
5, 0, -5, // top right
0, 10, 0, // peak
-5, 0, -5, // top left
-5, 0, 5, // bottom left
0, 10, 0, // peak
5, 0, -5, // top right
5, 0, 5, // bottom right
0, 10, 0, // peak
-5, 0, 5, // bottom left
5, 0, 5, // bottom right
0, 10, 0, // peak
]);
// записваме данните за върховете в геометрията
// числото 3 означава, че три последователни
// стойности определят един връх
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
// за правилно оцветяване молим Three.js
// да изчисли нормалните вектори
geometry.computeVertexNormals();
// общия обект
var object = new THREE.Group();
scene.add( object );
// ползваме една и съща форма за три различни
// обекта - един със стени, един с ръбове и
// един само с върхове
object.add( new THREE.Mesh( geometry, new THREE.MeshPhongMaterial({side:THREE.DoubleSide}) ));
object.add( new THREE.Mesh( geometry, new THREE.MeshBasicMaterial({color:'red', wireframe:true}) ));
object.add( new THREE.Points( geometry, new THREE.PointsMaterial({color:'black', size:1}) ));
scene.add( new THREE.HemisphereLight( 'yellow', 'lightsalmon' ) );
function drawFrame()
{
object.rotation.x += 0.005;
object.rotation.y += 0.004;
object.rotation.z += 0.003;
renderer.render( scene, camera );
}
|
