three.js 点、线、坐标轴（02）

最新推荐文章于 2024-06-14 09:58:00 发布

Sandy_Star

最新推荐文章于 2024-06-14 09:58:00 发布

阅读量3.1k

点赞数 2

分类专栏：前端文章标签： three.js webgl js 3D

本文链接：https://blog.csdn.net/weixin_48931875/article/details/113753930

版权

文章目录

一、3D世界的组成

在计算机中，3d是由点组成，两个点能够组成一条直线，三个不在一条直线上的点就能够组成一个三角形面，无数三角形面就能够组成各种形状的物体。

网格模型：也叫mesh模型，给物体贴上皮肤也叫纹理，那这个物体就活起来了。

二、在Threejs中定义一个点

在三维空间中，某一个点可以用一个坐标点来表示。一个坐标点由x，y，z三个分量构成。在THREE中，点可以在右手坐标系中表示

右手坐标系：即x轴正方向向右，y轴正方向向上，z轴由屏幕从里向外。

在这里插入图片描述

2.1定义一个点

three.js中的内部定义：

THREE.Vector3 = function(x,y,z){
   
    this.x = x || 0; //当x为Null或undefined时，this.x的值被赋值为0
    this.y = y || 0;
    this.z = z || 0;
};

我们定义一个点时：

var point1 = new THREE.Vector3(2,3,4);
//第二种方法
var point1 = new THREE.Vector3();
point1.set(1,2,3);

2.2 一个栗子----画一条直线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画一条彩色的线</title>
    <script src="three.js"

最低0.47元/天解锁文章

Sandy_Star

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
three.js 点、线、坐标轴（02）

文章目录一、3D世界的组成二、在Threejs中定义一个点2.1定义一个点2.2 一个栗子----画一条直线三、几何体THREE.Geometry()四、线条的材质THREE.LineBasicMaterial4.1插值五、关于坐标系5.1 世界坐标和本地坐标5.2 AxesHelper三维坐标系一、3D世界的组成在计算机中，3d是由点组成，两个点能够组成一条直线，三个不在一条直线上的点就能够组成一个三角形面，无数三角形面就能够组成各种形状的物体。网格模型：也叫mesh模型，给物体贴上皮肤也叫纹理，那
复制链接

扫一扫