首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Threejs入门之七:Threejs几何体

前面的代码中我们一直使用立体缓冲几何体BoxGeometry来构造物体,这样构造出来是一个长方体或正方体,Threejs提供了很多几何体API,如圆形缓冲几何体、圆锥缓冲几何体、圆柱缓冲几何体等,下面一一进行介绍...1.立方缓冲几何体(BoxGeometry),立方缓冲几何体我们前面已经使用过了,它是四边形原始几何类,它通常使用构造函数所提供“width”、“height”、“depth”参数来创建立方体或者不规则四边形...边缘几何体需要配合线段LineSegments来使用,LineSegments在若干对顶点之间绘制一系列线。...该几何体是通过扫描并计算围绕着Y轴(水平扫描)和X轴(垂直扫描)顶点来创建。...中提供了很多几何体API,这里由于篇幅原因,就不一一赘述了,具体可以查看Threejs官方文档。

1.3K30

Threejs入门之十:认识缓冲几何体BufferGeometry(三)

1.几何体顶点索引数据 经过前面两节介绍,我们对BufferGeometry有了更深入了解,但是,在我们之前创建面、线或点时候,我们给顶点坐标数据是不同,考虑下面的场景,如果我们给顶点坐标数据有重复坐标...答案当然是不用,我们可以借助Threejs提供几何体顶点索引geometry.index来实现。...2, 3,])然后,可以通过threejs属性缓冲区对象BufferAttribute表示几何体顶点索引.index数据。...2法线 0, 0, 1, //顶点3法线 0, 0, 1, //顶点4法线 0, 0, 1, //顶点5法线 0, 0, 1, //顶点6法线])在Threejs中,通过.attributes.normal...)、.rotateX()、.rotateY()等方法可以对几何体本身进行缩放、平移、旋转,这些方法本质上都是通过改变几何体顶点数据来实现

1.2K20
您找到你想要的搜索结果了吗?
是的
没有找到

Threejs入门之八:认识缓冲几何体BufferGeometry(一)

前面一节我们介绍了Threejs中常用几何体,这些几何体都是基于BufferGeometry (opens new window)类构建Threejs官方文档中对BufferGeometry 解释是...包括顶点位置,面片索引、法相量、颜色值、UV 坐标和自定义缓存属性值。...这个类用于存储与BufferGeometry相关联 attribute(例如顶点位置向量,面片索引,法向量,颜色值,UV坐标以及任何自定义 attribute ),BufferAttribute构造函数如下...// 设置几何体attributes属性位置属性geometry.attributes.position = attribute;5.通过上面的设置以后,我们就已经定义了一个几何体形状,在Threejs...入门之二:引用Threejs并创建第一个3D图形中我们讲过,一个物体由几何形状和材质组成,现在我们已经在上面定义了几何体形状,下面我们利用之前MeshBasicMaterial对象创建一个材质const

1.2K20

Threejs入门之九:认识缓冲几何体BufferGeometry(二)

前面一节我们初步了解了BufferGeometry,它可以自定义任何几何形状,它数据存储在BufferAttribute中。...我们也使用BufferGeometry创建了一个自定义mesh物体,但是,如果你跟着步骤创建了这个物体,用鼠标反转你会发现,这个物体只有一个面可以看到,反转后是看不到任何物体,这是因为在Threejs...,它和我们前面用过网格模型Mesh一样,都是threejs提供一种模型对象。...几何体顶点数据。...发现原来面已经变成了几个点 3.线模型对象 我们使用BufferGeometry同样可以创建线物体,Threejs给我们提供了多种线模型对象,连续先模型Line、闭合线条LineLoop、非连续线条

1.4K20

Threejs进阶之一:基于vite+vue3+threejs构建三维场景

前面的章节我们都是通过HTML+JS方式创建三维场景,从这一章节开始,我们后面将使用vite+vue3+threejs构建三维场景。...搭建项目环境打开vscode终端管理器,输入如下命令npm create vite@latest vue3-threejs-app --template vue在弹出选择框架提醒中,按上下键盘键,选择...Vue,然后回车 选择JavaScript,回车 提示项目创建完成, 输入cd vue3-threejs-app,进入该文件夹,输入npm install 安装项目需要依赖 输入npm run dev...main.js 是应用程序入口文件 vite.config.ts vite配置文件安装threejs终端中输入npm install three 安装threejs清楚App.vue页面默认内容及格式清楚...;重新刷新浏览器,问题解决 好,基于vite+vue3+threejs方式构建Threejs三维场景方法就说道这里,喜欢朋友点赞关注收藏哦!

