⌈ 传知代码 ⌋ 实现沉浸式交互故事体验

💛前情提要💛

本文是传知代码平台中的相关前沿知识与技术的分享~

接下来我们即将进入一个全新的空间,对技术有一个全新的视角~

本文所涉及所有资源均在传知代码平台可获取

以下的内容一定会让你对AI 赋能时代有一个颠覆性的认识哦!!!

以下内容干货满满,跟上步伐吧~


📌导航小助手📌

  • 💡本章重点
  • 🍞一. 概述
  • 🍞二. 初始化three.js基础代码
  • 🍞三. 获取项目所需素材
  • 🍞四. 加载图片语音模型
  • 🫓总结


💡本章重点

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

🍞一. 概述

本案例还是借助框架书写three项目,借用vite构建工具搭建vue项目,搭建完成之后,用编辑器打开该项目,在终端执行 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库:

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();

🍞三. 获取项目所需素材

讯飞星火模型生成剧本,这里我们可以使用科大讯飞的AI模型生成剧本:

在这里插入图片描述
💡根据剧情关键词生成对应全景图:

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

💡**给文字生成旁白语音:**

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

在这里插入图片描述
下载完成之后,将你想要转换成语音的文字粘贴到工具中,选择自己喜欢的语音进行转换即可:

在这里插入图片描述


🍞四. 加载图片语音模型

获取完图片和语音素材之后,接下来开始对素材进行整合,和文字一起放置在响应式 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,
});

💡图片效果:在这里插入图片描述


🫓总结

综上,我们基本了解了“一项全新的技术啦” 🍭 ~~

恭喜你的内功又双叒叕得到了提高!!!

感谢你们的阅读😆

后续还会继续更新💓,欢迎持续关注📌哟~

💫如果有错误❌,欢迎指正呀💫

✨如果觉得收获满满,可以点点赞👍支持一下哟~✨

【传知科技 – 了解更多新知识】

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/841467.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

springboot相关知识集锦----2

一、spring简化配置具体是如何简化的&#xff1f; springboot通过自动配置&#xff0c;让开发者无需手动配置大量繁琐的配置项。它基于项目的依赖关系&#xff0c;自动配置合适的bean和参数&#xff0c;从而极大地简化了spring应用初始化过程。 二、springboot是通过什么实现的…

批量漏洞挖掘思路小结

漏洞挖掘是指对应用程序中未知漏洞的探索&#xff0c;通过综合应用各种技术和工具&#xff0c;尽可能地找出其中的潜在漏洞。一般情况下漏洞挖掘针对单一的应用系统&#xff0c;通过端口扫描、目录扫描、文件扫描等方式对其安全性进行评估&#xff0c;而本文主要针对Nday和1day…

如何计算YOLOv8的推理速度FPS指标?

要计算YOLO系列模型的推理速度,可以使用FPS(每秒帧数)作为指标。以下是计算YOLO推理速度的步骤: 首先,确定用于推理的图像数量(例如,N张图像)。 记录推理过程中的起始时间。 对于每个图像,将其输入模型进行推理,并记录推理结束时间。 计算总共花费的时间,即推理结束…

零基础的粉丝有福了:逐键提示盲打更轻松

盲打就是不看键盘去打字&#xff0c;对于零基础的粉丝而言&#xff0c;盲打入门通常都是很难的&#xff0c;今天就给大家放个福利&#xff1a;从今天开始就能盲打&#xff0c;3天之后盲打就入门了。 真的有这么简单吗&#xff1f;是的&#xff0c;跟着我做就可以了。 首先&am…

(七)Linux的标准I/O与文件I/O编程

用户在应用开发过程中会经常需要访问文件。Linux下读写文件的方式有两大类:标准I/O和文件I/O。 一.Linux标准I/O 标准I/O:ANSI C中定义的用于I/O操作的一系列函数。 只要操作系统安装了C库,标准I/O就可以调用,源代码无需修改,就可以在其它操作系统下编译,具有很好的可移…

MinIO详解

说白了就是存储器&#xff0c;现在有云存储和本地存储、单机存储和分布式存储、大数据存储等等说到底数据存储、管理和调用。当然不同存储方式考虑和侧重的东西会有所不同的。 MinIO 是一个高性能的对象存储系统&#xff0c;设计用于处理大规模数据的存储和管理需求。它与亚马逊…

【MinIO学习】

OSS Docker podman MinIO服务器 MinIO客户端 Bucket Object 时间同步 The difference between the request time and the servers time is too large。 URL

