{"id":16604995,"url":"https://github.com/jaredtao/qt3d-learn","last_synced_at":"2025-03-21T14:30:47.538Z","repository":{"id":108167147,"uuid":"176475212","full_name":"jaredtao/Qt3D-learn","owner":"jaredtao","description":"Qt3D-learn","archived":false,"fork":false,"pushed_at":"2020-04-25T13:40:40.000Z","size":42767,"stargazers_count":43,"open_issues_count":0,"forks_count":9,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-01T06:51:14.744Z","etag":null,"topics":["qml","qt","qt3d","qtquick"],"latest_commit_sha":null,"homepage":null,"language":"QML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jaredtao.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-19T09:30:21.000Z","updated_at":"2024-05-18T04:11:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"fce744d2-c580-4322-936d-efe5ecc56cd0","html_url":"https://github.com/jaredtao/Qt3D-learn","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredtao%2FQt3D-learn","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredtao%2FQt3D-learn/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredtao%2FQt3D-learn/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredtao%2FQt3D-learn/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaredtao","download_url":"https://codeload.github.com/jaredtao/Qt3D-learn/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244141539,"owners_count":20404836,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["qml","qt","qt3d","qtquick"],"created_at":"2024-10-12T01:00:24.667Z","updated_at":"2025-03-21T14:30:47.532Z","avatar_url":"https://github.com/jaredtao.png","language":"QML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 目录\n- [目录](#%E7%9B%AE%E5%BD%95)\n- [Qt3D-learn](#Qt3D-learn)\n  - [CI](#CI)\n  - [License](#License)\n  - [开发环境](#%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83)\n  - [效果预览](#%E6%95%88%E6%9E%9C%E9%A2%84%E8%A7%88)\n    - [启动页面](#%E5%90%AF%E5%8A%A8%E9%A1%B5%E9%9D%A2)\n    - [HelloScene3D](#HelloScene3D)\n    - [HelloScene3D 2](#HelloScene3D-2)\n    - [Triangles](#Triangles)\n    - [Texture 1](#Texture-1)\n    - [Texture 2](#Texture-2)\n    - [Texture 3](#Texture-3)\n    - [FirstCube](#FirstCube)\n    - [MulitCube](#MulitCube)\n    - [TextureCube](#TextureCube)\n    - [TextureCubeWithPlane](#TextureCubeWithPlane)\n    - [TextureCubeMap](#TextureCubeMap)\n    - [SkyBox](#SkyBox)\n    - [TextureCubeMap](#TextureCubeMap-1)\n    - [Text3D](#Text3D)\n  - [代码结构](#%E4%BB%A3%E7%A0%81%E7%BB%93%E6%9E%84)\n  - [部分理解](#%E9%83%A8%E5%88%86%E7%90%86%E8%A7%A3)\n  - [联系方式:](#%E8%81%94%E7%B3%BB%E6%96%B9%E5%BC%8F)\n  - [打赏](#%E6%89%93%E8%B5%8F)\n\n# Qt3D-learn\n\n学习Qt3D的使用。在已有资料的基础上，做一些尝试，改进。算是踩坑笔记。\n\n参考:\n* https://learnopengl-cn.github.io/\n* https://github.com/MidoriYakumo/learnopengl-qt3d\n\n\n## CI\n| [Linux][lin-link] | [Windows][win-link] |\n| :---------------: | :-----------------: |\n| ![lin-badge]      | ![win-badge]        |\n\n[lin-badge]: https://travis-ci.org/jaredtao/Qt3D-learn.svg?branch=master \"Travis build status\"\n[lin-link]: https://travis-ci.org/jaredtao/Qt3D-learn \"Travis build status\"\n[win-badge]: https://ci.appveyor.com/api/projects/status/4stalyomvmeyxpvo?svg=true \"AppVeyor build status\"\n[win-link]: https://ci.appveyor.com/project/jiawentao/qt3d-learn \"AppVeyor build status\"\n## License\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/jaredtao/Qt3D-learn/blob/master/LICENSE)\n\n## 开发环境\n\n* Qt 5.12.x Windows\n  \n## 效果预览\n\n### 启动页面\n\n\u003cdiv style=\"overflow: hidden;justify-content:space-around;\"\u003e\n  \u003cdiv style=\"display: inline-block; max-width: 50%; max-height: 50%\" \u003e\n    \u003cimg src=\"DemoImages/Examples.png\"/\u003e\n  \u003c/div\u003e\n  \u003cdiv style=\"display: inline-block; max-width: 30%; max-height: 30%\" \u003e\n    \u003cimg src=\"DemoImages/Examples_Android.png\"/\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n参考Qt官方的例子，做了一个列表，可以点击进入、可以返回，也方便在Android设备上运行。\n\n按代码实现来说，就是Loader模拟了StackView。\n\n### HelloScene3D\n\n\u003cimg src=\"DemoImages/1.png\" width=\"50%\" height=\"50%\"/\u003e\n\n最小Demo，在Quick场景中，增加初始的3D场景。\n\n### HelloScene3D 2\n\n\u003cdiv style=\"overflow: hidden;justify-content:space-around;\"\u003e\n  \u003cdiv style=\"display: inline-block; max-width: 50%; max-height: 50%\" \u003e\n    \u003cimg src=\"DemoImages/2.png\"/\u003e\n  \u003c/div\u003e\n  \u003cdiv style=\"display: inline-block; max-width: 30%; max-height: 30%\" \u003e\n    \u003cimg src=\"DemoImages/2_Android.png\"/\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n增加背景色，以及必要的渲染设置、渲染设备选择器等。\n    \n增加FPS\n\n### Triangles\n\n\u003cdiv style=\"overflow: hidden;justify-content:space-around;\"\u003e\n  \u003cdiv style=\"display: inline-block; max-width: 50%; max-height: 50%\" \u003e\n    \u003cimg src=\"DemoImages/3.png\"/\u003e\n  \u003c/div\u003e\n  \u003cdiv style=\"display: inline-block; max-width: 30%; max-height: 30%\" \u003e\n    \u003cimg src=\"DemoImages/3_Android.png\"/\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n几何形状的绘制。创建了4个3D场景，放在了一起。\n\n左上角为顶点绘制的三角形，3个点+ TriangleFan的方式绘制。\n\n右上角是 索引+顶点绘制的线框模式两个三角形\n\n左下角为一次绘制两个三角形（顶点数据包含两个三角形）\n\n右下角为绘制彩色的三角形(顶点数据之外，增加色彩数据)\n\n### Texture 1\n\n\u003cdiv style=\"overflow: hidden;justify-content:space-around;\"\u003e\n  \u003cdiv style=\"display: inline-block; max-width: 50%; max-height: 50%\" \u003e\n    \u003cimg src=\"DemoImages/4.png\"/\u003e\n  \u003c/div\u003e\n  \u003cdiv style=\"display: inline-block; max-width: 30%; max-height: 30%\" \u003e\n    \u003cimg src=\"DemoImages/4_Android.png\"/\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n基本的纹理贴图\n\n### Texture 2\n\u003cdiv style=\"overflow: hidden;justify-content:space-around;\"\u003e\n  \u003cdiv style=\"display: inline-block; max-width: 50%; max-height: 50%\" \u003e\n    \u003cimg src=\"DemoImages/5.png\"/\u003e\n  \u003c/div\u003e\n  \u003cdiv style=\"display: inline-block; max-width: 30%; max-height: 30%\" \u003e\n    \u003cimg src=\"DemoImages/5_Android.png\"/\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n纹理和自定义颜色的混合\n\n### Texture 3\n\n\u003cdiv style=\"overflow: hidden;justify-content:space-around;\"\u003e\n  \u003cdiv style=\"display: inline-block; max-width: 50%; max-height: 50%\" \u003e\n    \u003cimg src=\"DemoImages/6.png\"/\u003e\n  \u003c/div\u003e\n  \u003cdiv style=\"display: inline-block; max-width: 30%; max-height: 30%\" \u003e\n    \u003cimg src=\"DemoImages/6_Android.png\"/\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n两张纹理的混合。增加了键盘设备和键盘处理，按下键盘Up和Down可以调节混合比例。\n\n坑1：手机上居然不能显示第二张纹理\n\n### FirstCube\n\n\u003cdiv style=\"overflow: hidden;justify-content:space-around;\"\u003e\n  \u003cdiv style=\"display: inline-block; max-width: 50%; max-height: 50%\" \u003e\n    \u003cimg src=\"DemoImages/7.png\"/\u003e\n  \u003c/div\u003e\n  \u003cdiv style=\"display: inline-block; max-width: 30%; max-height: 30%\" \u003e\n    \u003cimg src=\"DemoImages/7_Android.png\"/\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n一个3D立方体，绕y轴旋转\n\n### MulitCube\n\n\u003cdiv style=\"overflow: hidden;justify-content:space-around;\"\u003e\n  \u003cdiv style=\"display: inline-block; max-width: 50%; max-height: 50%\" \u003e\n    \u003cimg src=\"DemoImages/8.png\"/\u003e\n  \u003c/div\u003e\n  \u003cdiv style=\"display: inline-block; max-width: 30%; max-height: 30%\" \u003e\n    \u003cimg src=\"DemoImages/8_Android.png\"/\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n100个立方体，用NodeInstantiator动态创建，坐标随机、大小随机\n\n坑2：异步创建的属性打开就抛异常。\n\n### TextureCube\n\n\u003cdiv style=\"overflow: hidden;justify-content:space-around;\"\u003e\n  \u003cdiv style=\"display: inline-block; max-width: 50%; max-height: 50%\" \u003e\n    \u003cimg src=\"DemoImages/9.png\"/\u003e\n  \u003c/div\u003e\n  \u003cdiv style=\"display: inline-block; max-width: 30%; max-height: 30%\" \u003e\n    \u003cimg src=\"DemoImages/9_Android.png\"/\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\nCuboidMesh立方体贴图。\n\n顺便记录一下研究过的一些东西:\n\nCuboidGeometry默认可以创建立方体的顶点、纹理坐标等几何信息，但是Material总是贴不上。\n\n自己重写Geometry和shader代码可以实现立方体贴图，略麻烦\n\nCuboidGeometry中的默认信息(来自: qt-everywhere-src-5.12.4\\qt3d\\src\\render\\geometry\\qattribute.cpp)\n\n|属性|着色器中对应默认名称|\n|----|----|\n|顶点坐标|vertexPosition|\n|法线|vertexNormal|\n|颜色|vertexColor|\n|第一层纹理坐标|vertexTexCoord|\n|切线|vertexTangent|\n|索引|vertexJointIndices|\n|权重|vertexJointWeights|\n|第二层纹理坐标|vertexTexCoord1|\n|第三层纹理坐标|vertexTexCoord2|\n\n(用不来，后面的TextureCubeMap例子，还是写了自定义Geometry。。。)\n\n### TextureCubeWithPlane\n\n\u003cdiv style=\"overflow: hidden;justify-content:space-around;\"\u003e\n  \u003cdiv style=\"display: inline-block; max-width: 50%; max-height: 50%\" \u003e\n    \u003cimg src=\"DemoImages/10.png\"/\u003e\n  \u003c/div\u003e\n  \u003cdiv style=\"display: inline-block; max-width: 30%; max-height: 30%\" \u003e\n    \u003cimg src=\"DemoImages/10_Android.png\"/\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n加个地板（PlaneMesh + PhongMaterial），打个光 (PointLight)\n\n注意调整好相机角度或者地板位置，不然默认视角所在平面和地板平行了，就看不见了。\n\nPhongMaterial冯氏材质是有光晕效果的，其实从前面的立方体开始一直都用的冯氏材质。\n\n不加材质就是纯黑色的立方体。这里PointLight的效果更明显一些，就会覆盖冯氏材质的光晕效果。\n\n### TextureCubeMap\n\nQt3D的 TextureCubeMap 没有实现，等后续版本再补充。\n\n### SkyBox\n\n\u003cdiv style=\"overflow: hidden;justify-content:space-around;\"\u003e\n  \u003cdiv style=\"display: inline-block; max-width: 50%; max-height: 50%\" \u003e\n    \u003cimg src=\"DemoImages/11.png\"/\u003e\n  \u003c/div\u003e\n  \u003cdiv style=\"display: inline-block; max-width: 30%; max-height: 30%\" \u003e\n    \u003cimg src=\"DemoImages/11_Android.png\"/\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n天空盒, SkyboxEntity。注意6张图片的名称。\n\n### TextureCubeMap\n\n\u003cdiv style=\"overflow: hidden;justify-content:space-around;\"\u003e\n  \u003cdiv style=\"display: inline-block; max-width: 50%; max-height: 50%\" \u003e\n    \u003cimg src=\"DemoImages/12.png\"/\u003e\n  \u003c/div\u003e\n  \u003cdiv style=\"display: inline-block; max-width: 30%; max-height: 30%\" \u003e\n    \u003cimg src=\"DemoImages/12_Android.png\"/\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n### Text3D\n\n\u003cdiv style=\"overflow: hidden;justify-content:space-around;\"\u003e\n  \u003cdiv style=\"display: inline-block; max-width: 50%; max-height: 50%\" \u003e\n    \u003cimg src=\"DemoImages/14.gif\"/\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n3D文字 ExtrudedTextMesh。\n\n2D文字除了Quick/SceneGraph 中的Text，还有FrameGraph中的Text2DEntity,要放在Scene2D场景中。\n\n相当于把2维场景渲染到一张纹理Texture上，再把Texture渲染到3D场景中。\n\n在不需要Quick/SceneGraph的高级场景中，大有用处。比如最近Qt官方公众号上宣传的那几个3D文章，\n\n就提到了高端场景，不要任何Quick，应该就是用这种方式实现的。\n\n### HeloMesh\n\n\u003cdiv style=\"overflow: hidden;justify-content:space-around;\"\u003e\n  \u003cdiv style=\"display: inline-block; max-width: 50%; max-height: 50%\" \u003e\n    \u003cimg src=\"DemoImages/15.png\"/\u003e\n  \u003c/div\u003e\n  \u003cdiv style=\"display: inline-block; max-width: 30%; max-height: 30%\" \u003e\n    \u003cimg src=\"DemoImages/15_Android.png\"/\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n加载模型\n\n### Meshes\n\n\u003cdiv style=\"overflow: hidden;justify-content:space-around;\"\u003e\n  \u003cdiv style=\"display: inline-block; max-width: 50%; max-height: 50%\" \u003e\n    \u003cimg src=\"DemoImages/16.png\"/\u003e\n  \u003c/div\u003e\n  \u003cdiv style=\"display: inline-block; max-width: 30%; max-height: 30%\" \u003e\n    \u003cimg src=\"DemoImages/16_Android.png\"/\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n几何Mesh 的合影\n\n## 代码结构\n\n\u003cimg src=\"DemoImages/code.png\" width=\"50%\" height=\"50%\"/\u003e\n\n\n\n## 部分理解\n\n2019/7/21 TextureCubeMap 这些特殊的纹理贴图功能，都没有实现，C++代码里只有空的类构造、析构函数。。。\n\n我想贴个六面骰子出来，自己撸Geometry + shader吗？ SkyBox效果类似，但是深度处理不一样。\n\n2019/7/21  截至到5.13.0, Qt3D文档上宣传的 刚体、重力、AI寻路 等部分，根本没有任何代码。\n\n只在Bitbucket上面找到一个叫 陈斌的大佬封装的 Bullet Physics QML Plugin。\n\nhttps://bitbucket.org/csaga77/bullet-physics-qml-plugin/src/master/\n\n## 联系方式:\n\n***\n\n| 作者 | 涛哥                           |\n| ---- | -------------------------------- |\n|开发理念 | 弘扬鲁班文化，传承工匠精神 |\n| 博客 | https://jaredtao.github.io/ |\n|博客-国内镜像|https://jaredtao.gitee.io|\n|知乎专栏| https://zhuanlan.zhihu.com/TaoQt |\n|微信公众号| Qt进阶之路 |\n|QQ群| 734623697(高质量群，只能交流技术、分享知识、帮助解决实际问题）|\n| 邮箱 | jared2020@163.com                |\n| 微信 | xsd2410421                       |\n| QQ、TIM | 759378563                      |\n\n***\n\nQQ(TIM)、微信二维码\n\n\u003cimg src=\"https://github.com/jaredtao/jaredtao.github.io/blob/master/img/qq_connect.jpg?raw=true\" width=\"30%\" height=\"30%\" /\u003e\u003cimg src=\"https://github.com/jaredtao/jaredtao.github.io/blob/master/img/weixin_connect.jpg?raw=true\" width=\"30%\" height=\"30%\" /\u003e\n\n\n***\n## 打赏\n\u003cimg src=\"https://github.com/jaredtao/jaredtao.github.io/blob/master/img/weixin.jpg?raw=true\" width=\"30%\" height=\"30%\" /\u003e\u003cimg src=\"https://github.com/jaredtao/jaredtao.github.io/blob/master/img/zhifubao.jpg?raw=true\" width=\"30%\" height=\"30%\" /\u003e\n\n觉得分享的内容还不错, 就请作者喝杯奶茶吧~~\n***\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaredtao%2Fqt3d-learn","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaredtao%2Fqt3d-learn","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaredtao%2Fqt3d-learn/lists"}