5.3K22

Threejs进阶之十八:使用ExtrudeGeometry从二维图形创建三维几何体

上一节我们介绍了Threejs中二维图形相关类,这一节我们来聊一聊如何通过创建二维图形来生成三维图形 ExtrudeGeometry类 ExtrudeGeometry类(挤压缓冲几何体)...它构造函数如下所示: 构造函数 ExtrudeGeometry(shape, options) 该对象将一个二维形状挤出为一个三维几何体 ExtrudeGeometry参数 shape:ExtrudeGeometry...所需形状对象或者一个包含形状数组。...steps — int,用于沿着挤出样条深度细分数量,默认值为1。 depth — float,挤出形状深度,默认值为1。...这两个类具体特性和方法,我们在上一节Threejs进阶之十七:ThreejsPath、Shape和ShapeGeometry类中已经介绍过了,不了解小伙伴请参考上一节博客内容。

77120

Threejs入门之二:引用Threejs并创建第一个3D图形

Threejs引入1.新建一个文件夹,命名为threejs_demo,在该文件夹下新建一个lib文件夹,将前面下载threejs源码中build文件夹中three.module.js文件拷贝到lib...场景概念原本是戏剧、电影中概念,指的是某一个特定场面;threejs场景其实就是一个特定场面,想象一下,假如你是导演,要拍一个火车进站镜头,这就是一个场景 2.Geometries:几何体就是立体图形...,如正方体、球、圆等图形;在场景中就相当于一个道具外形结构;threejs中提供了很多几何体,如立方体(BoxGeometry)、圆(CircleGeometry)、圆锥(ConeGeometry)等...threejs中物体由Geometries和Materials两部分组成,这就相当于电影中道具枪一样,它由外形结构(几何体)和材料颜色(材质)组成。...创建一个3D图形了解了threejs几个重要概念,下面来创建一个简单3D物体,来感受下threejs强大。

1.2K41

webgl(threejs)生成房间楼层

该对象通过一个Path3D路径来构造一个墙几何体,该几何体可以分成start,end,top,bottom,outside,inside等几个表面分组,这样就方便给内表面和外表面,以及顶面等设置不同材质贴图效果...this.generateAZSide(vert,inner,outer,innerTop,outerTop,false); } 通过PathCubeGeometry,我们可以方便构建墙体...要在墙上挖洞,可以在墙几何体上进行差集操作,比如减去一个立方体,这样就可以在墙面上生成一个方型洞。 在THREEJS上面,有一个开源BSP包,THREEBSP。...: 图片 在把创建好门和窗放到相应挖洞位置,效果如下所示: 图片 创建地板 在threejs中,通过ExtrudeGeometry可以创建地板几何体,然后指定地板材质,既可以创建一个地板对象...; ExtrudeGeometry是threejs本身就存在对象,BSP也可以找到开源包可以使用。

1.4K20

Threejs入门之四:Threejs

前面我们用Threejs创建了一个3D立方体到浏览器,并使其跟随鼠标旋转和缩放,但是,上帝说要有光,于是就有了光~~~额,好吧,这一节我们来认识下Threejs灯光,Threejs提供了很多灯光API...,我们在Threejs中也要给点光源一个位置,然后将其添加到场景中// 点光源位置 pointLight.position.set(400,300,200)scene.add(pointLight)此时运行浏览器...,可以看到物体表明已经有了明暗变化,光能照到地方是亮,找不到地方是暗。...3.DirectionalLight:平行光是沿着特定方向发射光。可以理解为这种光是无限远,从它发出光线都是平行。...THREE.SpotLight( 0xffffff );spotLight.position.set( 0, 200, 100 );scene.add(spotLight)浏览器显示效果如下 总结:Threejs

3K30

ThreeJS 掏洞术

