微信小程序版本更新提示

前言

今天继续讲上次没讲完的元宇宙智慧城的小案例，如果不了解前面代码怎么实现的先去看一下之前的文章。

导入机器人模型

这一块机器人的处理可以参考我前面的基础知识文章，欢迎大家去考古，我这里就不多介绍了，直接贴代码

physics.js

新增一个js来进行机器人的导入以及碰撞检测

import * as THREE from "three";
import { Octree } from "three/examples/jsm/math/Octree.js";

import { Capsule } from "three/examples/jsm/math/Capsule.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
export default class Physics {
  constructor(planeGroup, camera, scene) {
    this.eventPositionList = [];
    this.worldOctree = new Octree();
    this.worldOctree.fromGraphNode(planeGroup);

    // 创建一个人的碰撞体
    this.playerCollider = new Capsule(
      new THREE.Vector3(0, 0.35, 0),
      new THREE.Vector3(0, 1.35, 0),
      0.35
    );
    // 加载机器人模型
    const loader = new GLTFLoader();
    // 设置动作混合器
    this.mixer = null;
    this.actions = {};
    // 设置激活动作
    this.activeAction = null;
    loader.load("./model/RobotExpressive.glb", (gltf) => {
      this.robot = gltf.scene;
      this.robot.scale.set(0.5, 0.5, 0.5);
      this.robot.position.set(0, -0.88, 0);

      // console.log(gltf);
      this.capsule.add(this.robot);
      this.mixer = new THREE.AnimationMixer(this.robot);
      for (let i = 0; i < gltf.animations.length; i++) {
        let name = gltf.animations[i].name;
        this.actions[name] = this.mixer.clipAction(gltf.animations[i]);
        if (name == "Idle" || name == "Walking" || name == "Running") {
          this.actions[name].clampWhenFinished = false;
          this.actions[name].loop = THREE.LoopRepeat;
        } else {
          this.actions[name].clampWhenFinished = true;
          this.actions[name].loop = THREE.LoopOnce;
        }
      }
      this.activeAction = this.actions["Idle"];
      this.activeAction.play();
      console.log(this.actions);
    });

    this.capsule = new THREE.Object3D();
    this.capsule.position.set(0, 0.85, 0);
    const backCamera = new THREE.PerspectiveCamera(
      70,
      window.innerWidth / window.innerHeight,
      0.001,
      1000
    );
    // 将相机作为胶囊的子元素，就可以实现跟随
    camera.position.set(0, 2, -5);
    camera.lookAt(this.capsule.position);
    backCamera.position.set(0, 2, 5);
    backCamera.lookAt(this.capsule.position);
    // controls.target = capsule.position;
    // 控制旋转上下的空3d对象
    this.capsuleBodyControl = new THREE.Object3D();
    this.capsuleBodyControl.add(camera);
    this.capsuleBodyControl.add(backCamera);
    this.capsule.add(this.capsuleBodyControl);

    // capsule.add(capsuleBody);

    scene.add(this.capsule);

    // 设置重力
    this.gravity = -9.8;
    // 玩家的速度
    this.playerVelocity = new THREE.Vector3(0, 0, 0);
    // 方向向量
    this.playerDirection = new THREE.Vector3(0, 0, 0);
    // 键盘按下事件
    this.keyStates = {
      KeyW: false,
      KeyA: false,
      KeyS: false,
      KeyD: false,
      Space: false,
      isDown: false,
    };

    // 玩家是否在地面上
    this.playerOnFloor = false;

    // 根据键盘按下的键来更新键盘的状态
    document.addEventListener(
      "keydown",
      (event) => {
        // console.log(event.code);
        this.keyStates[event.code] = true;
        this.keyStates.isDown = true;
      },
      false
    );
    document.addEventListener(
      "keyup",
      (event) => {
        this.keyStates[event.code] = false;
        this.keyStates.isDown = false;
        if (event.code === "KeyV") {
          this.activeCamera =
            this.activeCamera === camera ? backCamera : camera;
        }
        if (event.code === "KeyT") {
          // 打招呼
          this.fadeToAction("Wave");
        }
      },
      false
    );
    document.addEventListener(
      "mousedown",
      (event) => {
        // 锁定鼠标指针
        document.body.requestPointerLock();
      },
      false
    );
    // 根据鼠标在屏幕移动，来旋转胶囊
    window.addEventListener(
      "mousemove",
      (event) => {
        this.capsule.rotation.y -= event.movementX * 0.003;

        this.capsuleBodyControl.rotation.x += event.movementY * 0.003;
        if (this.capsuleBodyControl.rotation.x > Math.PI / 8) {
          this.capsuleBodyControl.rotation.x = Math.PI / 8;
        } else if (this.capsuleBodyControl.rotation.x < -Math.PI / 8) {
          this.capsuleBodyControl.rotation.x = -Math.PI / 8;
        }
      },
      false
    );
  }
  updatePlayer(deltaTime) {
    let damping = -0.25;
    if (this.playerOnFloor) {
      this.playerVelocity.y = 0;

      this.keyStates.isDown ||
        this.playerVelocity.addScaledVector(this.playerVelocity, damping);
    } else {
      this.playerVelocity.y += this.gravity * deltaTime;
    }

    // console.log(playerVelocity);
    // 计算玩家移动的距离
    const playerMoveDistance = this.playerVelocity
      .clone()
      .multiplyScalar(deltaTime);
    this.playerCollider.translate(playerMoveDistance);
    // 将胶囊的位置进行设置
    this.playerCollider.getCenter(this.capsule.position);

    // 进行碰撞检测
    this.playerCollisions();

    // console.log(Math.abs(playerVelocity.x) + Math.abs(playerVelocity.z));
    // 如果有水平的运动，则设置运动的动作
    if (
      Math.abs(this.playerVelocity.x) + Math.abs(this.playerVelocity.z) > 0.1 &&
      Math.abs(this.playerVelocity.x) + Math.abs(this.playerVelocity.z) <= 3
    ) {
      this.fadeToAction("Walking");
    } else if (
      Math.abs(this.playerVelocity.x) + Math.abs(this.playerVelocity.z) >
      3
    ) {
      this.fadeToAction("Running");
    } else {
      this.fadeToAction("Idle");
    }
  }
  playerCollisions() {
    // 人物碰撞检测
    const result = this.worldOctree.capsuleIntersect(this.playerCollider);
    // console.log(result);
    this.playerOnFloor = false;
    if (result) {
      this.playerOnFloor = result.normal.y > 0;
      this.playerCollider.translate(result.normal.multiplyScalar(result.depth));
    }
  }
  resetPlayer() {
    if (this.capsule.position.y < -20) {
      this.playerCollider.start.set(0, 2.35, 0);
      this.playerCollider.end.set(0, 3.35, 0);
      this.playerCollider.radius = 0.35;
      this.playerVelocity.set(0, 0, 0);
      this.playerDirection.set(0, 0, 0);
    }
  }
  fadeToAction(actionName) {
    this.prevAction = this.activeAction;
    this.activeAction = this.actions[actionName];
    if (this.prevAction != this.activeAction) {
      this.prevAction.fadeOut(0.3);
      this.activeAction
        .reset()
        .setEffectiveTimeScale(1)
        .setEffectiveWeight(1)
        .fadeIn(0.3)
        .play();

      this.mixer.addEventListener("finished", (e) => {
        this.prevAction = activeAction;
        this.activeAction = this.actions["Idle"];
        this.prevAction.fadeOut(0.3);
        this.activeAction
          .reset()
          .setEffectiveTimeScale(1)
          .setEffectiveWeight(1)
          .fadeIn(0.3)
          .play();
      });
    }
  }
  controlPlayer(deltaTime) {
    if (this.keyStates["KeyW"]) {
      this.playerDirection.z = 1;
      //获取胶囊的正前面方向
      const capsuleFront = new THREE.Vector3(0, 0, 0);
      this.capsule.getWorldDirection(capsuleFront);
      // console.log(capsuleFront);
      // 计算玩家的速度
      // 当速度超过最大速度时，不操作
      if (
        this.playerVelocity.x * this.playerVelocity.x +
          this.playerVelocity.z * this.playerVelocity.z <=
        200
      ) {
        this.playerVelocity.add(capsuleFront.multiplyScalar(deltaTime * 5));
      }
    }
    if (this.keyStates["KeyS"]) {
      this.playerDirection.z = 1;
      //获取胶囊的正前面方向
      const capsuleFront = new THREE.Vector3(0, 0, 0);
      this.capsule.getWorldDirection(capsuleFront);
      // console.log(capsuleFront);
      // 计算玩家的速度
      this.playerVelocity.add(capsuleFront.multiplyScalar(-deltaTime));
    }
    if (this.keyStates["KeyA"]) {
      this.playerDirection.x = 1;
      //获取胶囊的正前面方向
      const capsuleFront = new THREE.Vector3(0, 0, 0);
      this.capsule.getWorldDirection(capsuleFront);

      // 侧方的方向，正前面的方向和胶囊的正上方求叉积，求出侧方的方向
      capsuleFront.cross(this.capsule.up);
      // console.log(capsuleFront);
      // 计算玩家的速度
      this.playerVelocity.add(capsuleFront.multiplyScalar(-deltaTime));
    }
    if (this.keyStates["KeyD"]) {
      this.playerDirection.x = 1;
      //获取胶囊的正前面方向
      const capsuleFront = new THREE.Vector3(0, 0, 0);
      this.capsule.getWorldDirection(capsuleFront);

      // 侧方的方向，正前面的方向和胶囊的正上方求叉积，求出侧方的方向
      capsuleFront.cross(this.capsule.up);
      // console.log(capsuleFront);
      // 计算玩家的速度
      this.playerVelocity.add(capsuleFront.multiplyScalar(deltaTime));
    }
    if (this.keyStates["Space"]) {
      this.playerVelocity.y = 5;
    }
  }
  update(delta) {
    this.controlPlayer(delta);
    this.updatePlayer(delta);
    this.resetPlayer();
    if (this.mixer) {
      this.mixer.update(delta);
    }
    this.emitPositionEvent();
  }
  emitPositionEvent() {
    this.eventPositionList.forEach((item, i) => {
      // 计算胶囊距离某个点的距离，是否触发事件
      const distanceToSquared = this.capsule.position.distanceToSquared(
        item.position
      );
      if (
        distanceToSquared < item.radius * item.radius &&
        item.isInner == false
      ) {
        item.isInner = true;
        item.callback && item.callback(item);
      }

      if (
        distanceToSquared >= item.radius * item.radius &&
        item.isInner == true
      ) {
        item.isInner = false;
        item.outCallback && item.outCallback(item);
      }
    });
  }
  onPosition(position, callback, outCallback, radius = 2) {
    position = position.clone();
    this.eventPositionList.push({
      position,
      callback,
      outCallback,
      isInner: false,
      radius,
    });
  }
}

