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 
 */