Three.js--》✨ 阳 光 dua 郎 大 男 孩 ✨——阿伟的自述

不要让鲲流太嚣张，我们杰流才是最弔的 ———— 阳光dua郎大男孩

目录

项目搭建

初始化three.js基础代码

获取项目所需素材

加载图片语音模型

---

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

项目搭建

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

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

1.  
   <template>
2.  
   <!-- 3D故事小游戏 -->
3.  
   <ThreeDStory></ThreeDStory>
4.  
   </template>
5.  
    
6.  
   <script setup>
7.  
   import ThreeDStory from './components/3DStory.vue'
8.  
   </script>
9.  
    
10.  
    <style lang="less">
11.  
    *{
12.  
    margin: 0;
13.  
    padding: 0;
14.  
    }
15.  
    </style>

初始化three.js基础代码

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

导入three库：

import * as THREE from 'three'

初始化场景：

const scene = new THREE.Scene()

初始化相机：

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

初始化渲染器：

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

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

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

导入轨道控制器：

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

设置渲染函数： 

1.  
   // 渲染函数
2.  
   const animate = () => {
3.  
   controls.update();
4.  
   requestAnimationFrame(animate);
5.  
   // 渲染
6.  
   renderer.render(scene, camera);
7.  
   }
8.  
   animate();

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

获取项目所需素材

讯飞星火模型生成剧本：

最近不知道咋回事，我的朋友圈爆了。刷屏全是注册使用讯飞星火模型。博主也去试了一下感觉还是不错的，里面的好多AI选择还是比较全面的，对了，我找科大讯飞的朋友申请了一个专属申请链接：，官方链接在这。通过该链接申请体验的，审核更快（最快5分钟，最慢4小时），如果你还没体验过星火大模型的话，那我强烈建议通过专属链接来申请，审核会更快。还可以有更高的星火大模型API测试额度，比普通渠道申请多30%，至高可申请500w Tokens。想玩的朋友大家可以试一下，我选择了剧情编剧，给他设定了一个 阳光dua郎大男孩 的人设，给出如下剧情：

根据剧情关键词生成对应全景图：

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

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

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

给文字生成旁白语音：

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

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

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

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

加载图片语音模型

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

