three实现沉浸式交互故事体验

今天简单实现一个three.js的3D故事小游戏，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。

下面是本项目的源码以及体验地址，感兴趣的朋友可以去看看。

源码下载地址： 点击进行跳转

体验地址：点击进行跳转

项目搭建

本案例还是借助框架书写three项目，借用vite构建工具搭建vue项目，vite这个构建工具如果有不了解的朋友，可以参考我之前对其讲解的文章：vite脚手架的搭建与使用 。搭建完成之后，用编辑器打开该项目，在终端执行 npm i 安装一下依赖，安装完成之后终端在安装 npm i three 即可。

因为我搭建的是vue3项目，为了便于代码的可读性，所以我将three.js代码单独抽离放在一个组件当中，在App根组件中进入引入该组件。具体如下：

<template>
  <!-- 3D故事小游戏 -->
  <ThreeDStory></ThreeDStory>
</template>
 
<script setup>
import ThreeDStory from './components/3DStory.vue'
</script>
 
<style lang="less">
  *{
    margin: 0;
    padding: 0;
  }
</style>

初始化three.js基础代码

three.js开启必须用到的基础代码如下：

导入three库：

import * as THREE from 'three'

初始化场景：

const scene = new THREE.Scene()

初始化相机：

// 创建相机
const camera = new THREE.PerspectiveCamera(
  45, // 视角
  window.innerWidth / window.innerHeight, // 宽高比
  0.1, // 近平面
  1000 // 远平面
);
// 设置相机位置
camera.position.z = 1;
// camera.position.y = 2;
// camera.position.x = 2;
camera.lookAt(0, 0, 0);

初始化渲染器：

// 创建渲染器
const renderer = new THREE.WebGLRenderer({
  antialias: true, // 开启抗锯齿
});
renderer.shadowMap.enabled = true; // 启用阴影映射
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

监听屏幕大小的改变，修改渲染器的宽高和相机的比例：

// 监听窗口变化
window.addEventListener("resize", () => {
  // 重置渲染器宽高比
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 重置相机宽高比
  camera.aspect = window.innerWidth / window.innerHeight;
  // 更新相机投影矩阵
  camera.updateProjectionMatrix();
});

导入轨道控制器：

// 添加轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// 添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置带阻尼的惯性
controls.enableDamping = true;
// 设置阻尼系数
controls.dampingFactor = 0.05;
controls.maxDistance = 50;
// 设置旋转速度
// controls.autoRotate = true;

设置渲染函数：

// 渲染函数
const animate = () => {
  controls.update();
  requestAnimationFrame(animate);
  // 渲染
  renderer.render(scene, camera);
}
animate();

ok，写完基础代码之后，接下来开始具体的Demo实操。

获取项目所需素材

讯飞星火模型生成剧本：

根据剧情关键词生成对应全景图： 我们可以把剧情上关键的词句提取出来，放到 Blockade Labs Skybox 中，Blockade Labs Skybox 是由 Blockade Labs 开发的一款虚拟现实（VR）应用程序中的天空盒（Skybox）它通过将一个包含天空图像的立方体或球体嵌入到场景中来模拟天空。当用户在虚拟现实环境中移动时，天空盒会随之变化，呈现出不同的天空景象，增强了沉浸感和视觉效果。

这个工具不登录也能用，但是生成全景图巨慢；登录之后生成的图片速度明显提高，普通用户每月只能生成15张，氪金之后数量会上来，但是对于囊中羞涩的博主来说还是太贵了，其具体的价格如下，如果有看到这篇文章的人是个富哥并且有这方面兴趣的，可以冲一冲：

作为普通用户的我（穷哭），只有15次机会而且全景图还要可恶的水印(咬牙切齿)，后面项目的全景图可能会和场景有一点点偏差(没有试错的机会)，还请大家抱歉，咱们主要是学习知识不是，图不图的无所谓了(摆正心态)。 学生党还是建议别冲了而且订阅也是需要一些手段，正常国内账户是订阅不了的。

给文字生成旁白语音：

这里使用TTS-Vue这个微软语音合成工具对我们的剧情文案生成语音，进行点击 网址 ，进入相应的网站，点击下面的安装运行进行安装：

在国内就点击 Gitee 码云进行安装吧。

这里就点击 window 版本即可，当然如果你是mac电脑就选择macos下载即可

下载完成之后，将你想要转换成语音的文字粘贴到工具中，选择自己喜欢的语音进行转换即可：

加载图片语音模型

获取完图片和语音素材之后，接下来开始对素材进行整合，和文字一起放置在响应式 reactive 当中

let data = reactive({
  contentList: [
    {
      content:
        "阿伟坐在电脑前，一边打游戏，一边听着妈妈的唠叨。他的脸上满是不耐烦，心中充满了对妈妈的反感。此时，他的朋友小刚走进来，邀请他一起去网吧游玩。阿伟欣然答应，两人一起出门。",
      img: "./textures/story/1.jpg",
      sound: "./sounds/1.mp3",
      startAngle: { x: 0, y: 0 },
      endAngle: { x: -Math.PI / 8, y: Math.PI / 2 },
      duration: 15000,
      btns: [
        {
          name: "不能听妈妈的唠叨，我决定必须和朋友出去玩~",
          index: 1,
        },
        {
          name: "阿伟回头想了想，现在是学习的关键时刻，不能老是沉迷于游戏。悬崖勒马回头是岸！",
          index: 2,
        },
      ],
    },
    {
      content:
        "阿伟和小刚在网吧里玩得不亦乐乎，他们在游戏中大显身手，引来了众人的羡慕目光。下机后，他们准备离开，却被一位名叫杰哥的人叫住。",
      img: "./textures/story/2.jpg",
      sound: "./sounds/2.mp3",
      startAngle: { x: Math.PI / 16, y: Math.PI - Math.PI / 16 },
      endAngle: { x: Math.PI / 16, y: Math.PI + Math.PI / 16 },
      duration: 20000,
      btns: [
        {
          name: "是要发生什么事吗...",
          index: 3,
        },
      ],
    },
    {
      content:
        "阿伟和妈妈重新回到了宁静的生活，他们学会了如何面对生活中的困境和挑战，也更加珍惜彼此之间的感情。",
      img: "./textures/story/3.jpg",
      sound: "./sounds/3.mp3",
      startAngle: { x: 0, y: -Math.PI / 4 },
      endAngle: { x: 0, y: -Math.PI / 2 },
      duration: 25000,
      btns: [],
    },
    {
      content:
        "杰哥热情地邀请阿伟和小刚到他家玩，他们在欢笑声中喝得烂醉如泥。杰哥看着阿伟，眼神中闪烁着诡异的光芒。",
      img: "./textures/story/4.jpg",
      sound: "./sounds/4.mp3",
      startAngle: { x: Math.PI / 16, y: -Math.PI / 2 - Math.PI / 8 },
      endAngle: { x: Math.PI / 16, y: -Math.PI / 2 },
      duration: 20000,
      btns: [
        {
          name: "阿伟被半推半就的被杰哥拉扯着...",
          index: 4,
        },
      ],
    },
    {
      content:
        "杰哥把阿伟带到他的房间，让他坐在桌前。阿伟的视线落在桌上，他看到了一些他从未见过的物品，他的心跳开始加速。",
      img: "./textures/story/5.jpg",
      sound: "./sounds/5.mp3",
      startAngle: { x: Math.PI / 16, y: Math.PI / 2 - Math.PI / 4 },
      endAngle: { x: Math.PI / 16, y: Math.PI / 2 - Math.PI / 8 },
      duration: 25000,
      btns: [
        {
          name: "这些到底是什么...",
          index: 5,
        },
      ],
    },
    {
      content:
        "杰哥趁阿伟脸红的时候，想看他法语正不正常。阿伟感到有些不安，但他无法反抗。杰哥一拳把他打到床上，他无力反抗，只能任由杰哥为所欲为。",
      img: "./textures/story/6.jpg",
      sound: "./sounds/6.mp3",
      startAngle: { x: Math.PI / 16, y: Math.PI / 2 - Math.PI / 4 },
      endAngle: { x: Math.PI / 16, y: Math.PI / 2 - Math.PI / 8 },
      duration: 25000,
      btns: [
        {
          name: "事后...",
          index: 6,
        },
      ],
    },
    {
      content:
        "杰哥笑着对阿伟说："我是阳光dua郎大男孩，这是我们的秘密你别给我说出去。"阿伟无奈地点头，心中充满了恐惧和无助。第二天阿伟收到了杰哥发来的消息，说依然想他再来他家开party。阿伟心中充满了恐惧，他知道，他已经陷入了一个无法逃脱的深渊。",
      img: "./textures/story/7.jpg",
      sound: "./sounds/7.mp3",
      startAngle: { x: Math.PI / 16, y: Math.PI / 2 - Math.PI / 4 },
      endAngle: { x: Math.PI / 16, y: Math.PI / 2 - Math.PI / 8 },
      duration: 25000,
      btns: [
        {
          name: "阿伟：我不能就这么完了~",
          index: 7,
        },
      ],
    },
    {
      content:
        "阿伟决定向警察求助，他要揭露杰哥的罪行，让他得到应有的惩罚。他知道，这将是一场艰难的战斗，但他没有退路，他必须站出来，为自己和其他可能成为杰哥目标的人争取公正。",
      img: "./textures/story/8.jpg",
      sound: "./sounds/8.mp3",
      startAngle: { x: 0, y: -Math.PI / 2 - Math.PI / 4 },
      endAngle: { x: -Math.PI / 8, y: -Math.PI / 2 - Math.PI / 8 },
      duration: 25000,
      btns: [],
    },
  ],
  contentVisible: false,
  modalVisible: true,
  index: 0,
});

当然还有众多css样式，这里就不再一一赘述了，具体的3D画面，我的gif动画工具支撑不住，这里直接看图片效果吧：

源码下载地址： 点击进行跳转

体验地址：点击进行跳转