前言 最近闲来无事 ,于是我就想用 ThreeJS 画个房子 ๑乛◡乛๑ 。而我选择从画 ‘墙’ 开始下手, 其实说白了‘墙’ 就是个立方体而已,但是窗户、门呢,所以就需要在立方体上边掏个洞。...那么本文将‘简单描述’一下掏洞过程,我之所以说‘简单描述’是因为本文中不会掺杂 ‘墙’ 这个话题,在本文中只简述《如何在ThreeJS立方体上掏洞 》干货。...示例 由于ThreeJS本身并没有提供用于几何体布尔运算函数,那么首先认识一个可以实现对几何体布尔运算 扩展库 ThreeBSP ,它来自GitHub,它可以帮我们获取两个几何体相同部分、将两个几何体合并...、从一个几何体中删除与另一个几何体重合部分。...相关函数 名称描述intersect(交集)获取两个几何体相同部分union(并集)将两个几何体合并subtract(差集)从一个几何体中删除与另一个几何体重合部分。

3.6K31

Threejs入门之五:Threejs辅助对象

在继续Threejs入门之旅之前,我们先来了解几个Threejs提供辅助对象,这些辅助对象有助于我们更好了解Threejs。...Threejs提供了很多辅助对象,这里我们先了解几个我们经常用到坐标轴辅助对象、点光辅助对象、平行光辅助对象和聚光灯锥形辅助对象。...默认为 1. color – (可选) 辅助线颜色,如果没有设置颜色将使用光源颜色....创建聚光灯辅助对象const spotLightHelper = new THREE.SpotLightHelper(spotLight,0x0000ff)scene.add(spotLightHelper) 总结:Threejs...辅助对象能帮助我们在开发中比较直观感受到特定对象位置,为我们调整参数提供了便利,除了上面介绍几种辅助对象外,Threejs还提供了很多其他辅助对象,具体可以查看官方文档,里面也提供了使用例子

1.1K10

ThreeJS 炫酷特效旋转多面体Web页 Demo 01《ThreeJS 炫酷特效制作》

ThreeJS 三个要素,若对建模、游戏有过了解同学在学习 ThreeJS 时对知识点理解会更容易接受。...在 ThreeJS 中有三个很关键对象,分别是 摄像头、场景以及渲染器: 其中 场景 是通过 ThreeJS “搭建”呈现特效一个“舞台”,创建好一个场景后,即可往这个场景中添加对应多种物体,例如多边形...若不移动这个距离,在创建几何体时将会无法很好看见几何体,因为默认位置为这个坐标系中心点。...) 3.3 创建 Mesh 用于组装 3D 对象 Mesh 在 ThreeJS 3D 对象中是必要,通过 创建 Mesh 组合 3D 对象,创建 Mesh 需要指定对应几何体以及材质,如以下代码...Object3D 用于存放这个几何体,通过 Object3D 我们可以方便对 完整几何体进行 缩放、移动等。

44010

Threejs入门之十九:Threejs向量

今天我们来认识下Threejs向量,在Threejs中,有二维向量Vector2、三维向量Vector3和四维向量Vector4之分,这些向量可以表示很多数据,后面会一一介绍,在了解Threejs向量之前...,我们先来复习下数学中向量1.数学中向量在数学中,向量(也称为矢量),指具有大小和方向量。...Threejs向量二维向量(Vector2)一个二维向量是一对有顺序数字(标记为x和y),可用来表示很多事物,例如: 一个位于二维空间中点(例如一个在平面上点)。...一个在平面上方向与长度定义。...任意、有顺序、四个为一组数字组合。 其他一些事物也可以使用四维向量进行表示,但以上这些是它在three.js中常用用途。

86020

Threejs入门之十二:认识Threejs材质

材质是描述对象外观,Threejs中提供了很多材质API,今天我们来了解几个常用材质类API 1.Material Material是所有材质基类,所有继承自Material材质都基础了Material...属性和方法,Material常用属性有: alphaTest:控制透明度alpha值,默认值为0,如果设置不透明度(opacity)低于此值,则不会渲染材质。...默认为true id : 材质实例唯一编号 needsUpdate:指定需要重新编译材质 opacity : 在0.0 - 1.0范围内浮点数,表明材质透明度。...specular : 材质高光颜色。默认值为0x111111(深灰色)颜色Color shininess : .specular高亮程度,越高值越闪亮。...85, fog:true, combine:THREE.MultiplyOperation, reflectivity:0.1, refractionRatio:0.98}) 效果 以上就是Threejs

