Three.js杂记(二)——绘制点、线、面
点和线
Threejs使用的是右手坐标系,这源于opengl默认情况下,也是右手坐标系

图中右边那个手对应的坐标系,就是右手坐标系。在Threejs中,坐标和右边的坐标完全一样。x轴正方向向右,y轴正方向向上,z轴由屏幕从里向外。
一维指的是一条线,没有宽度和高度
二维指的是一个面,没有高度
三位指的是立体空间,由面组成
示例代码:
效果:



绘制渐变色线
// 创建场景
var scene = new THREE.Scene();
// 创建相机 参数:视角、视角比例(宽度和高度比)、最近像素、最远像素
camera = new THREE.PerspectiveCamera(105,
window.innerWidth / window.innerHeight, 1, 1000);
// 渲染器
// 把眼睛看到的大千世界绘制到HTML页面中
render = new THREE.WebGLRenderer({
antialias: true
});
// 计算处理dpi
render.setPixelRatio(window.devicePixelRatio);
// 设置画布大小
render.setSize(window.innerWidth, window.innerHeight)
var app = document.getElementById("app");
// 绘制出一个canvas小面板
app.appendChild(render.domElement);
/*********************************内容绘制区域************************************************/
var light;
var geometry = new THREE.Geometry();
function initLight() {
// 设置线点的颜色
var material = new THREE.LineBasicMaterial({
// color:"red",
vertexColors: true
});
geometry.vertices.push(
new THREE.Vector3(-10,0,0), // 起始点
new THREE.Vector3(0,0,0),
new THREE.Vector3(0,10,0),
new THREE.Vector3(-10,0,0) //结束回到原点
);
geometry.colors.push(
new THREE.Color( "#38E92D" ),
new THREE.Color( "#F2EC2D" ),
new THREE.Color( "#2B64EE" ),
new THREE.Color( "#E75427" )
)
light = new THREE.Line(geometry, material);
scene.add(light);
}
/*********************************内容绘制区域************************************************/
camera.position.z = 10;
camera.position.y = 0;
camera.position.x = 0;
function animate() {
initLight();
render.clear();
render.render(scene, camera);
}
setInterval(animate, 100);
效果:

绘制完成的线可以进行平移和旋转,通过这些操作可以组成不同的图形
// 创建场景
var scene = new THREE.Scene();
// 创建相机 参数:视角、视角比例(宽度和高度比)、最近像素、最远像素
camera = new THREE.PerspectiveCamera(105,
window.innerWidth / window.innerHeight, 1, 1000);
// 渲染器
// 把眼睛看到的大千世界绘制到HTML页面中
render = new THREE.WebGLRenderer({
antialias: true
});
// 计算处理dpi
render.setPixelRatio(window.devicePixelRatio);
// 设置画布大小
render.setSize(window.innerWidth, window.innerHeight)
var app = document.getElementById("app");
// 绘制出一个canvas小面板
app.appendChild(render.domElement);
/*********************************内容绘制区域************************************************/
var light;
var geometry = new THREE.Geometry();
// 随机颜色
function fn5(){
var colorValue = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
var colorArray = colorValue.split(",");
var color = "#";
for( var i = 0; i < 6; i++ ){
color += colorArray[ Math.floor( Math.random() * 16 ) ];
}
return color;
}
// 绘制平面坐标系
function PlaneCoordinates() {
// 设置线点的颜色
var material = new THREE.LineBasicMaterial({
vertexColors: true
});
geometry.vertices.push(
new THREE.Vector3(0,0,0), // 起始点
new THREE.Vector3(0,10,0) // 结束点
);
for(var i = 0; i < 11; i++) {
var color01 = fn5(), color02 = fn5();
geometry.colors.push(
new THREE.Color( color01 ),
new THREE.Color( color02 ),
);
light = new THREE.Line(geometry, material);
light.position.x += i;
scene.add(light);
light = new THREE.Line(geometry, material);
light.rotation.z = -90 * Math.PI / 180;
light.position.y += i;
scene.add(light);
console.log(light)
}
}
/*********************************内容绘制区域************************************************/
camera.position.z = 10;
camera.position.y = 0;
camera.position.x = 0;
function animate() {
PlaneCoordinates();
render.clear();
render.render(scene, camera);
}
animate()
效果:

