微信小程序集成three.js--VR全景项目源码

这篇具有很好参考价值的文章主要介绍了微信小程序集成three.js--VR全景项目源码。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.实例演示

小程序集成Three.js,展示不同贴图材质的运用

2.源码

(1)引入库文件

import * as THREE from '../../libs/three.weapp.js'
import gLTF from '../../jsm/loaders/GLTFLoader'
import {
    OrbitControls
} from '../../jsm/controls/OrbitControls'
const app = getApp()

(2)在onLoad声明周期函数中初始化场景

onLoad: function () {
        initScene()
    },

(3)initScene()函数源码

initScene() {
        wx.createSelectorQuery()
            .select('#webgl')
            .node()
            .exec((res) => {
                let canvasId = String(res[0].node.id)
                const canvas = THREE.global.registerCanvas(canvasId, res[0].node)
                this.setData({
                    canvasId: canvasId
                })
                //相机
                const camera = new THREE.PerspectiveCamera(70, canvas.width / canvas.height, 1, 1000);
                //场景
                const scene = new THREE.Scene();
                scene.background = new THREE.Color(0xffffff);
                const renderer = new THREE.WebGLRenderer({
                    antialias: true
                });
                //设置相机位置
                camera.position.set(0, 0, 5);
                //控制器
                const controls = new OrbitControls(camera, renderer.domElement);
                controls.enableDamping = true;
                controls.update();

                //添加灯光
                const spotLight = new THREE.SpotLight(0xffffff);
                spotLight.position.set(-40, 60, -10)
                //设置点光源投射阴影
                spotLight.castShadow = true;
                scene.add(spotLight)

                //加入环境光
                let ambiColor = "#33322b";
                let ambientLight = new THREE.AmbientLight(ambiColor);
                scene.add(ambientLight)
                //定义图片
                let backurl = 'https://mmbiz.qpic.cn/mmbiz_png/DWsjgNA1bNg0SfFX1Od4SLicD89xz919XU0mgSlH2YKCnumENibq57JOhSuVPunNLmtUDXXicibfvwP6MsaEPQ3D8Q/0?wx_fmt=png'
                let fronturl = 'https://mmbiz.qpic.cn/mmbiz_png/DWsjgNA1bNg0SfFX1Od4SLicD89xz919XicHLxnM9wvgdrhNzHoK9aibicWZ5ice7NIVZxf9ict6MiaahHJdoCGRiaOhYw/0?wx_fmt=png'
                let lefturl = 'https://mmbiz.qpic.cn/mmbiz_png/DWsjgNA1bNg0SfFX1Od4SLicD89xz919XFTA6ZwMg4wp7nibYfMVUflicbQEJAhxicwvqlXLhY300JB9icWUo7USpeg/0?wx_fmt=png'
                let righturl = 'https://mmbiz.qpic.cn/mmbiz_png/DWsjgNA1bNg0SfFX1Od4SLicD89xz919XZ1V9ibeFdp9iaw1icWD6rl4YOxQXNaqJyIFShtBKDu5veNNmC1j3kW1tw/0?wx_fmt=png'
                let topurl = 'https://mmbiz.qpic.cn/mmbiz_png/DWsjgNA1bNg0SfFX1Od4SLicD89xz919Xia5ot5lPeiaDUHT9UPvJhUZobL9Wl4lEgBrna7zI0GdCwEE7B2sCCExw/0?wx_fmt=png'
                let bottomurl = 'https://mmbiz.qpic.cn/mmbiz_png/DWsjgNA1bNg0SfFX1Od4SLicD89xz919X26hbtubv0f43zOr2zqZQ0tUlFJwIONKzRoVqgdcTWnur113McB3XNA/0?wx_fmt=png'

                //正方体1
                wx.showLoading({
                  title: '纹理加载中',
                })
                const geometry = new THREE.BoxBufferGeometry(20, 20, 20);
                const textureb = new THREE.TextureLoader().load(backurl)
                textureb.minFilter = THREE.LinearFilter
                const material1 = new THREE.MeshBasicMaterial({map:textureb})
                
                const texturef = new THREE.TextureLoader().load(fronturl)
                texturef.minFilter = THREE.LinearFilter
                const material2 = new THREE.MeshBasicMaterial({map:texturef})

                const texturel = new THREE.TextureLoader().load(lefturl)
                texturel.minFilter = THREE.LinearFilter
                const material3 = new THREE.MeshBasicMaterial({map:texturel})

                const texturer = new THREE.TextureLoader().load(righturl)
                texturer.minFilter = THREE.LinearFilter
                const material4 = new THREE.MeshBasicMaterial({map:texturer})

                const textureu = new THREE.TextureLoader().load(topurl)
                textureu.minFilter = THREE.LinearFilter
                const material5 = new THREE.MeshBasicMaterial({map:textureu})

                const textured = new THREE.TextureLoader().load(bottomurl)
                textured.minFilter = THREE.LinearFilter
                const material6 = new THREE.MeshBasicMaterial({map:textured})
                wx.hideLoading({
                })
                //1:左侧 2:前册 3 顶部 4 底部 5前
                var boxMaterials = [material4,material3,material5,material6,material2,material1]

                const cube = new THREE.Mesh(geometry,boxMaterials)
                cube.geometry.scale(1,1,-1)
                cube.rotation.y = Math.PI
                scene.add(cube)
                
                //设置cube纹理加载器
                const cubeTextureLoader = new THREE.CubeTextureLoader()
                const envMapTexture = cubeTextureLoader.load([
                    backurl,
                    fronturl,
                    righturl,
                    lefturl,
                    topurl,
                    bottomurl
                ])
                envMapTexture.minFilter = THREE.LinearFilter
                const sphereGeomtry = new THREE.SphereGeometry(1,20,20)
                const sphereMaterial = new THREE.MeshStandardMaterial({
                    metalness:0.7,
                    roughness:0.1,
                    envMap:envMapTexture    //设置环境贴图
                })
                const sphere = new THREE.Mesh(sphereGeomtry,sphereMaterial)
                scene.add(sphere)

                //辅助线
                /* const axesHelper = new THREE.AxesHelper(500);
                scene.add(axesHelper) */

                renderer.setPixelRatio(wx.getSystemInfoSync().pixelRatio);
                renderer.setSize(canvas.width, canvas.height);

                function render() {
                    canvas.requestAnimationFrame(render);
                    //更新控制器
                    controls.update();
                    renderer.render(scene, camera);
                }
                render()
            })
    },

