threejs纹理加载三(视频加载)

这篇具有很好参考价值的文章主要介绍了threejs纹理加载三(视频加载)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

threejs中除了能把图片作为纹理进行几何体贴图以外,还可以把视频作为纹理进行贴图设置。纹理的类型有很多,我们可以用不同的加载器来加载,而对于视频作为纹理,我们需要用到今天的主角:VideoTexture。我们先看效果:

threejs纹理加载三(视频加载),threejs,人工智能

 我们直接看代码:

<template>
    <div>
    </div>
</template>
<script  setup>
import { ref } from "vue";

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import * as Dat from "dat.gui";
const gui = new Dat.GUI();
const scene = new THREE.Scene();
const camara = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camara.position.set(0, 0, 10);

const Gemertry = new THREE.BoxGeometry(5, 5, 5);

//视频加载器
let video = document.createElement("video");
video.src = "/src/assets/819.mp4";
video.load();
video.crossOrigin = "anonymous";

document.addEventListener("click", () => {
  video
    .play()
    .then(() => {
      render();
    })
    .catch(err => {
      console.log("err:", err);
    });
});
// video.play();
let texture = new THREE.VideoTexture(video);
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
const materials = [
  new THREE.MeshBasicMaterial({ color: "#f90" }),
  new THREE.MeshBasicMaterial({ map: texture }),
  new THREE.MeshBasicMaterial({ color: "#63a" }),
  new THREE.MeshBasicMaterial({ color: "#e2d" }),
  new THREE.MeshBasicMaterial({ color: "#c57" }),
  new THREE.MeshBasicMaterial({ color: "#f00" })
];

const cube = new THREE.Mesh(Gemertry, materials);
scene.add(cube);

// 将网格对象添加到场景中

const renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);
renderer.setSize(window.innerWidth, window.innerHeight);

const control = new OrbitControls(camara, renderer.domElement);

const render = () => {
  renderer.render(scene, camara);
  requestAnimationFrame(render);
  if (video.readyState === video.HAVE_ENOUGH_DATA) {
    texture.needsUpdate = true;
  }
};
render();
</script>
<style scoped>
</style>

这里特别要注意:对于视频而言。很多浏览器禁止了默认播放,所以这里我们通过给文档对象添加点击事件来实现,然后在加载成功的回调中我们要重新调用我们的render()函数。文章来源地址https://www.toymoban.com/news/detail-677647.html

到了这里,关于threejs纹理加载三(视频加载)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • InVideo AI:用人工智能轻松制作视频

    InVideo AI 是一款在线视频制作工具,使用人工智能来帮助用户快速、轻松地制作高质量的视频。该工具提供多种功能,包括: 链接: ai.invideo.io 历史记录:  创建视频: 选择模板:youtube explainer 加入提示词: 输入时长:15秒 输入标题: 输入正文: 选择背景音乐: 选择性别

    2024年02月09日
    浏览(45)
  • 如何使用生成式人工智能探索视频博客的魅力?

    视频博客,尤其是关于旅游的视频博客,为观众提供了一种全新的探索世界的方式。通过图像和声音的结合,观众可以身临其境地体验到旅行的乐趣和发现的喜悦。而对于内容创作者来说,旅游视频博客不仅能分享他们的旅行故事,还能吸引关注,甚至实现变现。本文将指导

    2024年03月14日
    浏览(62)
  • AI人工智能一键图片/视频换脸-Roop

    Roop 换脸技术是一种基于深度学习的人脸图像处理技术。 Roop换脸技术的实现主要分为两个步骤: 人脸检测与对齐 、 特征融合与生成 。 1.人脸检测与对齐在Roop换脸技术中,首先需要对输入的图像进行人脸检测与对齐。这一步骤的目的是确保输入的两张图像中的人脸位置和角

    2024年02月13日
    浏览(55)
  • 视频AI方案:数据+算力+算法,人工智能的三大基石

    随着信息技术的迅猛发展,人工智能(AI)已经逐渐渗透到我们生活的各个领域,从智能家居到自动驾驶,从医疗诊断到金融风控,AI的应用正在改变着我们的生活方式。而数据、算法和算力,正是构成人工智能技术的三大核心要素,它们之间相互关联、相互影响,共同推动着

    2024年04月09日
    浏览(54)
  • 人工智能(pytorch)搭建模型18-含有注意力机制的CoAtNet模型的搭建,加载数据进行模型训练

    大家好,我是微学AI,今天我给大家介绍一下人工智能(pytorch)搭建模型18-pytorch搭建有注意力机制的CoAtNet模型模型,加载数据进行模型训练。本文我们将详细介绍CoAtNet模型的原理,并通过一个基于PyTorch框架的实例,展示如何加载数据,训练CoAtNet模型,从操作上理解该模型。

    2024年02月16日
    浏览(65)
  • AICG,人工智能自动生成内容——根据文本生成图像,视频,音频

    1、什么是AICG? 什么是AICG? AICG是指人工智能自动生成内容。 通过算法模型,将文本转化为图像、音频、视频等多种形式。 在数字时代,AICG已经成为各种领域中不可或缺的一部分。 AICG的应用场景 AICG在数字营销、广告制作、电影制作等领域广泛应用。 可以用于教育、娱乐

    2024年02月14日
    浏览(50)
  • D-ID生成式人工智能视频合成技术,将视频内容变得唾手可得

    D-ID,面向未来,生成式人工智能。 是一个可以智能合成人像和声音,并最终生成视频的AI工具。人像可以自己上传肖像图片,也可以通过文字对肖像进行描述合成人像。声音可以通过输入文案,选择语言类型(中文方面目前支持粤语、普通话、河南中原话等)、声音类型(有

    2024年02月11日
    浏览(48)
  • 人工智能——离线情况下自动给视频添加字幕,支持中文,英文,日文等等

    最近打开百度网盘,看到播放视频有一个AI字幕功能,心情非常激动,看视频的同时可以看自动生成的字幕,防止听不清视频中人物的话语 然而不是SVIP,我试用过了之后就没有这个功能选项了 我在想,如果随便哪一个“免费”播放器,都可以一边播放视频,一边生成字幕,外

    2024年02月13日
    浏览(45)
  • 人工智能在信息系统安全中的运用(1),网络安全实战项目视频

    不法分子模拟可信实体大量的网络钓鱼网站获取您的数据,如您的信用卡的登录、密码、号码和 CV 等等。机器学习算法对于一次性地销毁这种方案具有很大的帮助作用。 ML 可以通过类似于电子邮件垃圾邮件过滤器的邮件分类帮助。最初的训练数据是由用户手动标记邮件或报

    2024年04月16日
    浏览(45)
  • 机器之心 AI 技术--人工智能助力个性化视频实战经验分享(文末送书)

    在视频生成即将迎来技术和应用大爆发之际,为了帮助企业和广大从业者掌握技术前沿,把握时代机遇,机器之心AI论坛就将国内的视频生成技术力量齐聚一堂,共同分享国内顶尖力量的技术突破和应用实践。 论坛将于2024.01.20在北京举办,现场汇聚领域内专家和一线开发者,

    2024年02月03日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包