Подскажите как лучше сделать

@Universa1 · Регистрация: 10.04.2013

Студворк — интернет-сервис помощи студентам

Вообщем суть такая есть 3 файла которые рисуют куб -сферу(с разными гранями)

JavaScript
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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
// Получить случайный цвет
function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}
 
// Подготовим объект
function prepareObject(o) {
    o.colors = new Array();
 
    // prepare normals
    o.normals = new Array();
    for (var i = 0; i < o.faces.length; i++) {
        o.normals[i] = [0, 0, 0];
 
        o.colors[i] = getRandomColor();
    }
 
// Рассчитываем максимальную позицию
    o.center = [0, 0, 0];
    for (var i = 0; i < o.points.length; i++) {
        o.center[0] += o.points[i][0];
        o.center[1] += o.points[i][1];
        o.center[2] += o.points[i][2];
    }
 
    // Подготовим расстояния
    o.distances = new Array();
    for (var i = 1; i < o.points.length; i++) {
        o.distances[i] = 0;
    }
 
    // Вычисляем среднее положение центра
    o.points_number = o.points.length;
    o.center[0] = o.center[0] / (o.points_number - 1);
    o.center[1] = o.center[1] / (o.points_number - 1);
    o.center[2] = o.center[2] / (o.points_number - 1);
 
    o.faces_number = o.faces.length;
    o.axis_x = [1, 0, 0];
    o.axis_y = [0, 1, 0];
    o.axis_z = [0, 0, 1];
}
 
// Cube объект
function cube() {
 
    
// Подготовим точки и грани для куба
    this.points=[
        [0,0,0],
        [100,0,0],
        [100,100,0],
        [0,100,0],
        [0,0,100],
        [100,0,100],
        [100,100,100],
        [0,100,100],
        [50,50,100],
        [50,50,0],
    ];
 
    this.faces=[
        [0,4,5],
        [0,5,1],
        [1,5,6],
        [1,6,2],
        [2,6,7],
        [2,7,3],
        [3,7,4],
        [3,4,0],
        [8,5,4],
        [8,6,5],
        [8,7,6],
        [8,4,7],
        [9,5,4],
        [9,6,5],
        [9,7,6],
        [9,4,7],
    ];
 
    prepareObject(this);
}
 
// Сфера объекта
function sphere(n) {
    var delta_angle = 2 * Math.PI / n;
 
    // Подготовим вершины (точек) сферы
    var vertices = [];
    for (var j = 0; j < n / 2 - 1; j++) {
        for (var i = 0; i < n; i++) {
            vertices[j * n + i] = [];
            vertices[j * n + i][0] = 100 * Math.sin((j + 1) * delta_angle) * Math.cos(i * delta_angle);
            vertices[j * n + i][1] = 100 * Math.cos((j + 1) * delta_angle);
            vertices[j * n + i][2] = 100 * Math.sin((j + 1) * delta_angle) * Math.sin(i * delta_angle);
        }
    }
    vertices[(n / 2 - 1) * n] = [];
    vertices[(n / 2 - 1) * n + 1] = [];
 
    vertices[(n / 2 - 1) * n][0] = 0;
    vertices[(n / 2 - 1) * n][1] =  100;
    vertices[(n / 2 - 1) * n][2] =  0;
 
    vertices[(n / 2 - 1) * n + 1][0] = 0;
    vertices[(n / 2 - 1) * n + 1][1] = -100;
    vertices[(n / 2 - 1) * n + 1][2] = 0;
 
    this.points = vertices;
 
    // prepare faces
    var faces = [];
    for (var j = 0; j < n / 2 - 2; j++) {
        for (var i = 0; i < n - 1; i++) {
            faces[j * 2 * n + i] = [];
            faces[j * 2 * n + i + n] = [];
 
            faces[j * 2 * n + i][0] = j * n + i;
            faces[j * 2 * n + i][1] = j * n + i + 1;
            faces[j * 2 * n + i][2] = (j + 1) * n + i + 1;
            faces[j * 2 * n + i + n][0] = j * n + i;
            faces[j * 2 * n + i + n][1] = (j + 1) * n + i + 1;
            faces[j * 2 * n + i + n][2] = (j + 1) * n + i;
        }
 
        faces[j * 2 * n + n - 1] = [];
        faces[2 * n * (j + 1) - 1] = [];
 
        faces[j * 2 * n + n - 1  ][0] = (j + 1) * n - 1;
        faces[j * 2 * n + n - 1  ][1] = (j + 1) * n;
        faces[j * 2 * n + n - 1  ][2] = j * n;
        faces[2 * n * (j + 1) - 1][0] = (j + 1) * n - 1;
        faces[2 * n * (j + 1) - 1][1] = j * n + n;
        faces[2 * n * (j + 1) - 1][2] = (j + 2) * n - 1;
    }
    for (var i = 0; i < n - 1; i++) {
        faces[n * (n - 4) + i] = [];
        faces[n * (n - 3) + i] = [];
 
        faces[n * (n - 4) + i][0] = (n / 2 - 1) * n;
        faces[n * (n - 4) + i][1] = i;
        faces[n * (n - 4) + i][2] = i + 1;
        faces[n * (n - 3) + i][0] = (n / 2 - 1) * n + 1;
        faces[n * (n - 3) + i][1] = (n / 2 - 2) * n + i + 1;
        faces[n * (n - 3) + i][2] = (n / 2 - 2) * n + i;
    }
 
    faces[n * (n - 3) - 1] = [];
    faces[n * (n - 2) - 1] = [];
 
    faces[n * (n - 3) - 1][0] = (n / 2 - 1) * n;
    faces[n * (n - 3) - 1][1] = n - 1;
    faces[n * (n - 3) - 1][2] = 0;
    faces[n * (n - 2) - 1][0] = (n / 2 - 1) * n + 1;
    faces[n * (n - 2) - 1][1] = (n / 2 - 2) * n;
    faces[n * (n - 2) - 1][2] = (n / 2 - 2) * n + n - 1;
 
    this.faces=faces;
 
    prepareObject(this);
}

JavaScript
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
function getRotationPar(center, vector, t) {
    var result = new Array();
 
    var u_u = vector[0] * vector[0];
    var v_v = vector[1] * vector[1];
    var w_w = vector[2] * vector[2]; 
 
    var v_v_p_w_w = (v_v + w_w);
    var u_u_p_w_w = (u_u + w_w);
    var u_u_p_v_v = (u_u + v_v);
 
    var b_v_p_c_w = center[1] * vector[1] + center[2] * vector[2];
    var a_u_p_c_w = center[0] * vector[0] + center[2] * vector[2];
    var a_u_p_b_v = center[0] * vector[0] + center[1] * vector[1];
    var b_w_m_c_v = center[1] * vector[2] - center[2] * vector[1];
    var c_u_m_a_w = center[2] * vector[0] - center[0] * vector[2];
    var a_v_m_b_u = center[0] * vector[1] - center[1] * vector[0];
 
    var den = v_v+u_u+w_w;
 
    result[0] = den;
 
    result[1] = v_v_p_w_w;
    result[2] = u_u_p_w_w;
    result[3] = u_u_p_v_v;
 
    result[4] = center[0] * v_v_p_w_w;
    result[5] = center[1] * u_u_p_w_w;
    result[6] = center[2] * u_u_p_v_v;
 
    result[7] = b_v_p_c_w;
    result[8] = a_u_p_c_w;
    result[9] = a_u_p_b_v;
 
    result[10] = Math.cos(t);
 
    result[11] = Math.sin(t) * Math.sqrt(den);
 
    result[12] = b_w_m_c_v;
    result[13] = c_u_m_a_w;
    result[14] = a_v_m_b_u;
 
    result[15] = center[0];
    result[16] = center[1];
    result[17] = center[2];
    result[18] = vector[0];
    result[19] = vector[1];
    result[20] = vector[2];
 
    return result;
}
 
