---
title: Three.jsで4次元立体
date: 2014-10-30T00:00:00.000Z
updated: 2026-01-08T14:50:36.365Z
tags:
  - study
  - threejs
  - "2014"
  - 2014/10
  - 2014/10/30
url: https://baku89.com/ja/2014/10/30/three-js-4d
---

# Three.jsで4次元立体

![img](https://wp.baku89.com/wp-content/uploads/2015/01/8cell.jpg)

[Polychoron](http://s.baku89.com/fourjs/)

4 次元立体の 3 次元へのステレオグラフ射影をシェーダで書いてみました．[dimensions](http://www.dimensions-math.org/Dim_JP.htm)という Web で見れる数学教育番組の CG が好きだったので自分でも作ってみようと．

GLSL では 4 次までの行列しか扱えないので，アフィン変換は出来ませんが，今回は回転しか扱わなかったので 4 次の回転行列だけで事足りました．

```
uniform mat4 matrix4D;
uniform float distance;
uniform int stereograph;

attribute float positionW;

void main() {

    // transform in 4D
    vec4 tPosition = matrix4D * vec4( position, positionW );

    tPosition = normalize( tPosition );

    // perspective projection from [0, 0, 0, distance] to XYZ hyperplane
    float d = distance / ( distance - tPosition.w );

    vec3 pPosition = tPosition.xyz * d;

    gl_Position = projectionMatrix * modelViewMatrix * vec4( pPosition, 1.0 );
}
```

「4 次元空間内での座標変換」→「3 次元への投影」→「3 次元空間内での座標変換」 + 「2 次元への投影」と, 2 回座標変換と投影が必要になりますが，基本的な事は全く同じです．

この調子で色んな立体をつくろうとおもった矢先，[jenn3d](http://www.jenn3d.org/)というツールを発見してしまいまして．こっちからフォークして，自分なりに弄くり回した方が間違いなさそう．

ちなみに jenn3d から stl 書き出ししたモデルデータを使って [#everyday](/everyday) 作りました．

![img](https://wp.baku89.com/wp-content/uploads/2014/12/1215.png)

これを使ってモーショングラフィックスできたらなーと思ってます．

ちなみに Flat Torus がお気に入り．

![img](https://wp.baku89.com/wp-content/uploads/2015/01/Screen-Shot-2015-01-10-at-19.26.07.png)