index.js

这里我引入了物理碰撞检测以及为了让模型显示添加了环境光

// 导入八叉树物理碰撞类
import Physics from "./Physics";
addPhysics(planeGroup) {
    this.physics = new Physics(planeGroup, this.camera, this.scene);
    return this.physics;
}
setLight() {
    // 添加环境光

    this.ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
    this.scene.add(this.ambientLight);
    const light1 = new THREE.DirectionalLight(0xffffff, 0.1);
    light1.position.set(0, 10, 10);
    const light2 = new THREE.DirectionalLight(0xffffff, 0.1);
    light2.position.set(0, 10, -10);
    const light3 = new THREE.DirectionalLight(0xffffff, 0.6);
    light3.position.set(10, 10, 10);
    light1.castShadow = true;
    light2.castShadow = true;
    light3.castShadow = true;
    light1.shadow.mapSize.width = 10240;
    light1.shadow.mapSize.height = 10240;
    light2.shadow.mapSize.width = 10240;
    light2.shadow.mapSize.height = 10240;
    light3.shadow.mapSize.width = 10240;
    light3.shadow.mapSize.height = 10240;
    this.scene.add(light1, light2, light3);
  }

App.vue

gltf.scene.traverse((child) => {
      if (
        child.isMesh &&
        child.material &&
        child.material.name.indexOf("KB3D_DLA_ConcreteRiverRock") != -1
      ) {
        planeGroup.add(child.clone());
        child.visible = false;
      }
    });
