Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

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

Triying to do 3D in Javascript

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

Contents

  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 1 of 2  [1] 2  Next page →

#34816 — Triying to do 3D in Javascript

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>

[toc] | [next] | [standalone]

#34820

bit-n...@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..)



FYI,you can do this in CSS now:

<https://codepen.io/mlhaufe/pen/GxaVxR>

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

#34824

On Saturday, April 14, 2018 at 2:37:47 AM UTC+5:30, 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? :)

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

#34826

bit-naughty@hotmail.com wrote:
> On Saturday, April 14, 2018 at 2:37:47 AM UTC+5:30, 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? :)
> 

In this case, you'll need to resort to Three.js - a Javascript 3D library:
<https://threejs.org/examples/#webgl_geometries>

-- 
Joao Rodrigues

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

#34827

On 4/14/2018 11:01 AM, Joao Rodrigues wrote:
> bit-naughty@hotmail.com wrote:
>> On Saturday, April 14, 2018 at 2:37:47 AM UTC+5:30, 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? :)
>>
> 
> In this case, you'll need to resort to Three.js - a Javascript 3D library:
> <https://threejs.org/examples/#webgl_geometries>
> 

Well, WebGL can help out for sure. Some examples:

http://funwithfractals.atspace.cc/ct_gfield_test/3d_user/ct_wormhole_exp.html

http://funwithfractals.atspace.cc/ct_gfield_test/ct_3dgfield_anime_test

;^)

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

#34829

Joao Rodrigues wrote:

> bit-naughty@hotmail.com wrote:
>> On Saturday, April 14, 2018 at 2:37:47 AM UTC+5:30, 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? :)
> 
> In this case, you'll need to resort to Three.js

No, you do not.  That is just *one* possibility.  You really need to extend 
your horizon sometime.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

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

#34830

Thomas 'PointedEars' Lahn <PointedEars@web.de> wrote on 15 Apr 2018 in
comp.lang.javascript: 

> Joao Rodrigues wrote:
> 
>> bit-naughty@hotmail.com wrote:
>>> On Saturday, April 14, 2018 at 2:37:47 AM UTC+5:30, 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? :)
>> 
>> In this case, you'll need to resort to Three.js
> 
> No, you do not.  That is just *one* possibility.  You really need to
> extend your horizon sometime.

Indeed, 3D is just a mathematical problem.

You do not "need" a library for that,
such libraries even diminish 
your problem solving learling ability.

Unless your "need" for laziness is greater
than that to learn [from] and enjoy programming.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

#34834

On Sunday, April 15, 2018 at 2:40:10 PM UTC+5:30, Evertjan. wrote:
 
> Indeed, 3D is just a mathematical problem.
> 
> You do not "need" a library for that,
> such libraries even diminish 
> your problem solving learling ability.
> 
> Unless your "need" for laziness is greater
> than that to learn [from] and enjoy programming.

Wow! *EXACTLY* what I would have said! I can't believe I'm saying this Evertjan, but here, we're kindred souls! :) Nice to talk to a Real coder - can you help? :)

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

#34839

bit-naughty@hotmail.com wrote on 16 Apr 2018 in comp.lang.javascript:

> On Sunday, April 15, 2018 at 2:40:10 PM UTC+5:30, Evertjan. wrote:
>  
>> Indeed, 3D is just a mathematical problem.
>> 
>> You do not "need" a library for that,
>> such libraries even diminish 
>> your problem solving learling ability.
>> 
>> Unless your "need" for laziness is greater
>> than that to learn [from] and enjoy programming.
> 
> Wow! *EXACTLY* what I would have said! I can't believe I'm saying this
> Evertjan, but here, we're kindred souls! :) Nice to talk to a Real coder
> - can you help? :) 

Well, just imagine 3d coordinates in a 3d canvas, and project the points on 
your 2d screen imagining your  viewpoint.

The math formulae are beond me at the moment, but you surely can find them 
on wikipedia or alike.

