Groups > comp.lang.javascript > #34816 > unrolled thread

Triying to do 3D in Javascript

Started by	bit-naughty@hotmail.com
First post	2018-04-13 00:13 -0700
Last post	2018-05-24 06:35 -0700
Articles	4 on this page of 24 — 11 participants

Back to article view | Back to comp.lang.javascript

  Triying to do 3D in Javascript bit-naughty@hotmail.com - 2018-04-13 00:13 -0700
    Re: Triying to do 3D in Javascript "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-04-13 14:07 -0700
      Re: Triying to do 3D in Javascript bit-naughty@hotmail.com - 2018-04-14 07:34 -0700
        Re: Triying to do 3D in Javascript Joao Rodrigues <groups_jr-1@yahoo.com> - 2018-04-14 15:01 -0300
          Re: Triying to do 3D in Javascript "Chris M. Thomasson" <invalid_chris_thomasson@invalid.invalid> - 2018-04-14 15:58 -0700
          Re: Triying to do 3D in Javascript Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-04-15 01:06 +0200
            Re: Triying to do 3D in Javascript "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2018-04-15 11:09 +0200
              Re: Triying to do 3D in Javascript bit-naughty@hotmail.com - 2018-04-16 00:03 -0700
                Re: Triying to do 3D in Javascript "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2018-04-16 11:14 +0200
            Re: Triying to do 3D in Javascript Joao Rodrigues <groups_jr-1@yahoo.com> - 2018-04-15 11:11 -0300
              Re: Triying to do 3D in Javascript Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-04-16 02:08 +0200
                Re: Triying to do 3D in Javascript Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2018-04-16 10:02 -0300
                  Re: Triying to do 3D in Javascript Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-04-17 17:57 +0200
                    Re: Triying to do 3D in Javascript Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2018-04-17 14:19 -0300
                      Re: Triying to do 3D in Javascript Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-04-17 19:44 +0200
                        Re: Triying to do 3D in Javascript Gene Wirchenko <genew@telus.net> - 2018-04-17 11:22 -0700
                          Re: Triying to do 3D in Javascript Julio Di Egidio <julio@diegidio.name> - 2018-04-17 11:42 -0700
                          Re: Triying to do 3D in Javascript Jon Ribbens <jon+usenet@unequivocal.eu> - 2018-04-18 13:48 +0000
                        Re: Triying to do 3D in Javascript John G Harris <niam@jghnorth.org.uk.invalid> - 2018-04-17 19:27 +0100
                          Re: Triying to do 3D in Javascript Jon Ribbens <jon+usenet@unequivocal.eu> - 2018-04-18 13:48 +0000
        Re: Triying to do 3D in Javascript "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-04-20 11:52 -0700
    Re: Triying to do 3D in Javascript bit-naughty@hotmail.com - 2018-04-16 00:00 -0700
    Re: Triying to do 3D in Javascript Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2018-04-16 10:16 -0300
    Re: Triying to do 3D in Javascript Julio Di Egidio <julio@diegidio.name> - 2018-05-24 06:35 -0700

Page 2 of 2 — ← Prev page 1 [2]

#34879

From	"Michael Haufe (TNO)" <tno@thenewobjective.com>
Date	2018-04-20 11:52 -0700
Message-ID	<4ea8aadb-f2da-4808-95b8-b6e9c5460c12@googlegroups.com>
In reply to	#34824

bit-n...@hotmail.com wrote:
> Michael Haufe (TNO) wrote:
> 
> > 
> > FYI,you can do this in CSS now:
> > 
> > <https://codepen.io/mlhaufe/pen/GxaVxR>
> 
> Yeah, but I don't *want* to, I *want* to do 3D *in JS*, and therefore become more skilled!
> 
> Could you help out? :)

My first question would be: how much Math education do you have?

Basic algebra? Trigonometry? 

Do you know anything about Matrices? Quaternions?

Depending on the answer, my advice will differ on next steps.

[toc] | [prev] | [next] | [standalone]

#34833

From	bit-naughty@hotmail.com
Date	2018-04-16 00:00 -0700
Message-ID	<eebe829a-3f7b-4cdc-9be7-0c429eefabcc@googlegroups.com>
In reply to	#34816

Uhh no, I really don't want to use any libraries - three or WebGL (both of which  I knew about, btw), thanks. I will only touch these subjects after I have conquered whatever 3D can be done *without* them.


Can you guys please stop fighting and HELP? :)

[toc] | [prev] | [next] | [standalone]

#34845

From	Joao Rodrigues <groups_jr-1@yahoo.com.br>
Date	2018-04-16 10:16 -0300
Message-ID	<pb27mu$1mcd$1@gioia.aioe.org>
In reply to	#34816

