Как закрасить грань трехмерного куба?

@Olga28 · Регистрация: 12.06.2021

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

У меня есть код с 3d объектами которые перемещаются в пространстве, с помощью TweenMax, мне нужно сделать заливку поверхностей, но не получается. Я убрала часть граней и оставила только квадрат (чтобы посмотреть как работает заливка), для этого я просто ограничила цикл с 12 до 4. Заливка не работает. Я решила попробовать просто начертить квадрат (moveTo и lineTo) и применить на нем заливку в этом случае работает, а когда пытаешься применить графику на 3d объекте сгенерированном в цикле то заливка не работает. В чем может быть проблема?

Вот код:

PHP/HTML
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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!DOCTYPE HTML>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Tween</title>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script src='./TweenMax.min.js'></script>
<style>
body {
  margin: 0;
  overflow: hidden;
}
canvas {
  width:100vw;
  height:100vh;
}
</style>
</head>
    <body>
<canvas id="scene"></canvas>
<script>
console.clear();
 
// Get the canvas element from the DOM
const canvas = document.querySelector('#scene');
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
// Store the 2D context
const ctx = canvas.getContext('2d');
 
if (window.devicePixelRatio > 1) {
  canvas.width = canvas.clientWidth * 2;
  canvas.height = canvas.clientHeight * 2;
  ctx.scale(2, 2);
}
 
/* ====================== */
/* ====== VARIABLES ===== */
/* ====================== */
let width = canvas.clientWidth; // Width of the canvas
let height = canvas.clientHeight; // Height of the canvas
const dots = []; // Every dots in an array
 
/* ====================== */
/* ====== CONSTANTS ===== */
/* ====================== */
/* Some of those constants may change if the user resizes their screen but I still strongly believe they belong to the Constants part of the variables */
const DOTS_AMOUNT = 1000; // Amount of dots on the screen
const DOT_RADIUS = 2; // Radius of the dots
let PROJECTION_CENTER_X = width / 2; // X center of the canvas HTML
let PROJECTION_CENTER_Y = height / 2; // Y center of the canvas HTML
let FIELD_OF_VIEW = width * 0.8;
const CUBE_LINES = [[0, 1], [1, 3], [3, 2], [2, 0], [2, 6], [3, 7], [0, 4], [1, 5], [6, 7], [6, 4], [7, 5], [4, 5]];
const CUBE_VERTICES = [[-1, -1, -1],[1, -1, -1],[-1, 1, -1],[1, 1, -1],[-1, -1, 1],[1, -1, 1],[-1, 1, 1],[1, 1, 1]];
 var test1 = [[-1, -1, -1],[1, -1, -1],[-1, 1, -1],[1, 1, -1],[-1, -1, 1],[1, -1, 1],[-1, 1, 1],[1, 1, 1]];
 var xPos = 140;
var yPos = 50;
 //{x:20,y:10,x:20,y:10,x:33,y:11,x:22,y:44,x:22,y:55,x:100,y:200};
 
class Cube {
  constructor(x, y, z) {
    this.x = (Math.random() - 0.5) * width;
    this.y = (Math.random() - 0.5) * width;
    this.z = (Math.random() - 0.5) * width;
    this.radius = Math.floor(Math.random() * 12 +  10);
    
    //TweenMax.to(this, Math.random() * 20 + 15, {
    //  x: (Math.random() - 0.5) * (width * 0.5),
    //  y: (Math.random() - 0.5) * (width * 0.5),
    //  z: (Math.random() - 0.5) * width,
    //  repeat: -1,
    //  yoyo: true,
    //  ease: Power2.EaseOut,
    //  delay: Math.random() * -35
    //});
  }
  // Do some math to project the 3D position into the 2D canvas
  project(x, y, z) {
    const sizeProjection = FIELD_OF_VIEW / (FIELD_OF_VIEW + z);
    const xProject = (x * sizeProjection) + PROJECTION_CENTER_X;
    const yProject = (y * sizeProjection) + PROJECTION_CENTER_Y;
    return {
      size: sizeProjection,
      x: xProject,
      y: yProject
    }
  }
  
 
  // Draw the dot on the canvas
  draw() {
    // Do not render a cube that is in front of the camera
    if (this.z < -FIELD_OF_VIEW + this.radius) {
      return;
    }
    //CUBE_LINES.length
    for (let i = 0; i < 4; i++) {
      const v1 = {
        x: this.x + (this.radius * CUBE_VERTICES[CUBE_LINES[i][0]][0]),
        y: this.y + (this.radius * CUBE_VERTICES[CUBE_LINES[i][0]][1]),
        z: this.z + (this.radius * CUBE_VERTICES[CUBE_LINES[i][0]][2])
      };
      const v2 = {
        x: this.x + (this.radius * CUBE_VERTICES[CUBE_LINES[i][1]][0]),
        y: this.y + (this.radius * CUBE_VERTICES[CUBE_LINES[i][1]][1]),
        z: this.z + (this.radius * CUBE_VERTICES[CUBE_LINES[i][1]][2])
      };
      const v1Project = this.project(v1.x, v1.y, v1.z);
      const v2Project = this.project(v2.x, v2.y, v2.z);
      
      
     // ctx.beginPath();
     // ctx.lineWidth = 2;
     // ctx.moveTo(v1Project.x, v1Project.y);
      //ctx.lineTo(v2Project.x, v2Project.y);
     // ctx.fillStyle = "#cc6666";
  //console.log(test1[i][1][0]);
      
    //  ctx.stroke();
      
    //  ctx.fill();
     // console.log(CUBE_LINES.length);
     // console.log(test1.x);
    //  ctx.save();
    //  ctx.lineWidth = 2;
    //  ctx.fillStyle = ctx.strokeStyle = "#cc6666";
    //  ctx.beginPath();
   ///   ctx.moveTo(v1Project.x, v1Project.y);
    //  ctx.lineTo(v2Project.x, v2Project.y);
      //ctx.closePath();
      
    //   ctx.stroke();
     //  ctx.fill();
     //  ctx.restore();
     
      ctx.beginPath();
      ctx.fillStyle = ctx.strokeStyle = "#6666cc";
      //utils.colorToRGB(this.color, this.alpha);
      //*************************************
      //Не работает заливка
       //*************************************
      ctx.moveTo(v1Project.x,v1Project.y);
      ctx.lineTo(v2Project.x,v2Project.y);
       //*************************************
      //Работает заливка
       //*************************************
       ctx.moveTo(xPos,50+yPos);
      ctx.lineTo(xPos+50,50+yPos);
      ctx.lineTo(xPos+50,100+yPos);
      ctx.lineTo(xPos,100+yPos);
      ctx.lineTo(xPos,50+yPos);
       ctx.fill();
      ctx.stroke(); 
     
    
    }
    
    // ctx.globalAlpha = Math.abs(this.z / (width * 0.5));
  }
}
 