threePlus.addPhysics(planeGroup);

// 添加灯光
  threePlus.setLight();

此时效果如下

添加墙体碰撞检测

这里需要我们的建模小姐姐帮忙帮我们加上墙体的区分，我们调用即可

gltf.scene.traverse((child) => {
     if (
       child.isMesh &&
       child.material &&
       child.material.name.indexOf("KB3D_DLA_ConcreteRiverRock") != -1
     ) {
       planeGroup.add(child.clone());
       child.visible = false;
     }
     if (
       child.isMesh &&
       child.material &&
       child.material.name.indexOf("KB3D_DLA_ConcreteScreedTan") != -1
     ) {
       // console.log("墙", child);
       planeGroup.add(child.clone());
       child.visible = false;
     }
     if (
       child.isMesh &&
       child.material &&
       child.material.name.indexOf("KB3D_DLA_ConcretePittedGrayLight") != -1
     ) {
       // console.log("光墙", child);
       planeGroup.add(child.clone());
       child.visible = false;
     }
   });

此时我们就可以进行墙体的碰撞检测了

添加视频纹理

我们先简单的加个视频纹理测试一下

VideoPlane.js

新建一个添加视频纹理的类

import * as THREE from "three";
import gsap from "gsap";

export default class VideoPlane {
  constructor(
    videoSrc,
    size = new THREE.Vector2(1, 1),
    position = new THREE.Vector3(0, 0, 0)
  ) {
    // 添加视频纹理
    this.video = document.createElement("video");
    this.video.src = videoSrc;
    // 如果想要视频能够自动播放，那么就设置为静音
    this.video.muted = true;
    this.video.loop = true;
    this.video.play();
    const texture = new THREE.VideoTexture(this.video);

    // 创建一个平面
    const planeGeometry = new THREE.PlaneGeometry(size.x, size.y, 1, 1);
    const planeMaterial = new THREE.MeshBasicMaterial({
      color: 0xffffff,
      side: THREE.DoubleSide,
      transparent: true,
      blending: THREE.AdditiveBlending,
      depthWrite: false,
      map: texture,
      alphaMap: texture,
    });

    this.mesh = new THREE.Mesh(planeGeometry, planeMaterial);
    this.mesh.position.copy(position);
  }
}