1.3K10

一个高质量老虎

虎年了,最近爱上了threejs 框架,看着threejs 示例老虎头比较帅,研究下,怎么弄这只高质量老虎。...整体思路 SVG 绘制老虎图像,fill 和 stroke 用 标签区分起来 SVGLoader加载SVG图片路径 循环遍历路径创建ShapeGeometry几何体和材质,并生成mesh...,用group 收集 threejs 利用webglRender 渲染group mesh 具体问题 SVG 如何绘制 标签含义 SVGLoader 怎么实现stroke和fill 源码分析 带着这些问题看看源码是怎么实现这个过程...,threejs 基本场景略过,具体可以去看源码。...wireframe 还有一个问题就是 wireframe,材质是干什么呢? .wireframe : Boolean 将几何体渲染为线框。默认值为false(即渲染为平面多边形)。

53740

Threejs入门之二十:使用InstancedMesh(实例化网格)批量创建物体

InstancedMesh(实例化网格)是Threejs提供一种特殊网格Mesh,它可以批量创建具有相同几何体和材质物体;构造函数InstancedMesh( geometry : BufferGeometry...案例中instancing / raycast 效果 引入Threejs并创建场景import * as THREE from 'three' import { OrbitControls } from...这里使用Threejs提供IcosahedronGeometry来创建几何体 IcosahedronGeometry是二十面缓冲几何体,用于生成一个二十面体,其构造函数如下: IcosahedronGeometry...数量循环设置meshes中每一个小球位置和颜色 我们首先定义一个变量index作为每一个小球索引ID,初始值为0 定义一个变量white,用于存放Threejs颜色 定义一个offset,用于存放偏移量...().setHex(Math.random() * 0xffffff)) OK,今天就先到这里吧,下次我们来实现这个有小球组成立方体与鼠标的交互效果,仿照Threejs案例中效果来实现当鼠标滑过某个小球时

2K20

Threejs项目实战之四:实现地图雷达效果

目录 最终效果 代码实现 创建项目 DigitalMapView.vue核心代码 最终效果 最近事情比较多,今晚难得有空,就抽空完成了一个使用Threejs实现地图雷达扫描效果程序,下面说下代码实现原理及核心代码...,老规矩,先看下效果图 # 实现原理 通过加载模型文件,实现模型加载,这里使用是FBX模型,通过Threejs提供FBXLoader来加载fbx模型,加载完成后,通过traverse方法遍历模型...,并对该模型子类进行不同颜色设置,这里主要是对建筑颜色定义和对地面的颜色定义;然后,通过使用threejs提供CircleGeometry创建几何体,并设置其材质;最后,通过使用着色器对雷达效果进行渲染...,通过调用THREE.Clock()创建一个计时器实现雷达扫描动画 代码实现 创建项目 使用vite构建工具创建一个vue项目,具体如何创建就不在赘述了,如果你还不知道如何创建项目,建议你先不要看下面的内容了...,先看下基础vue3框架再来阅读下面的内容 创建项目后,删除vite构建工具为我们创建HelloWord.vue文件和style.css中样式,删除App.vue中样式,并在components

52220

Threejs入门之十四:Threejs组(Group)对象

组其实就是一个集合,将不同物体添加到一个组中,就形成了一个集合; 比如我们可以创建两个物体,然后将这两个物体使用group.add方法添加到同一个组中// 创建几何体const geometry =...在Threejs官方文档中介绍Group时说它几乎与Object3D相同,因此,Group属性和Object3D相同 .children属性 使用group.children属性可以查看所有group...,其对各个物体位置影响是综合作用结果。...使用group.rotate设置组旋转 group.rotateY(Math.PI/4) .traverse()方法 递归遍历 可以通过递归遍历算法去遍历Threejs一个模型对象包含所有后代group.traverse...= new THREE.AxesHelper(50)cubeA.add(cubeAaxesHelper)好了,关于ThreejsGroup对象,就介绍到这里,更多功能可以查看官方文档,喜欢关注点赞哦

2.2K10
领券