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

几个关键点：

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();            }