1.  
   let data = reactive({
2.  
   contentList: [
3.  
   {
4.  
   content:
5.  
   "阿伟坐在电脑前，一边打游戏，一边听着妈妈的唠叨。他的脸上满是不耐烦，心中充满了对妈妈的反感。此时，他的朋友小刚走进来，邀请他一起去网吧游玩。阿伟欣然答应，两人一起出门。",
6.  
   img: "./textures/story/1.jpg",
7.  
   sound: "./sounds/1.mp3",
8.  
   startAngle: { x: 0, y: 0 },
9.  
   endAngle: { x: -Math.PI / 8, y: Math.PI / 2 },
10.  
    duration: 15000,
11.  
    btns: [
12.  
    {
13.  
    name: "不能听妈妈的唠叨，我决定必须和朋友出去玩~",
14.  
    index: 1,
15.  
    },
16.  
    {
17.  
    name: "阿伟回头想了想，现在是学习的关键时刻，不能老是沉迷于游戏。悬崖勒马回头是岸！",
18.  
    index: 2,
19.  
    },
20.  
    ],
21.  
    },
22.  
    {
23.  
    content:
24.  
    "阿伟和小刚在网吧里玩得不亦乐乎，他们在游戏中大显身手，引来了众人的羡慕目光。下机后，他们准备离开，却被一位名叫杰哥的人叫住。",
25.  
    img: "./textures/story/2.jpg",
26.  
    sound: "./sounds/2.mp3",
27.  
    startAngle: { x: Math.PI / 16, y: Math.PI - Math.PI / 16 },
28.  
    endAngle: { x: Math.PI / 16, y: Math.PI Math.PI / 16 },
29.  
    duration: 20000,
30.  
    btns: [
31.  
    {
32.  
    name: "是要发生什么事吗...",
33.  
    index: 3,
34.  
    },
35.  
    ],
36.  
    },
37.  
    {
38.  
    content:
39.  
    "阿伟和妈妈重新回到了宁静的生活，他们学会了如何面对生活中的困境和挑战，也更加珍惜彼此之间的感情。",
40.  
    img: "./textures/story/3.jpg",
41.  
    sound: "./sounds/3.mp3",
42.  
    startAngle: { x: 0, y: -Math.PI / 4 },
43.  
    endAngle: { x: 0, y: -Math.PI / 2 },
44.  
    duration: 25000,
45.  
    btns: [],
46.  
    },
47.  
    {
48.  
    content:
49.  
    "杰哥热情地邀请阿伟和小刚到他家玩，他们在欢笑声中喝得烂醉如泥。杰哥看着阿伟，眼神中闪烁着诡异的光芒。",
50.  
    img: "./textures/story/4.jpg",
51.  
    sound: "./sounds/4.mp3",
52.  
    startAngle: { x: Math.PI / 16, y: -Math.PI / 2 - Math.PI / 8 },
53.  
    endAngle: { x: Math.PI / 16, y: -Math.PI / 2 },
54.  
    duration: 20000,
55.  
    btns: [
56.  
    {
57.  
    name: "阿伟被半推半就的被杰哥拉扯着...",
58.  
    index: 4,
59.  
    },
60.  
    ],
61.  
    },
62.  
    {
63.  
    content:
64.  
    "杰哥把阿伟带到他的房间，让他坐在桌前。阿伟的视线落在桌上，他看到了一些他从未见过的物品，他的心跳开始加速。",
65.  
    img: "./textures/story/5.jpg",
66.  
    sound: "./sounds/5.mp3",
67.  
    startAngle: { x: Math.PI / 16, y: Math.PI / 2 - Math.PI / 4 },
68.  
    endAngle: { x: Math.PI / 16, y: Math.PI / 2 - Math.PI / 8 },
69.  
    duration: 25000,
70.  
    btns: [
71.  
    {
72.  
    name: "这些到底是什么...",
73.  
    index: 5,
74.  
    },
75.  
    ],
76.  
    },
77.  
    {
78.  
    content:
79.  
    "杰哥趁阿伟脸红的时候，想看他法语正不正常。阿伟感到有些不安，但他无法反抗。杰哥一拳把他打到床上，他无力反抗，只能任由杰哥为所欲为。",
80.  
    img: "./textures/story/6.jpg",
81.  
    sound: "./sounds/6.mp3",
82.  
    startAngle: { x: Math.PI / 16, y: Math.PI / 2 - Math.PI / 4 },
83.  
    endAngle: { x: Math.PI / 16, y: Math.PI / 2 - Math.PI / 8 },
84.  
    duration: 25000,
85.  
    btns: [
86.  
    {
87.  
    name: "事后...",
88.  
    index: 6,
89.  
    },
90.  
    ],
91.  
    },
92.  
    {
93.  
    content:
94.  
    "杰哥笑着对阿伟说：“我是阳光dua郎大男孩，这是我们的秘密你别给我说出去。”阿伟无奈地点头，心中充满了恐惧和无助。第二天阿伟收到了杰哥发来的消息，说依然想他再来他家开party。阿伟心中充满了恐惧，他知道，他已经陷入了一个无法逃脱的深渊。",
95.  
    img: "./textures/story/7.jpg",
96.  
    sound: "./sounds/7.mp3",
97.  
    startAngle: { x: Math.PI / 16, y: Math.PI / 2 - Math.PI / 4 },
98.  
    endAngle: { x: Math.PI / 16, y: Math.PI / 2 - Math.PI / 8 },
99.  
    duration: 25000,
100.  
     btns: [
101.  
     {
102.  
     name: "阿伟：我不能就这么完了~",
103.  
     index: 7,
104.  
     },
105.  
     ],
106.  
     },
107.  
     {
108.  
     content:
109.  
     "阿伟决定向警察求助，他要揭露杰哥的罪行，让他得到应有的惩罚。他知道，这将是一场艰难的战斗，但他没有退路，他必须站出来，为自己和其他可能成为杰哥目标的人争取公正。",
110.  
     img: "./textures/story/8.jpg",
111.  
     sound: "./sounds/8.mp3",
112.  
     startAngle: { x: 0, y: -Math.PI / 2 - Math.PI / 4 },
113.  
     endAngle: { x: -Math.PI / 8, y: -Math.PI / 2 - Math.PI / 8 },
114.  
     duration: 25000,
115.  
     btns: [],
116.  
     },
117.  
     ],
118.  
     contentVisible: false,
119.  
     modalVisible: true,
120.  
     index: 0,
121.  
     });

