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

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

不妨用 Three.js 做个 3D 的蛋糕送给 ta,既浪漫又能展现你技术的魅力。 这篇文章我们就来学习下如何用 Three.js 画一个蛋糕。...代码地址:https://github.com/QuarkGluonPlasma/threejs-exercize Three.js 相关基础 Three.js 是通过场景 Scene 来管理所有的物体的.../font/xxx.typeface.json', function (font) { var textGeometry = new THREE.TextGeometry('文字', 参数);..., textMaterial); }); 这些就是我们会用到的 Three.js 基础,简单做个小结: Three.js 是通过 Scene 来管理各种物体的,物体还可以分下组。...我们用同样的方式创建四个圆柱体,设置不同的大小和位置,贴不同的图: const cakeGeometry1 = new THREE.CylinderBufferGeometry(100, 100, 70

3.6K42
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

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

    大作业说明 通读完上一篇博文中提及的教程,觉得应该搞个大作业巩固一下所学的知识,想起刚上映的漫威宇宙第三阶段收官之作《蜘蛛侠·英雄远征》,于是决定仿一个MARVEL的片头动画作为three.js的课后练习...简易片头动画的实现思路如下,除了正常的舞台元素外,需要背景音乐,使用THREE.AudioLoader就可以从后后台加载音乐,舞台中主要的实体元素是MARVEL这几个字母的立体模型,可以使用THREE.TextGeometry...来进行建模(【Three.js绘制字体模型】),它要求先载入字体文件,然后才能实例化,参考官方文档的实现就可以了。...,或者本次大作业中需要使用的TextGeometry字体模型时。...为了保证贴图素材的方向,它们之间就有存在一个对应关系,否则最后渲染的纹理可能就是倒着的或者旋转90°的图像,所以UV映射矩阵中存储的依然是上例中右图的三个点,但默认索引和构成几何体指定面的三个顶点的索引相对应

    3.1K51

    DevOps 作为实时故障处理的图

    DevOps 作为实时故障处理的图 翻译自 DevOps as a Graph for Real-Time Troubleshooting 。更多链接请查看原文。...服务所有者可以使用哪些有用的日志或跟踪来有效地进行故障排查?通过在具有可操作数据的仪表盘中捕获事件发生时的上下文,知识共享变得更加容易。这会在整个组织内带来更好的故障排除体验。...是时候重新考虑我们首次排除故障和连接因果关系的方法了。当我们将 DevOps 视为图时,我们最终超越了传统的可观测性支柱,开始以新的思维方式处理事件。...大多数每天部署的公司都报告说,他们的工程师至少有一半的时间用于故障排查和调试。如果我们不为工程师提供学习联系、建立因果模型并允许跨团队共享“图”的工具,这种“故障排除税”将会变得更高。...再多的混沌工程也无法预测所有可能的故障。最后,我们必须认识到,中断很少会因为单一故障而发生。它通常是同时发生的“预事件”(例如,配置更改、代码提交、脚本执行)的组合。

    9410

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

    本文分别对利用Three.js在Web环境中生成凹浮雕模型时的几种策略进行讲解。 一....方案1:ThreeBSP.js或ThreeCSG.js扩展库 在众多技术博客里,提及最多的就是上述两个库,它们声称是Three.js的扩展库,用来对模型进行实体布尔操作。 But!不要用!不要用!...boxShape.lineTo(-20,-20); boxShape.holes.push(fontShape[0]); return boxShape; } /*生成拉伸体*/ textGeometry...方案3:Cinema 4D建模后输出模型文件 Three.js这种基于编程的建模方式并不够直观,面对复杂模型时,通用的解决办法是使用三维建模软件进行模型构建,然后导出Three.js能够识别的模型文件,...Three.js官方建议的模型格式为*.gltf格式,想要在C4D中直接导出这种格式需要安装相应的插件(GLTF格式工具仓库)。

    2.6K30

    【转】接入层问题故障定位(火焰图等方法)

    火焰图9.1 说明火焰图(Flame Graph是 Bredan Gregg 创建的一种性能分析图表,因为它的样子近似 ?而得名。 火焰图主要是用来展示 CPU的调用栈。...常见的火焰图类型有On-CPU、Off-CPU、Memory、Hot/Cold、Differential等等。...现在我们有了火焰图,能够非常清晰的发现哪个函数占用cpu过高,或者过低导致的问题。9.4.1 on-CPUcpu占用过高,执行中的时间通常又分为用户态时间user和系统态时间sys。...同样内存级别火焰图帮你快速分析问题的根源。...通过抓取了两张普通的火焰图,然后进行对比,并对差异部分进行标色:红色表示上升,蓝色表示下降。 差分火焰图是以当前(“修改后”)的profile文件作为基准,形状和大小都保持不变。

    10700

    一起来实现全景图 VR 吧!—— Three.js 系列

    本篇是 Three.js 系列的第四篇内容,想看其他内容可以看上方☝️,今天就给大家来介绍介绍全景图相关的知识,我们知道因为最近疫情的影响,大家都没办法出门,很多全景的项目火了,比如各个著名的风景区都开放了...更好 v为基准体积 接下来就到了我们使用 Three.js 来实现以上效果的时刻了。...幸好 Three.js 给我们提供了一个简单的方法 THREE.DoubleSide ,通过这个方法,就能让我们的物体渲染两个面。这样我们即使在物体内部也能看到贴图啦。...这里有一个注意点,就是在 Three.js 中如果有多张贴图,是支持以数组形式传入的,例如此例子中,传入的顺序为 “左右上下前后” 此时我们也得到了上方一样的效果。...ffmpeg -i example.jpg -vf v360=input=equirect:output=eac example-eac.jpg 这里由于 Three.js 默认不支持 EAC 的渲染

    4.2K41

    网络故障解疑:找回消失的本地连接(多图)

    首先检查网络连接服务是否已经启动,在检查该服务时,你可以依次单击“开始”/“程序”/“管理工具”/“服务”命令,在接着打开的系统服务列表中,找到“Network Connections”选项,并用鼠标双击该选项,在弹出的图2...在接着打开的图3设置窗口中,找到简单TCP/IP服务项目,并检查该项目前面的复选框是否处于选中状态,要是没有选中的话,你必须在它的复选框中打上勾号,再单击“确定”按钮,并将计算机系统重新启动一下就可以了...接着单击该窗口中的“默认属性”选项卡,在弹出的图4选项设置界面中,检查一下“在这台计算机上启用分布式COM”项目是否被选中,要是没有选中的话,请你在该项目前面的复选框中打上勾号; 下面再检查一下“默认模拟级别...在该编辑窗口中,单击菜单栏中的“文件”菜单项,从弹出的下拉菜单中执行“打开注册表”命令,在接着出现的图5所示的窗口中,双击其中的“本地用户”图标,在其后出现的属性设置界面中,依次展开“外壳界面”、“限制

    2.7K10

    Three.js 实现 360 度全景浏览的最简单方式

    用 Three.js 做这样的一个全景图浏览工具,是再简单不过的事情,只需要几行代码,但却很有用。 那我们就来学一下 Three.js 怎么做全景图浏览吧。...Three.js 基础回顾 我们简单回顾下 Three.js 的基础: Three.js 是通过场景 Scene 来管理 3D 场景中的各种物体的,有一个三维坐标系,每个物体放在不同的位置,然后在某个位置放置相机...这就是 Three.js 的 3D 场景的创建和渲染成 2D 的流程。 简单回顾了下基础,那全景图改怎么浏览呢?...Three.js 实现全景图浏览 我们创建 3D 场景 Scene: const scene = new THREE.Scene(); 然后设置它的背景,用立方体的纹理来设置,需要分别指定左右上下前后的...总结 一般的照片只是一个方向的画面,而全景图是上下左右前后 360 度的画面,它能立体的记录拍照位置的场景。 全景图需要专门的工具来浏览,我们可以用 Three.js 来实现。

    4.7K51

    AIOps之根因分析(一):基于图的微服务trace分析与故障诊断

    该篇论文采用图方法对微服务系统中的trace数据进行聚合和分析,并用于eBay监控场景的故障诊断。...论文链接如下: 基于图的微服务trace分析与故障诊断 1 统一监控平台与微服务调用链分析 云原生最近很热门,阿里在19年左右就实现了内部业务全面上云,腾讯也正逐步推广内部业务上腾讯云。...同一次业务请求下,所有微服务之间的远程调用所组成的有向图,可视作一条trace。基于微服务trace,可分析服务间的依赖关系,并用于定位故障根因。...文章提出GMTA和GMTA Explorer来应对上述挑战,并用于解决eBay场景的微服务trace监控和故障诊断。GMTA基于图的思想对trace数据进行聚合、处理和存储,提供高效的查询接口。...3.2 GMTA帮助SRE诊断故障的案例 SRE在GMTA Explorer平台是看到如下样式,成功定位到故障源于服务c,最终排查发现是服务c最近一次发布引入了故障代码。

    3.9K23
    领券