基于原生js使用three.js在三维直角坐标系中创建时空立方体

Three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能，可以创建三维图形并且可以设置材质、添加光源。由于针对three.js创建直角坐标系的资源并不是很多，下面主要使用three.js创建三维直角坐标系，并在坐标系中添加立方体块，实现简单的时空立方体。

1、引入所需要的js文件。

<script src="lib/three.js"></script>
<script src="lib/js/controls/OrbitControls.js"></script>
<script src="lib/js/libs/stats.min.js"></script>
<script src="lib/js/libs/dat.gui.min.js"></script>

2、添加场景、摄像机、渲染器、坐标轴、灯光、格网。因为默认坐标系是右手坐标系，z轴朝向屏幕，因此需要设置摄像机的camera.up.z = 1，使得z轴朝上。       

// 场景
var scene = new THREE.Scene();
// 摄像机
var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000);
camera.up.x = 0;
camera.up.y = 0;
camera.up.z = 1;
camera.position.set(30, 0, 0);
// 渲染器
var render = new THREE.WebGLRenderer({antialias:true});
render.setSize(window.innerWidth, window.innerHeight);
render.shadowMap.enabled = true;
render.setClearColor(0xFFFFFF, 1.0);
document.getElementById("webgl").appendChild(render.domElement);
// 坐标轴
var axes = new THREE.AxesHelper(10);
scene.add(axes);
// 灯光
scene.add(new THREE.AmbientLight(0x404040));
light = new THREE.DirectionalLight(0xffffff);
light.position.set(1,1,1);
scene.add(light);
// 格网
var gridXZ = new THREE.GridHelper(10, 10, 0x404040, 0x404040);
gridXZ.position.set( 5,0,5 );
scene.add(gridXZ);
var gridXY = new THREE.GridHelper(10, 10, 0x404040, 0x404040);
gridXY.position.set( 5,5,0 );
gridXY.rotation.x = Math.PI/2;
scene.add(gridXY);
var gridYZ = new THREE.GridHelper(10, 10, 0x404040, 0x404040);
gridYZ.position.set( 0,5,5 );
gridYZ.rotation.z = Math.PI/2;
scene.add(gridYZ);

3、给坐标轴添加文字。因为前一步对坐标轴做了旋转，因此该步骤需要使用rotation对文字进行旋转。       

// 坐标轴字体
var materialtext = new THREE.MeshPhongMaterial({
    color: 0xEEA2AD,
    specular:0xEEA2AD,
    shininess:0,
});
var loader = new THREE.FontLoader();
// 坐标轴上文字
loader.load('fonts/helvetiker_regular.typeface.json', function(font) {
    for(i=1; i<=10; i++){
        // x轴
        var meshtextx = new THREE.Mesh(new THREE.TextGeometry(i, {
            font: font,
            size: 0.5,
            height: 0.1,
            curveSegments: 12,
        }), materialtext);
        meshtextx.position.set(i-0.2,10,-0.5);
        meshtextx.rotation.x = -Math.PI/2;
        meshtextx.rotation.z = Math.PI;
        scene.add(meshtextx);
        // y轴
        var meshtexty = new THREE.Mesh(new THREE.TextGeometry(i, {
            font: font,
            size: 0.5,
            height: 0.1
        }), materialtext);
        meshtexty.position.set(10,i-1,-0.5);
        meshtexty.rotation.x = Math.PI/2;
        meshtexty.rotation.y = Math.PI/2;
        scene.add(meshtexty);
        // z轴
        var meshtextz = new THREE.Mesh(new THREE.TextGeometry(i, {
            font: font,
            size: 0.5,
            height: 0.1
        }), materialtext);
        meshtextz.position.set(10,-0.5,i-1);
        meshtextz.rotation.z = Math.PI/2;
        meshtextz.rotation.y = Math.PI/2;
        scene.add(meshtextz);
    }
});

4、使用add方法，在坐标系中添加正方体块，并设置正方体块的位置、颜色、大小、透明度。 

for(var i=0; i<10; i++){
    for(var j=0; j<10; j++){
        var cubeGeometry = new THREE.CubeGeometry(0.9, 0.9, 0.9)
        var material = new THREE.MeshLambertMaterial({color: 0x00ff00*i*j/100 })
        material.transparent = true;//是否透明
        material.opacity = 0.8;//透明度
        var cube = new THREE.Mesh(cubeGeometry, material)
        cube.position.set(i+0.5, j+0.5, 0.5);
        scene.add(cube)
    }
}

5、设置鼠标可旋转。       

var controls = new THREE.OrbitControls( camera, render.domElement );
renderScene();
function renderScene() {
    controls.update();
    requestAnimationFrame(renderScene);
    render.render(scene, camera);
}