(4)源码解读

实现VR全景效果的部分,主要实现步骤如下:

<1> 创建一个正方体

<2>加载6个不同面的图片作为正方体的材质

<3>设置正方体属性 cube.geometry.scale(1,1,-1),即完成了正方体面的反转

<4>将camera的位置设置在正方体内部,即实现了从内部观察正方体的全景效果

源码中还添加了一个金属球,来反射周围的环境,这里主要就是在给金属球设置材质时,将材质的envMap属性设置为想要的环境贴图

3.3D模型下载及实例小程序

微信小程序集成three.js--VR全景项目源码文章来源地址https://www.toymoban.com/news/detail-504306.html

到了这里,关于微信小程序集成three.js--VR全景项目源码的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 微信小程序实现vr全景图预览

    首先在微信小程序管理后台拉到最下面,设置——第三方服务——添加插件输入 wxPano 第二步:在pages.json中添加 然后在你要使用的页面中添加引用例如: 第三步:在页面中使用 在onready中实现渲染 src中放入你拍好的全景图,就能实现预览。

    2024年04月13日
    浏览(31)
  • vue2+three.js实现类似VR、3D全景效果

    效果图: 俩图标是我自己加的前进后退按钮,也是百度了好久,再加上GPT的帮助,才给搞出来。因为需求急,都不看官方文档,百度到一个能跑的demo之后改吧改吧,就先用着了。 下面是代码: 这里 代码有很多用不到的地方和需要优化的地方,我是来不及改了,就先这样吧

    2024年02月15日
    浏览(49)
  • Three.js 在微信小程序中实现3D展厅

            在微信小程序中,使用和构建3D数字孪生应用一直是我的梦想。经过我多年的学习和积累,终于实现了基础的业务功能,并且已经在微信小程序上成功发布、上线。( 目前样式比较丑,待优化的地方还很多,我回努力的 )。       小程序的名称”元宇宙1314”,小程

    2024年02月04日
    浏览(42)
  • 微信小程序利用three.js展示3D模型部分问题

    由于小程序的内存限制比较多,稍不注意就容易溢出,所以经过测试后我选择gltf模型。不用加载贴图,而且这个格式较为通用,最关键的是真的很小。OBJ+PNG怎么转GLTF格式在我上篇帖子内有。 three.js有一个小程序专用插件threex,移植效果还不错,但渲染出来的效果会差一点,

    2024年02月08日
    浏览(51)
  • 微信小程序3D,使用Three.js在微信小程序中展示gltf模型,使用VisionKit展示AR能力

    本仓库只开源gltf模型展示技术,技术好的朋友有这些代码就能帮助你解决很多问题了 如需要完整项目(基于若依框架开发的后端,AR能力前端)需另外付费赞助, 联系方式:QQ 790002517 微信公众号:时不待我 https://github.com/zzy-life/Wechat3D Three.js Three.js is a JavaScript 3D library. thr

    2024年02月09日
    浏览(44)
  • 小程序集成Three.js框架(演示案例)

    Three.js作为非常好用的3D前端开发框架,受到很多前端开发者的追捧,而要在微信小程序中运用则需要使用适配小程序的Three.js库。 下面是集成Three.js后的微信小程序演示示例。包括常规的创建模型,应用材质,raycastor选择器等大部分Three.js使用案例。 扫码查看Three.js集成到小

    2024年02月13日
    浏览(39)
  • 【微信小程序开发】微信小程序集成腾讯位置项目配置

    腾讯位置服务官网 当然没账号的要先注册一个账号 在我的应用里创建一个新的应用,印象中需要小程序ID,去微信开发者工具里面找到自己的小程序ID填入即可 添加 key 中勾选勾选 WebServiceAPI 从官网里下载,我这里下载的是 v1.2 打开微信开发者工具 在查找小程序ID的地方下滑

    2024年02月02日
    浏览(57)
  • Three.js加载360全景图片/视频

    效果 原理 将全景图片/视频作为texture引入到three.js场景中 将贴图与球形网格模型融合,将球模型当做成环境容器使用 处理视频时需要以dom为载体,加载与控制视频动作 每次渲染时更新当前texture,以达到视频播放效果 全景图片加载有球体与正方体两种模式,区别在于是加载

    2024年02月04日
    浏览(42)
  • Three.js 实战【1】—— 3D全景视图开发

    在现代开发过程当中,3D开发是越来越不可或缺的一部门,在前面的文章当中简单的说明了一些threeJs的基础,从这里开始,我们将对ThreeJs整体进行一定的应用。 我们先看一下这篇文章主要要实现的一个demo效果,现如今在第三方租房、买房App、或者百度、高德地图上会出现这

    2024年02月12日
    浏览(49)
  • three.js实现3D室内全景看房

    首先我们先搭建一个项目,我选择使用vite来进行项目的搭建,执行命令如下: 这样一个基本的项目就搭建成功了,目录如下所示 然后,下载一下three.js工具,执行如下命令 页面中引入 先搭建一个立体图形,并画出辅助线,如下所示  实现代码如下: 接着,给我们的立体图

    2024年02月12日
    浏览(46)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包