Форум программистов, компьютерный форум, киберфорум
JavaScript: HTML5 Canvas
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
 
Рейтинг 4.83/30: Рейтинг темы: голосов - 30, средняя оценка - 4.83
383 / 23 / 2
Регистрация: 12.06.2021
Сообщений: 211
Записей в блоге: 2

При повороте 3d модели остается след, clearRect не работает?

10.12.2021, 05:40. Показов 6691. Ответов 42
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
С помощью moveTo и lineTo создала несколько 3d-объектов, при нажатии кнопок клавиатуры происходит поворот 3d-объектов однако остается след. В функцию my_down, добавила ctx.clearRect(0, 0, cvs.width, cvs.height);. В этой же функции происходит повторная прорисовка объектов, my_down срабатывает при нажатии кнопки keydown(addEventListener). Не очищается холст и остаются следы. Как исправить? Вот код:
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
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
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
const cvs = document.getElementById("canvas");
const ctx = cvs.getContext("2d");
 
var cam;
var pnts = new Array();
 
 
 
var scObj1;
var scObj2;
var scObj3;
var scObj4;
var scObj5;
var scObj6;
var scObj7;
var scObj8;
 
var up = false;
var down = false;
var right = false;
var left = false;
 
var dang = 3;
var newp = new Array();
 
 
 
 
 
Utils = function()
{
  this.DistInPlan = 0; 
  this.AngInPlan = 0; 
  this.sin_A = 0;
  this.cos_A = 0;
  this._Move = function(P,BP)
  {
    return this._3DPoint(P.X+BP.X,P.Y+BP.Y, P.Z+BP.Z)
  }
  this._2DPoint = function(aX,aY)
  {
    return {X:aX,Y:aY}
  }
  this._3DPoint = function(aX,aY,aZ)
  {
    return {X:aX,Y:aY,Z:aZ}
  }
  this.ScaleVector = function(A, Scale)
  {
    var ScaleVector = {X:0,Y:0,Z:0};
          ScaleVector.X = A.X*Scale;
          ScaleVector.Y = A.Y*Scale;
          ScaleVector.Z = A.Z*Scale;
          return ScaleVector;
  }
  this.VectorProduct = function(A,B)
  {
     var VectorProduct = {X:0,Y:0,Z:0};
         
          VectorProduct.X = A.Y*B.Z - B.Y*A.Z;
          VectorProduct.Y = A.Z*B.X - B.Z*A.X;
          VectorProduct.Z = A.X*B.Y - B.X*A.Y;
          return VectorProduct;
  }
  this.RotatePointInPlan = function(P,Ang)
  {
      DistInPlan = Math.sqrt(P.X*P.X + P.Y*P.Y);
          AngInPlan = Math.atan2(P.Y, P.X);
          sin_A = Math.sin(AngInPlan + Ang);
          cos_A = Math.cos(AngInPlan + Ang);
         
          
          P.X = DistInPlan*cos_A;
          P.Y = DistInPlan*sin_A;
  }
  this.VectorAddition3D = function(A,B)
  {
    return this._3DPoint(A.X+B.X,A.Y + B.Y, A.Z + B.Z);
  }
}
 
var ut = new Utils();
 
CameraView3 = function(_LookPoint,_DistToLookPoint,_AngleSlope,_AngleTurn,_ViewAngle,_DistLeftRightCamera,
WidthScreen, HeightScreen)
{
  this.fCoordCamera = 0;
  this.fCamera = 0;
  this.ut = new Utils();
  this.Xaxis;
    this.Yaxis;
    this.Zaxis;
    this.fAngleSlope = _AngleSlope * (Math.PI / 180);
    this.fDistToLookPoint;
    this.fDistLeftRight = _DistLeftRightCamera;
    this._3DPoint;
    this.fLookPoint = _LookPoint;
    this.fLeftCam;
 
    this.DistToScreen;
    this.HalfWidthScr;
    this.HalfHeightScr;
    this.HalfDiagonal;
    this.fAngleTurn = _AngleTurn * (Math.PI / 180);
    this.fViewAngle = _ViewAngle * (Math.PI / 180);
    this.fRightCam;
    this.AngleSlopeCamera = _AngleSlope;
    this.AngleTurnCamera = _AngleTurn;
 
 
 
    
    this.main = function()
    {
     this.CalcOrientation();
     
     this.SetDistToLookPoint(_DistToLookPoint);
       this.SetBoundsToScreen(550, 400);
    }
    this.CalcOrientation = function()
    {
       this.Xaxis = this.ut._3DPoint(1,0,0);
             this.Yaxis = this.ut._3DPoint(0, Math.cos(this.fAngleSlope), Math.sin(this.fAngleSlope));
             
             this.ut.RotatePointInPlan(this.Xaxis, this.fAngleTurn);
         this.ut.RotatePointInPlan(this.Yaxis, this.fAngleTurn);
             
             this.Zaxis = this.ut.VectorProduct(this.Xaxis, this.Yaxis);
    }
    this.CalcCoordOfCamera = function()
    {
    
      this.fCoordCamera = this.ut.VectorAddition3D(this.ut.ScaleVector(this.Zaxis, this.fDistToLookPoint), this.ut._3DPoint(this.fLookPoint.X, this.fLookPoint.Y, 0));
     
      this.fLeftCam = this.ut.VectorAddition3D(this.ut.ScaleVector(this.Xaxis, -this.fDistLeftRight/2), this.fCoordCamera);
             
            this.fRightCam = this.ut.VectorAddition3D(this.ut.ScaleVector(this.Xaxis, this.fDistLeftRight/2), this.fCoordCamera);
            
            
            
    }
    
      this.ScaleVector = function(A, Scale)
        {
         
          return {x:A.X*Scale,y:A.Y*Scale,z:A.z*Scale};
        }
        
        this.GetPixelCoord = function(X,Y,Z)
        {
            var vect = new typeObject(X,Y,Z);
            vect.X = X - this.fCoordCamera.X;
            
            vect.Y = Y - this.fCoordCamera.Y;
        
          vect.Z = Z - this.fCoordCamera.Z;
        
            
        }
        
        this.GetAngleSlope = function(AngTurnInDeg)
        {
            this.fAngleSlope = this.AngTurnInDeg * (Math.PI / 180);
            
        }
        
        this.GetAngleTurn = function(AngTurnInDeg)
        {
            this.fAngleTurn = this.AngTurnInDeg * (Math.PI / 180);
              
        }
        
        this.SetAngleSlope = function(AngTurnInDeg)
        {
            this.fAngleSlope = AngTurnInDeg * (Math.PI / 180);
            
            this.CalcOrientation();
            this.CalcCoordOfCamera();
            
        }
        
        this.SetAngleTurn = function(AngTurnInDeg)
        {
          this.fAngleTurn = AngTurnInDeg * (Math.PI / 180);
          
          this.CalcOrientation();
          this.CalcCoordOfCamera();  
        }
        
        this.GetLRPixelCoord = function(X,Y,Z,LeftP,RightP)
        {
            
            var vect = new typeObject(X,Y,Z);
            var E, D;
            
            vect.X = X - this.fLeftCam.X;
            
            vect.Y = Y - this.fLeftCam.Y;
            
            vect.Z = Z - this.fLeftCam.Z;
            
        
            
            E = this.Zaxis.X*vect.X + this.Zaxis.Y*vect.Y + this.Zaxis.Z*vect.Z;
            
            if (E == 0)
            {
                D = 0;
            }
            else
            {
                D = -this.DistToScreen/E;
            }
                
            
            vect.X = vect.X*D;
            vect.Y = vect.Y*D;
            vect.Z = vect.Z*D;
            
            
            
            LeftP.x = Math.round(this.HalfWidthScr + this.Xaxis.X*vect.X + this.Xaxis.Y*vect.Y + this.Xaxis.Z*vect.Z);
        LeftP.y = Math.round(this.HalfHeightScr - this.Yaxis.X*vect.X - this.Yaxis.Y*vect.Y - this.Yaxis.Z*vect.Z);
            
            
            
            vect.X = X - this.fRightCam.X;
            
            vect.Y = Y - this.fRightCam.Y;
            vect.Z = Z - this.fRightCam.Z;
            
            
            
            
            
            
             E = this.Zaxis.X*vect.X + this.Zaxis.Y*vect.Y + this.Zaxis.Z*vect.Z;
            
            if (E == 0)
            {
                D = 0;
            }
            else
            {
                D = -this.DistToScreen/E;
            }
            
            
             vect.X = vect.X*D;
             vect.Y = vect.Y*D;
             vect.Z = vect.Z*D;
             RightP.x = Math.round(this.HalfWidthScr + this.Xaxis.X*vect.X + this.Xaxis.Y*vect.Y + this.Xaxis.Z*vect.Z);
         RightP.y = Math.round(this.HalfHeightScr - this.Yaxis.X*vect.X - this.Yaxis.Y*vect.Y - this.Yaxis.Z*vect.Z);
            
            
        }
 
    
    
    this.SetDistToLookPoint = function(DistToLP)
    {
      this.fDistToLookPoint = DistToLP;
          this.CalcCoordOfCamera()
    }
    this.SetBoundsToScreen = function(WidthScreen, HeightScreen)
    {
      this.HalfWidthScr = WidthScreen/2;
            
            this.HalfHeightScr = HeightScreen/2;
        this.HalfDiagonal = Math.sqrt((this.HalfWidthScr*this.HalfWidthScr) + (this.HalfHeightScr*this.HalfHeightScr));
            
            this.CalcDistToScreen();
    }
    this.CalcDistToScreen = function()
        {
            this.DistToScreen = this.HalfDiagonal/Math.tan(this.fViewAngle/2);
            
            
        }
        
    
}
 