index.js

// 添加视频平面
import VideoPlane from "./VideoPlane";
addVideoPlane(url, size, position) {
    let videoPlane = new VideoPlane(url, size, position);
    this.scene.add(videoPlane.mesh);
    return videoPlane;
  }

App.vue

// 添加测试视频平面
    threePlus.addVideoPlane("./video/test.mp4");

添加视频纹理

// // 添加测试视频平面
    // threePlus.addVideoPlane("./video/test.mp4");
    let dirPlane = threePlus.addVideoPlane(
      "./video/arrow.mp4",
      new THREE.Vector2(2, 2)
    );
    dirPlane.mesh.position.set(-1.5, 3, 2);

    // dirPlane.mesh.rotation.x = -Math.PI / 2;
    dirPlane.mesh.rotation.z = -Math.PI / 2;

    // 添加喷泉旁的光阵视频纹理
    let lightPlane = threePlus.addVideoPlane(
      "./video/zp2.mp4",
      new THREE.Vector2(5, 3),
      new THREE.Vector3(-3, -0.3, 15)
    );
    lightPlane.mesh.rotation.x = -Math.PI / 2;

添加光圈

App.vue

let lightCirclePosition = new THREE.Vector3(-3, -0.3, 15);
let lightCircle = threePlus.addLightCircle(lightCirclePosition);

index.js

