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

Three.js:无法使用THREE.ExtrudeGeometry打孔(剪切)线条形状

Three.js是一个用于创建和展示3D图形的JavaScript库。它提供了丰富的功能和工具,使开发人员能够轻松地在Web浏览器中创建交互式的3D场景和动画效果。

在Three.js中,THREE.ExtrudeGeometry是一个用于创建立体几何体的类。它可以通过指定一个二维形状和一些参数来创建一个立体体积。然而,THREE.ExtrudeGeometry在处理线条形状时无法进行剪切。

要解决这个问题,可以使用其他方法来实现剪切线条形状的效果。一种常见的方法是使用THREE.Shape和THREE.ExtrudeBufferGeometry来创建一个闭合的形状,然后使用THREE.ShapeUtils进行剪切。

以下是一个示例代码,演示了如何使用THREE.Shape和THREE.ExtrudeBufferGeometry来剪切线条形状:

代码语言:txt
复制
// 创建一个线条形状
var shape = new THREE.Shape();
shape.moveTo(0, 0);
shape.lineTo(0, 1);
shape.lineTo(1, 1);
shape.lineTo(1, 0);

// 创建一个闭合的形状
var hole = new THREE.Path();
hole.moveTo(0.2, 0.2);
hole.lineTo(0.2, 0.8);
hole.lineTo(0.8, 0.8);
hole.lineTo(0.8, 0.2);
shape.holes.push(hole);

// 创建一个几何体
var geometry = new THREE.ExtrudeBufferGeometry(shape, { depth: 0.5, bevelEnabled: false });

// 创建一个材质
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// 创建一个网格对象
var mesh = new THREE.Mesh(geometry, material);

// 将网格对象添加到场景中
scene.add(mesh);

在这个示例中,我们首先创建了一个线条形状,并使用THREE.Path创建了一个闭合的形状作为剪切区域。然后,我们使用THREE.ExtrudeBufferGeometry创建了一个几何体,将线条形状和剪切区域传递给它。最后,我们创建了一个网格对象,并将其添加到场景中。

这只是一个简单的示例,你可以根据自己的需求进行更复杂的线条形状剪切操作。如果你想了解更多关于Three.js的信息,可以访问腾讯云的Three.js产品介绍页面:Three.js产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

上一节我们介绍了Threejs中二维图形相关的类,这一节我们来聊一聊如何通过创建的二维图形来生成三维图形 ExtrudeGeometry类 ExtrudeGeometry类(挤压缓冲几何体)是Three.js...我们可以使用两个Three.js对象来创建二维图形:THREE.Shape和THREE.Path。...这里只做简单的介绍 Shape Shape是一个二维轮廓线,由一系列的点、线条和圆弧等组成。可以通过将这些基本图元组合在一起来构造一个具有复杂轮廓的形状。...Path 在创建Shape对象时,我们也可以使用Path对象来定义形状的基本轮廓线,它由一系列的点和线条构成。...Shape或Path对象,我们可以通过THREE.ExtrudeGeometry的构造函数中的shapes参数来创建相应的轮廓线(outline)。

1.5K20

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

前面的墙稍微复杂些,它也是不规则的,可以用 ExtrudeGeometry(挤压几何体)来画出形状,然后变成 3D 的,只不过它多了两个洞,需要画两个洞加到形状里面去。...全部的物体都画完了,接下来就可以在 3D 场景中漫游了,通过鼠标和键盘可以改变方向和前后左右移动,这种交互使用 FirstPersonControls(第一人称控制器) 来实现。...const light = new THREE.AmbientLight(0xCCCCCC); scene.add(light); 创建相机,使用透视相机,也就是近大远小的那种透视效果: const...其中比较特殊的是 ExtrudeGeometry(挤压几何体),它是通过在二维平面画一个形状,然后“挤压”成 三维的形式,形状中还可以扣个洞。...房子中放了一张床,这种复杂的物体用 Three.js 手画就比较难了,这种一般都是由专业建模软件,比如 blender 来画好,然后用 Three.js 加载并渲染的。