<https://en.wikipedia.org/wiki/3D_projection>

<https://books.google.nl/books?id=wlzvYt-A5M8C&pg=PA515>

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

#34831

Em 14/04/2018 20:06, Thomas 'PointedEars' Lahn escreveu:
> Joao Rodrigues wrote:
> 
>> bit-naughty@hotmail.com wrote:
>>> On Saturday, April 14, 2018 at 2:37:47 AM UTC+5:30, 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? :)
>>
>> In this case, you'll need to resort to Three.js
> 
> No, you do not.

It's the OP who does.

> That is just *one* possibility.

That is self-evident.


-- 
Joao Rodrigues

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

#34832

Joao Rodrigues wrote:

> Em 14/04/2018 20:06, Thomas 'PointedEars' Lahn escreveu:
>> Joao Rodrigues wrote:
>>> bit-naughty@hotmail.com wrote:
>>>> On Saturday, April 14, 2018 at 2:37:47 AM UTC+5:30, 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? :)
>>> In this case, you'll need to resort to Three.js
>> No, you do not.
>  
> It's the OP who does.

(Learn English.)  No, they do not.
 
>> That is just *one* possibility.
> 
> That is self-evident.

No, it is not.  Why are you lying?

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

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

#34844

PointedEars wrote:
> Joao Rodrigues wrote:
> 
>> Em 14/04/2018 20:06, Thomas 'PointedEars' Lahn escreveu:
>   
>>> That is just *one* possibility.
>>
>> That is self-evident.
> 
> No, it is not.  Why are you lying?
> 

You are ridiculous. Why don't you answer the OP's question instead of 
stalking me? Get a life!

-- 
Joao Rodrigues

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

#34854

Joao Rodrigues wrote:

> PointedEars wrote:
>> Joao Rodrigues wrote:
>>> Em 14/04/2018 20:06, Thomas 'PointedEars' Lahn escreveu:
>>>> That is just *one* possibility.
>>> That is self-evident.
>> No, it is not.  Why are you lying? 
> 
> You are ridiculous.

No, you are: <news:pb27mu$1mcd$1@gioia.aioe.org>

If you are not lying, then you *really* *need to* improve your English.  
Because, as you can see here, “need to” indicates a *requirement*.  But 
there is no requirement to use Three.js to solve this problem – *contrary*
to what you have claimed.

> Why don't you answer the OP's question

The answer to that question can be found in another thread: 
<news:3364120.8dbtfUO1ph@PointedEars.de>

> instead of stalking me?

I am not stalking you.  I am correcting you.  If you do not want to be 
corrected, do not write things that are wrong.

> Get a life!

Likewise.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

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

#34855

Thomas 'PointedEars' Lahn wrote:

> I am not stalking you.

Yes, you are! Don't deny reality.

> I am correcting you.  If you do not want to be
> corrected, do not write things that are wrong.
> 

You are only committing public harassment in order to refrain other 
participants, not only me, to share their different viewpoints and 
experiences. Your conduct during all those years in c.l.js has been 
considered inappropriate, at least, in a professional setting.

There was nothing wrong with my post suggesting that the OP needed to 
use Three.js, although that might not be considered an appropriate 
answer to their question. The OP politely refused my suggestion, 
however, you, as always, resorted to ad hominem attacks, acting like a 
frustrated child throwing tantrum. That was a pathetic behaviour for 
someone of your age.

*plonk*


-- 
Joao Rodrigues

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

#34857

Joao Rodrigues wrote:

> Thomas 'PointedEars' Lahn wrote:
>> I am not stalking you.
> 
> Yes, you are! Don't deny reality.

Your reality is a fantasy; it is not rational, not fact-based.
Most certainly I deny it when it comes to serious software development.
 
>> I am correcting you.  If you do not want to be
>> corrected, do not write things that are wrong.
> 
> [whining]
> 
> There was nothing wrong with my post suggesting that the OP needed to
> use Three.js, […]