function rotate(p, point) {
    var p_20_p_2 = p[20] * point[2];
    var p_19_p_1 = p[19] * point[1];
    var p_18_p_0 = p[18] * point[0];
    var u_x_p_v_y_p_w_z = p_18_p_0 + p_19_p_1 + p_20_p_2;
    
    var temp0 = point[0];
    var temp1 = point[1];
 
    point[0] = (p[4]+p[18]*(-p[7]+u_x_p_v_y_p_w_z)+((temp0-p[15])*p[1]+p[18]*(p[7]-p_19_p_1-p_20_p_2))*p[10]+p[11]*(p[12]-p[20]*temp1+p[19]*point[2]))/p[0];
    point[1] = (p[5]+p[19]*(-p[8]+u_x_p_v_y_p_w_z)+((temp1-p[16])*p[2]+p[19]*(p[8]-p_18_p_0-p_20_p_2))*p[10]+p[11]*(p[13]+p[20]*temp0-p[18]*point[2]))/p[0];
    point[2] = (p[6]+p[20]*(-p[9]+u_x_p_v_y_p_w_z)+((point[2]-p[17])*p[3]+p[20]*(p[9]-p_18_p_0-p_19_p_1))*p[10]+p[11]*(p[14]-p[19]*temp0+p[18]*temp1))/p[0];
}
 
function translate(vector, point) {
    point[0] = point[0] + vector[0];
    point[1] = point[1] + vector[1];
    point[2] = point[2] + vector[2];
}
 
function scale(vector, point) {
    point[0] = point[0] * vector[0];
    point[1] = point[1] * vector[1];
    point[2] = point[2] * vector[2];
}
 
function translateObj(vector, obj) {
    translate(vector, obj.center);
 
    for (var i = 0; i < obj.points_number; i++) {
        translate(vector, obj.points[i]);
    }
}
 
function scaleObj(vector, obj) {
    var center = obj.center;
    var a = [-obj.center[0], -obj.center[1], -obj.center[2]];
    translateObj(a, obj);
    for (var i = 0; i < obj.points_number; i++) {
        scale(vector, obj.points[i]);
    }
    translateObj(center, obj);
}
 
function rotateObj(parametri1, parametri2, obj) {
    rotate(parametri1, obj.center);
    rotate(parametri2, obj.axis_x);
    rotate(parametri2, obj.axis_y);
    rotate(parametri2, obj.axis_z);
    
    for (var i = 0; i < obj.faces_number; i++) {
        rotate(parametri2, obj.normals[i]);
    }
 
    for (var j = 0; j < obj.points_number; j++) {
        rotate(parametri1, obj.points[j]);
    }
}
 
function project(distance, point, x, y) {
    var result = new Array();
 
    result[0] = point[0] * distance / point[2] + x;
    result[1] = y - point[1] * distance / point[2];
    result[2] = distance;
 
    return result;
}

JavaScript
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
// Внутренние переменные
 
var canvas, ctx;
var vAlpha = 0.5;
var vShiftX = vShiftY = 0;
var distance = -700;
var vMouseSens = 0.05;
var iHalfX, iHalfY;
 
// Инициализация
function sceneInit() {
   // Подготовим объекты
    canvas = document.getElementById('scene');
    ctx = canvas.getContext('2d');
 
    iHalfX = canvas.width / 2;
    iHalfY = canvas.height / 2;
 
  // Начальный масштаб и перевод
    scaleObj([3, 3, 3], obj);
    translateObj([-obj.center[0], -obj.center[1], -obj.center[2]],obj);
    translateObj([0, 0, -1000], obj);
 
    // Присоединить обработчики событий
    document.onkeydown = handleKeydown;
    canvas.onmousemove = handleMousemove;
 
   // Основной цикл сцен
    setInterval(drawScene, 25);
}
 
// Обработчик события OnKeyDown
function handleKeydown(e) {
    kCode = ((e.which) || (e.keyCode));
    switch (kCode) {
        case 38: vAlpha = (vAlpha <= 0.9) ? (vAlpha + 0.1) : vAlpha; break; // Up key
        case 40: vAlpha = (vAlpha >= 0.2) ? (vAlpha - 0.1) : vAlpha; break; // Down key
    }
}
 
// Обработчик события OnMouseMove
function handleMousemove(e) {
    var x = e.pageX - canvas.offsetLeft;
    var y = e.pageY - canvas.offsetTop;
 
    if ((x > 0) && (x < canvas.width) && (y > 0) && (y < canvas.height)) {
        vShiftY = vMouseSens * (x - iHalfX) / iHalfX;
        vShiftX = vMouseSens * (y - iHalfY) / iHalfY;
    }
}
 