typeObject = function(X,Y,Z)
{
   this.X = 0;
     this.Y = 0;
     this.Z = 0;
}
 
Scene3D = function(x,y,z)
{
   this.X = x;
     this.Y = y;
     this.Z = z;
     
}
 
T3DObject = function(x,y,z) {
  this.ListObj = new Array();
    this.VisibleObj = new Array();
    this.CenterPoint = ut._3DPoint(x,y,z);
    
    this.add4 = function(P1,P2,P3,P4,R1,R2,R3,R4)
    {
            
            this.add3(P1,P2,P3, R1,R2,false);
            this.add3(P1,P3,P4, false,R3,R4);
    }
    this.add3 = function(P1,P2,P3, R1,R2,R3)
    {
            
    
            var ut = new Utils();
            T3Dtri = new T3DTriangle(ut._Move(P1,this.CenterPoint),
                                     ut._Move(P2,this.CenterPoint),
                                     ut._Move(P3,this.CenterPoint),
                                     R1,R2,R3);
            
            
            this.ListObj.push(T3Dtri);
            
    }
    
 
    
    this.CalcScreenCoords1 = function(ctx,cam)
        {
         
 
            VisibleObj = [];
            for (var i = 0; i < this.ListObj.length; i++)
            {
                
                
                 TR = new T3DTriangle(
                   this.ListObj[i].RP[1],
                   this.ListObj[i].RP[2],
                   this.ListObj[i].RP[3],
                                     this.ListObj[i].RV[1],
                                     this.ListObj[i].RV[2],
                                   this.ListObj[i].RV[3]);
 
              TR.CalcScreenPoints(ctx,cam);
                this.VisibleObj.push(TR);
    
                
            }
        }
        
        this.DrawRight = function(ctx)
        {
            var penColor = 0x0000FF;
             
                ctx.beginPath();
              ctx.save();
               
            
                var l = 0;
                for (var j = 0; j < this.VisibleObj.length; j++)
                {
          for (var i = 1; i<=3; i++)
          {
          
            
            if (this.VisibleObj[j].RV[i])
            {
               
               l = Math.floor(i % 3)+1;
               
              
               ctx.moveTo(this.VisibleObj[j].RSP[i-1].x,this.VisibleObj[j].RSP[i-1].y);
               ctx.lineTo(this.VisibleObj[j].RSP[l-1].x,this.VisibleObj[j].RSP[l-1].y);
               ctx.strokeStyle = "0x0000FF";
               ctx.stroke(); 
              
          
              
            }
 
                }
                }
            
            ctx.restore();
    }
        this.DrawLeft = function(ctx)
        {
                var penColor = 0x0000FF;
             
                ctx.beginPath();
              ctx.save();
               
            
                var l = 0;
                for (var j = 0; j < this.VisibleObj.length; j++)
                {
          for (var i = 1; i<=3; i++)
          {
          
            
            if (this.VisibleObj[j].RV[i])
            {
               
               l = Math.floor(i % 3)+1;
               
              
               ctx.moveTo(this.VisibleObj[j].LSP[i-1].x,this.VisibleObj[j].LSP[i-1].y);
               ctx.lineTo(this.VisibleObj[j].LSP[l-1].x,this.VisibleObj[j].LSP[l-1].y);
               ctx.strokeStyle = "0x0000FF";
               ctx.stroke(); 
              
          
              
            }
 
                }
                }
            
            ctx.restore();
            
            
        }
    
}
 
 
Point = function()
{
  this.x = 0;
  this.y = 0;
}
 
