四维超立方体在三维世界的动态投影(使用three.js)

原创 2015年07月07日 16:58:07

几个关键点:

1、泛正方体

二维中为方形:

-a<x<a , -a<y<a

三维中为正方体

-a<x<a , -a<y<a, -a<z<a

四维中为超立方体

-a<x<a,-a<y<a,-a<z<a,-a<m<a

可理解为我们的世界为m为0点处的四维世界,由于上述超立方体中x,y,z取值范围与m无关,当该超体与我们世界相交,即m取值在-a到a之中时,其他三维取值范围不变,在我们世界中始终未一个立方体。现通过正交变换对立方体进行旋转变换:

x=1,0,0,0

y=0,1,0,0

z=0,0,1,0

m=0,0,0,1

v1 = a1x+b1y+c1z+d1m

v2 = a2x+b2y+c2z+d2m

v3 = a3x+b3y+c3z+d3m

v4 = a4x+b4y+c4z+d4m

v1,v2,v3,v4两两正交

可得其中一解为

1,1,1,1

1,1,-1,-1

1,-1,1,-1

1,-1,-1,1

得表达式

-a<x+y+z+m<a ,-a< x+y-z-m<a, -a< x-y+z-m<a, -a< x-y-z+m<a

m取值在-a到a之中时,其他三维取值发生改变

以下为源代码(未经整理):

演示地址

点击打开链接

            var container;
            var renderer;
            var scene;
            var camera;
            var group;
            var i = 0;
            var t = -10;
            var swi_tch = 1;
            var daz = 0.2;


            function circle(){
                scene.remove(group);
                requestAnimationFrame(circle);


                camera.lookAt(scene.position);
                persSuperCube(t);
                if(swi_tch==1){
                    t = t + 0.5;
                    if(t>30){
                        swi_tch=0;
                    }
                }
                else{
                    t = t - 0.5;
                    if(t<-30){
                        swi_tch=1;
                    }
                }






            }






            function onKeyDown(e){
                //alert(e.keyCode);


                if(e.keyCode==32){
                    circle();
                }


            }




            function persSuperCube(t){
                group = new THREE.Group();
                var meshsss = [];
                for(var i=0;i<24;i++)
                    for(var j=0;j<24;j++)
                        for(var k=0;k<24;k++)
                            {
                                if(meshsss[i]==null){
                                    meshsss[i]=[];
                                }
                                if(meshsss[i][j]==null){
                                    meshsss[i][j]=[];
                                }
                                var x=i-12;
                                var y=j-12;
                                var z=k-12;
                                var m=t-12;
                                if(x+y+z+m>-12 && x+y+z+m<12 && x+y-z-m>-12 && x+y-z-m<12 && x-y+z-m>-12 && x-y+z-m<12 && x-y-z+m>-12 && x-y-z+m<12){
                                    meshsss[i][j][k]=new THREE.Mesh(
                                            new THREE.BoxGeometry(2, 2, 2 ),
                                            new THREE.MeshNormalMaterial( { overdraw: 0.5 } )
                                    );
                                    meshsss[i][j][k].position.x = 2*x;
                                    meshsss[i][j][k].position.y = 2*y;
                                    meshsss[i][j][k].position.z = 2*z;
                                    meshsss[i][j][k].matrixAutoUpdate = false;
                                    meshsss[i][j][k].updateMatrix();
                                    group.add(meshsss[i][j][k]);
                                }
                            }
                scene.add(group);


                renderer.render(scene,camera);
            }


            function init(){


                //document.addEventListener( 'keydown', onKeyDown, false );


                container = document.createElement( 'div' );
                document.body.appendChild( container );


                group = new THREE.Group();
                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );


                camera.position.x = 140*Math.sin(Math.PI/4);
                camera.position.y = 140*Math.cos(Math.PI/4);
                camera.position.z = 150;


                camera.rotation.x = -Math.atan(camera.position.x/camera.position.z);
                camera.rotation.y = Math.atan(camera.position.y/camera.position.z);


                camera.rotation.x = -0.25 * Math.PI;
                camera.rotation.y = 0.25 * Math.PI;


                scene = new THREE.Scene();


                scene.add(camera);


                var x, y,z=0;
                var meshsss = [];
                for(var i=0;i<40;i++)
                    for(var j=0;j<40;j++)
                        for(var k=0;k<40;k++){
                            if(meshsss[i]==null){
                                meshsss[i]=[];
                            }
                            if(meshsss[i][j]==null){
                                meshsss[i][j]=[];
                            }
                            x=i-20;
                            y=j-20;
                            z=k-20;
                            if(x+y+z>-15 && x+y+z<15 && x-y+z>-15 && x-y+z<15 && -x+y+z>-15 && -x+y+z<15 && -x-y+z>-15 && -x-y+z<15){
                                meshsss[i][j][k]=new THREE.Mesh(
                                        new THREE.BoxGeometry(2, 2, 2 ),
                                        new THREE.MeshNormalMaterial( { overdraw: 0.5 } )
                                );
                                meshsss[i][j][k].position.x = 2*x;
                                meshsss[i][j][k].position.y = 2*y;
                                meshsss[i][j][k].position.z = 2*z;


                                meshsss[i][j][k].matrixAutoUpdate = false;
                                meshsss[i][j][k].updateMatrix();
                                group.add(meshsss[i][j][k]);
                            }
                }
                scene.add(group);
                var meshx = new THREE.Mesh(
                        new THREE.BoxGeometry(200, 1, 1 ),
                        new THREE.MeshNormalMaterial( { overdraw: 0.5 } )
                );
                meshx.position.x = 100;
                //meshx.rotation.z = 0.25 * Math.PI;
                meshx.matrixAutoUpdate = false;
                meshx.updateMatrix();
                scene.add(meshx);


                var meshy = new THREE.Mesh(
                        new THREE.BoxGeometry(1, 200, 1 ),
                        new THREE.MeshNormalMaterial( { overdraw: 0.5 } )
                );
                meshy.position.y = 100;
                //meshy.rotation.z = 0.25 * Math.PI;
                meshy.matrixAutoUpdate = false;
                meshy.updateMatrix();
                scene.add(meshy);


                var meshz = new THREE.Mesh(
                        new THREE.BoxGeometry(1, 1, 200 ),
                        new THREE.MeshNormalMaterial( { overdraw: 0.5 } )
                );
                meshz.position.z = 100;
                //meshz.rotation.x = 0.25 * Math.PI;
                meshz.matrixAutoUpdate = false;
                meshz.updateMatrix();
                scene.add(meshz);


                renderer = new THREE.CanvasRenderer();
                renderer.setClearColor( 0xffffff );
                //renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );


                renderer.render(scene,camera);


                circle();
            }


  


three.js之投影矩阵

Three框架 div#canvas-frame { border: none; cursor: pointer; width: 100%; heig...
  • hb707934728
  • hb707934728
  • 2017年12月08日 14:04
  • 86

three.js 学习笔记之 混乱的矩阵

要搞清楚three.js 的矩阵变换,看官方的文档和例子是远远不够的。 首先得整明白three.js 最核心的两个类Object3D 和Matrix4 下面先列出Matrix4的常用函数 getInv...
  • Calculon
  • Calculon
  • 2015年04月26日 18:16
  • 1561

四维超立方体在三维世界的动态投影(使用three.js)

几个关键点: 1、泛正方体 二维中为方形: -a 三维中为正方体 -a 四维中为超立方体 -a 可理解为我们的世界为m为0点处的四维世界,由于上述超立方体中x,y,z取值范围与m无关,当该超体与我们...
  • ljq2278
  • ljq2278
  • 2015年07月07日 16:58
  • 1656

透视投影,与Z BUFFER求值

透视投影,与Z BUFFER求值        为什么有透视。因为眼球是个透镜。假如地球生物进化的都靠超声波探测空间,那也许眼睛就不会有变成球,而是其他形状...为什么有人玩3D头晕?其中一个重要的作...
  • puzzy3d
  • puzzy3d
  • 2008年07月05日 04:52
  • 5516

四维超体运动在三维空间的表现1(使用three.js)

看过《三体》《eva》《星际穿越》等的朋友一定都对高维物体运动时在我们空间的投影感兴趣,今天我们就来将它实现一把。我们选用threejs来做,如果要做更高要求的,运用相同原理重写一下就行啦。下面开始。...
  • sinat_24002967
  • sinat_24002967
  • 2016年02月19日 21:31
  • 1023

python3绘制超立方体

利用Python3中turtle的绘制超立方体。 绘图思路: 1)求出边长100的超立方体的点坐标;       以竖直线为依据,将点分为上下两组:       a为上边点列表,b为下...
  • cccshare
  • cccshare
  • 2017年10月07日 16:43
  • 253

【Modern OpenGL】坐标系统 Coordinate Systems

上面说的转换过程:坐标-->标准换坐标系-->屏幕坐标系的转换过程是一步一步完成的。其中,在最终将对象上的点转换到屏幕坐标系之前,我们需要将它们逐步转换到一些中间的坐标系。之所以要进行这样的转换,是因...
  • aganlengzi
  • aganlengzi
  • 2016年01月02日 15:16
  • 966

写给VR手游开发小白的教程:(四)补充篇,详细介绍Unity中相机的投影矩阵

这篇作为上一篇的补充介绍,主要讲Unity里面的投影矩阵的问题 关于Unity中的Camera,圣典里面对每一项属性都做了简要的介绍,没看过的小伙伴传送门在下面 http://www.ceeger.c...
  • mao_xiao_feng
  • mao_xiao_feng
  • 2016年08月21日 19:31
  • 6586

同一个世界 四维离殇 探索 攻略

同一个世界 四维离殇 探索 攻略
  • nameofcsdn
  • nameofcsdn
  • 2017年04月14日 23:10
  • 1954

同一个世界 四维离殇 理智 攻略

同一个世界 四维离殇 理智 攻略
  • nameofcsdn
  • nameofcsdn
  • 2017年04月14日 12:40
  • 2719
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:四维超立方体在三维世界的动态投影(使用three.js)
举报原因:
原因补充:

(最多只允许输入30个字)