首页
学习
活动
专区
工具
TVP
发布
您找到你想要的搜索结果了吗?
是的
没有找到

three.js 几何体(二)

上一篇简单的介绍了几何体的构造体参数,这一篇郭先生就更加详细的说一说(十分简单的几何体我就不说了) 1....ShapeGeometry形状几何体 image.png 形状几何体方便我们从一个或多个路径形状中创建一个单面多边形几何体,和canvas一样都是二维图形。...TextGeometry文本几何体 image.png 文本几何体是一个用于将文本生成为单一的几何体的类。...TubeGeometry管道几何体 image.png 管道几何体顾名思义就是可以非常方便的制作出类似管道的几何体。...即可以是二维的曲线,也可以是三维的曲线,关于曲线的知识我以后会说, var curve = new THREE.CatmullRomCurve3([ //CatmullRomCurve可以通过一系列点创建一条平滑的曲线

90510

Three.js教程(6):几何体

再添加到场景中 scene.add(mesh); } }, }; 这里我们画了一个3/4圆,你可以设置segments,你会发现当小于3的时候也会按照3个来绘制的,如果是小数,Three.js...BoxGeometry 上面我们说的都是平面几何体,现在看看三维几何体,首先来看的是BoxGeometry,这个几何体我们前面见得挺多的,就是一个长方体。...更多几何体 我们上面讲了5种几何体,估计你也知道了创建几何体的套路了,其他几何体创建方式和上面的基本一致,这里就不做更多的叙述了。...Three.js还提供的几何体有:ConeGeometry、CylinderGeometry、DodecahedronGeometry、ExtrudeGeometry、IcosahedronGeometry...当然Three.js不仅仅可以使用给出的几何体,甚至还可以自定义几何体,最重要的是还可以导入其他建模软件做出来的模型,这一点是非常厉害的。

1.7K61

Three.js - 走进3D的奇妙世界

*/ // 这是自定义的创建几何体方法,如果创建几何体后续会介绍 var kleinGeom = createKleinGeom(); scene.add(kleinGeom); // 场景中添加几何体...以创建一个简单的立方体为例,创建简单的立方体需要添加8个顶点和12个三角形的面,创建顶点时需要指定顶点在坐标系中的位置,添加面的时候需要指定构成面的三个顶点的序号,第一个添加的顶点序号为0,第二个添加的顶点序号为...geometry.faces.push(new THREE.Face3(1, 3, 4)); geometry.faces.push(new THREE.Face3(3, 6, 4)); 4.1 正面和反面 创建几何体的三角形面时...五、材质 创建几何体时通过指定几何体的顶点和三角形的面确定了几何体的形状,另外还需要给几何体添加皮肤才能实现物体的效果,材质就像物体的皮肤,决定了物体的质感。...材质默认是在几何体的正面进行贴图的,如果想要在反面贴图,需要在创建材质的时候设置side参数的值为THREE.BackSide,代码如下: /* 创建反面贴图的球形 */ // 球体 var geom

8.2K20

Three.js - 走进3D的奇妙世界

*/ // 这是自定义的创建几何体方法,如果创建几何体后续会介绍 var kleinGeom = createKleinGeom();  scene.add(kleinGeom); // 场景中添加几何体...geometry.faces.push(new THREE.Face3(1, 3, 4)); geometry.faces.push(new THREE.Face3(3, 6, 4)); 4.1 正面和反面 创建几何体的三角形面时...五、材质 创建几何体时通过指定几何体的顶点和三角形的面确定了几何体的形状,另外还需要给几何体添加皮肤才能实现物体的效果,材质就像物体的皮肤,决定了物体的质感。常见的材质有如下几种: ?...这个例子是通过在球形几何体的反面进行纹理贴图实现的全景视图,实现原理是这样的:创建一个球体构成一个球形的空间,把相机放在球体的中心,相机就像在一个球形的房间中,在球体的里面(也就是反面)贴上图片,通过改变相机拍摄的方向...材质默认是在几何体的正面进行贴图的,如果想要在反面贴图,需要在创建材质的时候设置side参数的值为THREE.BackSide,代码如下: /* 创建反面贴图的球形 */ // 球体 var geom

9.6K40

我是如何用 Three.js 在三维世界建房子的(详细教程)

