坐标轴
初始化坐标轴：
1.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
<title>Document</title>
</head>
<body>
<div id="webgl"></div>
</body>
</html>
<script>
var scene = new THREE.Scene();
console.log(scene);
//添加坐标轴
var axes = new THREE.AxesHelper(50);//50表示xyz轴的长度，红:x,绿:y,蓝:z
scene.add(axes);
//创建相机对象
var camera = new THREE.PerspectiveCamera(45, 2, 0.1, 2000);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 100;
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
/**
* 创建渲染器对象
*/
var renderer = new THREE.WebGLRenderer({
antialias: true //消除锯齿
});
renderer.setSize(1000, 500);//设置渲染区域尺寸
renderer.render(scene, camera);//渲染必须有场景和相机两个对象
var cont = document.getElementById('webgl');
cont.appendChild(renderer.domElement);
</script>
这个坐标轴跟我们数学学过的立体坐标系有点区别：
1635990878(1).png
其中x轴是红色，y轴是绿色，那z轴哪去了？
其实z轴是存在的，只是我们把相机位置设定在沿z轴100px的位置，而z轴就是射向我们的眼睛，因此z轴就聚焦成了一个点。
如果我们调整一下相机位置（改变x或y值），即可看到蓝色的z轴。
平面图形
这时我们增加一个带透明度的平面图形。
2.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
<title>Document</title>
</head>
<body>
<div id="webgl"></div>
</body>
</html>
<script>
var scene = new THREE.Scene();
console.log(scene);
//添加坐标轴
var axes = new THREE.AxesHelper(50);//50表示xyz轴的长度，红:x,绿:y,蓝:z
scene.add(axes);
//几何体
var geometry = new THREE.PlaneGeometry(100, 30); //创建一个平面几何体，长100，宽30
//材质
var material = new THREE.MeshBasicMaterial({
color: 0xccccccc,
transparent:true,
opacity:0.5
});
//合成对象
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
mesh.rotation.x = 0;
mesh.rotation.y = 0;
mesh.rotation.z = 0;
mesh.position.set(0, 0, 0);//设定初始位置
scene.add(mesh); //网格模型添加到场景中
//创建相机对象
var camera = new THREE.PerspectiveCamera(45, 2, 0.1, 2000);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 100;
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
/**
* 创建渲染器对象
*/
var renderer = new THREE.WebGLRenderer({
antialias: true //消除锯齿
});
renderer.setSize(1000, 500);//设置渲染区域尺寸
renderer.render(scene, camera);//渲染必须有场景和相机两个对象
var cont = document.getElementById('webgl');
cont.appendChild(renderer.domElement);
</script>
如果沿着z轴旋转图形，就是这样的：
mesh.rotation.z = 10;
3.png
通过这个例子我们就可以了解坐标轴与图形的关系了。
demo.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
<title>Document</title>
</head>
<body>
<div id="webgl"></div>
</body>
</html>
<script>
var scene = new THREE.Scene();
console.log(scene);
//添加坐标轴
var axes = new THREE.AxesHelper(50);//50表示xyz轴的长度，红:x,绿:y,蓝:z
scene.add(axes);
//几何体
var geometry = new THREE.PlaneGeometry(100, 30); //创建一个平面几何体，长100，宽30
//材质
var material = new THREE.MeshBasicMaterial({
color: 0xccccccc
});
//合成对象
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
mesh.rotation.x = -0.5 * Math.PI; //沿x轴翻转90°，即为展平效果
mesh.position.set(0, 0, 0);//设定初始位置
scene.add(mesh); //网格模型添加到场景中
//创建相机对象
var camera = new THREE.PerspectiveCamera(45, 2, 0.1, 2000);
camera.position.set(100, 100, 100); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
/**
* 创建渲染器对象
*/
var renderer = new THREE.WebGLRenderer({
antialias: true //消除锯齿
});
renderer.setSize(1000, 500);//设置渲染区域尺寸
renderer.render(scene, camera);//渲染必须有场景和相机两个对象
var cont = document.getElementById('webgl');
cont.appendChild(renderer.domElement);
</script>
网友评论