T3DTriangle = function(Pnt1,Pnt2,Pnt3,Rbr1,Rbr2,Rbr3)
{
      this.RP = new Array();
        this.RV = new Array();
        
        this.RP[1] = Pnt1;
        this.RP[2] = Pnt2;
    this.RP[3] = Pnt3;
    this.RV[1] = Rbr1;
    this.RV[2] = Rbr2;
    this.RV[3] = Rbr3;
 
        this.LSP = new Array();
        this.RSP = new Array();
        
        this.LSP1 = new Array();
        this.RSP1 = new Array();
        this.t1;
        this.t2;
        
        
        this.CalcScreenPoints = function(ctx,cam)
        {
            
            
        
      for(var ii = 1; ii <= 3; ii++)
            {
                
                var p1 = new Point();
                var p2 = new Point();
                this.LSP.push(p1);
                this.RSP.push(p2);
                 
            
            }
            
          
            for (var i = 1; i <= 3; i++)
            {
       
                cam.GetLRPixelCoord(this.RP[i].X, this.RP[i].Y, this.RP[i].Z, this.LSP[i-1], this.RSP[i-1]);
           }
 
            
        }
        
        
        this.clearCanvas = function(ctx)
        {
            ctx.clearRect(0, 0, cvs.width, cvs.height);
        }
        
    
}
 
 
 
 
 
 
 
 
 
 
function draw()
{
  
  ctx.clearRect(0, 0, cvs.width, cvs.height); 
  ctx.fillStyle = '#7d7';
 
 
 scObj1.DrawRight(ctx);
 //scObj1.DrawLeft(ctx);
 
 scObj2.DrawRight(ctx);
 //scObj2.DrawLeft(ctx);
 
 
 scObj3.DrawRight(ctx);
 //scObj3.DrawLeft(ctx);
 
 scObj4.DrawRight(ctx);
 //scObj4.DrawLeft(ctx);
 
 scObj5.DrawRight(ctx);
 //scObj5.DrawLeft(ctx);
 
 scObj6.DrawRight(ctx);
 //scObj6.DrawLeft(ctx);
 
 scObj7.DrawRight(ctx);
 //scObj7.DrawLeft(ctx);
 
 scObj8.DrawRight(ctx);
 //scObj8.DrawLeft(ctx);
 
 
 
setInterval(function()
{
 
      if(right)
            {
                cam.AngleTurnCamera = cam.AngleTurnCamera - dang;
                cam.SetAngleTurn(cam.AngleTurnCamera);
            }
            if(up)
            {
                cam.AngleSlopeCamera = cam.AngleSlopeCamera - dang;
              cam.SetAngleSlope(cam.AngleSlopeCamera);
                
            }
            if(left)
            {
              cam.AngleTurnCamera = cam.AngleTurnCamera + dang;
                cam.SetAngleTurn(cam.AngleTurnCamera);
            }
            if(down)
            {
                cam.AngleSlopeCamera = cam.AngleSlopeCamera + dang;
                cam.SetAngleSlope(cam.AngleSlopeCamera);
            }
            
 
}, 33) 
 
   
    
}
 
function my_down(e)
{
  
   ctx.clearRect(0, 0, cvs.width, cvs.height); 
   ctx.fillStyle = '#7d7';
    switch(e.keyCode)
            {
                case 37:
                    right=true;
                break;
                case 38:
                    up=true;
                break;
                case 39:
                    left=true;
                break;
                case 40:
                    down=true;
                break;
            }
        scObj1.CalcScreenCoords1(ctx,cam);
        scObj1.DrawRight(ctx);
        scObj2.CalcScreenCoords1(ctx,cam);
        scObj2.DrawRight(ctx);
        scObj3.CalcScreenCoords1(ctx,cam);
        scObj3.DrawRight(ctx);
        scObj4.CalcScreenCoords1(ctx,cam);
        scObj4.DrawRight(ctx);
        scObj5.CalcScreenCoords1(ctx,cam);
        scObj5.DrawRight(ctx);
        scObj6.CalcScreenCoords1(ctx,cam);
        scObj6.DrawRight(ctx);
        scObj7.CalcScreenCoords1(ctx,cam);
        scObj7.DrawRight(ctx);
        scObj8.CalcScreenCoords1(ctx,cam);
        scObj8.DrawRight(ctx);
}
 