bit-naughty@hotmail.com wrote:
> Hi,
> I'm just trying to do some 3D in JS.
> 
> All I want is for a triangle to rotate in 3D.
> Here is my code, what am I doing wrong?: (I'm just drawing a poly, rotating it around the Y axis, perspective projecting it,...and repeat..)
> 
> 
> Is this code even *right*? I'm not sure....
> 
> 
>      <html>
>      
>      
>      <head>
>      <style>
>      
>      canvas {
>      	border: 1px solid black;
>      }
>      </style>
>      
>      <script>
>      
>      
>      
>      window.onload = function() {
>      	var canvas = document.getElementById("drawingCanvas");
>      	var context = canvas.getContext("2d");
>      
>      function drawpoly (twodpoly) {
>      	
>      	context.moveTo (twodpoly[0].x,twodpoly[0].y);
>      	context.lineTo (twodpoly[1].x,twodpoly[1].y);
>      	context.lineTo (twodpoly[2].x,twodpoly[2].y);
>      	context.closePath();
>      	
>      	
>      	context.fill();
>      	
>      	
>      }
>      
>      
>    
>      
>      var threedpoly = [
>      	{
>      		x:250,
>      		y:50,
>      		z:1
>      	},
>      	
>      	{
>      		x:50,
>      		y:250,
>      		z:1
>      	},
>      	
>      	{
>      		x:450,
>      		y:250,
>      		z:1
>      	}
>      ];
>      
>      
>      
>      
>      function perspproject(threedpoly) {
>      
>      
>      var twodpoly = [{
>      	x:0,
>      	y:0
>      	},
>      	
>      	{
>      	x:0,
>      	y:0
>      	},
>      	
>      	{
>      	x:0,
>      	y:0
>      	
>      }]
>      
>      
>      
>      for (var i=0; i<3; i++) {
>      
>      
>      	twodpoly[i].x = threedpoly[i].x/threedpoly[i].z ;
>      	twodpoly[i].y = (threedpoly[i].y/threedpoly[i].z) * -1 ;
>      
>      	};		
>      
>      return twodpoly;
>      
>      };
>      
>      function rotatethreedpoly(threedpoly, angle) {
>      	
>      	var rotatedthreedpoly = [
>      	{
>      		x:0,
>      		y:0,
>      		z:0
>      	},
>      	
>      	{
>      		x:0,
>      		y:0,
>      		z:0
>      	},
>      	
>      	{
>      		x:0,
>      		y:0,
>      		z:0
>      	}
>      ];
>      	
>      	
>      	for (var i=0; i<3; i++) {
>      		rotatedthreedpoly[i].x = (Math.cos(angle) * threedpoly[i].x) + (Math.sin(angle) * threedpoly[i].z) ;
>      		rotatedthreedpoly[i].y = threedpoly[i].y ;
>      		rotatedthreedpoly[i].z = (Math.sin(angle) * threedpoly[i].x) + (Math.cos(angle) * threedpoly[i].z) ;
>      		
>      	}
>      	
>      return rotatedthreedpoly ;
>      
>      };
>      
>      	
>      
>      
>      // DRAW SHIT - MAIN LOOP
>      
>      
>      for (var i=1; i<360; i++) {
>      
>       var rad = i * 0.017453293;
>      
>      
>      var foo = rotatethreedpoly(threedpoly, rad);
>      
>      var bar = perspproject(foo);
>      
>      drawpoly(bar);
>      
>      //context.clearRect(0, 0, canvas.width, canvas.height);
>      
>      }
>      
>      
>      
>      
>      }
>      
>      </script>
>      </head>
>      
>      <body>
>      <canvas id = "drawingCanvas" width="500" height="300">
>      </canvas>
>      </body>
>      
>      </html>
> 

Hopefully Mr. Know It All Thomas 'PointedEars' Lahn will answer your 
question, after he stops bugging other participants LOL

-- 
Joao Rodrigues

[toc] | [prev] | [next] | [standalone]

#35113

From	Julio Di Egidio <julio@diegidio.name>
Date	2018-05-24 06:35 -0700
Message-ID	<aa410b6b-6e09-4476-bf80-0748cfe2e576@googlegroups.com>
In reply to	#34816

On Friday, 13 April 2018 09:13:17 UTC+2, bit-n...@hotmail.com  wrote:

> I'm just trying to do some 3D in JS.

<https://www.x3dom.org/>

Julio

[toc] | [prev] | [standalone]

Page 2 of 2 — ← Prev page 1 [2]

csiph-web

Triying to do 3D in Javascript

Contents

#34879

#34833

#34845

#35113