微信小程序3D,使用Three.js在微信小程序中展示gltf模型,使用VisionKit展示AR能力

这篇具有很好参考价值的文章主要介绍了微信小程序3D,使用Three.js在微信小程序中展示gltf模型,使用VisionKit展示AR能力。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

WeChat 3D(版权登记号:2023SR0599982)

本仓库只开源gltf模型展示技术,技术好的朋友有这些代码就能帮助你解决很多问题了

如需要完整项目(基于若依框架开发的后端,AR能力前端)需另外付费赞助, 联系方式:QQ 790002517

微信公众号:时不待我

github仓库

https://github.com/zzy-life/Wechat3D

使用技术

  • Three.js

Three.js is a JavaScript 3D library.

  • threejs-miniprogram

There is a WeChat MiniProgram adapted version of Three.js.

  • VisionKit

小程序也在基础库 2.20.0 版本开始提供了开发 AR 功能的能力,即 VisionKit。VisionKit 包含了 AR 在内的视觉算法,要想开发小程序的 AR 功能,我们需要先了解 VisionKit。

预览

放不了二维码,自行去微信搜索:动物知识派对
threejs-miniprogram,微信小程序,3d,javascript

gltf模型展示能力

threejs-miniprogram,微信小程序,3d,javascript

3DAR能力(未开源,需赞助)

threejs-miniprogram,微信小程序,3d,javascript

threejs-miniprogram,微信小程序,3d,javascript

代码条款

开源内容遵循MIT许可证

付费软件包是基于MIT 许可证提供的,但请勿将其用于分发目的。您可以将代码部署到您的服务器或存储库。但是,您不得公开其他文件,例如源代码、示例、文档等,因为这会抵消赞助软件策略。

个人开发者 ¥100

如果您退出赞助商,您可以根据需要继续使用这些文件。

感谢赞助

w3cgirl  

glb转gltf模型

Only gltf models can be loaded

You can use the following tool to convert glb to gltf:

npm install -g gltf-import-export

Takes a .glb and exports to a .gltf or takes a .gltf and imports into a .glb.文章来源地址https://www.toymoban.com/news/detail-707673.html

Usage: gltf-import-export <file> [options]

Options:
  --version     Show version number                                    [boolean]
  --output, -o  Output filename
  --help, -h    Show help                                              [boolean]

到了这里,关于微信小程序3D,使用Three.js在微信小程序中展示gltf模型,使用VisionKit展示AR能力的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Three.js--》实现3d字体模型展示

    目录 项目搭建 初始化three.js基础代码 设置环境纹理 加载字体模型 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建 本案例还是借助框架书写three项目,借用vite构建工具搭建vue项

    2024年02月07日
    浏览(47)
  • Three.js--》实现3d踢球模型展示

    目录 项目搭建 初始化three.js基础代码 设置环境纹理加载模型 使用Cannon-es实现物理世界 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建 本案例还是借助框架书写three项目,借用

    2024年02月11日
    浏览(28)
  • Three.js--》实现3d地球模型展示

    目录 项目搭建 实现网页简单布局 初始化three.js基础代码 创建环境背景 加载地球模型 实现光柱效果 添加月球模型 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建 本案例还是借

    2024年02月08日
    浏览(43)
  • WEB 3D技术 three.js draco解压器 解决 压缩后的gltf/glb报错 Error: THREE.GLTFLoader: No DRACOLoader instance pravid

    通常 我们 glb/gltf里面都是非常大的场景 有些工具 它会因为过大做了压缩 导致 我们开始是用不了的 我们可以官网搜索 draco 如下图选择 这是个解压工具 用在我们各种的3D建模软件中 大部分是通用的 我们先在代码中导入工具 我们在项目根目录中 找到 node_modules下的 three 然后

    2024年04月16日
    浏览(28)
  • Three.js--》实现图片转3D效果展示

    目录 项目搭建 初始化three.js基础代码 加载图片纹理 设置着色器 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建 本案例还是借助框架书写three项目,借用vite构建工具搭建vue项目

    2024年02月08日
    浏览(33)
  • Three.js--》实现3d官网模型展示

    目录 项目搭建 实现网页简单布局 初始化three.js基础代码 创建环境背景 加载飞船模型 实现滚轮滑动切换3D场景 设置星光流动特效 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建

    2024年02月06日
    浏览(37)
  • Three.js--》实现3d地月模型展示

    目录 项目搭建 初始化three.js基础代码 创建月球模型 添加地球模型 添加模型标签 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建 本案例还是借助框架书写three项目,借用vite构建

    2024年02月07日
    浏览(40)
  • Three.js--》实现3D汽车展厅效果展示

    目录 项目搭建 初始化three.js基础代码 加载汽车模型 设置展厅效果 设置GUI面板动态控制车身操作 车门操作与车身视角展示 设置手动点击打开关闭车门 设置图片背景 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起

    2024年02月09日
    浏览(36)
  • Three.js--》实现3d圣诞贺卡展示模型

    目录 项目搭建 初始化three.js基础代码 加载环境模型 设置环境纹理 添加水面并设置阴影效果 实现幽灵小球的运动 实现相机切换和文字切屏 实现漫天星星和爱心样式 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起

    2024年02月06日
    浏览(35)
  • 【uni-app】只支持在微信小程序运行的 导入外部3d模型

    uniapp 导入3d模型,在微信小程序端运行。只支持在微信小程序端使用,若要支持 h5 和 APP端,可以查看这篇,点击这里 只导入了3d模型,未设置让模型动。 glb 格式 (1)首先文件 下载适配微信小程序的 three.js 地址:https://github.com/wechat-miniprogram/threejs-miniprogram (2)导入文件

    2023年04月08日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包