function my_up(e)
{
      switch(e.keyCode)
            {
                case 37:
                    right=false;
                break;
                case 38:
                    up=false;
                break;
                case 39:
                    left=false;
                break;
                case 40:
                    down=false;
                break;
            }
}
 
 
function initfig(sc,Scale)
        {
            for(var j = 0; j <=11; j++)
            {
                newp1 = new typeObject(0,0,0);
                newp.push(newp1);
                
            }
            
            
            for(var i = 0; i <= 11; i++)
            {
                 newp[i].X = pnts[i].X * Scale;
                 newp[i].Y = pnts[i].Y * Scale;
                 newp[i].Z = pnts[i].Z * Scale;
                
            }
            sc.add3(newp[0],newp[2],newp[1], true,true,true);
            sc.add3(newp[0],newp[3],newp[2], true,true,true);
            sc.add3(newp[0],newp[4],newp[3], true,true,true);
            sc.add3(newp[0],newp[5],newp[4], true,true,true);
            sc.add3(newp[0],newp[1],newp[5], true,true,true);
            
            sc.add3(newp[1],newp[2],newp[6], true,true,true);
            sc.add3(newp[2],newp[7],newp[6], true,true,true);
            sc.add3(newp[2],newp[3],newp[7], true,true,true);
            sc.add3(newp[3],newp[8],newp[7], true,true,true);
            sc.add3(newp[3],newp[4],newp[8], true,true,true);
            
            sc.add3(newp[4],newp[9],newp[8], true,true,true);
            sc.add3(newp[4],newp[5],newp[9], true,true,true);
            sc.add3(newp[5],newp[10],newp[9], true,true,true);
            sc.add3(newp[5],newp[1],newp[10], true,true,true);
            sc.add3(newp[1],newp[6],newp[10], true,true,true);
            
            sc.add3(newp[7],newp[11],newp[6], true,true,true);
            sc.add3(newp[7],newp[8],newp[11], true,true,true);
            sc.add3(newp[9],newp[11],newp[8], true,true,true);
            sc.add3(newp[9],newp[10],newp[11], true,true,true);
            sc.add3(newp[10],newp[6],newp[11], true,true,true);
        }
        
        
        function initkub(sc3,x,y,z)
        {
            sc3.add4(new Scene3D(-x,-y,-z),new Scene3D(-x,y,-z),new Scene3D(x,y,-z),new Scene3D(x,-y,-z),true,true,true,true);
            sc3.add4(new Scene3D(-x,-y,z),new Scene3D(x,-y,z),new Scene3D(x,y,z),new Scene3D(-x,y,z),true,true,true,true);
            
            sc3.add4(new Scene3D(-x,-y,-z), new Scene3D(x,-y,-z),new Scene3D(x,-y,z),new Scene3D(-x,-y,z),true,true,true,true);
            sc3.add4(new Scene3D(x,-y,-z), new Scene3D(x,y,-z),new Scene3D(x,y,z),new Scene3D(x,-y,z),true,true,true,true);
            
            sc3.add4(new Scene3D(x,y,-z), new Scene3D(-x,y,-z),new Scene3D(-x,y,z),new Scene3D(x,y,z),true,true,true,true);
            sc3.add4(new Scene3D(-x,y,-z), new Scene3D(-x,-y,-z),new Scene3D(-x,-y,z),new Scene3D(-x,y,z),true,true,true,true);
            
            
 
        }
        
        function init()
{
  
 
 cam = new CameraView3(ut._2DPoint(0,0), 15, 5, 0, 100, 0.5, 550, 400);
 cam.main();
 pnts[0] = ut._3DPoint(0,1,0);
 pnts[1] = ut._3DPoint(0.951, 0.5, -0.309);
 pnts[2] = ut._3DPoint(0.587, 0.5, 0.809);
 pnts[3] = ut._3DPoint(-0.587, 0.5, 0.809);
 pnts[4] = ut._3DPoint(-0.951, 0.5, -0.309);
 pnts[5] = ut._3DPoint(0, 0.5, -1);
 pnts[6] = ut._3DPoint(0.951, -0.5, 0.309);
 pnts[7] = ut._3DPoint(0, -0.5, 1);
 pnts[8] = ut._3DPoint(-0.951, -0.5, 0.309);
 pnts[9] = ut._3DPoint(-0.587, -0.5, -0.809);
 pnts[10] = ut._3DPoint(0.587, -0.5, -0.809);
 pnts[11] = ut._3DPoint(0, -1, 0);
 
 
 
 
 scObj1 = new T3DObject(3,3,0);
 scObj2 = new T3DObject(5,-2,0);
 scObj3 = new T3DObject(-3,0,-1);
 scObj4 = new T3DObject(2,2,5);
 scObj5 = new T3DObject(0,4,0);
 scObj6 = new T3DObject(-3,-3,0);
 scObj7 = new T3DObject(2,-5,-2);
 scObj8 = new T3DObject(0,0,0);
 
 
 initfig(scObj1, 1.5);
 initfig(scObj2, 2);
 initfig(scObj3, 1.8);
 initfig(scObj4, 2.5);
 initkub(scObj5, 1,1,1);
 initkub(scObj6, 1,0.5,5);
 initkub(scObj7, 3,0.5,0.8);
 initkub(scObj8, 0.5,0.5,0.5);
 
 
 scObj1.CalcScreenCoords1(ctx,cam);
 
 scObj2.CalcScreenCoords1(ctx,cam);
 scObj3.CalcScreenCoords1(ctx,cam);
 
 scObj4.CalcScreenCoords1(ctx,cam);
 
 scObj5.CalcScreenCoords1(ctx,cam);
 
 scObj6.CalcScreenCoords1(ctx,cam);
 
 scObj7.CalcScreenCoords1(ctx,cam);
 
 scObj8.CalcScreenCoords1(ctx,cam);
 document.addEventListener("keydown", my_down);
 document.addEventListener("keyup", my_up);
 draw();
 
 
}  
init();
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D Объекты</title>
    <style>        
        canvas{
            border: 1px solid #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="800" height="480"></canvas>
    <script src="game.js"></script>
</body>
</html>
Скриншот на которой показана проблема. Прорисовка 3d-объекта при нажатии стрелки на клавиатуре происходит поворот (остается след объектов).
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
10.12.2021, 05:40
Ответы с готовыми решениями:

Остается след блока при перемещении
В общем раньше не встречался с такими проблемами. Да и не верстаю я уже ооочень долго но наконец-то мои навыки мне пригодились снова....

Canvas. При перемещении объекта остается след
Есть объект PaintBox, на канву которого выводится тайловая карта. Поверх этой карты выводится объект Image, который можно перемещать...

Затемнение: при повороте модели не освещаются боковые нормали
Здравствуйте. Подскажите что я упустил. При движении источника света, модель затемняется нормально. При повороте модели, не освещаются...

42
383 / 23 / 2
Регистрация: 12.06.2021
Сообщений: 211
Записей в блоге: 2
21.12.2021, 10:09  [ТС]
Студворк — интернет-сервис помощи студентам
8Observer8, перечитала еще раз все посты, моего вопроса, здесь упоминается Babylon.js. Нашла в интернете подходящую статью. Creation of an HTML5 3D Sokoban level with Babylon.js. В целом движок мне понравился. Даже свечение можно на нем сделать.
1
9933 / 2936 / 494
Регистрация: 05.10.2013
Сообщений: 7,969
Записей в блоге: 233
21.12.2021, 16:47
Цитата Сообщение от Olga28 Посмотреть сообщение
В целом движок мне понравился.
Я пробовал следующие движки для Web:
  • Babylon.js - он изначально писался на TypeScript. Очень дружелюбен к TypeScript
  • Three.js - много общего с Babylon.js, но недружественен к TypeScript и шейдеры по умолчанию смотрятся хуже, чем на Babylon.js
  • PlayCanvas - имеет визуальный редактор, наподобие как в Unity, но полноценная версия стоит денег. Движок тяжеловат для средних ноутбуков
  • Phaser - игровой фреймворк, он только для 2D. Был переписан на TypeScript. Дружелюбен к TypeScript
  • Pixi.js - графический 2D-движок, его использует Phaser. Тоже был переписан на TypeScript
  • Unity WebGL - очень долго собирает в веб на ноутбуке - 8-10 минут. Приложения нагружают ноутбук
  • Godot - работает гораздо лучше, чем Unity для Web. Собирает в веб-приложение первый раз около минуты, а далее - около 10-20 секунд, если я не путаю. Приложение работает намного менее затратно. Правда, я на Godot только одну игру сделал в 2D по туториалу Your first game. Вы можете поиграть в мой результат в браузере.

Из всех движков для 3D мне больше всего понравился Babylon.js. Есть выбор: писать 3D веб-приложения с помощью движка или использовать чистый WebGL + glMatrix. Нужно чётко понимать одну вещь - для каких целей используется движок или чистый WebGL. Если вам нужно приложение для интернет-магазина с 3D конструктором или обзор квартир с реалистичной графикой с PBR/VR, то однозначно надо брать движок. Но если вам нужна игра с low-poly графикой с анимациями, или вам нужна функциональность веб-приложения без PBR, чтобы не тормозило на средних ноутбуках, то я обеими руками за чистый WebGL + glMatrix + TypeScript.

У меня по приоритету:
  • на первом месте - чистый WebGL + glMatrix + TypeScript + мультиплеер на WebSockets
  • на втором - Babylon.js
  • на третьем - Phaser
  • на четвёртом - Godot

На чистом WebGL + glMatrix + TypeScript я написал игру со стрелами и змейку в песочнице. Ещё есть куча мелких прототипов, на которых я продолжаю тренироваться. Я ещё в процессе изучения сопутствующих основ геймдева, можно сказать, что в самом начале пути.

Пару месяцев назад написал такую демку:
  • Сделал выбор объекта кликом мыши с помощью цветового ID в шейдере
  • Подключил физический движок Ammo.js (Ammo.js - это порт физического С++-движка Bullet)
  • Вывожу текст, который не пиксилируется при приближении. Для этого использую Distance Field из программы Hiero, как показано в уроке от ThinMatrix:
    OpenGL 3D Game Tutorial 33: Distance Field Text Rendering


  • Сделал вращение камеры при зажатом колёсике мыши
  • Сделал приближение и отдаление камеры с помощью вращения колёсика мыши
  • Сделал Skybox (окружение в виде неба)

1
383 / 23 / 2
Регистрация: 12.06.2021
Сообщений: 211
Записей в блоге: 2
22.12.2021, 10:15  [ТС]
Есть выбор: писать 3D веб-приложения с помощью движка или использовать чистый WebGL + glMatrix.
На github я нашла движок который работает без webgl. Кроме основного js скрипта(библиотеки движка) присутствует также множество примеров, где демонстрируется перемещения в пространстве, столкновение объектов, настройка освещения.

Движок называется phoria, вот ссылка: https://github.com/kevinroast/phoria.js

А вот так выглядит index.html (скриншот ниже). В маленьком окне показан пример движение объектов. Ссылки которые расположены справа от окна, это примеры возможностей движка.
0
383 / 23 / 2
Регистрация: 12.06.2021
Сообщений: 211
Записей в блоге: 2
22.12.2021, 10:33  [ТС]
Я пробовал следующие движки для Web:

Babylon.js - он изначально писался на TypeScript. Очень дружелюбен к TypeScript
Three.js - много общего с Babylon.js, но недружественен к TypeScript и шейдеры по умолчанию смотрятся хуже, чем на Babylon.js
PlayCanvas - имеет визуальный редактор, наподобие как в Unity, но полноценная версия стоит денег. Движок тяжеловат для средних ноутбуков
Phaser - игровой фреймворк, он только для 2D. Был переписан на TypeScript. Дружелюбен к TypeScript
Pixi.js - графический 2D-движок, его использует Phaser. Тоже был переписан на TypeScript
Unity WebGL - очень долго собирает в веб на ноутбуке - 8-10 минут. Приложения нагружают ноутбук
Godot - работает гораздо лучше, чем Unity для Web. Собирает в веб-приложение первый раз около минуты, а далее - около 10-20 секунд, если я не путаю. Приложение работает намного менее затратно. Правда, я на Godot только одну игру сделал в 2D по туториалу Your first game. Вы можете поиграть в мой результат в браузере.
Кстати еще есть движок away3d. Раньше он был преимущественно для флеша, но в интернете удалось найти и на html5 https://away3d.github.io/away3d-examples-openfl/. Умеет грузить качественные 3d модели. Правда версия на html5 у меня не много подвисает.
0
383 / 23 / 2
Регистрация: 12.06.2021
Сообщений: 211
Записей в блоге: 2
22.12.2021, 11:08  [ТС]
8Observer8, Можете протестировать на html5 примеры по ссылке и сказать как работает? Меня больше всего интересует производительность модели монстра похожего из игры doom. Вот пример скриншот.

А также модели армии воинов. Нужно знать какая будет производительность, при огромном количестве движущихся объектов и при условии высокой детализации графики.
0
9933 / 2936 / 494
Регистрация: 05.10.2013
Сообщений: 7,969
Записей в блоге: 233
22.12.2021, 12:53
Цитата Сообщение от Olga28 Посмотреть сообщение
На github я нашла движок который работает без webgl
Цитата Сообщение от Olga28 Посмотреть сообщение
Движок называется phoria, вот ссылка: https://github.com/kevinroast/phoria.js
Посмотрите на дату последнего обновления файлов движка. Последний релиз этого движка был в 2014 году. Движок заброшен. Я бы не стал на него тратить драгоценное время. Дело в том, что 7-8 лет назад ещё не все браузеры поддерживали WebGL. Сейчас WebGL 1.0 поддерживается всеми, кроме Opera Mini:WebGL 2.0 - на всех, кроме 4-х.

Цитата Сообщение от Olga28 Посмотреть сообщение
Умеет грузить качественные 3d модели. Правда версия на html5 у меня не много подвисает.
Я хочу научиться писать 3D-игры, которые бы не подвисали на слабых ноутбуках, планшетах и сматрфонах, поэтому я не использую качественные модели на PBR для игр, а так же я изучаю как делать скелетную анимацию без skinning, потому что skinning - это очень дорогое удовольствие. Лучше лучше делить объект по частям, как это было в старых играх на PlayStation. Например, я извлёк модель и анимации Jill из игры Resident Evil с помощью одной программы и импортировал в WebGL:


Миниатюры

Сейчас занят импортированием анимаций. Хочу, для начала, такую демку сделать, как этот парень сделал:



Цитата Сообщение от Olga28 Посмотреть сообщение
А также модели армии воинов. Нужно знать какая будет производительность, при огромном количестве движущихся объектов и при условии высокой детализации графики.
Надо выбирать: производительность на low-poly или фотореалистичная графика, но без возможности играть в браузере, а только на Desktop. Если вы именно хотите очень красивую графику, то покупайте очень мощный компьютер тысяч за 100 и более и качайте Unreal Engine 5. Если вы нацелены на бюджетные ноутбуки за 20 тысяч и браузерные 3D игры, то забудьте про PBR. Либо дудочка, либо кувшинчик.
0
383 / 23 / 2
Регистрация: 12.06.2021
Сообщений: 211
Записей в блоге: 2
30.12.2021, 23:01  [ТС]
8Observer8, Я скачал установщик "blender-2.67b-windows64.exe". Blender 3.0 я поставил, чтобы запускать его только по сильной необходимости, а для создания (и редактирования) 3D-контента и анимаций использую Blender 2.67b.”
Я достаточно часто сохраняю модели в json поэтому ставлю Blender 2.76 с плагином three_io из релиза r75. Все релизы находятся здесь https://github.com/mrdoob/three.js/releases

Эти архивы достаточно полезны в работе не давно я поставила архив под названием r73 посмотреть что внутри и обнаружила много разных примеров например создание 3d scene с управлением кнопок на клавиатуре мышкой вот примеры.
Пример 1

Пример 2

Некоторые примеры которые я находила в сети используют json я решила изучить как правильно делать конвертирования в Blender и нашла несколько плагинов.
https://github.com/satori99/threejs-blender-export
https://github.com/warmwaffles/io_mesh_json
Плагин до r69 io_mesh_threejs, после уже идет io_three. Я конечно не утверждаю что это лучший формат, но пока последнее время использую его для выполнение простых примеров.
8Observer8, а так же я изучаю как делать скелетную анимацию без skinning, потому что skinning - это очень дорогое удовольствие
, у json использование skinning обязательное условие, это я поняла когда проходила обучающий материал в сети там авторы при конвертации ставят галочку “skinning”. Если одна модель, то загрузка происходит быстро ну что если их сотни и у всех скининг сколько интересно они будут грузиться на слабых ноутбуках? Сейчас пока делаю простенькие примеры, эффект мигания https://codepen.io/Smith37/pen/abLqXGO. Создание каркаса и изменения его внешнего вида https://codepen.io/Smith37/pen/RwLQvBZ.

8Observer8, вы писали, что хотите научиться создавать 3d игры. Я лично последнее время смотрела глобальную библиотек по threejs https://github.com/mrdoob/three.js. Там есть модели со скелетной анимацией, вот примеры.

Перемещения человека в доспехах

Пример анимации

Пример робота с анимацией

Несколько анимированных персонажей на одной сцене.

Правда все эти объекты используют "skinning". 8Observer8 вы писали в одном из постов, что пытаетесь обойтись без skinning, каким образом вы делаете построение модели?

Я пробовала посмотреть в сети где модели работают без "скининга" посмотрела эту библиотеку, прочитала несколько статей.
https://agm1984.medium.com/how... 6e258a9d9d
https://unboring.net/workflows/animation.html
Там про конвертацию json которую я сейчас изучаю везде используется skinning. Тоже собираюсь сделать анимацию модели.
8Observer8, вы выше писали “Сейчас занят импортированием анимаций. Хочу, для начала, такую демку сделать, как этот парень сделал:” На одном сайте нашла Jill Valentine, только без анимации интересно есть возможность её сделать анимацию?
https://p3dm.ru/files/characte... stars.html
0
9933 / 2936 / 494
Регистрация: 05.10.2013
Сообщений: 7,969
Записей в блоге: 233
31.12.2021, 00:57
Цитата Сообщение от Olga28 Посмотреть сообщение
, у json использование skinning обязательное условие, это я поняла когда проходила обучающий материал в сети там авторы при конвертации ставят галочку “skinning”.
Да, я тоже с этим столкнулся, но немного с другой стороны. Я тоже использую json, а точнее формат glTF и я не смог найти, как обойти skinning в нём, поэтому я использую glTF пока только для статически объектов. Но зато я разобрался, как работать с анимациями из формата dae. Единственный туториал, который мне помог разобраться с основами dae вот этот:



Цитата Сообщение от Olga28 Посмотреть сообщение
вы писали, что хотите научиться создавать 3d игры.
Да, но без движков - только чистый WebGL, glMatrix и библиотека для 3D физики - Ammo.js, потому что это даёт мне больше мотивации, больше свободы, больше понимания, больше возможностей для оптимизации для ноутбуков и в будущем для планшетов и сматрфонов. Без создания коллайдеров многие 3D игры невозможно создать. Даже если вы решили использовать движки Three.js или Babylon.js, то без изучения Ammo.js никак. Ammo.js - это наиболее популярный физический движок. Здесь туториал для начала знакомства с Ammo.js на Three.js: Intro to JavaScript 3D Physics using Ammo.js and Three.js Я сам его изучил и продолжаю изучать, чтобы использовать Ammo.js с чистым WebGL и glMatrix.

Цитата Сообщение от Olga28 Посмотреть сообщение
вторы при конвертации ставят галочку “skinning”. Если одна модель, то загрузка происходит быстро ну что если их сотни и у всех скининг сколько интересно они будут грузиться на слабых ноутбуках?
Цитата Сообщение от Olga28 Посмотреть сообщение
8Observer8 вы писали в одном из постов, что пытаетесь обойтись без skinning, каким образом вы делаете построение модели?
Дело совсем не в том, сколько будет грузиться, потому что это от скорости интернета зависит, а в том что сцена будет тормозить, если в игровой сцене какое-то количество объектов со skinning. Например, на моём среднем ноутбуке те примеры с одной моделью, что вы привели выше, не тормозят, но ноутбук начинает неприятно шуметь кулерами, что доставляет дискомфорт. Я запускал игры с множеством объектов со skinning и они сильно нагружали ноутбук, что всё начинало тормозить. Есть другой способ работы со скелетными анимациями без skinning, когда объект разбивается на части и создаётся иерархия из матриц. Это хорошо показано в книге WebGL. Программирование трехмерной графики, в главе 9 "Иерархические объекты". Примеры из этой главы:

Chapter 09. Hierarchical Objects
ch09/JointModel: https://jsfiddle.net/8Observer8/vqse5egz/
ch09/MultiJointModel: https://jsfiddle.net/8Observer8/sL53wkn3/
ch09/MultiJointModel_segment: https://jsfiddle.net/8Observer8/ygvk7odv/

Цитата Сообщение от Olga28 Посмотреть сообщение
На одном сайте нашла Jill Valentine, только без анимации интересно есть возможность её сделать анимацию? https://p3dm.ru/files/characte... stars.html
Эта модель уже из Remake'а. Такую я не хочу брать. В этой модели без skinning не обойтись. Я извлёк модель Jill и её анимации с помощью программы RE1MV (можете в поиске Youtube поискать демонстрацию работы с этой программой) из оригинальной игры 1996 года. Я полностью разобрался, как работает оригинальная анимация Jill. Как сделаю демку с Jill, то покажу вам её. Я был некоторое время занят тем, что делал перемещение камеры с помощью физического движка Ammo.js (это порт движка Bullet Physics). Можете попробовать запустить мою демку. Клавиши w, s, d, a для перемещения. Клавиши-стрелки - для вращения камеры. Клавиша 'f' - для взгляда со стороны, чтобы посмотреть на коллайдеры для отладки. Только раскладку клавиатуры нужно поменять на английскую.

0
9933 / 2936 / 494
Регистрация: 05.10.2013
Сообщений: 7,969
Записей в блоге: 233
31.12.2021, 01:18
Цитата Сообщение от Olga28 Посмотреть сообщение
Я достаточно часто сохраняю модели в json поэтому ставлю Blender 2.76 с плагином three_io из релиза r75.
Мне пришлось сегодня поставить Blender 2.71, потому что в 2.67 нельзя запекать тени в режиме Cycle. В режиме Cycle хорошие получаются тени в отличие от режима Render. При работе с 2.67 мой ноутбук вообще не шумит, а с 2.76 шумит выше среднего, но негорячий. Я думаю, работать можно. Кстати, все тени для статических объектов нужно запекать в текстуру. Не вариант выводить тени для статики в real-time. Даже shading объектов нужно запечь и использовать шейдеры для рисования таких объектов без shading, то есть без расчёта освещённости объектов в шейдерах.

Отличный урок по запеканию теней и shading объектов:

0
383 / 23 / 2
Регистрация: 12.06.2021
Сообщений: 211
Записей в блоге: 2
10.01.2022, 18:31  [ТС]
Есть другой способ работы со скелетными анимациями без skinning, когда объект разбивается на части и создаётся иерархия из матриц. Это хорошо показано в книге WebGL. Программирование трехмерной графики, в главе 9 "Иерархические объекты". Примеры из этой главы:
Я сейчас как раз читаю эту книгу, что касается матриц, то я создала несколько 3d объектов с помощью матриц на чистом JS. Вот пример:
https://codepen.io/Smith37/pen/xxXyGwr "Октаэдр".

Так же на репозитории github создала новый проект просмотр 3d объектов. Там можно выбирать любую фигуру и она будет загружаться. Загрузка происходит с помощью XMLHttpRequest. Все модели хранятся в текстовом файле и подгружается при щелчке на кнопке из списка.
https://1olgastorm.github.io/3dmodels/
Картинка примера:

Чтобы повернуть модель нужно перемещать мышь удерживая кнопку мыши.
1
9933 / 2936 / 494
Регистрация: 05.10.2013
Сообщений: 7,969
Записей в блоге: 233
10.01.2022, 19:30
Цитата Сообщение от Olga28 Посмотреть сообщение
Загрузка происходит с помощью XMLHttpRequest
Используйте fetch() - меньше места занимает и проще загружать несколько файлов: https://metanit.com/web/javascript/20.1.php

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
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
 
<body>
    <script>
        main();
 
        async function main()
        {
            // Первый файл
            let contentResponse = await fetch("file1.txt");
            let text = await contentResponse.text();
            console.log(text);
 
            // Второй файл
            contentResponse = await fetch("file2.txt");
            text = await contentResponse.text();
            console.log(text);
        }
    </script>
</body>
 
</html>
Цитата Сообщение от Olga28 Посмотреть сообщение
Я сейчас как раз читаю эту книгу, что касается матриц, то я создала несколько 3d объектов с помощью матриц на чистом JS. Вот пример:
https://codepen.io/Smith37/pen/xxXyGwr "Октаэдр".
Это очень хорошо, вы молодец, но теперь переходите на glMatrix: https://glmatrix.net/ В документации нужно смотреть какие методы есть: https://glmatrix.net/docs/ Лучше сразу по книге переделайте свой пример под WebGL.

Как использовать эту библиотеку на примере сложения двух векторов и сложения двух матриц:

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
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/gl-matrix@3.4.3/gl-matrix-min.js"></script>
</head>
 
<body>
    <script>
        // Сложение двух векторов
        const vec1 = glMatrix.vec3.fromValues(1, 2, 3);
        const vec2 = glMatrix.vec3.fromValues(5, 6, 7);
        const resultVec = glMatrix.vec3.create();
        glMatrix.vec3.add(resultVec, vec1, vec2);
        console.log("resultVec = " + resultVec); // resultVec = 6,8,10
 
        // Сложение двух матриц
        // Первая матрица:
        // 1, 1, 1, 1
        // 2, 2, 2, 2
        // 3, 3, 3, 3
        // 4, 4, 4, 4
        const mat1 = glMatrix.mat4.fromValues(1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4);
        // Вторая матрица:
        // 5, 2, 0, 0
        // 6, 2, 0, 0
        // 7, 2, 0, 0
        // 8, 2, 0, 0
        const mat2 = glMatrix.mat4.fromValues(5, 6, 7, 8, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0);
        // Результат:
        const resultMat = glMatrix.mat4.create();
        glMatrix.mat4.add(resultMat, mat1, mat2);
        console.log("resultMat = " + resultMat); // resultMat = 6,8,10,12,3,4,5,6,1,2,3,4,1,2,3,4
        console.log(glMatrix.mat4.transpose(resultMat, resultMat));
        // 6, 3, 1, 1
        // 8, 4, 2, 2
        // 10, 5, 3, 3
        // 12, 6, 4, 4
    </script>
</body>
 
</html>
1
383 / 23 / 2
Регистрация: 12.06.2021
Сообщений: 211
Записей в блоге: 2
10.01.2022, 21:33  [ТС]
8Observer8, заменила часть кода по вашей рекомендации.
Было:
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
function LoadFromFile(FileName){
      var req = new XMLHttpRequest();
      var data = "1";
      req.open("GET", FileName, false);
     
      req.onreadystatechange = function() {
        
        if(req.readyState===4){
         
          if(req.status===200){
            
            let text = req.responseText // Текст содержащий много строк
            let lines = text.split('\n') // Массив каждый элемент - отдельная строка
            let num;
            const arr1 = []
 
            for(var i = 0; i < lines.length; i++)
            {
                const j = i % 3
                const k = Math.trunc(i / 3)
 
                num = +lines[i];
                num = toFixed(num);
                //console.log(num);
                if (!arr1[j]) arr1[j] = [];
                arr1[j][k] = num;
 
 
            }
            var arr = JSON.stringify(b, null, ' ');
            var a = arr1[0];
            var b = arr1[1];
            var c = arr1[2];
           
          LoadFromFile2(a,b,c);
          
 
 
          }
        }
      }
      try
      {
         req.send(null);
      }
      catch (e)
      {
         alert(e.message);
      }
      
    }
Стало:
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
async function LoadFromFile(FileName)
     {
            let contentResponse = await fetch(FileName);
            let text = await contentResponse.text();
            let lines = text.split('\n') // Массив каждый элемент - отдельная строка
            console.log(lines);
            
            let num;
            let arr1 = []
 
            for(var i = 0; i < lines.length; i++)
            {
                const j = i % 3
                const k = Math.trunc(i / 3)
 
                num = +lines[i];
                num = toFixed(num);
                
                if (!arr1[j]) arr1[j] = [];
                arr1[j][k] = num;
 
 
            }
            var arr = JSON.stringify(b, null, ' ');
            
            var a = arr1[0];
            
            var b = arr1[1];
            var c = arr1[2];
            LoadFromFile2(a,b,c);
            
            
     }
Ошибок не обнаружено.
1
383 / 23 / 2
Регистрация: 12.06.2021
Сообщений: 211
Записей в блоге: 2
10.01.2022, 21:58  [ТС]
8Observer8, у вас стаж работы 10 лет, если судить по профилю. Я не знаю работали вы с технологией FLASH AS 3.0. и библиотекой Away3D. У меня есть один пример из одной старой книги. Книга была на английском языке, там рассказывается как сделать управление героем стрелками, вид от 3-его лица. Вот исходники.
CameraDemo.zip
А вот сам скриншот.

Технология flash, примерно 5 лет как устарела. Как сделать такой же пример вид от 3-его лица на WebGL? В Флеше я знаю как сделать а вот WebGL только изучаю.

Чтобы запустить сам пример в только что созданном проекте Flash, просто следует добавить класс в свойства как показано на картинке

и запускать нужно в браузере или другом проигрователе (не Flash Player, там пример плохо работает).
0
383 / 23 / 2
Регистрация: 12.06.2021
Сообщений: 211
Записей в блоге: 2
10.01.2022, 22:00  [ТС]
Забыла скриншот добавить вот.
0
9933 / 2936 / 494
Регистрация: 05.10.2013
Сообщений: 7,969
Записей в блоге: 233
10.01.2022, 22:25
Цитата Сообщение от Olga28 Посмотреть сообщение
Как сделать такой же пример вид от 3-его лица на WebGL?
Я как раз над этим работаю. Завтра или максимум через два дня пришлю пример. Предварительно, можете запустить мой пример, где сначала от первого лица: https://8observer8.github.io/w... t-release/ а потом можно переключиться на вид со стороны. Я сделал непрохождение сквозь стены и дерево. Управление "WASD" - для перемещения и клавиши стрелки для поворота камеры. Я решил использовать библиотеку Ammo.js для перемещения и создания коллайдеров. Коллайдеры - это области через которые нельзя проходить, и вокруг игрока тоже должен быть коллайдер. В моём примере коллайдер игрока - это капсула, а коллайдеры домика и земли - это box-коллайдеры, а у дерева тоже капсульный коллайдер. Я вчера понял, что надо делать коллайдер сферы для игрока, она будет оптимальная.
0
9933 / 2936 / 494
Регистрация: 05.10.2013
Сообщений: 7,969
Записей в блоге: 233
11.01.2022, 01:00
Я сделал простой пример загрузки статических объектов с текстурами на WebGL: https://github.com/8Observer8/... ter/public Загрузил на форум: matches-box-dae-webgl-js-master.zip (686.6 Кб) В примере нет никаких анимаций, физики, нет GameLoop, а есть просто статика. Пока не надо разбираться с кодом, а выполните одно задание. Скопируйте пример. Переименуйте его. В "index.html" переименуйте Title. Обратите внимание, что рисунки загружаются в "index.html" и они скрыты "hidden":

HTML5
1
2
    <img id="matchesBoxImage" src="assets/matches-box.png" hidden>
    <img id="floorImage" src="assets/floor.png" hidden>
Это рисунки для коробки спичек и пола. У вас будут свои рисунки. Далее, создайте свои объекты в Blender и наложите на них текстуры. Я знаю, что у вас не очень мощный ноутбук (или компьютер), как и у меня, поэтому поставьте Blender версии 2.67b: https://download.blender.org/release/Blender2.67/ (скачайте blender-2.67b-windows64.exe или blender-2.67b-windows32.exe).

В файле main.js в самом верху добавьте свои объекты вместо этих:

JavaScript
1
let matchesBox, floor;
Экспортируйте свои объекты в файл формата .dae в папку "assets" и напишите к ним путь вместо этих путей:

JavaScript
1
initVertexBuffers(["assets/matches-box.dae", "assets/floor.dae"],
В этой же функции вместо создания моих текстур и объектов напишите свои:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
        const matchesBoxImage = document.getElementById("matchesBoxImage");
        const matchesBoxTexture = gl.createTexture();
        gl.bindTexture(gl.TEXTURE_2D, matchesBoxTexture);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, matchesBoxImage);
        matchesBox = new Renderable(program, [0, 1, 2], amounts[0],
            vertPosVBOs[0], normalVBOs[0], texCoordVBOs[0], matchesBoxTexture);
 
        const floorImage = document.getElementById("floorImage");
        const floorTexture = gl.createTexture();
        gl.bindTexture(gl.TEXTURE_2D, floorTexture);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, floorImage);
        floor = new Renderable(program, [0, -2, 0], amounts[1],
            vertPosVBOs[1], normalVBOs[1], texCoordVBOs[1], floorTexture);
        floor.scale = [10, 10, 10];
