WeChat applet integrates three.js--VR panoramic project source code

1. Example demonstration

The mini program integrates Three.js to demonstrate the use of different texture materials.

2.Source code

(1) Import library files

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

(2) Initialize the scene in the onLoad declaration cycle function

onLoad: function () {
        initScene()
    },

(3) initScene() function source code

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) Source code interpretation

To achieve the VR panoramic effect, the main steps are as follows:

<1> Create a cube

<2>Load 6 pictures of different faces as the material of the cube

<3>Set the cube attribute cube.geometry.scale(1,1,-1), which completes the inversion of the cube face

<4>Set the position of the camera inside the cube to achieve a panoramic effect of observing the cube from the inside.

A metal ball is also added to the source code to reflect the surrounding environment. The main thing here is to set the material's envMap attribute to the desired environment map when setting the material for the metal ball.

3. Example applet

ThreeJS development guide and model download