Punto y linea
Threejs utiliza un sistema de coordenadas para diestros, que se origina por defecto en el sistema de coordenadas para diestros de OpenGL
. El sistema de coordenadas correspondiente a la mano derecha en la figura es el sistema de coordenadas para diestros. En Threejs, las coordenadas son exactamente las mismas que las coordenadas de la derecha. La dirección positiva del eje x va hacia la derecha, la dirección positiva del eje y sube y el eje z va desde el interior hacia el exterior de la pantalla.
Unidimensional se refiere a una línea sin ancho ni alto.
Bidimensional se refiere a una superficie sin altura.
Tridimensional se refiere a un espacio tridimensional, que se compone de superficies.
Código de muestra:
<body>
<div id="app"></div>
<script>
// 创建场景
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 geometry = new THREE.BoxGeometry(10, 10, 10); //创建一个立方体几何对象Geometry
var material1 = new THREE.PointsMaterial({
color:"red",
size: 1.0 //点对象像素尺寸
});
//点模型
var point = new THREE.Points(geometry, material1);
// 创造一个立方体, 线模型
var material2 = new THREE.LineBasicMaterial({
color:"red",
});
var lines = new THREE.Line(geometry, material2);
// 创造一个立方体, 网格模型
var material3 = new THREE.MeshBasicMaterial({
color:"red",
wireframe:true,//网格模型以线条的模式渲染
});
var meshs = new THREE.Mesh(geometry, material3);
//网格模型添加到场景中
scene.add(meshs);
// 让渲染器渲染一下
//执行渲染操作 指定场景、相机作为参数
camera.position.z = 50;
camera.position.y = 10;
camera.position.x = 20;
render.render(scene, camera);
/*********************************内容绘制区域************************************************/
// 产生动效 网格对象进行旋转
function animate(){
render.render(scene, camera);
}
setInterval(animate,100);
</script>
</body>
efecto:
Dibujar una línea de color degradado
// 创建场景
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);
Efecto: la
línea dibujada se puede trasladar y rotar, y se pueden formar diferentes gráficos a través de estas operaciones
// 创建场景
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()
efecto:
