HofK

Español

HofK

rotierende Leinwand

En Discourse gab lo una no bastante klare Fragenformulierung "from China". [...]

Desde que auch una Videowand en el Schauraum einbringen voluntad, war el para mich interessant.

Von Mugen87 kam el Referencia

"Do you mean something like: [...]

"

In Abwandlung dieses jsfiddle Yo una rotierende Leinwand gebastelt. Sie debería zeigen, dass uno una Video no sólo en una einzelne Fläche, pero auch en otro Geometrie projezieren kann.

Como [...]

es con Ton anzuschauen.

Aunque funktioniert en el me sólo con Firefox!
Posesiones ahora no Lust mich con el "Zicken" el Navegador herumzuschlagen - Browserchaos, cada macht qué él voluntad!

Kompilieren Marca Separación

<!DOCTYPE html>
<head>
<title> Video </title>
<meta charset="utf-8" />
</head>
<script src="three.min.92.js"></script>
<body>
<video id="video" autoplay bucle crossOrigin="anonymous" webkit-playsinline style="display:none">
<source src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/textures/sintel.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/textures/sintel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
<script>
var camera, scene, mesh, renderer;
init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.set( 0, 0, 2 );
    scene = new THREE.Scene();
    var video = document.getElementById('video' );
    var texture = new THREE.VideoTexture( video );
    texture.minFilter = THREE.LinearFilter;
    texture.magFilter = THREE.LinearFilter;
    texture.format = THREE.RGBFormat;
    var geometry = new THREE.BoxBufferGeometry( 2, 1, 0.1 );
    var material1 = new THREE.MeshBasicMaterial( { color: 0x0000ff, side: THREE.DoubleSide } );
    var material2 = new THREE.MeshBasicMaterial( { color: 0xff00ff, side: THREE.DoubleSide } );
    var material3 = new THREE.MeshBasicMaterial( { color: 0xffff00, side: THREE.DoubleSide } );
    var materialTransparent =  new THREE.MeshBasicMaterial( { transparent: true, opacity: 0, wireframe: true, side: THREE.DoubleSide} );
    var materialVideo = new THREE.MeshBasicMaterial( { map: texture , side: THREE.DoubleSide } );
    var materials = [ material1, material1, material2, material2, materialTransparent, materialVideo ]
    mesh = new THREE.Mesh( geometry, materials );
    scene.add( mesh );
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

}

function animate() {

    requestAnimationFrame( animate );
    mesh.rotation.y +=0.01;
    renderer.render( scene, camera );

}

</script>
</body>
</html>