当前位置：首页 > news >正文

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

news 2025/7/8 16:38:40

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 = trueanimate()function animate() {requestAnimationFrame(animate)controls.update()renderer.render(scene, camera)}window.onresize = () => {renderer.setSize(box.clientWidth, box.clientHeight)camera.aspect = box.clientWidth / box.clientHeightcamera.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 = texturechild.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 */