5.1K71
  • Three.js构建三维世界的房子

    最近在学习Three.js,无奈不知道从哪里下手,查阅大部分资料都是先介绍渲染器(Renderer)、场景(Scene)、照相机(Camera),其实这些概念确实需要了解,如果不给你立体模型,你始终是无法理解的...1 创造世界 很好理解,就是我们现在看到的世界,用Three.js做出来。...首先对Three.js还是要了解其一些概念的,这样才能看的更明白。新建一个项目,引入Three.js,网上不好js找没关系,我会在最后提供本篇文章的完整demo。...= 150; // 地板添加到房间 house.add(floor); } 创建侧墙 // 创建测墙方法 function createSideWall() { // 创建形状...shape.holes.push(door); // 挤压缓冲几何体 const extrudeGeometry = new THREE.ExtrudeGeometry(shape

    1.8K21

    【带着canvas去流浪(14)】Three.js中凹浮雕模型的生成方式

    而笔者亲测后发现除了官方提供的示例外,它们连最基本的立方体挖孔都无法做到,按照官方示例的写法最终只得到了下面的模型,而笔者原本的期望是在大立方体上挖出一个小立方体凹槽,字体模型就更不用提了。 ?...方案2:平面镂空模型拉伸 由于期望实现的凹浮雕模型并不算复杂,可以换一种实现思路,先在平面上生成一个矩形,然后从其中去掉字体的形状,最后再将剩余的部分拉伸成几何体,当然如果期望的浮雕模型并没有完全穿过毛坯模型时...boxShape.holes.push(fontShape[0]); return boxShape; } /*生成拉伸体*/ textGeometry = new THREE.ExtrudeGeometry...方案3:Cinema 4D建模后输出模型文件 Three.js这种基于编程的建模方式并不够直观,面对复杂模型时,通用的解决办法是使用三维建模软件进行模型构建,然后导出Three.js能够识别的模型文件,...使用加载器载入后再对模型进行微调,Three.js为数十种通用的三维模型文件都提供了加载器,本节以C4D为例演示基本的实现过程,如果你它的基本使用方法还不清楚,可以在【慕课网】上找到免费的使用教程。

    2.5K30

    北京到上海,Three.js 旅行轨迹的可视化

    通过指定点、线、多边形的类型、然后指定几个坐标位置,就可以描述出相应的形状。 geojson 的数据可以通过 geojson.io 这个网站做下预览。...代码实现 我们要引入 d3,然后使用 d3 的墨卡托转换功能, const projection = d3.geoMercator() .center([116.412318,39.909843.../js/three.js"> <script src="....我们用 <em>Three.js</em> 画线是通过指定一系列顶点构成 Geometry,而画多边形是通过绘制一个<em>形状</em>,然后用 ExtrudeGeometry(挤压几何体) 拉伸成三维。...墨卡托转换直接<em>使用</em>了 d3 的内置函数。旅行的效果是通过一帧帧的移动相机位置来实现的。 熟悉了 geojson 和墨卡托转换,就算是入门地理相关的可视化了。

    1.6K40

    【带着canvas去流浪(11)】Three.js入门学习笔记

    Three.js中的基本概念 官方文档中的新手示例过于简单,所以本节对Three.js中的概念进行一些补充描述: 客观三要素:场景Scene,相机Camera,渲染器Renderer 具体用法可以看官方文档的...几何模型Geometry 生成实体的第一步是要建立几何模型geometry,THREE.js根据构建数据的数据类型将几何模型分为Geometry和BufferGeometry两个大类,每种内置类型都可以使用其中任何一种来实现...,BufferGeometry基于定型数组运作,使用起来要求更严格也更复杂,但性能相对更好。...实体Object 大多数博文的示例中只使用到了Mesh(网格实体)这一种类型的实体模型,实际上THREE.js中还提供了Points(粒子点集实体),Line(线性实体),Skeleton(骨骼动画实体...许多demo都无法生成投影,投影不仅需要设置光线和物体的castShadow = true ,receiveShadow = true,同时需要选择能够响应光线的材质,另外,阴影需要独立的相机去拍,默认是一个正交相机

    3.9K11

    CSS3、JS 探索三维粒子

    这套演示使用three.js和easing探索三维粒子动画。 这些演示中的所有粒子和形状都是由三个基本的几何体/材质/网格组成,如球体,线条和盒子。...使用three.js / WebGL也有性能优势。这些动画只是抓住了three.js的能力。自定义的几何图形,材质,光照,阴影和着色器可以将这些提升到一个新的水平。...2: 单纯的噪音线 这个演示显示了一系列形成两种不同颜色线条的粒子。 粒子位置由单纯的噪声设置,在两个边缘附近逐渐变小。 随着时间的推移,线条在z轴上旋转并前后移动。...8: 单纯噪声粒子系统 这最后的演示使用一个稍微不同的方法来渲染粒子比其他演示。...它使用THREE.BufferGeometry()和THREE.Points(),它们允许我们一次渲染更多的粒子并保持良好的性能。粒子的运动是由单纯的噪声决定的。

    4K10

    第2章 还记得点、线、面吗(一)

    1、3D世界的组成 在计算机世界里,3D世界是由点组成,两个点能够组成一条直线,三个不在一条直线上的点就能够组成一个三角形面,无数三角形面就能够组成各种形状的物体,如下图: 20130810194940...2、定义一种线条的材质,使用THREE.LineBasicMaterial类型来定义,它接受一个集合作为参数,其原型如下: LineBasicMaterial( parameters ) Parameters...Linejoin:两个线条的连接点处的外观,默认是“round”,表示圆角。 VertexColors:定义线条材质是否使用顶点颜色,这是一个boolean值。...下面,接着上面的讲,我们这里使用了顶点颜色vertexColors: THREE.VertexColors,就是线条的颜色会根据顶点来计算。...6、定义一条线 定义线条使用THREE.Line类,代码如下所示: var line = new THREE.Line( geometry, material, THREE.LinePieces )

    1K40

    程序员必备狂拽炫酷吊炸天的动效神器

    # blotter.js 神奇的动效 # progressbar 借助动态 SVG 路径的漂亮的,响应式的进度条效果 可以很容易地创建任意形状的进度条。...这个 JavaScript 库提供线条,圆形和方形等几个内置的形状 # Second-Hamburger-Helper 别样的舒适感 # hamburgers 一款效果超酷的图标变形动画特效CSS3...包括18种不同的变形动画效果,你还可以通过Sass文件来自定义你自己的图标变形动画 # jquery-drawsvg 一款轻量级的使用jQuery来绘制SVG图形轮廓线路径动画的插件 使用jQuery...2kb同时支持Easing过渡动画效果 # moving-letters 提供了16种基于文本和字体的动画效果 # tilt.js 用来创建微妙但是引人瞩目的视差效果 # 3D线条 基于 Three.js...的解决方案 可以创建不断变化的颜色和线条,风格现代而视觉感十足 # Decorative Letter Animations 来自专业人事的动效工具

    2.9K12

    three.js 初步

    一个渲染器:渲染器将会使用WebGL渲染场景中的所有的物体。 一个或多个物体:如图的飞机和圆柱都是物体。它们分别在各自的网格模型(Mesh)当中。...mesh需要包含几何体参数(几何体形状)和材质(包括:颜色、贴图、透明度)等参数。...var mesh = new THREE.Mesh(geometry,material); 一个或多个光源:可以使用不同样式的光源。 注意xyz轴哦,有助于理解。...这里用的是OrthographicCamera //参数 1--视野角度 2--长宽比根据屏幕长宽 3--远剪切面 4--近剪切面 var camera = new THREE.OrthographicCamera...var mesh = new THREE.Mesh(geometry,material); 再分别说一下几何体和材质: 几何体会有形状和尺寸属性,如下代码BoxGeometry是立方体,三个参数分别是长宽高

    4.9K50

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

    前面一节我们初步了解了BufferGeometry,它可以自定义任何几何形状,它的数据存储在BufferAttribute中。...中,空间中一个三角形是有正反两面的,在Three.js中规则你的眼睛(相机)对着三角形的一个面,如果三个顶点的顺序是逆时针方向,该面视为正面,如果三个顶点的顺序是顺时针方向,该面视为反面。...三角面的正反面 Three.js的材质默认正面可见,反面不可见。...前面我们使用网格模型Mesh的时候使用的材质是MeshBasicMaterial,同样,点模型Points也有自己对应的点材质PointsMaterial 这里我们依然使用上节定义的类型数组作为各个顶点的数据...BufferGeometry同样可以创建线物体,Threejs给我们提供了多种线模型对象,连续先模型Line、闭合线条LineLoop、非连续的线条LineSegments等;同样,线模型对应的也有响应的线材质

    1.6K20

    Three.js DEM建模与渲染

    在这个教程中,我们将学习如何使用three.js渲染土耳其最高的Ağrı山脉的数字高程模型(DEM)数据,使用的工具包括Three.js、geotiff、webpack和QGIS。...这些数据对于使用three.js生成我们的山地模型非常有价值。...数据预处理 我们使用 QGIS栅格工具剪切、制作DEM和相关卫星图像的掩膜,并将它们复制到工作目录: image.png image.png 看起来像Mouth Doom,这是在QGIS中使用默认调色板显示高程模型的效果...在下面的示例中我们将使用其中较小的那个以便快速查看运行结果。 Three.js Three.js是一个优秀的JS库,使WebGL更易于使用WebGL。...this.light.position.set(500, 1000, 250); this.scene.add(this.light); } 用DEM数据生成山的模型 我们要渲染的几何形状不是使用

    4.6K30

    Three.js建模

    具有表面法线但没有顶点法线的几何体将无法使使其flatShading属性为false的材质,要在金字塔的表面使用平滑着色(Smooth Shading),应将每个三角面各顶点法线设置为与该三角面的面法线一致...在这种情况下,即使使用了平滑着色,金字塔的侧面看起来还是平坦的。标准的three.js几何形状,如BoxGeometry则内置了正确的表面和顶点法线。...对于Three.js,该函数就是返回THREE.Vector3类型值的常规 JavaScript 函数。参数化表面几何形状是通过在uv点阵中计算函数值而创建的。...THREE.Curve代表二维或三维的参数化曲线的抽象,它不是three.js几何形状。参数化曲线由包含一个数字变量t的函数定义。...在挤压中,填充的 2D 形状沿 3D 路径移动。形状经过的点构成 3D 实体。在这种情况下,形状沿着垂直于形状线条挤压,这是最常见的情况。基本挤压的形状显示在上图的右侧。

    7.4K02

    ps技巧第一章 原

    选中图层的智能滤镜,然后设置前景色为黑色,选择硬度为0画笔工具进行部分涂抹,使图像清晰(或者使用渐变工具拖动) 去除杂点 选框工具圈中点,然后按shift+F5快捷键 添加图层蒙版 正常情况下是白色的,...按alt的同时点击图层蒙版按钮是加的黑色的蒙版 添加剪切蒙版:按alt的同时点击2个图层的中间 模拟压力 先用钢笔画出路径-右键-描边路径-选中模拟压力 ps cc 渐隐 画出路径-选择画笔工具-点击画笔大小的右边...-设置画笔的形状动态 最上面的控制设为渐隐,然后再点击平滑,其余的都是默认 路径的合并或删除部分 首先画出2个形状图层,然后合并这两个图层,假如把第二个形状图层遮住第一个形状图层的地方去除,首先选中第二个形状图层路径...,点击菜单栏的减去顶层形状及合并形状组件 小图变大的方法 1、首先载入选区(或用钢笔沿图片边缘画出路径ctrl+t 转换成选区)--》2、在路径面板中点击从选区中生成工作路径--》3、 ctrl+t 变化路径大小...--》4、将路径作为选区载入--》5、 填充选区 用画笔描边路径技巧 先用钢笔画路径-- 切换到画笔工具--点击路径面板中的用画笔描边路径(如果直接在钢笔状态下 使用用画笔描边路径 画出的线条有锯齿)

    43210

    Paint X for Mac(mac绘图软件)激活版

    您可以像使用数位板一样使用 PAInt X 来制作简单的图片、创意项目、或者将文本和设计添加到您的其他图片中,例如使用数码相机拍摄的图片和照片。...您在PAInt X中使用的许多工具都位于功能区中,该功能区靠近“绘制”窗口的顶部。 下图显示了PAInt X的色带和其他部分。这款久经考验的程序更易于使用并也很有趣。...使用逼真的数字"画笔"(如:水彩笔,蜡笔,书法笔等)来将您的作品设计得更加生动。放置在主窗口左侧面板的工具箱和检查器包括了您将使用到的所有工具及其选项,这样您不必打开菜单就能完成所有设计。...Paint X for Mac软件功能高效工具:铅笔工具、橡皮擦工具、喷枪工具、填充工具、文本工具、颜色选择工具、矩形选择工具、自由选择工具10种内置画笔: 像素画笔、画笔、水彩画笔、圆珠笔等40种现成的形状...: 线条、曲线、椭圆形、五点星、心、云、微笑等绘图功能:旋转/调整形状或自由选择水平或垂直翻转图像通过选择裁剪图像在任何地方都可以使用半透明颜色来绘画勾画或填充形状从内置色板上选择颜色,并支持添加自定义颜色到内置色板上剪切

    1.1K20

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

    ,然后再拉伸成为THREE.ExtrudeGeometry拉伸体。...) { var geometry = new THREE.TextGeometry( 'MARVEL',{ font: font, size: 80,//平面形状大小...在不规则表面贴图,就像把电影投影到一个不规则表面进行放映,比如将投影仪的幕布折叠成某个形状,画面依旧会以二维投影的形式展现在幕布上。...关于这两种相机的使用,直观的区别是: 使用透视相机就好比使用者在调节一个真实摄像机的参数来改变出现在镜头中的画面的效果,可以说是一种间接确定拍摄范围,且它的视场是一个锥形区域;而正交相机相当于是直接设定拍摄范围的长宽高...大作业总结 通过大作业的练习,熟悉了很多three.js的特性,希望感兴趣的读者也可以自行练习,比如把整个片头动画都做出来什么的。

    1.2K31

    分享一个自由拖拽组件的实现思路

    现在我们的 svg 终于可以自由缩放了,但是很快我们又发现,把一个 svg 放大之后,它的线条宽度也跟着变宽了,那么有没有什么属性来保持线条宽度不变呢?...,即首先用指定的绘画填充形状的几何形状,然后使用指定的绘画描边轮廓。...通常,笔触涉及在当前用户坐标系中计算形状路径的笔触轮廓,并用笔触颜料(颜色或渐变)填充轮廓。该值的最终视觉效果是笔触宽度不依赖于元素的变换(包括非均匀缩放和剪切变换)和缩放级别。...non-rotation 该值指定元素及其后代使用的特殊用户坐标系。尽管从宿主坐标空间发生任何变换更改,该用户坐标系的旋转和倾斜仍被抑制。但是,它没有指定抑制缩放。...另外我们还有一个没有解决的问题,如果path的内容是通过类似同心圆的方式来绘制图形的时候,我们并没有什么好的方法来保证缩放时候线条宽度的变化 关于本文 作者:LeapFE https://segmentfault.com

    2.3K40

    【企业数字化转型】数据可视化技术:Three.js 用Physijs在场景中添加物理效果

    Three.js 极简教程 简介 Three.JS 是什么 Three.JS是基于WebGL的Javascript开源框架,简言之,就是能够实现3D效果的JS库。...Three.JS 能做什么 利用Three.JS可以制作出很多酷炫的3D动画,并且Three.js还可以通过鼠标、键盘、拖拽等事件形成交互,在页面上增加一些3D动画和3D交互可以产生更好的用户体验。...在电商行业利用Three.JS可以实现产品的3D效果,这样用户就可以360度全方位地观察商品了,给用户带来更好的购物体验。另外,使用Three.JS还可以制作类似微信跳一跳那样的小游戏。...为此,我们可以使用Three.js的普通方法来定义对象,但必须用一个特定的Physijs对象将这些对象包裹起来: var stoneGeom = new THREE.BoxGeometry(0.6, 6...( 0, -10, 0 ) 设定重力的数量和方向 setFixedTimeStep 在构造函数中default 1 / 60 重置fixedTimeStep给定的值 更新对象的位置和旋转 有一个方面,无法

    4.5K31
    领券