当前位置: 首页 > article >正文

three.js 对 模型使用 视频进行贴图修改材质

three.js 对 模型使用 视频进行贴图修改材质
https://threehub.cn/#/codeMirror?navigation=ThreeJS&classify=application&id=videoModel

在这里插入图片描述

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";

const box = document.getElementById('box')

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(50, box.clientWidth / box.clientHeight, 0.1, 1000)

camera.position.set(0, 8, 30)

const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true })

renderer.setSize(box.clientWidth, box.clientHeight)

box.appendChild(renderer.domElement)

const controls = new OrbitControls(camera, renderer.domElement)

controls.enableDamping = true

animate()

function animate() {

  requestAnimationFrame(animate)

  controls.update()

  renderer.render(scene, camera)

}

window.onresize = () => {

  renderer.setSize(box.clientWidth, box.clientHeight)

  camera.aspect = box.clientWidth / box.clientHeight

  camera.updateProjectionMatrix()

}

// 文件地址
const urls = [0, 1, 2, 3, 4, 5].map(k => (`https://file.threehub.cn/` + 'files/sky/skyBox0/' + (k + 1) + '.png'));

const textureCube = new THREE.CubeTextureLoader().load(urls);

scene.background = textureCube;


const video = document.createElement('video')

video.crossOrigin = 'anonymous' // 跨域

video.src = 'https://vjs.zencdn.net/v/oceans.mp4'

video.loop = true // 循环播放

video.muted = true // 静音

video.play()

const texture = await new Promise(r => video.onloadeddata = () => r(new THREE.VideoTexture(video))) // 创建视频纹理

new GLTFLoader().load(`https://file.threehub.cn/` + "models/glb/zhanguan.glb", (gltf) => {

  gltf.scene.traverse((child) => {

    if (child.isMesh) {

      child.material.map = texture

      child.material.envMap = textureCube

    }

  })

  scene.add(gltf.scene)

})

/**
 * 名称: 模型视频材质
 * 作者: 优雅永不过时 https://github.com/z2586300277
 * 参考来源:https://github.com/YCYTeam/YCY-TrainingCamp-S2/blob/main/src/day02_%E7%9B%B4%E6%92%AD%E4%BB%A3%E7%A0%81.js 
 */


http://www.kler.cn/a/399740.html

相关文章:

  • 深入探索Scala迭代器:实用技巧与最佳实践
  • 河道无人机雷达测流监测系统由哪几部分组成?
  • 学习日记_20241117_聚类方法(高斯混合模型)
  • 【Pytorch】IPython库中的display函数
  • 矩阵的对角化特征值分解
  • 基于python Django的boss直聘数据采集与分析预测系统,爬虫可以在线采集,实时动态显示爬取数据,预测基于技能匹配的预测模型
  • 无人机在森林中的应用!
  • x-cmd pkg | helix - 用 Rust 打造的文本编辑器,内置 LSP 和语法高亮,兼容 Vim 用户习惯
  • 丹摩征文活动 | CogVideoX-2b实战部署:简化文字生成视频步骤
  • 根据 Maven 的不同 profiles 来改变 Spring Boot 应用程序的配置
  • 如何使用PCL处理ROS Bag文件中的点云数据并重新保存 ubuntu20.04
  • D3基础:绘制圆形、椭圆形、多边形、线、路径、矩形
  • Windows文件资源管理器增强工具
  • Mac的Terminal随机主题配置
  • 关于Redux的学习(包括Redux-toolkit中间件)
  • 服务器作业4
  • 常见的网络协议汇总(涵盖了不同的网络层次)
  • 网络安全与CTF在线学习资源网站
  • 【第5章 | 神经网络】(python机器学习)
  • node版本升级,从卸载到使用nvm管理node版本并配置vue环境(学习趟雷版)
  • 【技术解析】Dolphinscheduler实现MapReduce任务的高效管理
  • Python蓝桥杯刷题1
  • 【hacker送书第16期】Python数据分析、挖掘与可视化、AI全能助手ChatGPT职场工作效率提升技巧与案例
  • k8s集群扩容
  • React状态管理之Zustand
  • AIGC----教育领域的AIGC:个性化学习材料生成