Most certainly there was.  *There* *is* *no* *requirement* to use Three.js 
(and therefore WebGL, which not all user agents support) here because there 
are *many* *other* ways to do this.

One has already been indicated by Michael: Not only can one use CSS to 
accomplish the rotation in very easy way; client-side (CSSOM) scripting
can be used to *control* it (and the animation).

> [whining]

So much for “get a life”.

> *plonk*

*shrug*

Your loss.  I am going to correct you nevertheless, for the benefit of the 
people that you are deceiving (intentionally or not) with your half-wit 
nonsense.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

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

#34858

On Tue, 17 Apr 2018 19:44:37 +0200, Thomas 'PointedEars' Lahn
<PointedEars@web.de> wrote:

[snip]

>Your loss.  I am going to correct you nevertheless, for the benefit of the 
>people that you are deceiving (intentionally or not) with your half-wit 
>nonsense.

     And now, I am going to correct you.  For years, I have had your
posts get automatically marked read.  It has been peaceful.  It most
definitely has not been a loss.

     I decided to take a look at what you would state to Joao
Rodrigues.  I expected that it would be rude nonsense, but sometimes,
people change.  You have not.

     To those of this newsgroup who have not already kill-filed him:
Mr. Lahn has been like this for years.  It does not appear that he
will change or quit posting.  Thus, I suggest that you kill-file him
and enjoy life that bit more.

Sincerely,

Gene Wirchenko

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

#34860

On Tuesday, 17 April 2018 20:22:10 UTC+2, Gene Wirchenko  wrote:
> On Tue, 17 Apr 2018 19:44:37 +0200, Thomas 'PointedEars' Lahn
> <PointedEars@web.de> wrote:
> [snip]
> >Your loss.  I am going to correct you nevertheless, for the benefit of the 
> >people that you are deceiving (intentionally or not) with your half-wit 
> >nonsense.
> 
>      And now, I am going to correct you.  For years, I have had your
> posts get automatically marked read.  It has been peaceful.  It most
> definitely has not been a loss.
> 
>      I decided to take a look at what you would state to Joao
> Rodrigues.  I expected that it would be rude nonsense, but sometimes,
> people change.  You have not.

Besides the nitpicking on the length of signatures and similar, which I too
find quite beside the point, he is actually correct 90% of the times, in
fact he is correct this time, too.  In fact he is trivially correct, just
the other side is utter bullshit.

But no, the resident morons will never admit to a mistakes, they'll just start
insulting and defaming...  Stick your kill-file up your ass, then stick to it.

*Plonk*

Julio

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

#34865

On 2018-04-17, Gene Wirchenko <genew@telus.net> wrote:
>      And now, I am going to correct you.  For years, I have had your
> posts get automatically marked read.  It has been peaceful.  It most
> definitely has not been a loss.
>
>      I decided to take a look at what you would state to Joao
> Rodrigues.  I expected that it would be rude nonsense, but sometimes,
> people change.  You have not.
>
>      To those of this newsgroup who have not already kill-filed him:
> Mr. Lahn has been like this for years.  It does not appear that he
> will change or quit posting.  Thus, I suggest that you kill-file him
> and enjoy life that bit more.

I second this excellent advice.

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

#34859

On Tue, 17 Apr 2018 19:44:37 +0200, Thomas 'PointedEars' Lahn
<PointedEars@web.de> wrote:

  <snip>
>> [whining]
  <snip>

Does anyone know who wrote this line ?

  John

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

#34864

On 2018-04-17, John G Harris <niam@jghnorth.org.uk.invalid> wrote:
> On Tue, 17 Apr 2018 19:44:37 +0200, Thomas 'PointedEars' Lahn
><PointedEars@web.de> wrote:
>  <snip>
>>> [whining]
>  <snip>
>
> Does anyone know who wrote this line ?

Looks like Thomas wrote it but quoted it in such a way
as to make it look like he didn't.

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

Page 1 of 2  [1] 2  Next page →

Back to top | Article view | comp.lang.javascript

csiph-web