接下来通过 TextureLoader 加载纹理，处理各种常见的图像格式，如JPEG、PNG和GIF，并将它们转换为WebGL可用的纹理对象。这里我们处理我们刚生成好的全景图：

1.  
   let textureLoader = new THREE.TextureLoader();
2.  
   let textures = data.contentList.map((item, i) => {
3.  
   let texture = textureLoader.load(data.contentList[i].img); // 循环加载每一张图片
4.  
   texture.mapping = THREE.EquirectangularReflectionMapping; // 通过使用全景纹理图像来模拟环境反射
5.  
   texture.colorSpace = THREE.SRGBColorSpace; // 表示和描述颜色的数学模型或系统
6.  
   return texture;
7.  
   });

创建几何球体模，然后将处理好的图片进行纹理贴图，形成一个完整的3D球体面：

1.  
   let SphereGeometry = new THREE.SphereGeometry(100, 32, 32);
2.  
   SphereGeometry.scale(1, 1, -1);
3.  
   let material = new THREE.MeshBasicMaterial({ map: textures[data.index] });
4.  
   let sphere = new THREE.Mesh(SphereGeometry, material);
5.  
   sphere.rotation.order = "XYZ";
6.  
   scene.add(sphere);

在html页面中通过我们设置的点击事件不断的切换场景：

1.  
   <template>
2.  
   <div class="modal" v-show="data.modalVisible">
3.  
   <div class="playGame">
4.  
   <div class="btn" @click="toggleContent(0)">开始操作</div>
5.  
   <audio ref="audioPlayer" loop autoplay src="../../public/sounds/LOVE.mp3"></audio>
6.  
   </div>
7.  
   </div>
8.  
   <div class="textDiv" v-show="data.contentVisible">
9.  
   <div class="text">{{ data.contentList[data.index].content }}</div>
10.  
    <div class="footer">
11.  
    <div
12.  
    v-for="(item, i) in data.contentList[data.index].btns"
13.  
    class="btn"
14.  
    @click="toggleContent(item.index)"
15.  
    >
16.  
    {{ item.name }}
17.  
    </div>
18.  
    </div>
19.  
    </div>
20.  
    </template>

接下来需要借助tween动画库，终端执行如下命令：

npm i tween

在我们设置的点击切换场景图片后，播放我们设置的音频，这里我还添加了一个背景音乐，还有借助tween动画库实现画面的自动旋转操作：

1.  
   function toggleContent(dataIndex) {
2.  
   audioPlayer.value.play();
3.  
   setTimeout(() => {
4.  
   data.contentList[data.index].sound &&
5.  
   (audio.src = data.contentList[data.index].sound);
6.  
   audio.play();
7.  
   }, 500);
8.  
   data.contentVisible = true;
9.  
   data.modalVisible = false;
10.  
    data.index = dataIndex;
11.  
    camera.position.set(0, 0, 1);
12.  
    sphere.rotation.y = data.contentList[dataIndex].startAngle.y;
13.  
    sphere.rotation.x = data.contentList[dataIndex].startAngle.x;
14.  
    material.map = textures[data.index];
15.  
    material.needsUpdate = true;
16.  
     
17.  
    tween && tween.stop();
18.  
    tween = new TWEEN.Tween(sphere.rotation);
19.  
    tween.to(
20.  
    {
21.  
    y: data.contentList[data.index].endAngle.y,
22.  
    x: data.contentList[data.index].endAngle.x,
23.  
    },
24.  
    data.contentList[data.index].duration
25.  
    );
26.  
    // 设置缓动函数
27.  
    tween.easing(TWEEN.Easing.Quadratic.InOut);
28.  
     
29.  
    // 启动补间动画
30.  
    tween.start();
31.  
    }

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

demo做完，给出本案例的完整代码：（获取素材也可以私信博主）

1.  
   <template>
2.  
   <div class="modal" v-show="data.modalVisible">
3.  
   <div class="playGame">
4.  
   <div class="btn" @click="toggleContent(0)">开始操作</div>
5.  
   <audio ref="audioPlayer" loop autoplay src="../../public/sounds/LOVE.mp3"></audio>
6.  
   </div>
7.  
   </div>
8.  
   <div class="textDiv" v-show="data.contentVisible">
9.  
   <div class="text">{{ data.contentList[data.index].content }}</div>
10.  
    <div class="footer">
11.  
    <div
12.  
    v-for="(item, i) in data.contentList[data.index].btns"
13.  
    class="btn"
14.  
    @click="toggleContent(item.index)"
15.  
    >
16.  
    {{ item.name }}
17.  
    </div>
18.  
    </div>
19.  
    </div>
20.  
    </template>
21.  
     
22.  
    <script setup>
23.  
    import { ref ,reactive, onMounted } from 'vue'
24.  
    // 导入threejs
25.  
    import * as THREE from "three";
26.  
    // 导入轨道控制器
27.  
    import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
28.  
    // 导入TWEEN
29.  
    import * as TWEEN from "tween";
30.  
     
31.  
    // 创建场景
32.  
    const scene = new THREE.Scene();
33.  
    // 创建相机
34.  
    const camera = new THREE.PerspectiveCamera(
35.  
    45, // 视角
36.  
    window.innerWidth / window.innerHeight, // 宽高比
37.  
    0.1, // 近平面
38.  
    1000 // 远平面
39.  
    );
40.  
    // 设置相机位置
41.  
    camera.position.z = 1;
42.  
    // camera.position.y = 2;
43.  
    // camera.position.x = 2;
44.  
    camera.lookAt(0, 0, 0);
45.  
     
46.  
    // 创建渲染器
47.  
    const renderer = new THREE.WebGLRenderer({
48.  
    antialias: true, // 开启抗锯齿
49.  
    });
50.  
    renderer.shadowMap.enabled = true; // 启用阴影映射
51.  
    renderer.setSize(window.innerWidth, window.innerHeight);
52.  
    document.body.appendChild(renderer.domElement);
53.  
     
54.  
    // 添加轨道控制器
55.  
    const controls = new OrbitControls(camera, renderer.domElement);
56.  
    // 设置带阻尼的惯性
57.  
    controls.enableDamping = true;
58.  
    // 设置阻尼系数
59.  
    controls.dampingFactor = 0.05;
60.  
    controls.maxDistance = 50;
61.  
    // 设置旋转速度
62.  
    // controls.autoRotate = true;
63.  
     
64.  
    // 渲染函数
65.  
    const animate = () => {
66.  
    controls.update();
67.  
    TWEEN.update();
68.  
    requestAnimationFrame(animate);
69.  
    // 渲染
70.  
    renderer.render(scene, camera);
71.  
    }
72.  
    animate();
73.  
     
74.  
     
75.  
    let data = reactive({
76.  
    contentList: [
77.  
    {
78.  
    content:
79.  
    "阿伟坐在电脑前，一边打游戏，一边听着妈妈的唠叨。他的脸上满是不耐烦，心中充满了对妈妈的反感。此时，他的朋友小刚走进来，邀请他一起去网吧游玩。阿伟欣然答应，两人一起出门。",
80.  
    img: "./textures/story/1.jpg",
81.  
    sound: "./sounds/1.mp3",
82.  
    startAngle: { x: 0, y: 0 },
83.  
    endAngle: { x: -Math.PI / 8, y: Math.PI / 2 },
84.  
    duration: 15000,
85.  
    btns: [
86.  
    {
87.  
    name: "不能听妈妈的唠叨，我决定必须和朋友出去玩~",
88.  
    index: 1,
89.  
    },
90.  
    {
91.  
    name: "阿伟回头想了想，现在是学习的关键时刻，不能老是沉迷于游戏。悬崖勒马回头是岸！",
92.  
    index: 2,
93.  
    },
94.  
    ],
95.  
    },
96.  
    {
97.  
    content:
98.  
    "阿伟和小刚在网吧里玩得不亦乐乎，他们在游戏中大显身手，引来了众人的羡慕目光。下机后，他们准备离开，却被一位名叫杰哥的人叫住。",
99.  
    img: "./textures/story/2.jpg",
100.  
     sound: "./sounds/2.mp3",
101.  
     startAngle: { x: Math.PI / 16, y: Math.PI - Math.PI / 16 },
102.  
     endAngle: { x: Math.PI / 16, y: Math.PI Math.PI / 16 },
103.  
     duration: 20000,
104.  
     btns: [
105.  
     {
106.  
     name: "是要发生什么事吗...",
107.  
     index: 3,
108.  
     },
109.  
     ],
110.  
     },
111.  
     {
112.  
     content:
113.  
     "阿伟和妈妈重新回到了宁静的生活，他们学会了如何面对生活中的困境和挑战，也更加珍惜彼此之间的感情。",
114.  
     img: "./textures/story/3.jpg",
115.  
     sound: "./sounds/3.mp3",
116.  
     startAngle: { x: 0, y: -Math.PI / 4 },
117.  
     endAngle: { x: 0, y: -Math.PI / 2 },
118.  
     duration: 25000,
119.  
     btns: [],
120.  
     },
121.  
     {
122.  
     content:
123.  
     "杰哥热情地邀请阿伟和小刚到他家玩，他们在欢笑声中喝得烂醉如泥。杰哥看着阿伟，眼神中闪烁着诡异的光芒。",
124.  
     img: "./textures/story/4.jpg",
125.  
     sound: "./sounds/4.mp3",
126.  
     startAngle: { x: Math.PI / 16, y: -Math.PI / 2 - Math.PI / 8 },
127.  
     endAngle: { x: Math.PI / 16, y: -Math.PI / 2 },
128.  
     duration: 20000,
129.  
     btns: [
130.  
     {
131.  
     name: "阿伟被半推半就的被杰哥拉扯着...",
132.  
     index: 4,
133.  
     },
134.  
     ],
135.  
     },
136.  
     {
137.  
     content:
138.  
     "杰哥把阿伟带到他的房间，让他坐在桌前。阿伟的视线落在桌上，他看到了一些他从未见过的物品，他的心跳开始加速。",
139.  
     img: "./textures/story/5.jpg",
140.  
     sound: "./sounds/5.mp3",
141.  
     startAngle: { x: Math.PI / 16, y: Math.PI / 2 - Math.PI / 4 },
142.  
     endAngle: { x: Math.PI / 16, y: Math.PI / 2 - Math.PI / 8 },
143.  
     duration: 25000,
144.  
     btns: [
145.  
     {
146.  
     name: "这些到底是什么...",
147.  
     index: 5,
148.  
     },
149.  
     ],
150.  
     },
151.  
     {
152.  
     content:
153.  
     "杰哥趁阿伟脸红的时候，想看他法语正不正常。阿伟感到有些不安，但他无法反抗。杰哥一拳把他打到床上，他无力反抗，只能任由杰哥为所欲为。",
154.  
     img: "./textures/story/6.jpg",
155.  
     sound: "./sounds/6.mp3",
156.  
     startAngle: { x: Math.PI / 16, y: Math.PI / 2 - Math.PI / 4 },
157.  
     endAngle: { x: Math.PI / 16, y: Math.PI / 2 - Math.PI / 8 },
158.  
     duration: 25000,
159.  
     btns: [
160.  
     {
161.  
     name: "事后...",
162.  
     index: 6,
163.  
     },
164.  
     ],
165.  
     },
166.  
     {
167.  
     content:
168.  
     "杰哥笑着对阿伟说：“我是阳光dua郎大男孩，这是我们的秘密你别给我说出去。”阿伟无奈地点头，心中充满了恐惧和无助。第二天阿伟收到了杰哥发来的消息，说依然想他再来他家开party。阿伟心中充满了恐惧，他知道，他已经陷入了一个无法逃脱的深渊。",
169.  
     img: "./textures/story/7.jpg",
170.  
     sound: "./sounds/7.mp3",
171.  
     startAngle: { x: Math.PI / 16, y: Math.PI / 2 - Math.PI / 4 },
172.  
     endAngle: { x: Math.PI / 16, y: Math.PI / 2 - Math.PI / 8 },
173.  
     duration: 25000,
174.  
     btns: [
175.  
     {
176.  
     name: "阿伟：我不能就这么完了~",
177.  
     index: 7,
178.  
     },
179.  
     ],
180.  
     },
181.  
     {
182.  
     content:
183.  
     "阿伟决定向警察求助，他要揭露杰哥的罪行，让他得到应有的惩罚。他知道，这将是一场艰难的战斗，但他没有退路，他必须站出来，为自己和其他可能成为杰哥目标的人争取公正。",
184.  
     img: "./textures/story/8.jpg",
185.  
     sound: "./sounds/8.mp3",
186.  
     startAngle: { x: 0, y: -Math.PI / 2 - Math.PI / 4 },
187.  
     endAngle: { x: -Math.PI / 8, y: -Math.PI / 2 - Math.PI / 8 },
188.  
     duration: 25000,
189.  
     btns: [],
190.  
     },
191.  
     ],
192.  
     contentVisible: false,
193.  
     modalVisible: true,
194.  
     index: 0,
195.  
     });