Не обращайте на строки, которые не понимаете, просто где "matchesBox" и "floor" напишите свои объекты. По логике вы поёмете, что к чему.

В функции draw() напишите свои объекты:

JavaScript
1
2
    matchesBox.draw(projViewMatrix);
    floor.draw(projViewMatrix);
Покажите скриншот, что получилось, или опишите какие возникли проблемы.

Вложения
Тип файла: zip matches-box-dae-webgl-js-master.zip (686.6 Кб, 7 просмотров)
0
9933 / 2936 / 494
Регистрация: 05.10.2013
Сообщений: 7,969
Записей в блоге: 233
11.01.2022, 12:18
Раз вы научились хостить на GitHub Pages (https://1olgastorm.github.io/), то пора захостить на Heroku (https://www.heroku.com/). Это делается очень просто и быстро. Следуйте моей инструкции: Инструкция по развёртыванию Node.js сервера с WebSockets на бесплатном хостинге Heroku. Heroku даёт намного больше возможностей, чем GitHub Pages, потому что Heroku позволяет использовать Node.js, то есть серверную часть. На Heroku есть бесплатный тариф использования баз данных, например, на нём есть MySQL. Правда, с определёнными ограничениями по трафику и по размеру базы данных (для MySQL не более 5 МБайт размер базы данных). Но этого вполне хватит для небольших игр, а потом можно будет взять платный тариф, когда перестанет хватать бесплатного.. Можно использовать WebSockets для передачи сообщений между клиентами через сервер или просто от сервера клиентам - какие-нибудь оповещения в реальном времени. Задание: захостить на Heroku ваше приложение: https://github.com/1olgastorm/3dmodel
0
383 / 23 / 2
Регистрация: 12.06.2021
Сообщений: 211
Записей в блоге: 2
11.01.2022, 20:24  [ТС]
8Observer8, на node.js можно создавать бота для работы в сети на сторонних сайтов?
0
9933 / 2936 / 494
Регистрация: 05.10.2013
Сообщений: 7,969
Записей в блоге: 233
12.01.2022, 02:24
Цитата Сообщение от Olga28 Посмотреть сообщение
8Observer8, на node.js можно создавать бота для работы в сети на сторонних сайтов?
Не знаю, я в эту сторону не копал никогда.

Добавлено через 5 часов 37 минут
Полезный туториал: https://unboring.net/workflows/animation.html и пример из него: https://codepen.io/8Observer8/pen/GRMwJOY
1
383 / 23 / 2
Регистрация: 12.06.2021
Сообщений: 211
Записей в блоге: 2
12.01.2022, 08:58  [ТС]
Задание: захостить на Heroku ваше приложение
Я это задание позже выполню, сейчас с github до конца не разобралась. Читая про разные 3d движки, нашла статью Знакомимся с WebGL и BabylonJS часть 1 http://forasoft.github.io/webgl-babylonjs-p1/. Здесь автор рассказывает как создать планету и космос. Статья размещена на github, теперь мне интересно как публиковать свои статьи на github?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
12.01.2022, 08:58
Помогаю со студенческими работами здесь

Почему при перемещении объекта остается "след" от него?
Почему при перемещении объекта остается &quot;след&quot; от него? Цель: переместить объект. Знаю, что glTranslate можно использовать, но вопрос в...

Не Работает clearRect (canvas)
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;canvas id=&quot;1&quot; width=&quot;1024&quot; height=&quot;600&quot;&gt;instal google chrome&lt;/canvas&gt; &lt;/body&gt; ...

JS анимация. Остается след
Здравствуйте. Надо нарисовать с помощью Canvas и JavaScript анимацию падающего примитива. Так вот. Как сделать так, чтобы он не оставлял...

Остаётся след мышки снизу
Помогите.. Проблема уже довольно давно.. когда отвожу мышь от нижней панели, остаётся след, как будто она там осталась.. я лучше скрины...

На фоне остается след от анимации
Здравствуйте. Помогите пожалуйста с этой проблемой, повторюсь - остается след на фоновой картинке, и мигает все. Двигается гусеница....


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
40
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами
8Observer8 20.02.2026
Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист
damix 19.02.2026
Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI
Eddy_Em 18.02.2026
Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru