3.点线面后篇

最新推荐文章于 2018-07-03 11:32:51 发布
最新推荐文章于 2018-07-03 11:32:51 发布
阅读量473 收藏
点赞数
分类专栏： three.js教程 文章标签： webgl three-js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24065733/article/details/77322672
版权
本文介绍Three.js使用右手坐标系，并详细讲解如何在WebGL中绘制线条。通过定义点、添加材质，展示如何用THREE.Line创建线段。同时，展示了绘制高中坐标平面的方法，代码已分享在GitHub仓库LearnThree.js中。
摘要由CSDN通过智能技术生成

坐标系

Threejs使用的是右手坐标系，这源于opengl默认情况下，也是右手坐标系。
坐标系

WebGL中的点线面

线条的深入理解

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

点由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 );

请大家思考一下，这两个点在坐标系的什么位置，然后我们声明一个THREE.Geometry，并把点加进入，代码如下所示：

var geometry = new THREE.Geometry();

geometry.vertices.push(p1);

geometry.vertices.push(p2);

geometry.vertices的能够使用push方法，是因为geometry.vertices是一个数组。这样geometry 中就有了2个点了。

然后我们需要给线加一种材质，可以使用专为线准备的材质，THREE.LineBasicMaterial。

最终我们通过THREE.Line绘制了一条线，如下代码所示:

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

ok，line就是我们要的线条了。
6、画高中时深爱的坐标平面

我还深爱着高中时的那个坐标平面，它勾起了我关于前排同学的细细长发的回忆…

这个平面的效果如下所示：three.js画坐标系

它横竖分别绘制了20条线段，在摄像机的照射下，就形成了这般模样。

完整代码如下

<!DOCTYPE html>
<html>
    <head>
        <
最低0.47元/天 解锁文章
kingder-c
关注
专栏目录
three.js(3)：点、线、面（颜色插值，几何体三种渲染方式）
spider_man
08-26 4457
参考：http://www.yanhuangxueyuan.com/Three.js_course/face.html 直线模型对象 两个顶点确定一条直线，构造函数THREE.Vector3()可以用来创建一个顶点位置，下面代码中Vector3(10,0,0)表示三维笛卡尔坐标系中顶点坐标(10,0,0), vertices是几何体对象的顶点坐标属性，从Javascript语言的角度看vertices是数组对象，push()是Javascript语言支持的方法， 用于给数组增加元素。 &lt
Opencv之点线面（c++版）
u011402444的专栏
07-14 1244
#include #include using namespace cv; using namespace std; int main() { //圆心 Point center = Point(255,255); //半径 int r=100; Mat picture(500,500,CV_8UC3,Scalar(255,255,255)); //圆
点线面算法C++描述
01-23
各种常用的点线面算法，C++描述实现
2.点线面
Kingder
08-17 450
在Threejs中定义一个点在三维空间中的某一个点可以用一个坐标点来表示。一个坐标点由x,y,z三个分量构成。在three.js中，点可以在右手坐标系中表示：空间几何中，点可以用一个向量来表示，在Three.js中也是用一个向量来表示的，代码如下所示：THREE.Vector3 = function ( x, y, z ) {this.x = x || 0; this.y = y || 0; thi
C++绘图 底层开发 点线面的绘制
12-25
C++计算机制图，包括点线面的绘制。地理信息系统专业课程实习。底层开发。适合初学者。
openlayers5绘制点线面圆.zip
08-01
这个"openlayers5绘制点线面圆.zip"文件应该包含了一个示例项目，演示如何在OpenLayers 5中实现这些绘制功能。 在OpenLayers 5中，我们可以使用`ol.interaction.Draw`交互类来实现地图上的绘制操作。首先，你需要...
Cesium绘制点线面的工具封装
08-17
使用之前先看博客，里面有工具的介绍： Cesium 实战记录（四） 绘制点线面的工具封装 https://blog.csdn.net/KK_bluebule/article/details/126384623
GIS点线面制作步骤.ppt
11-20
Step 3: 创建点要素 单击Create Features中的“门”按钮，选择创建点要素。在图中单击几个点作为门的位置，这些点将组成点要素。 Step 4: 编辑点要素 在编辑状态下输入信息，例如点的名称、描述等信息。同时，...
1.2点线面体.ppt
05-28
点线面体
点线面等图形元素的数据库存储（C++ sqlserver）
10-05
实现了点线面及基本图形的数据库存储，涉及了计算机图形学数据库等知识
空间、点、线面
07-11
1.建立三个类，点、线、面。 2.在线和面的输入时，不同方式进行建立完成时，进行标准式进行标准化 3 运用数学知识进行进行线面关系，线线关系等关系的计算 4运用数学知识进行距离的计算。
地图点线面符号编辑器
05-08
控件地图点线面符号的编辑器控件和绘图控件，适用于VC、 Delphi环境，Win2000开发，带VC和Delphi的使用 例子
基于three.js实现的炫酷3D线条背景动画特效
06-12
一款小清新风格基于three.js实现的炫酷Canvas 3D线条背景动画特效，挺酷的效果。
MFC画点线面
04-14
用MFC基本功能绘制点线面，易于新手进行学习实践。熟悉面向对象的方法
Three.js中的点线面
ZhzetFor的博客
07-03 820
1.点3D空间中点用向量表示THREE.Vector3 = function ( x, y, z ) {this.x = x || 0;this.y = y || 0;this.z = z || 0;};||0表示在x没有定义是其默认值为或者也可以var point1 = new THREE.Vector3();point1.set(4,8,9);2.线核心代码：geometry.vertices...
Three.js描绘点线面 （含满天星空Demo）
laok_的博客
07-24 6354
Three.js描绘点线面 （含满天星空Demo）1.点在three.js中利用THREE.Vector3()是用来缺点点的位置的，它的三个参数分别是对应于三维坐标的x轴，y轴和z轴。PointsMaterial 来确定点的材质，最后是要使用THREE.Points( starsGeometry, starsMaterial )来创建这个点。var starsGeometry = new THRE
点线面子对象法
rushing的博客
05-30 891
点线面子对象法
ArcgisEngine 点线面要素的渲染
06-13
AE二次开发
vue3 Fabric.js 点线面绘制
最新发布
08-21
Vue 3 是一个渐进式的JavaScript框架，用于构建用户界面。Fabric.js 是一个库，允许在HTML5 canvas元素上绘图和操作图形。结合Vue 3与Fabric.js可以创建一个响应式的绘图应用。 在Vue 3中使用Fabric.js进行点线面绘制，通常需要经历以下步骤： 1. 引入和初始化Fabric.js：首先需要在项目中引入Fabric.js库，然后创建一个canvas元素，并使用Fabric.js对其进行初始化。 2. 创建绘图对象：在初始化后，可以通过Fabric.js提供的API创建各种图形对象，例如矩形、圆形、线条和多边形等。 3. 管理状态和交互：利用Vue 3的响应式特性，可以管理图形对象的状态，如颜色、大小、位置等，并通过事件处理响应用户的交互动作，如拖拽、缩放、旋转等。 4. 渲染和更新：通过Vue 3的模板语法和数据绑定功能，可以在组件的模板中引用canvas，以便实时渲染图形对象的变化。 以下是一个简单的例子，展示如何在Vue 3中使用Fabric.js创建一个线条： ```javascript <template> <canvas ref="myCanvas" width="300" height="300"></canvas> </template> <script setup> import { onMounted, ref } from 'vue'; const myCanvas = ref(null); onMounted(() => { const canvas = new fabric.Canvas(myCanvas.value, { width: 300, height: 300, }); const line = new fabric.Line([50, 150, 250, 150], { stroke: 'black', strokeWidth: 5, }); canvas.add(line); canvas.renderAll(); }); </script> ``` 在这个例子中，我们在Vue 3的`<template>`中定义了一个canvas元素，并通过`ref`创建了一个引用。在`<script setup>`中，我们在组件加载完成后使用Fabric.js创建了一个线对象，并将其添加到canvas上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值