addLightCircle(position, scale) {
    let lightCircle = new LightCircle(this.scene, position, scale);
    return lightCircle;
  }

LightCircle.js

这里就是一个简单的模型导入，然后添加视频纹理的过程

import * as THREE from "three";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import gsap from "gsap";

export default class LightCircle {
  constructor(
    scene,

    position = new THREE.Vector3(0, 0, 0),
    scale = 1
  ) {
    // 添加视频纹理
    let videoSrc = "./video/zp2.mp4";
    this.video = document.createElement("video");
    this.video.src = videoSrc;
    // 如果想要视频能够自动播放，那么就设置为静音
    this.video.muted = true;
    this.video.loop = true;
    this.video.play();
    const texture = new THREE.VideoTexture(this.video);
    texture.repeat.set(9 / 16, 1);
    texture.offset.set((1 - 9 / 16) / 2, 0);
    this.gltfLoader("./model/lightCircle.glb").then((gltf) => {
      // 创建一个平面
      this.mesh = gltf.scene.children[0];
      const planeGeometry = gltf.scene.children[0].geometry;
      this.mesh.material = new THREE.MeshBasicMaterial({
        color: 0xffffff,
        side: THREE.DoubleSide,
        transparent: true,
        blending: THREE.AdditiveBlending,
        depthWrite: false,
        map: texture,
        alphaMap: texture,
      });

      this.mesh.position.copy(position);
      this.mesh.scale.set(scale, scale * 1.5, scale);
      scene.add(this.mesh);
    });
  }
  gltfLoader(url) {
    const gltfLoader = new GLTFLoader();
    const dracoLoader = new DRACOLoader();
    dracoLoader.setDecoderPath("./draco/gltf/");
    dracoLoader.setDecoderConfig({ type: "js" });
    dracoLoader.preload();
    gltfLoader.setDRACOLoader(dracoLoader);

    return new Promise((resolve, reject) => {
      gltfLoader.load(url, (gltf) => {
        resolve(gltf);
      });
    });
  }
}

添加到达效果

光圈到达效果

这里onPosition方法在前面添加机器人的时候就贴了，这里就不展示了

let lightCirclePosition = new THREE.Vector3(-3, -0.3, 15);
let lightCircle = threePlus.addLightCircle(lightCirclePosition);
// 监听是否进入光阵
threePlus.physics.onPosition(
  lightCirclePosition,
  (eventData) => {
    console.log("触发进入光圈");
    lightCircle.mesh.visible = false;
    let canvasPosition = new THREE.Vector3(-3, 1.3, 18);
    let canvasRotation = new THREE.Euler(0, Math.PI, 0);
    let textVideo = threePlus.addTextVideo(
      "恭喜到达指定位置",
      canvasPosition,
      canvasRotation
    );
  }
);

火焰喷泉到达效果

FireSprite.js

import * as THREE from "three";
import { PositionalAudioHelper } from "three/examples/jsm/helpers/PositionalAudioHelper.js";
import fragmentShader from "./shader/FireSprite/fragment.glsl";

export default class FireSprite {
  constructor(
    camera,
    position = new THREE.Vector3(-4.9, 1.8, 25.1),
    scale = 1
  ) {
    this.camera = camera;
    // 着色器创建精灵材质
    this.spriteMaterial = new THREE.ShaderMaterial({
      uniforms: {
        rotation: { value: 0 },
        center: {
          value: new THREE.Vector2(0.5, 0.5),
        },
        iTime: {
          value: 0,
        },
        iResolution: {
          value: new THREE.Vector2(1000, 1000),
        },
        iMouse: {
          value: new THREE.Vector2(0, 0),
        },
        uFrequency: {
          value: 0,
        },
      },
      vertexShader: `
      uniform float rotation;
      uniform vec2 center;
      varying vec2 vUv;
      void main() {
          vUv = uv;
          vec4 mvPosition = modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 );
          vec2 scale;
          scale.x = length( vec3( modelMatrix[ 0 ].x, modelMatrix[ 0 ].y, modelMatrix[ 0 ].z ) );
          scale.y = length( vec3( modelMatrix[ 1 ].x, modelMatrix[ 1 ].y, modelMatrix[ 1 ].z ) );
          scale *= - mvPosition.z;
          
          vec2 alignedPosition = -( position.xy - ( center - vec2( 0.5 ) ) ) * scale/mvPosition.z;
          vec2 rotatedPosition;
          rotatedPosition.x = cos( rotation ) * alignedPosition.x - sin( rotation ) * alignedPosition.y;
          rotatedPosition.y = sin( rotation ) * alignedPosition.x + cos( rotation ) * alignedPosition.y;
          mvPosition.xy += rotatedPosition;
          gl_Position = projectionMatrix * mvPosition;
          gl_Position.z = -5.0;

          
      }
      `,
      fragmentShader: fragmentShader,
      transparent: true,
      blending: THREE.AdditiveBlending,
      depthWrite: false,
      //   depthTest: false,
      side: THREE.DoubleSide,
    });

    // this.spriteMaterial = new THREE.SpriteMaterial({
    //   map: new THREE.TextureLoader().load("./textures/effect/ke123.png"),
    //   blending: THREE.AdditiveBlending,
    //   depthWrite: false,
    //   depthTest: false,
    //   side: THREE.DoubleSide,
    // });

    // this.spriteMaterial.onBeforeCompile = (shader) => {
    // //   console.log(shader.vertexShader);
    // };
    // 创建精灵
    this.sprite = new THREE.Sprite(this.spriteMaterial);
    console.log(this.sprite.renderOrder);
    this.sprite.renderOrder = 1;
    this.sprite.position.copy(position);
    // 设置精灵的大小
    this.sprite.scale.set(scale, scale, scale);
    this.mesh = this.sprite;

    // 创建音乐
    this.listener = new THREE.AudioListener(); // 声音监听器
    this.sound = new THREE.PositionalAudio(this.listener); // 声音源
    this.audioLoader = new THREE.AudioLoader();
    this.audioLoader.load("./audio/gnzw.mp3", (buffer) => {
      this.sound.setBuffer(buffer);
      this.sound.setRefDistance(10);
      this.sound.setLoop(true);
      this.sound.play();
    });
    // console.log(this.sound);
    // const helper = new PositionalAudioHelper(this.sound, 10);
    // this.sound.add(helper);
    this.mesh.add(this.sound);

    this.analyser = new THREE.AudioAnalyser(this.sound, 32);
  }
  update(deltaTime) {
    let position = this.camera.localToWorld(new THREE.Vector3(0, 0, 0));
    let distanceSquared = position.distanceToSquared(this.mesh.position);
    this.sound.setVolume((1 / distanceSquared) * 200);
    // console.log(distanceSquared);

    let frequency = this.analyser.getAverageFrequency();
    this.spriteMaterial.uniforms.uFrequency.value = frequency;
    this.spriteMaterial.uniforms.iTime.value += deltaTime;
  }
}

index.js

addFireSprite(position, scale) {
    let fireSprite = new FireSprite(this.camera, position, scale);
    this.scene.add(fireSprite.mesh);
    this.updateMeshArr.push(fireSprite);
    return fireSprite;
  }

App.vue

let fireSprite = null;
    // 监听是否进入光阵
    threePlus.physics.onPosition(
      lightCirclePosition,
      (eventData) => {
        console.log("触发进入光圈");
        lightCircle.mesh.visible = false;
        let canvasPosition = new THREE.Vector3(-3, 1.3, 18);
        let canvasRotation = new THREE.Euler(0, Math.PI, 0);
        let textVideo = threePlus.addTextVideo(
          "恭喜到达指定位置",
          canvasPosition,
          canvasRotation
        );

        // 添加火焰
        fireSprite || (fireSprite = threePlus.addFireSprite());
      },
      (eventData) => {
        console.log("触发离开光圈");
        lightCircle.mesh.visible = true;
      }
    );

结语

好了，这个demo就简单介绍到这里了，更多内容敬请期待~