Web3D
文章平均质量分 72
开心就是最好
一切都好!All is well!
展开
-
Threejs之场景标注标签信息CSS2DRenderer
注:基于Three.js。原创 2024-03-03 16:26:21 · 1078 阅读 · 0 评论 -
Threejs之精灵模型Sprite
Three.js的精灵模型`Sprite`和Threejs的网格模型`Mesh`一样都是模型对象,父类都是`Object3D`,关于精灵模型对象`Sprite`的方法和属性除了可以查看文档Sprite,也可以查看父类`Object3D`。`Sprite`与矩形平面`Mesh`的区别在于,当你旋转三维场景的时候,如果通过相机控件OrbitControls旋转测试,你可以发现`Sprite`矩形平面会始终平行于Canvas画布或者说屏幕,而矩形平面`Mesh`的姿态角度会跟着旋转,不一定平行于canvas画原创 2024-03-03 14:52:01 · 790 阅读 · 0 评论 -
Threejs之相机基础
注:基于Three.js。原创 2023-12-10 15:59:37 · 309 阅读 · 0 评论 -
Threejs之生成曲线、几何体
参考资料生成圆弧顶点…山脉地形高度可视化知识点注:基于Three.jsv0.155.0生成圆弧顶点几何体方法.setFromPoints()曲线Curve简介椭圆、圆样条曲线贝塞尔曲线样条、贝塞尔曲线应用组合曲线CurvePath拼接曲线曲线路径管道TubeGeometry旋转成型LatheGeometry轮廓填充ShapeGeometry拉伸ExtrudeGeometry扫描ExtrudeGeometry多边形轮廓Shape简介多边形轮廓Shape(圆弧)多原创 2023-11-26 15:55:28 · 440 阅读 · 0 评论 -
Threejs之射线拾取模型
参考资料射线Ray…射线拾取Sprite控制场景知识点注:基于Three.jsv0.155.0射线RayRaycaster(射线拾取模型)屏幕坐标转标准设备坐标Raycaster(鼠标点击选中模型)Canvas尺寸变化(射线坐标计算)射线拾取层级模型(模型描边)射线拾取Sprite控制场景代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2023-11-19 17:08:37 · 480 阅读 · 0 评论 -
Threejs之后处理EffectComposer
参考资料后处理(发光描边OutlinePass)…抗锯齿后处理知识点注:基于Three.jsv0.155.0后处理(发光描边OutlinePass):EffectComposer、RenderPass、OutlinePassOutlinePass描边样式:visibleEdgeColor edgeThickness edgeStrength pulsePeriod Bloom发光通道:UnrealBloomPass多通道组合(GlitchPass和描边):GlitchPass(闪原创 2023-11-18 16:50:37 · 477 阅读 · 0 评论 -
Three.js之渲染器和前端UI界面
/ 想把canvas画布上内容下载到本地,需要设置为true。// MeshLambertMaterial:受光。// MeshBasicMaterial:不受光。// 设置对数深度缓冲区,优化深度冲突问题。注:基于Three.js。// 设置模型宽度、高度。// // 辅助点光源。// 网格模型:物体。// 创建一个a链接。原创 2023-11-11 15:10:27 · 522 阅读 · 0 评论 -
Three.js之PBR材质与环境贴图
所谓PBR就是,基于物理的渲染(physically-based rendering)网格模型材质Lambert光照模型(漫反射)Phong光照模型(漫反射、高光反射)基于物理的光照模型(微平面理论、能量守恒、菲涅尔反射…)PBR材质相比MeshLambertMaterial和MeshPhongMaterial可以提供更逼真的、更接近生活中的材质效果,当然也会占用更多的电脑硬件资源。原创 2023-11-05 17:05:51 · 566 阅读 · 0 评论 -
Three.js之加载外部三维模型
GLTF格式是新2015发布的三维模型格式,随着物联网、WebGL、5G的进一步发展,会有越来越多的互联网项目Web端引入3D元素,你可以把GLTF格式的三维模型理解为.jpg、.png格式的图片一样,现在的网站,图片基本是标配,对于以后的网站来说如果需要展示一个场景,使用3D来替换图片表达也是很正常的事情。比如你可以把.gltf模型和贴图信息全部合成得到一个.glb文件中,.glb文件相对.gltf文件体积更小,网络传输自然更快。特殊行业项目可能涉及到行业软件,比如机械相关、建筑相关。原创 2023-11-05 15:07:45 · 485 阅读 · 0 评论 -
Three.js之顶点UV坐标、纹理贴图
- 纹理贴图加载器:TextureLoader- 纹理对象:Texture- 颜色贴图属性.map- 顶点UV坐标- 圆形平面设置纹理贴图:CircleGeometry- 设置阵列模式:THREE.RepeatWrapping- 网格地面辅助观察:GridHelper- 纹理对象.offset属性原创 2023-09-10 16:34:45 · 740 阅读 · 1 评论 -
Three.js之层级模型
- 层级Group- 遍历模型树结构、查询模型节点- 本地坐标和世界坐标- 改变模型相对局部坐标原点位置- 移除对象.remove()- 模型隐藏或显示原创 2023-09-03 15:50:46 · 358 阅读 · 0 评论 -
Three.js之模型对象、材质
- 三维向量Vector3与模型位置- 欧拉Euler与角度属性.rotation- 模型材质颜色(Color对象)- 模型材质父类Material:透明、面属性- 模型材质和几何体属性- 克隆.clone()和复制.copy()原创 2023-09-02 16:53:22 · 696 阅读 · 0 评论 -
Three.js之几何体BufferGeometry
- 缓冲类型几何体:BufferGeometry- 定义几何体顶点数据:BufferAttribute- 点模型:Points、PointsMaterial- 线模型:Line、LineBasicMaterial- 网格模型:Mesh、MeshBasicMaterial- 顶点索引:geometry.index- 顶点法线:geometry.attributes.normal- 材质属性-线条模式渲染:.wireframe- 细分数:细分数越大,表面越光滑,但是三角形和顶点数量却越多- 旋原创 2023-08-27 17:57:15 · 436 阅读 · 0 评论 -
Three.js之几何体、高光材质、渲染器设置、gui
- 长方体:oxGeometry- 球体:SphereGeometry- 圆柱:CylinderGeometry- 矩形平面:PlaneGeometry- 圆形平面:CircleGeometry- 高光网格材质:MeshPhongMaterial(shininess、specular)- WebGL渲染器设置:antialias 、setPixelRatio、setClearColor- gui.js库:原创 2023-08-20 15:29:35 · 732 阅读 · 0 评论 -
Three.js之相机、渲染器、光源、动画、性能监测
- 透视投影相机PerspectiveCamera- WebGL渲染器WebGLRenderer- 辅助观察坐标系AxesHelper- 漫反射网格材质MeshLambertMaterial- 点光源PointLight- 点光源辅助观察PointLightHelper- 环境光AmbientLight- 平行光DirectionalLight- 平行光辅助观察DirectionalLightHelper- 相机控件OrbitControls- 请求动画帧window.requestAn原创 2023-08-12 17:12:13 · 1225 阅读 · 1 评论 -
Three.js之创建3D场景
有没有原生WebGL基础,你都可以直接学习Three.js,刚刚入门three.js时候,可以先不用学习WebGL,当你需要进阶深入学习Three.js的时候,最好先去学学原生WebGL,了解了解图形学相关理论知识,即便只是稍微入门WebGL,那对于three.js深入学习帮助都是很大的。实际生活中,一个物体往往是有位置的,对于threejs而言也是一样的,你可以通过位置属性.position定义网格模型Mesh在三维场景Scene中的位置。Three.js是一款。原创 2023-07-30 17:07:05 · 949 阅读 · 0 评论 -
Web3D之简介
Web3D是指在Web浏览器中展示和交互的三维图形技术。它是将三维图形技术与Web技术相结合的产物,可以通过浏览器在网页上呈现出逼真的三维场景、模型和动画。Web3D技术使得用户无需安装额外的插件或软件,只需使用现代的Web浏览器就可以体验到三维图形的交互和视觉效果。Web3D技术通常使用HTML、CSS、JavaScript等Web标准技术进行开发,并使用各种3D引擎和库来实现3D渲染、交互和动画等功能。原创 2023-07-23 16:22:17 · 1034 阅读 · 0 评论