196.  
      
197.  
     let textureLoader = new THREE.TextureLoader();
198.  
     let textures = data.contentList.map((item, i) => {
199.  
     let texture = textureLoader.load(data.contentList[i].img); // 循环加载每一张图片
200.  
     texture.mapping = THREE.EquirectangularReflectionMapping; // 通过使用全景纹理图像来模拟环境反射
201.  
     texture.colorSpace = THREE.SRGBColorSpace; // 表示和描述颜色的数学模型或系统
202.  
     return texture;
203.  
     });
204.  
     let SphereGeometry = new THREE.SphereGeometry(100, 32, 32);
205.  
     SphereGeometry.scale(1, 1, -1);
206.  
     let material = new THREE.MeshBasicMaterial({ map: textures[data.index] });
207.  
     let sphere = new THREE.Mesh(SphereGeometry, material);
208.  
     sphere.rotation.order = "XYZ";
209.  
     scene.add(sphere);
210.  
      
211.  
     let audio = new Audio();
212.  
     let tween;
213.  
     let audioPlayer = ref(null);
214.  
      
215.  
     function toggleContent(dataIndex) {
216.  
     audioPlayer.value.play();
217.  
     setTimeout(() => {
218.  
     data.contentList[data.index].sound &&
219.  
     (audio.src = data.contentList[data.index].sound);
220.  
     audio.play();
221.  
     }, 500);
222.  
     data.contentVisible = true;
223.  
     data.modalVisible = false;
224.  
     data.index = dataIndex;
225.  
     camera.position.set(0, 0, 1);
226.  
     sphere.rotation.y = data.contentList[dataIndex].startAngle.y;
227.  
     sphere.rotation.x = data.contentList[dataIndex].startAngle.x;
228.  
     material.map = textures[data.index];
229.  
     material.needsUpdate = true;
230.  
      
231.  
     tween && tween.stop();
232.  
     tween = new TWEEN.Tween(sphere.rotation);
233.  
     tween.to(
234.  
     {
235.  
     y: data.contentList[data.index].endAngle.y,
236.  
     x: data.contentList[data.index].endAngle.x,
237.  
     },
238.  
     data.contentList[data.index].duration
239.  
     );
240.  
     // 设置缓动函数
241.  
     tween.easing(TWEEN.Easing.Quadratic.InOut);
242.  
      
243.  
     // 启动补间动画
244.  
     tween.start();
245.  
     }