function createDots() {
  // Empty the array of dots
  dots.length = 0;
  
  // Create a new dot based on the amount needed
  for (let i = 0; i < 100; i++) {
    dots.push(new Cube());
  }
}
 
/* ====================== */
/* ======== RENDER ====== */
/* ====================== */
function render() {
  // Clear the scene
  ctx.clearRect(0, 0, width, height);
  
  // Loop through the dots array and draw every dot
  for (var i = 0; i < dots.length; i++) {
    dots[i].draw();
  }
  
  window.requestAnimationFrame(render);
}
 
 
// Function called after the user resized its screen
function afterResize () {
  width = canvas.offsetWidth;
  height = canvas.offsetHeight;
  if (window.devicePixelRatio > 1) {
    canvas.width = canvas.clientWidth * 2;
    canvas.height = canvas.clientHeight * 2;
    ctx.scale(2, 2);
  } else {
    canvas.width = width;
    canvas.height = height;
  }
  PROJECTION_CENTER_X = width / 2;
  PROJECTION_CENTER_Y = height / 2;
  FIELD_OF_VIEW = width * 0.8;
  
  createDots(); // Reset all dots
}
 
// Variable used to store a timeout when user resized its screen
let resizeTimeout;
// Function called right after user resized its screen
function onResize () {
  // Clear the timeout variable
  resizeTimeout = window.clearTimeout(resizeTimeout);
  // Store a new timeout to avoid calling afterResize for every resize event
  resizeTimeout = window.setTimeout(afterResize, 500);
}
window.addEventListener('resize', onResize);
 
// Populate the dots array with random dots
createDots();
 
// Render the scene
window.requestAnimationFrame(render);
 
</script>  
</body>
</html>

@shvyrevvg · 14.06.2021, 11:23

Сообщение от Olga28

JavaScript
1
2
3
4
//Не работает заливка
 //*************************************
ctx.moveTo(v1Project.x,v1Project.y);
ctx.lineTo(v2Project.x,v2Project.y);

Olga28, Вы пытаетесь ребро закрасить.

@Olga28 · 20.06.2021, 07:11 **[ТС]**

Olga28, Вы пытаетесь ребро закрасить.

Одну из шести сторон 3d объекта куба.

@shvyrevvg · 20.06.2021, 11:57

Olga28, как-то так

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
ctx.beginPath();
for (let i = 0; i < 4; i++) {
  const v1 = {
    x: this.x + this.radius * CUBE_VERTICES[CUBE_LINES[i][0]][0],
    y: this.y + this.radius * CUBE_VERTICES[CUBE_LINES[i][0]][1],
    z: this.z + this.radius * CUBE_VERTICES[CUBE_LINES[i][0]][2],
  };
  const v2 = {
    x: this.x + this.radius * CUBE_VERTICES[CUBE_LINES[i][1]][0],
    y: this.y + this.radius * CUBE_VERTICES[CUBE_LINES[i][1]][1],
    z: this.z + this.radius * CUBE_VERTICES[CUBE_LINES[i][1]][2],
  };
  const v1Project = this.project(v1.x, v1.y, v1.z);
  const v2Project = this.project(v2.x, v2.y, v2.z);
  if (i == 0) {
    ctx.moveTo(v1Project.x, v1Project.y);
  } else {
    ctx.lineTo(v2Project.x, v2Project.y);
  }
  ctx.lineTo(v2Project.x, v2Project.y);
}
ctx.fillStyle = ctx.strokeStyle = '#6666cc';
ctx.closePath()
ctx.fill()

Новые блоги и статьи Все статьи Все блоги /
Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .