three.js学习笔记（五）-点、线、面

最新推荐文章于 2023-11-27 10:08:03 发布

soraduo

最新推荐文章于 2023-11-27 10:08:03 发布

阅读量787

点赞数

文章标签：前端 three.js javascript WebGL

本文链接：https://blog.csdn.net/soraduo/article/details/97920230

版权

首先，three.js 用的是右手坐标系，和openGL相同

在Three.js中，一条线由点，材质和颜色组成。

点由THREE.Vector3表示，Threejs中没有提供单独画点的函数，它必须被放到一个THREE.Geometry形状中，这个结构中包含一个数组vertices，这个vertices就是存放无数的点（THREE.Vector3）的数组。这个表示可以如下图所示：

three.js向量

为了绘制一条直线，首先我们需要定义两个点，如下代码所示：

var p1 = new THREE.Vector3( -100, 0, 100 );

var p2 = new THREE.Vector3( 100, 0, -100 );

然后将两个点全都放入几何体Geometry 中的vertices中

var geometry = new THREE.Geometry();

geometry.vertices.push(p1);

geometry.vertices.push(p2);

geometry.vertices是一个数组，用于存储点，使用push方法可以把点放入进去，上图放入了两个点到geometry.vertices中，

然后可以构造线了。

var line = new THREE.Line( geometry, material, THREE.LinePieces );

其中meterial参数为材质，可以选择基本的LineBasicMaterial材质，

line 为我们想要的到的线条

下面写一个坐标格程序，建议也跟着写一遍，因为我也是跟着写的，效果很明显，可以加深记忆

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>网格图</title>
<script src="js/Three.js"></script>

<style type="text/css">
div#canvas-frame{
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
}
</style>
<script>
var renderer;
function initThree() {
/**
* 获取canvas-frame的宽度
* @type {HTMLElement}
*/
width=document.getElementById('canvas-frame').clientWidth;
/**
* 获取高度
*/
height=document.getElementById('canvas-frame').clientHeight;
/**
* 初始化渲染器，设置参数为抗锯齿
* @type {WebGLRenderer}
*/
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=0;
camera.position.y=1000;
camera.position.z=0;
camera.up.x=0;
camera.up.y=0;
camera.up.z=1;
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);
}
}

function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
renderer.clear();
renderer.render(scene, camera);

}

</script>
</head>
<body οnlοad="threeStart()">
<div id="canvas-frame">

</div>
</body>
</html>

1、定义2个点

在x轴上定义两个点p1(-500,0,0)，p2(500,0,0)。

geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );

geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );

2、算法

这两个点决定了x轴上的一条线段，将这条线段复制20次，分别平行移动到z轴的不同位置，就能够形成一组平行的线段。

同理，将p1p2这条线先围绕y轴旋转90度，然后再复制20份，平行于z轴移动到不同的位置，也能形成一组平行线。

经过上面的步骤，就能够得到坐标网格了。

soraduo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
three.js学习笔记（五）-点、线、面

首先，three.js 用的是右手坐标系，和openGL相同在Three.js中，一条线由点，材质和颜色组成。点由THREE.Vector3表示，Threejs中没有提供单独画点的函数，它必须被放到一个THREE.Geometry形状中，这个结构中包含一个数组vertices，这个vertices就是存放无数的点（THREE.Vector3）的数组。这个表示可以如下图所示：为了绘...
复制链接

扫一扫