246.  
      
247.  
     </script>
248.  
      
249.  
     <style scoped>
250.  
     * {
251.  
     margin: 0;
252.  
     padding: 0;
253.  
     }
254.  
     body {
255.  
     width: 100vw;
256.  
     height: 100vh;
257.  
     }
258.  
     canvas {
259.  
     display: block;
260.  
     position: fixed;
261.  
     left: 0;
262.  
     top: 0;
263.  
     width: 100vw;
264.  
     height: 100vh;
265.  
     }
266.  
      
267.  
     .textDiv {
268.  
     width: 80%;
269.  
     max-width: 500px;
270.  
     height: auto;
271.  
     padding: 20px 50px;
272.  
     border-radius: 10px;
273.  
     border: 1px solid #9999cc;
274.  
     box-shadow: 0 0 5px #ddddff;
275.  
     z-index: 100;
276.  
     position: fixed;
277.  
     left: 50%;
278.  
     bottom: 30px;
279.  
     transform: translate(-50%, 0);
280.  
     color: #ffffff;
281.  
     background-color: rgba(0, 0, 0, 0.5);
282.  
     text-align: left;
283.  
     line-height: 25px;
284.  
     }
285.  
     .playGame {
286.  
     width: 800px;
287.  
     height: 450px;
288.  
     background-image: url(../assets/imgs/boys.jpg);
289.  
     background-size: 100% 100%;
290.  
     border-radius: 50px;
291.  
     position: absolute;
292.  
     left: calc(50% - 400px);
293.  
     top: calc(50% - 225px);
294.  
     z-index: 100;
295.  
     }
296.  
     .modal {
297.  
     position: fixed;
298.  
     left: 0;
299.  
     top: 0;
300.  
     width: 100vw;
301.  
     height: 100vh;
302.  
     z-index: 100;
303.  
     background-color: rgba(0, 0, 0, 0.9);
304.  
     }
305.  
     .playGame .btn {
306.  
     width: 200px;
307.  
     height: 50px;
308.  
     background-color: rgba(0, 0, 0, 0.5);
309.  
     color: white;
310.  
     display: flex;
311.  
     justify-content: center;
312.  
     align-items: center;
313.  
     border-radius: 10px;
314.  
     position: absolute;
315.  
     left: calc(50% - 100px);
316.  
     bottom: 50px;
317.  
     cursor: pointer;
318.  
     }
319.  
     .playGame .btn:hover {
320.  
     background: red;
321.  
     }
322.  
     .textDiv .footer {
323.  
     display: flex;
324.  
     justify-content: end;
325.  
     padding: 15px 0;
326.  
     flex-direction: column;
327.  
     align-items: start;
328.  
     }
329.  
     .textDiv .btn {
330.  
     width: auto;
331.  
     height: auto;
332.  
     background-color: rgba(50, 50, 100, 0.5);
333.  
     color: white;
334.  
     display: flex;
335.  
     justify-content: center;
336.  
     align-items: center;
337.  
     border-radius: 5px;
338.  
     font-size: 12px;
339.  
     padding: 5px 10px;
340.  
     margin-bottom: 10px;
341.  
     line-height: 24px;
342.  
     cursor: pointer;
343.  
     }
344.  
     .textDiv .btn:hover {
345.  
     background: red
346.  
     }
347.  
     </style>

这篇好文章是转载于：学新通技术网