# 四维超立方体在三维世界的动态投影（使用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

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);
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){

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

}

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

renderer.render(scene,camera);
}

function init(){

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

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

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

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

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
• 2017年12月08日 14:04
• 86

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

• Calculon
• 2015年04月26日 18:16
• 1561

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

• ljq2278
• 2015年07月07日 16:58
• 1656

## 透视投影，与Z BUFFER求值

• puzzy3d
• 2008年07月05日 04:52
• 5516

## 四维超体运动在三维空间的表现1（使用three.js）

• sinat_24002967
• 2016年02月19日 21:31
• 1023

## python3绘制超立方体

• cccshare
• 2017年10月07日 16:43
• 253

## 【Modern OpenGL】坐标系统 Coordinate Systems

• aganlengzi
• 2016年01月02日 15:16
• 966

## 写给VR手游开发小白的教程：（四）补充篇，详细介绍Unity中相机的投影矩阵

• mao_xiao_feng
• 2016年08月21日 19:31
• 6586

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

• nameofcsdn
• 2017年04月14日 23:10
• 1954

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

• nameofcsdn
• 2017年04月14日 12:40
• 2719

举报原因： 您举报文章：四维超立方体在三维世界的动态投影（使用three.js） 色情 政治 抄袭 广告 招聘 骂人 其他 (最多只允许输入30个字)