Summary Files Commits Branches @commit @diff @stats
path: root / Year 2 / Computer Graphics Fundamentals / 06-Practice-07.11.2022 / 04.js
blob: 6f51b999d1db52794acd7a5196cb5d1f76c22172 (plain) (blame)
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
// Задача: направете геомаркер чрез плъзгане на
// форма. Геомаркерът да има кръгъл отвор.


var renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( drawFrame );
document.body.appendChild( renderer.domElement );

var scene = new THREE.Scene();
scene.background = new THREE.Color( 'white' );
		
var aspect = window.innerWidth/window.innerHeight;
var camera = new THREE.PerspectiveCamera( 30, aspect );
camera.position.set( 0, 3, 30 );
camera.lookAt( new THREE.Vector3() );


// пример с квадратична крива, а как се прави
// отвор ще трябва сами да разберете (има пример
// на сайта на Three.js точно за това)
var shape = new THREE.Shape();
shape.moveTo(  0, -3 );
shape.quadraticCurveTo( -3, 3, 0, 3 );
shape.quadraticCurveTo( 3, 3, 0, -3 );

var hole = new THREE.Path();
hole.ellipse(0, 1.5, 1, 1);
shape.holes = [hole];

// създаване на 3D формата на геомаркера
var extrudeSettings = { depth: 1, bevelEnabled: true, bevelSegments: 2, steps: 2, bevelSize: 0.1, bevelThickness: 0.1, curveSegments: 60 };
var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );

var object = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( {specular: 'white'} ) );
scene.add( object );


// светлини
var light = new THREE.PointLight( 'dodgerblue', 0.75 ); // интензитет 0.75
light.position.set( 200, 50, 0 );
scene.add( light );

light = new THREE.PointLight( 'dodgerblue', 0.75 ); // интензитет 0.75
light.position.set( -200, 50, 0 );
scene.add( light );

light = new THREE.PointLight( 'hotpink', 0.75 ); // интензитет 0.75
light.position.set( 0, 50, 200 );
scene.add( light );

light = new THREE.PointLight( 'fuchsia', 0.75 ); // интензитет 0.75
light.position.set( 0, 50, -200 );
scene.add( light );

function drawFrame()
{
	scene.rotation.y += 0.005;
	
	renderer.render( scene, camera );
}