画一个坐标系
2017-09-28 本文已影响57人
waka
学习 Three.js 的时候跟着老师做，但是发现视角有些难以理解，于是自己画了一个，个人认为比较容易理解
黄色为Y轴，紫色为X轴，红色为Z轴
github地址：https://github.com/BadWaka/BadWaka.github.io/blob/master/views/three/three-demo-2-2.html
代码如下：（依赖 three.js）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2-2</title>
<style>
html, body, canvas {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
}
</style>
</head>
<body onload="threeStart()">
<div id="canvas-frame"></div>
<script src="../../library/three/three.js"></script>
<script>
// 渲染器
var renderer;
function initThree() {
width = document.getElementById('canvas-frame').clientWidth;
height = document.getElementById('canvas-frame').clientHeight;
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(width, height);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColor(0xFFFFFF, 1.0);
}
// 相机
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
camera.position.x = 1000;
camera.position.y = 1000;
camera.position.z = 1000;
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
camera.lookAt({
x: 0,
y: 0,
z: 0
});
}
// 场景
var scene;
function initScene() {
scene = new THREE.Scene();
}
// 灯光
var light;
function initLight() {
light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);
light.position.set(100, 100, 200);
scene.add(light);
}
var cube;
function initObject() {
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(-500, 0, 0));
geometry.vertices.push(new THREE.Vector3(500, 0, 0));
for (var i = 0; i <= 20; i++) {
var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({
color: 0x000000,
opacity: 0.2
}));
line.position.z = (i * 50) - 500;
scene.add(line);
var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({
color: 0x000000,
opacity: 0.2
}));
line.position.x = (i * 50) - 500;
line.rotation.y = 90 * Math.PI / 180;
scene.add(line);
}
// Y坐标
var lineY = new THREE.Line(geometry, new THREE.LineBasicMaterial({
color: 0xFFD700, // 黄色
opacity: 0.2
}));
lineY.position.y = 500;
lineY.rotation.z = 90 * Math.PI / 180;
scene.add(lineY);
// X坐标
var lineX = new THREE.Line(geometry, new THREE.LineBasicMaterial({
color: 0xFF00FF, // 紫色
opacity: 0.2
}));
lineX.position.x = 500;
scene.add(lineX);
// Z坐标
var lineZ = new THREE.Line(geometry, new THREE.LineBasicMaterial({
color: 0xEE3B3B, // 红色
opacity: 0.2
}));
lineZ.position.z = 500;
lineZ.rotation.y = 90 * Math.PI / 180;
scene.add(lineZ);
}
// 开始画3D
function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
renderer.clear();
renderer.render(scene, camera);
}
</script>
</body>
</html>
