[문제발생] - DOMException: Failed to load because no supported source was found.

문제발생

THREE.js 프로젝트로 동영상을 오브젝트에 씌우는 도중에 오류가 발생했다.

문제원인

video의 src가 문제였다.

문제해결

비디오 요소에 crossorigin="anonymous"를 추가했고 성공적으로 비디오가 오브젝트에 씌워졌다.

코드내용

실무에서 쓰였던 코드의 카피버전 일부다.

<script>
...
_setupModel() {
	const video = document.getElementById("tesetVideo")
    const videoTexture = new THREE.VideoTexture(video)
    this._videoTexture = videoTexture
    video.play()
    const videoMaterial = new THREE.MeshBasicMaterial ({
	    map: this._videoTexture,
    	side: THREE.FrontSide,
    	toneMapped: false
    })
    videoMaterial.needsUpdate = true
    const screen = new THREE.PlaneGeometry(1,1)
    const videoScreen new THREE.Mesh(screen, videoMaterial)
    
    this._scene.add(videoScreen)
    this._videoMesh = videoScreen
}
...
</script>

실무 프로젝트에서는 가상의 공간에 비디오를 재생하는 벽 오브젝트를 생성하기 위해서 해당 기능을 구현중에 위와 같은 오류가 발생했었다.