ISCC2024个人挑战赛WP-MISC

&#xff08;非官方解&#xff0c;以下内容均互联网收集的信息和个人思路&#xff0c;仅供学习参考&#xff09; where is flag 下载附件&#xff0c;解压出pyc&#xff0c;然后到下面网址反编译 python反编译 - 在线工具 记住c&#xff0c;是密文&#xff0c; Key是 k5fg…

决定新泽西州版图的关键历史事件

决定新泽西州版图的关键历史事件 1. *民地建立&#xff1a;1664年&#xff0c;新泽西成为英国*民地。该地区原为荷兰*民地的一部分&#xff0c;但同年根据英王查理二世的赐予&#xff0c;转归给了他的兄弟约克公爵&#xff08;后来的詹姆士二世&#xff09;&#xff0c;之后又被…

【计网】广播域和冲突域

一、相关概念 1.各层次设备 2.冲突域 2.1定义 冲突域通俗来讲就是在同一个网络中&#xff0c;两台设备同时传输的话会产生冲突。位于OSI的第一层&#xff1a;物理层 例如在集线器场景下&#xff0c;集线器属于物理层设备&#xff0c;它不具备交换机的功能&#xff0c;当收到节…

两种盒模型

在CSS中&#xff0c;有两种主要的盒模型&#xff08;Box Model&#xff09;&#xff0c;它们决定了元素的尺寸计算方式&#xff1a; 标准盒模型&#xff08;W3C Box Model&#xff09; 在标准盒模型中&#xff0c;元素的总宽度和总高度分别由以下几个部分组成&#xff1a; Cont…

mysql之递归sql

mysql之递归sql 递归sql在一些公司是不允许使用的&#xff0c;会涉及数据库压力&#xff0c;所以会在代码里递归查询&#xff0c;但有些公司开发流程没有规定&#xff0c;且数据库数据量不大&#xff0c;之前写过好几遍了&#xff0c;老是记不住&#xff0c;记录一下 通过父级…

Thrift快速入门开发demo

Thrift快速入门开发demo 一、认识Thrift thrift是什么?一个RPC 代码生成框架,使用它的IDL(Interface Defination Language,接口定义语言)定义你想要实现的接口,然后它就会生成对应语言的远程调用框架代码,用户只需要实现接口逻辑,不用关心具体的细节。 tutorial:htt…

特征变换,分箱

特征变换 分箱 为什么分箱 连续数值离散化 降低异常值带来的影响 提升模型的稳定性 如何分箱 等频 等距 卡方 风控场景下常用 决策树 …

牛客网刷题 | BC94 反向输出一个四位数

目前主要分为三个专栏&#xff0c;后续还会添加&#xff1a; 专栏如下&#xff1a; C语言刷题解析 C语言系列文章 我的成长经历 感谢阅读&#xff01; 初来乍到&#xff0c;如有错误请指出&#xff0c;感谢&#xff01; 描述 将一个四位数&…

【Linux初探】:解锁开源世界的神秘钥匙

文章目录 &#x1f680;一、了解Linux&#x1f525;二、Linux 的发行版❤️三、Linux应用领域&#x1f4a5;四、Linux vs Windows & mac &#x1f680;一、了解Linux Linux是一种自由、开放源代码的操作系统&#xff0c;它的内核由芬兰计算机科学家Linus Torvalds在1991年创…

LeetCode题练习与总结:二叉树的层序遍历Ⅱ--107

一、题目描述 给你二叉树的根节点 root &#xff0c;返回其节点值 自底向上的层序遍历 。 &#xff08;即按从叶子节点所在层到根节点所在的层&#xff0c;逐层从左向右遍历&#xff09; 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;[…

【评价类模型】层次分析法(AHP)

1.评价类思想综述&#xff1a; 明确评价主体–>评价指标确定–>计算指标权重–>方案评价 1.1指标确定&#xff1a; 可以通过一个思维导图的方式来画出一个指标系统&#xff0c;先确定方向&#xff0c;再向下细化 注意&#xff1a;指标需要具有贴合性和独立性。 贴合…

如何搭建一个API

搭建一个API&#xff08;应用程序编程接口&#xff09;通常涉及以下几个步骤&#xff1a; 1. 确定API的目的和需求 明确你希望通过API实现的功能和目标。确定API将提供哪些数据和服务。 2. 设计API 定义端点&#xff08;Endpoints&#xff09;&#xff1a;确定API的URL结构…