2.点线面

本文介绍了如何在Three.js中定义和操作三维空间中的点和线。通过使用THREE.Vector3来表示点,创建几何体和线条材质,设置顶点颜色,并最终将线条加入到场景中。详细步骤包括定义几何体、线条材质、颜色和顶点,以及线条的显示方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在Threejs中定义一个点

在三维空间中的某一个点可以用一个坐标点来表示。一个坐标点由x,y,z三个分量构成。在three.js中,点可以在右手坐标系中表示:

空间几何中,点可以用一个向量来表示,在Three.js中也是用一个向量来表示的,代码如下所示:

THREE.Vector3 = function ( x, y, z ) {

this.x = x || 0;
this.y = y || 0;
this.z = z || 0;

};

我们来分析这段代码:前面我们已经知道了THREE是Three.js引擎的一个全局变量。

那么THREE.Vector3呢,就是表示Vector3是定义在THREE下面的一个类。以后要用Vector3,就必须要加THREE前缀。当然Three.js的设计者,也可以不加THREE这个前缀,但是他们预见到,Three.js引擎中会有很多类型,最好给这些类型加一个前缀,以免与开发者的代码产生冲突。

THREE.Vector3被赋值为一个函数。这个函数有3个参数,分别代表x坐标,y坐标和z坐标的分量。函数体内的代码将他们分别赋值给成员变量x,y,z。看看上面的代码,中间使用了一个“||”(或)运算符,就是当x=null或者undefine时,this.x的值应该取0。
3、点的操作

在3D世界中点可以用THREE.Vector3D来表示。对应源码为/src/math/Vector3.js(注意:源码所在的位置,可能不同版本不一样,请自己搜索Vector3关键词来确定)。在您继续学习之前,你可以打开该文件浏览一下,推荐使用WebStorm,如果没有,你也可以用NotePad++。

现在来看看怎么定义个点,假设有一个点x=4,y=8,z=9。你可以这样定义它:

var point1 = new THREE.Vecotr3(4,8,9);

另外你也可以使用set方法,代码如下:

var point1 = new THREE.Vector3();

point1.set(4,8,9);

我们这里使用了set方法,为了以后深入学习的方便,这里将Vector3的常用方法列出如下,为了不影响文章的连贯性,我们专门列出了一个网页来介绍它。

1、首先,我们声明了一个几何体geometry,如下:

var geometry = new THREE.Geometry();

几何体里面有一个vertices变量,可以用来存放点。

2、定义一种线条的材质,使用THREE.LineBasicMaterial类型来定义,它接受一个集合作为参数,其原型如下:

LineBasicMaterial( parameters )

Parameters是一个定义材质外观的对象,它包含多个属性来定义材质,这些属性是:

Color:线条的颜色,用16进制来表示,默认的颜色是白色。

Linewidth:线条的宽度,默认时候1个单位宽度。

Linecap:线条两端的外观,默认是圆角端点,当线条较粗的时候才看得出效果,如果线条很细,那么你几乎看不出效果了。

Linejoin:两个线条的连接点处的外观,默认是“round”,表示圆角。

VertexColors:定义线条材质是否使用顶点颜色,这是一个boolean值。意思是,线条各部分的颜色会根据顶点的颜色来进行插值。(如果关于插值不是很明白,可以QQ问我,QQ在前言中你一定能够找到,嘿嘿,虽然没有明确写出)。

Fog:定义材质的颜色是否受全局雾效的影响。

好了,介绍完这些参数,你可以试一试了,在课后,我们会展示不同同学的杰出作品。下面,接着上面的讲,我们这里使用了顶点颜色vertexColors: THREE.VertexColors,就是线条的颜色会根据顶点来计算。

var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );

3、接下来,定义两种颜色,分别表示线条两个端点的颜色,如下所示:

var color1 = new THREE.Color( 0x444444 ),

color2 = new THREE.Color( 0xFF0000 );

4、定义2个顶点的位置,并放到geometry中,代码如下:

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

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

geometry.vertices.push(p1);

geometry.vertices.push(p2);

5、为4中定义的2个顶点,设置不同的颜色,代码如下所示:

geometry.colors.push( color1, color2 );

geometry中colors表示顶点的颜色,必须材质中vertexColors等于THREE.VertexColors 时,颜色才有效,如果vertexColors等于THREE.NoColors时,颜色就没有效果了。那么就会去取材质中color的值,这个很重要,大家一定记住。

6、定义一条线

定义线条,使用THREE.Line类,代码如下所示:

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

第一个参数是几何体geometry,里面包含了2个顶点和顶点的颜色。第二个参数是线条的材质,或者是线条的属性,表示线条以哪种方式取色。第三个参数是一组点的连接方式,我们会在后面详细讲解。

然后,将这条线加入到场景中,代码如下:

scene.add(line);

这样,场景中就会出现刚才的那条线段了。

学习的资料和源码我都共享到我的gitHub仓库中去了,大家有兴趣的可以去下载,欢迎foke,clone,加星星,也算是对我的一个鼓励吧

three学习资料的github地址
或者复制链接地址到浏览器
https://github.com/kingder-c/LearnThree.js

对整threeJS体系进行全面剖析。整理出全面的教学大纲,涵盖内容面非常广。此教学版本为threeJS107版本。关于版本不建议大家使用低于90的版本学习。以下是课程目录1-ThreeJS概览(基本图形简介,什么是点线面如何绘制点线面,什么是材质,什么是几何体,什么是相机,什么是渲染器,什么是场景)2-相机和渲染器(详解相机类型,渲染器如何使用,针对不同场景怎么用,怎么调效果,怎么渲染,怎么输出画布,如何解决透明问题等等)3-创建平面几何(常见的几何体如何使用,如何使用简单的几何体绘制出自定义自己想要的几何体,关于几何体的性能剖析,如何解决性能,几何体的渲染原理)4-高级图形算法常见库(求直线的斜率  计算线段与圆的交 计算线段的长度 判断折线是否在多边形内 等等)5-sprite精灵(怎么让一个图标永远朝向屏幕,精灵的属性,精灵材质原理等,广告提示框必用)6-骨骼游戏动画(什么是模型动画,常见游戏案例,如何让人头进行各种攻击动作)7-3d模型加载(常见模型格式,如何渲染不同格式,不同格式的特,什么格式性能优越,模型渲染异常,贴图不显示等问题详解)8-高阶动态纹理(你所不知道的纹理用法,我说你不知道,你肯定不知道)9-漫游轨迹以及其动画路径(怎么绘制贝塞尔曲线,如何使用曲线上的路径,跟随路径移动的原理,相机如何运动,物体如何运动)10-着色器(什么是着色器。初识着色器基础,着色器材质怎么用,怎么使用着色器库)11-常见渲染以及透明度问题12-对象拾取以及拖拽(3d世界里面如何拖拽物体,拖拽的原理,mousemove mouseon等的事件效果)13-世界坐标以及组的问题(什么是相对坐标,什么是世界坐标,什么是当前坐标,怎么转化父子坐标系,组的优化,为什么用组,组的优势)14-指定对象旋转中心(什么是物体的几何体中心,如何改变中心,如何绕轴转动)15-层级对象渲染(多个场景一键切换,切换的优势,针对大项目的用法)16-拓展了解系列(不定期不断更新案例,各种酷炫效果bloom,halo等,以及各种3d图表,粒子案例等,不断构建你的3d实践能力)
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、付费专栏及课程。

余额充值