这样一个房子,其实也是由几个几何体堆起来的: 具体有这么些几何体: 地板就是个平面,用 PlaneGeometry(平面几何体) 就可以画,贴上个纹理贴图就行。...Three.js 提供了很多的几何体,可以画一些简单的物体,但复杂的物体就很难画出来了,这类物体一般会用专业的 3D 建模软件来画,导出 FPX 或者 OBJ 格式的文件由 Three.js 加载并渲染出来...我们创建平面几何体(PlaneGeometry),长和宽制定一个很大的值,比如 10000,然后加载草地的图片作为纹理(Texture),构成材质。之后就可以创建出草地了。...接下来是创建房子,房子由地板、两侧的墙、前面的墙、后面的墙、门框窗框、房顶、床构成,要分别创建每一部分,我们把它们放到单独的 Group(分组)里。...position.x = -50; roof2.position.z = 155; createWindow(); createDoor(); createBed(); } 创建地板也是平面几何体

4.7K60

Three.js建模

Three.js中,一个可见的物体是由几何体和材料构成的。在这个教程中,我们将学习如何从头开始创建新的网格几何体,研究Three.js为处理几何对象和材质所提供的相关支持。...例如,让我们来看看如何直接为这个金字塔创建一个对应的Three.js几何体: image.png 请注意,金字塔的下部是一个正方形,因此需要拆分为两个三角形,才能将金字塔表示为Mesh网格对象。...对于Three.js,该函数就是返回THREE.Vector3类型值的常规 JavaScript 函数。参数化表面几何形状是通过在uv点阵中计算函数值而创建的。...你可以用它做的一件事是创建一个管状几何体,它定义了一个由管沿着曲线中心扫过运动扫过的几何体。...示例程序使用上述定义的helix曲线创建两个管装几何体: image.png 几何形状使用如下代码创建: tubeGeometry1 = new THREE.TubeGeometry( helix,

7.2K02

three.js 初步

DOCTYPE html> My first three.js app //根据文件的位置,我放在了跟html文件放到了js的统计目录 <script src="js/<em>three.js</em>...<em>创建</em>一个场景,我们需要以下几个对象:场景、相机和渲染器 一个场景:把这个看做一个舞台,然后将所有需要的对象添加上去。 一个相机:在这个案例中我们<em>创建</em>一个透视摄像机,但它也可能是投影相机。...mesh需要包含<em>几何体</em>参数(<em>几何体</em>形状)和材质(包括:颜色、贴图、透明度)等参数。...场景里包含着网格模型,每一个网格模型里有一个<em>几何体</em>,而<em>几何体</em>是不能被渲染的,只有<em>几何体</em>和材质结合成网格才能被渲染到屏幕上。如下代码就是这个意思。

4.5K50

使用Three.js构建基础3D场景 | 《Three.js零基础直通03》

/script.js"> 然后再创建一个 script.js 文件,里面的代码很简单,就一行 console.log('Hello Three.js'...创建我们第一个3D场景 现在准备好用 Three.js 在网页里来创建我们的第一个3D场景。...要创建一个场景,使用Scene这个类: // Scene const scene = new THREE.Scene() 3D对象 3D对象可以是很多东西,比如一些最基本的几何体,导入的3D模型,粒子...我们从创建一个最简单的红色立方体开始吧。 立方体,其实是一种名为Mesh的对象。而Mesh是由几何体和材质组合的。...Three.js中内置了许多基本的几何体类型和许多基础材质,但第一节课我们还是先简单一点,就创建一个立方体(BoxGeometry)和基础材质。

5.4K40

Three.js』起飞!

是一篇面向小白的笔记~ Three.js 官网 下载 Three.js Three.js GitHub地址 通过上面的地址,可以下载 Three.js 这是下载下来解压后的文件 创建项目 我习惯使用...下载下来的包解压后,找到 src/Three.js ,并将其复制到 Three-study-demo/js 里 项目到此就算创建好了。...起步 了解上面所说的 基础概念 后,我们根据 官方文档 上面的案例创建出第一个场景。 本文的第一个场景会比 Three.js 官网上的更加简单,步骤如下: 创建 HTML 容器,用来绑定画布的。...camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) // 【步骤4】 // 创建一个立方几何体...= new BoxGeometry() // 材质 const material = new MeshBasicMaterial({ color: 0x002299 }) // 组合立方几何体和材质