// Рисуем основную функцию сцену
function drawScene() {
     // Очистка полотна
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 
    // Установить цвет заливки, цвет обводки, толщину линии.
    ctx.strokeStyle = 'rgb(0,0,0)';
    ctx.lineWidth = 0.5;
    ctx.globalAlpha= vAlpha;
 
    // Вертикальное и горизонтальное вращение
    var vP1x = getRotationPar([0, 0, -1000], [1, 0, 0], vShiftX);
    var vP2x = getRotationPar([0, 0, 0], [1, 0, 0], vShiftX);
    var vP1y = getRotationPar([0, 0, -1000], [0, 1, 0], vShiftY);
    var vP2y = getRotationPar([0, 0, 0], [0, 1, 0], vShiftY);
    rotateObj(vP1x, vP2x, obj);
    rotateObj(vP1y, vP2y, obj);
 
    // Пересчитываем расстояния
    for (var i = 0; i < obj.points_number; i++) {
        obj.distances[i] = Math.pow(obj.points[i][0],2) + Math.pow(obj.points[i][1],2) + Math.pow(obj.points[i][2], 2);
    }
 
    // Подготовить массив с плоскостью треугольников (с расчетом максимальное расстояние для каждой грани)
    var iCnt = 0;
    var aFaceTriangles = new Array();
    for (var i = 0; i < obj.faces_number; i++) {
        var max = obj.distances[obj.faces[i][0]];
        for (var f = 1; f < obj.faces[i].length; f++) {
            if (obj.distances[obj.faces[i][f]] > max)
                max = obj.distances[obj.faces[i][f]]; 
        }
        aFaceTriangles[iCnt++] = {faceVertex:obj.faces[i], faceColor:obj.colors[i], distance:max};
    }
    aFaceTriangles.sort(sortByDistance);
 
   // Подготовка массива с прогнозируемыми пунктами
    var aPrjPoints = new Array();
    for (var i = 0; i < obj.points.length; i++) {
        aPrjPoints[i] = project(distance, obj.points[i], iHalfX, iHalfY);
    }
 
   // Нарисовать объект
    for (var i = 0; i < iCnt; i++) {
 
        ctx.fillStyle = aFaceTriangles[i].faceColor;
 
       
        ctx.beginPath();
 
        // Плоскость индекса вершины
        var iFaceVertex = aFaceTriangles[i].faceVertex;
 
       // Переместить в исходное положение
        ctx.moveTo(aPrjPoints[iFaceVertex[0]][0], aPrjPoints[iFaceVertex[0]][1]);
 
        // построить треугольник
        for (var z = 1; z < aFaceTriangles[i].faceVertex.length; z++) {
            ctx.lineTo(aPrjPoints[iFaceVertex[z]][0], aPrjPoints[iFaceVertex[z]][1]);
        }
 
        
        ctx.closePath();
        ctx.stroke();
        ctx.fill();
    }
}
 
// Функция сортировки
function sortByDistance(x, y) {
    return (y.distance - x.distance);
}
 
// Инициализация
if (window.attachEvent) {
    window.attachEvent('onload', sceneInit);
} else {
    if (window.onload) {
        var curronload = window.onload;
        var newonload = function() {
            curronload();
            sceneInit();
        };
        window.onload = newonload;
    } else {
        window.onload = sceneInit;
    }
}

я так понимаю что 2, 3 файл не содержит данных о фигурах они просто рисуют и производят некие действия с фигурами
в 1 же фалу едет описание куба и сферы,так вот суть вопроса как сделать что бы разные фигуры задавались например файлом .obj чтобы не прописывать каждый раз отдельную фигуры т,е нужен общий код

@8Observer8 · 04.10.2016, 19:46

Пример, в котором выводится голова обезьяны из Blender. Я её немного покрасил. Можете подсунуть любую раскрашенную модель (но без текстур).

Имя модели менять в строке 81:

JavaScript
1
2
    // Start reading the OBJ file
    readOBJFile('ColoredMonkey.obj', gl, model, 60, true);

Запустить демку в браузере
Скачать архив с исходниками

@Universa1 · 04.10.2016, 20:15 **[ТС]**

это не совсем то что я имел ввиду,но спасибо попробую разобраться в нем поподробнее и некоторые части заберу ,но все же вопрос остается открытым

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@Universa1 0 / 0 / 2 Регистрация: 10.04.2013 Сообщений: 61
	04.10.2016, 20:15 [ТС]
	это не совсем то что я имел ввиду,но спасибо попробую разобраться в нем поподробнее и некоторые части заберу ,но все же вопрос остается открытым 0