本人讀研時使用過一段時間threejs，畢業後就沒用過這個東西了，也沒有從事相關的工作，這裏重新拾起，以回憶當年的讀研時光。
運行環境
- OS：win10
- threejs版本：r112
- 瀏覽器：Chrome v80.0.3987.149
代碼及運行
代碼來自《Learning Three.js: The JavaScript 3D Library for WebGL, Second Edition》
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100%; }
</style>
</head>
<body>
<script src="js/three.min.js"></script>
<script type="text/javascript">
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight,
0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE));
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild( renderer.domElement );
var axes = new THREE.AxesHelper(20);
scene.add(axes);
var planeGeometry = new THREE.PlaneGeometry(60, 30, 1, 1);
var planeMaterial = new THREE.MeshBasicMaterial({color:0xcccccc});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 15;
plane.position.y = -3;
plane.position.z = 0;
scene.add(plane);
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshBasicMaterial({color:0xff0000, wireframe: true});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = -4;
cube.position.y = 3;
cube.position.z = 0;
scene.add(cube);
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.x = 20;
sphere.position.y = 4;
sphere.position.z = 2;
scene.add(sphere);
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.05;
cube.rotation.y += 0.05;
sphere.rotation.x += 0.05
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>
運行如下：
圖片中紅色是x軸，綠色是y軸，藍色是z軸，實際運行時立方體和圓球是在旋轉的。