10.4K40

Three.js 画个 3D 生日蛋糕送给他(她)

不妨用 Three.js 做个 3D 的蛋糕送给 ta,既浪漫又能展现你技术的魅力。 这篇文章我们就来学习下如何用 Three.js 画一个蛋糕。...代码地址:https://github.com/QuarkGluonPlasma/threejs-exercize Three.js 相关基础 Three.js 是通过场景 Scene 来管理所有的物体的...Mesh 比较常用,它是由一个个三角形构成的几何体,还可以在每个面上贴图。所以,参数有两个,几何体 Geometry 和材质 Material。...比如圆柱体就是一个 Mesh,创建它的时候要指定圆柱几何体 CylinderBufferGeometry 和每个面的材质 Material。...首先我们学习了下 Three.js 的基础:通过 Scene 来管理物体,物体可以分组,物体包括 Mesh、Sprite 等,Mesh 是三角形构成的 3D 物体,要分别指定几何体 Geometry 和材质

3.2K30

【带着canvas去流浪(12)】用Three.js制作简易的MARVEL片头动画(上)

大作业说明 通读完上一篇博文中提及的教程,觉得应该搞个大作业巩固一下所学的知识,想起刚上映的漫威宇宙第三阶段收官之作《蜘蛛侠·英雄远征》,于是决定仿一个MARVEL的片头动画作为three.js的课后练习...如果使用THREE.js提供的Geometry基本不会遇到什么问题,例如上图中的示例,就将视频素材贴在了立方体的各个面上,然而当你使用其他带有一些自定义性质的几何体实例,比如自己画了一个shape然后拉伸成为拉伸体...3.2 纹理贴图的基本原理-UV映射 在Three.js中,几何体是通过点和面的特征构建起来的,如果将一个几何体实例对象在控制台打印出来,就可以看到存储端点坐标信息的vertexs和存储面信息的faces...当你构建一个立方体时,会发现它的faces属性数组中有12个面的信息,因为Three.js中默认使用三角面片来构建几何体,一个矩形表面需要用两个三角面片来构建,(你可以将立方体材料material中传入...,这就唯一限定了截取表面到几何体三角面的贴图样式。

3.1K51

three.js之初探骨骼动画

今后的几篇郭先生主要说说three.js骨骼动画。...three.js骨骼动画十分有意思,但是对于初学者来说,学起来要稍微困难一些,官方文档比较少,网上除了用圆柱体的例子就是引用外部模型的,想要熟练使用骨骼动画就需要不断地探索和练习。...这篇是初探three.js骨骼动画,也不深入讲解,先说说它的实现和原理,然后一点一点解读官网案例,骨骼动画官网案例 image.png 1. 骨骼动画的实现和原理 1....生成带有skinIndex和skinWeight属性的几何体 createGeometry(sizing) { //创建一个圆柱体 var geometry = new THREE.CylinderBufferGeometry...创建蒙皮网格并添加骨骼显示助手 createMesh(geometry, bones) { //创建一个带蒙皮的材质 var material = new THREE.MeshPhongMaterial

2.4K50

Three.js深入浅出:3-三维空间

无论是创建引人入胜的交互式 3D 场景、还是打造惊艳的虚拟现实体验,Three.js 都展现出了强大的潜力和灵活性。...本系列文章将深入探讨 Three.js,从基础入门到高级应用,带领读者逐步掌握 Three.js 的核心概念和技术要点。...通过本系列文章的学习,读者将能够掌握使用 Three.js 创建精美的 3D 可视化效果,以及实现交互式的虚拟场景的能力。...通过使用这些三维空间的概念,你可以在Three.js创建具有真实感的3D场景,包括摄影机、灯光、材质和几何体等元素,并对它们进行精确的定位、旋转和缩放,从而呈现出生动的三维世界。...测试:设置长方体xyz不同方向尺寸 // 设置几何体长宽高,也就是x、y、z三个方向的尺寸 //对比三个参数分别对应xyz轴哪个方向 new THREE.BoxGeometry(100, 60, 20)

19650
领券