- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端数据可视化
p5.js 加载 3D 模型（loadModel）
loadModel() 是 p5.js 中用于加载 3D 模型的核心函数，它能将 OBJ 或 STL 格式的 3D 模型文件转换为 p5.js 可处理的 p5.Geometry 对象，之后可以通过 model （避免模型过大 / 过小） false successCallback 函数 模型加载成功后执行的函数（参数为加载完成的 p5.Geometry 对象） 无 failureCallback 函数 模型加载失败后执行的函数 5/2 # 前面 f 2/1/3 3/2/3 5/5/3 # 左面 f 3/1/4 4/2/4 5/5/4 # 后面 f 4/1/5 1/2/5 5/5/5 myModel = loadModel('assets/cube.obj'); } function setup() { createCanvas(800, 600, WEBGL); // 创建3D 画布（必须用WEBGL渲染模式） } function draw() { background(220); // 3D变换：让模型旋转，更易观察 rotateX(frameCount
20010编辑于 2026-02-20 - 来自专栏HT
基于 HTML5 Canvas 的 3D 模型列表贴图
中有一个 BorderPane 面板组件是拿来页面排布的，可以排布 html 标签，也可以排布 HT 的组件，这里我们将整个页面分为三个部分，顶部工具条 toolbar、左侧列表 listView 和中间 3d toolbar.getItemById('text').element.getElement().onkeyup = function(e){ listView.invalidateModel();//无效模型 场景，利用的是 HT 的三维组件 ht.graph3d.Graph3dView，然后在 3d 场景上添加两个节点，作为对照： //创建两个节点放到 3d 场景中 var node = new ht.Node node.s('all.color', '#87A6CB');//设置 node 的六个面颜色 g3d.dm().add(node);//将新建的 node 添加进 3d if(lastFaceInfo){//鼠标未松开的情况下，贴图显示旧值 //data.face 默认值为front，图标在3D下的朝向，可取值left|right|top
1.9K100发布于 2018-01-03 - 来自专栏hightopo
基于 HTML5 Canvas 的 3D 模型贴图问题
之前注意到的一个例子，但是一直没有沉下心来看这个例子到底有什么优点，总觉得就是一个 list 列表，也不知道右边的 3d 场景放两个节点是要干嘛，今天突然想起来就仔细地看了一下这个例子的代码，实际操作中应该还是有用处的 中有一个 BorderPane 面板组件是拿来页面排布的，可以排布 html 标签，也可以排布 HT 的组件，这里我们将整个页面分为三个部分，顶部工具条 toolbar、左侧列表 listView 和中间 3d toolbar.getItemById('text').element.getElement().onkeyup = function(e){ listView.invalidateModel();//无效模型 场景，利用的是 HT 的三维组件 ht.graph3d.Graph3dView，然后在 3d 场景上添加两个节点，作为对照： //创建两个节点放到 3d 场景中 var node = new ht.Node if(lastFaceInfo){//鼠标未松开的情况下，贴图显示旧值 //data.face 默认值为front，图标在3D下的朝向，可取值left|right|top
1.3K20发布于 2018-07-09 - 来自专栏hightopo
玩转 HTML5 下 WebGL 的 3D 模型交并补
CSG 提供的模型或表面看起来很复杂，但实际上不过是巧妙组合或分解对象。 gv1 = new ht.graph3d.Graph3dView(dm); //3D 场景，就是设置显示有点不同，其他完全相同，上面的 3D 场景重载了 getVisibleFunc 函数，如果元素的 showMe 属性为 true，则可视；如果节点为 ht.CSGNode 类型并且节点的 data instanceof ht.CSGNode && data.getHost()){ return false; } return true; }); 我们先向 3D CSS3: The Missing Manual'); book.s3(60, 80, 8); book.p3(-100, 210, 20); book.r3(-Math.PI/6, Math.PI/5,
73810发布于 2018-07-09 - 来自专栏HT
玩转 HTML5 下 WebGL 的 3D 模型交并补
CSG 提供的模型或表面看起来很复杂，但实际上不过是巧妙组合或分解对象。 gv1 = new ht.graph3d.Graph3dView(dm); //3D 场景，就是设置显示有点不同，其他完全相同，上面的 3D 场景重载了 getVisibleFunc 函数，如果元素的 showMe 属性为 true，则可视；如果节点为 ht.CSGNode 类型并且节点的 data instanceof ht.CSGNode && data.getHost()){ return false; } return true; }); 我们先向 3D CSS3: The Missing Manual'); book.s3(60, 80, 8); book.p3(-100, 210, 20); book.r3(-Math.PI/6, Math.PI/5,
1.2K100发布于 2018-01-03 - 来自专栏python3
JS 3D 模型
这是一个简单的 JS 3D 模型，能跑在包括 IE6 的所有浏览器上，结合一下 tween 缓动算法，理论上已经可以完美模拟像 http://www.cu3ox.com/ 这个网站上方 banner 的各种变换效果了 介绍一下实现细节，矢量绘图仍然用的是 Raphael 库，Raphael 我在《如何用 JS 实现 3D ×××效果》这篇文章里有过介绍。 关于画家算法 渲染器工作时，会从他的角度上能看到的所有物体都描绘出来，即用 2D 的手法去描述 3D 的物体。
3.6K20发布于 2020-01-07 - 来自专栏机器之心
图像转换3D模型只需5行代码，英伟达推出3D深度学习工具Kaolin
基于此，英伟达于今日推出了 Kaolin PyTorch 库，借助于这个库，只需几步即可将 3D 模型迁移至神经网络的应用范畴。 此外，Kaolin 库还可以大大降低为深度学习准备 3D 模型的工作量，代码可由 300 行锐减到仅仅 5 行。 随着人们对 3D 模型的兴趣日益高涨，英伟达的 Kaolin 库可以在该领域产生重大影响。 3D 组件分割功能可以自动识别 3D 模型的不同组件，这使得「装备」动画角色或自定义模型以生成对象变体更加容易（图左的 3D 模型在图右穿上了衣服、鞋子等）。 ? 图像到 3D（Image to 3D）功能可以根据训练的神经网络识别出的图像来构建 3D 模型（图右生成了椅子的 3D 模型）。
1.5K10发布于 2019-11-18 - 来自专栏HT
基于HTML5 Canvas 点击添加 2D 3D 机柜模型
首先，我们得创建场景将作为基础，整个场景我算是分为三个部分，顶部工具栏，2D 部分以及 3D 部分。 new ht.graph3d.Graph3dView(dataModel); g3d.setGridVisible(true);//设置网格可见 g3d.setEye(185, 50, 470);//设置3d 的眼睛位置 g3d.setCenter(200, 47, 10);//设置3d的中心位置， 这两个属性都是为了让用户看3d上的场景更舒服，更直接 g2d = new ht.graph.GraphView g2d.fitContent(true);//将所有的图元显示到页面上 splitView = new ht.widget.SplitView(g2d, g3d, 'v', 0.3);//分割组件，装了2d和3d 2D 的图片显示肯定和 3D 的模型显示是不一样的，2D 中我们直接用贴图就能解决，而 HT 3D 中支持 obj 格式的模型显示，就是这个部分： ?
1.6K80发布于 2018-01-03 - 来自专栏Flutter
Flutter 中渲染3D 模型
原文地址：https://medium.com/flutterdevs/explore-model-viewer-in-flutter-e5988edbfe66 3D模型是具有3个测量长度，宽度和深度的模型 **我们将实现一个模型查看器演示程序，并在您的flutter应用程序中使用model_viewer包以glTF和GLB格式显示3D模型。 3D模型显示3D图片。 该演示视频展示了如何在Flutter中创建模型查看器。它显示了如何在flutter应用程序中使用model_viewer包来运行模型查看器。 它以glTF和GLB格式显示3D模型，并通过鼠标，手触摸和自动旋转将其旋转360度。 功能 模型查看器具有以下功能： 呈现glTF和GLB模型。（此外，USDZ型号在iOS 12+上。） 参数 **src：**此参数用于3D模型的URL或路径。此参数是必需的。仅支持glTF / GLB型号。
27.7K20发布于 2021-04-22 - 来自专栏又见苍岚
OBJ 3D模型格式介绍
OBJ是一种 3D 文件格式, 本文记录相关内容。 OBJ 文件一般会与 mtl 文件与 贴图图像 文件共用, 组成一个 3D 模型文件, 有时还会附带一个 xml 文件记录坐标偏移量。 1/1 1/2/1 4/3/1f 5/1/1 4/3/1 8/4/1f 3/5/2 7/6/2 8/7/2f 3/5/2 8/7/2 4/8/2f 2/9/3 6/10/3 3/5/3f 6/10/4 7/6/4 3/5/4f 1/2/5 5/1/5 2/9/5f 5/1/6 6/10/6 2/9/6f 5/1/7 8/11/7 6/10/7f 8/11/7 7/12/7 6/10/7f 1/2/8 补充说明 模型一般通过 3d 建模软件，例如 Blender, 3DS Max 或者 Maya 等工具建模，导出时的数据格式变化较大，我们导入模型到 OpenGL 的任务就是：将一种模型数据文件表示的模型
2.1K10编辑于 2024-07-13 - 来自专栏破晓之歌
网页显示3D模型 原
3D模型展示平台 方式1：Sketchfab 官方地址：https://sketchfab.com/features 方式2：3DPunk 官方地址：https://www.3dpunk.com/ THREE.JS
1.9K50发布于 2018-08-15 - 来自专栏hightopo
基于 HTML5 的 WebGL 自定义 3D 摄像头监控模型
以下是项目地址：基于 HTML5 的 WebGL 自定义 3D 摄像头监控模型 效果预览 整体场景-摄像头效果图 ? 局部场景-摄像头效果图 ? 代码生成 摄像头模型及场景 项目中使用的摄像头模型是通过 3dMax 建模生成的，该建模工具可以导出 obj 与 mtl 文件，在 HT 中可以通过解析 obj 与 mtl 文件来生成 3d 场景中的摄像头模型 项目中场景通过 HT 的 3d 编辑器进行搭建，场景中的模型有些是通过 HT 建模，有些通过 3dMax 建模，之后导入 HT 中，场景中的地面白色的灯光，是通过 HT 的 3d 编辑器进行地面贴图呈现出来的效果 锥体建模 3D 模型是由最基础的三角形面拼接合成，例如 1 个矩形可以由 2 个三角形构成，1 个立方体由 6 个面即 12 个三角形构成， 以此类推更复杂的模型可以由许多的小三角形组合合成。 可以将该锥体看成由 5 个顶点，6 个三角形组成，具体图如下： ?
1.7K20发布于 2019-03-12 - 来自专栏小蔚记录
three.js 运行3D模型
--3D模型加载器--> <script src="js/threejs/DDSLoader.js"></script> <script src="js/threejs/OrbitControls.js tumor<em>5</em>=material;mesh = new THREE.Mesh( geometry, tumor<em>5</em> );break; case 6:tumor6=material case 4:material4=material;mesh = new THREE.Mesh( geometry, material4 );break; case <em>5</em>: material<em>5</em>=material;mesh = new THREE.Mesh( geometry, material<em>5</em> );break; case 6:material6 material8, material9,material10,material11, //材质/变量【肿瘤】 tumor1,tumor2,tumor3,tumor4,tumor<em>5</em>,
7.5K30发布于 2019-09-11 - 来自专栏数字孪生
WebGL开发3D模型的流程
使用 WebGL 开发 3D 模型涉及到一系列步骤，从模型创建、导入到最终的渲染和交互，都需要仔细规划。以下是一个详细的流程，希望能帮助你更好地理解 WebGL 3D 模型开发。 1. 3D 模型创建：选择建模软件： 首先需要使用专业的 3D 建模软件创建模型，常用的软件包括：Blender： 开源免费的 3D 创作套件，功能强大，适合各种类型的 3D 模型创建。 雕刻建模： 使用类似雕刻工具的方式对模型进行细节刻画。UV 展开： 将 3D 模型的表面展开成 2D 平面，用于贴图的制作。贴图制作： 为模型添加纹理和材质，使其更加逼真。 5. 性能优化：模型优化： 减少模型的多边形数量，使用 LOD (Level of Detail) 技术。纹理优化： 使用压缩的纹理格式，例如 JPEG、PNG。 熟练掌握 3D 建模软件、WebGL API 和相关库，例如 Three.js，是进行 WebGL 3D 模型开发的关键。
1.1K11编辑于 2024-12-24 - 来自专栏数字孪生
webgl开发3D模型的优化
WebGL 开发 3D 模型时，性能优化至关重要，它可以确保流畅的用户体验，尤其是在复杂的场景或低端设备上。以下是一些关键的优化策略，涵盖了模型、纹理、渲染、代码等多个方面。 一、模型优化：减少多边形数量：优化建模流程： 在建模阶段就注意控制模型的面数，避免不必要的细节。 使用 LOD (Level of Detail) 技术：创建多套不同精度的模型： 为同一个物体创建多套不同面数的模型，根据物体与相机的距离，动态切换显示的模型。距离越远，使用面数越少的模型。 总结：WebGL 3D 模型优化是一个综合性的过程，需要从模型创建、纹理制作、渲染流程、代码编写等多个方面进行考虑。 通过以上策略的合理运用，可以有效地提高 WebGL 应用程序的性能，提供更流畅、更逼真的 3D 展示体验。记住，使用性能分析工具找到瓶颈是优化的关键。
1K10编辑于 2024-12-25 - 来自专栏程序你好
为3D模型添加纹理贴图
本篇文章介绍纹理（Texture Map，也译作纹理映射）的使用，将描述如何使用Three.js给3D对象添加贴图， 贴图是通过将图像应用到对象的一个或多个面，来为3D对象添加细节的一种方法。 在上篇文章3D场景中物体模型选中和碰撞检测的实现创建的3D场景中，我们添加了几个立方体和一个球体，没有使用纹理，三维模型看起来很呆板。
2.6K20发布于 2021-07-23 - 来自专栏数字孪生
WebGL开发3D模型的流程
以下是使用WebGL开发3D模型的流程，可以创建一个具有交互性的3D模型，并将其渲染到WebGL场景中。1. 创建基础3D场景创建场景：使用THREE.Scene()创建一个场景，这是存放所有3D对象的地方。 添加基础3D对象：使用THREE.BoxGeometry()创建一个立方体，并为其添加材质和网格，然后将其添加到场景中。 导入和渲染3D模型选择3D模型格式：推荐使用glTF格式，它是一种高效的3D模型格式，适合在Web上使用。加载glTF模型：使用THREE.GLTFLoader()加载glTF模型。 将模型路径替换为实际路径后，模型将被加载到场景中。4. 添加交互性添加事件监听器：通过为代码添加事件监听器，允许用户与3D对象进行交互。例如，可让用户通过鼠标移动来旋转3D对象。5.
87810编辑于 2025-03-25 - 来自专栏机器之心
大型多视角高斯模型LGM：5秒产出高质量3D物体，可试玩
机器之心专栏 机器之心编辑部 为满足元宇宙中对 3D 创意工具不断增长的需求，三维内容生成（3D AIGC）最近受到相当多的关注。并且，3D 内容创作在质量和速度方面都取得了显著进展。 尽管当前的前馈式生成模型可以在几秒钟内生成 3D 对象，但它们的分辨率受到训练期间所需密集计算的限制，进而导致生成低质量的内容。 这就产生了一个问题，能否只用 5 秒钟来生成高分辨率高质量的 3D 物体？ 本文中，来自北京大学、南洋理工大学 S-Lab 和上海人工智能实验室的研究者提出了一个新的框架 LGM，即 Large Gaussian Model，实现了从单视角图片或文本输入只需 5 秒钟即可生成高分辨率高质量三维物体 目前，代码和模型权重均已开源。研究者还提供了一个在线 Demo 供大家试玩。
61110编辑于 2024-02-26 - 来自专栏进击的多媒体开发
OpenGL 3D 模型加载和渲染
这时候就可以使用 OpenGL 来加载 3D 模型。先使用 3D 建模工具构建物体，然后再将物体导出成特定的文件格式，最终通过 OpenGL 渲染模型。 例如如下的 3D 模型文件图像： ? Obj 模型文件 obj 模型文件是众多 3D 模型文件中的一种，它的格式比较简单，本质上就是文本文件，只是格式固定了格式。 加载 Obj 模型文件 明白了 Obj 模型文件代表的含义，接下来把它加载并用 OpenGL 进行渲染。 如果只是单纯的导入了所有顶点，并决定了要绘制的颜色，就会出现类似上面的单一颜色的绘制情况，事实上可以通过修改片段着色器来给 3D 模型添加条纹着色效果。 最后，加载 3D 模型就先了解到这了，如果想要加载更多效果，倒是可以继续深挖，只是没有 MAC 版本的 3ds Max 软件，却是少了一些乐趣~~ 具体代码详情，可以参考我的 Github 项目： https
3.7K21发布于 2019-07-25 - 来自专栏章鱼的慢慢技术路
Direct3D 11 Tutorial 5: 3D Transformation_Direct3D 11 教程5：3D转型
概述 在上一个教程中，我们从模型空间到屏幕渲染了一个立方体。 在本教程中，我们将扩展转换的概念并演示可以通过这些转换实现的简单动画。 本教程的结果将是围绕另一个轨道运行的对象。 资源目录 (SDK root)\Samples\C++\Direct3D11\Tutorials\Tutorial05 Github 转型 在3D图形中，变换通常用于对顶点和矢量进行操作。 在3D中，用于翻译的矩阵具有形式。 例如，要沿X轴（负X方向）移动顶点-5单位，我们可以将其与此矩阵相乘： 1 0 0 0 0 1 0 0 0 0 1 0 -5 0 0 1 如果我们将此应用于以原点为中心的立方体对象 ，则结果是该框向负X轴移动5个单位，如图5所示，在应用平移之后。
2.4K40发布于 2018-12-04
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号