Реально ли вывести 2 видео в одном окне?

254

29 апреля 2018, 21:13

Стала передомной задача взаимодействовать web-camery пользователя с 3D моделью. Взаимодействие заключается в определении положения головы пользователя относительно окна и запуск определённой анимации модели. Ситуация такая, что если я подключаю модель после камеры, то видно только модель. Если я подключаю камеру после модели, то видно только картинку, которая берется с камеры.

Можно ли как то сделать, что бы на одной странице одновременно работала и камера, и 3D модель? Как это сделать, что почитать?

Answer 1

У меня под рукой веб-камеры нет, но! есть примеры с официального сайта Three.js. Видео вообще: https://threejs.org/examples/?q=video#webgl_materials_video, и видео с веб-камеры: https://threejs.org/examples/?q=video#webgl_materials_video_webcam. И там, и там используется html-элемент video, который используется для создания видео-текстуры.

У объекта сцены есть свойство .background, которое может быть либо цветом (THREE.Color()), либо текстурой (THREE.Texture()), либо кубической текстурой (THREE.CubeTexture()).

Есть еще такой тип текстуры как THREE.VideoTexture() - отличается от обычной текстуры только тем, что постоянно выставляет свой флаг .needsUpdate в true. Ничто не мешает тогда подставить видео в качестве фона в сцену:

var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000); 
camera.position.set(0, 10, 20); 
var renderer = new THREE.WebGLRenderer({ 
  antialias: true 
}); 
renderer.setSize(window.innerWidth, window.innerHeight); 
document.body.appendChild(renderer.domElement); 
 
var controls = new THREE.OrbitControls(camera, renderer.domElement); 
 
scene.add(new THREE.GridHelper(20, 20)); 
var sphere = new THREE.Mesh(new THREE.SphereGeometry(), new THREE.MeshBasicMaterial({ 
  color: "red", 
  wireframe: true 
})); 
scene.add(sphere); 
 
video.volume = 0.125; 
 
var vidTexture = new THREE.VideoTexture(video); 
scene.background = vidTexture; 
 
var clock = new THREE.Clock(); 
var time = 0; 
 
render(); 
 
function render() { 
  requestAnimationFrame(render); 
  time += clock.getDelta(); 
  sphere.position.x = Math.cos(time) * 5; 
  sphere.position.z = Math.sin(time) * 5; 
  renderer.render(scene, camera); 
}

body { 
  overflow: hidden; 
  margin: 0; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script> 
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script> 
<video id="video" autoplay loop crossOrigin="anonymous" webkit-playsinline style="display:none" volume="0.5"> 
			<source src="https://threejs.org/examples/textures/sintel.ogv" type='video/ogg; codecs="theora, vorbis"'> 
			<source src="https://threejs.org/examples/textures/sintel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
</video>

Вопрос: приемлем ли такой подход?