HofK

Français

HofK

rotierende Leinwand

chez Discourse donnais es une pas entier klare Fragenformulierung "from China". [...]

là je aussi une Videowand dans den Schauraum einbringen veux, était cela pour mich intéressant.

de Mugen87 kam qui Hinweis

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

"

dans Abwandlung cet jsfiddle habe je une rotierende Leinwand gebastelt. vous sollte montrer, dass on un Video pas seulement sur une einzelne Surface, mais aussi sur autre Geometrie projezieren peux.

là [...]

ist es avec Ton anzuschauen.

Allerdings funktioniert cela chez mir seulement avec Firefox!
Habe maintenant aussi aucun Lust mich avec den "Zicken" qui Browser herumzuschlagen - Browserchaos, chacun pouvoir quoi il veut!

Kompilieren Marque Séparation

<!DOCTYPE html>
<head>
<title> Video </title>
<meta charset="utf-8" />
</head>
<script src="three.min.92.js"></script>
<body>
<video id="video" autoplay loop 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 matériel1 = new THREE.MeshBasicMaterial( { color: 0x0000ff, side: THREE.DoubleSide } );
    var matériel2 = new THREE.MeshBasicMaterial( { color: 0xff00ff, side: THREE.DoubleSide } );
    var matériel3 = new THREE.MeshBasicMaterial( { color: 0xffff00, side: THREE.DoubleSide } );
    var materialTransparent =  new THREE.MeshBasicMaterial( { transparent: vrai, opacity: 0, wireframe: vrai, side: THREE.DoubleSide} );
    var materialVideo = new THREE.MeshBasicMaterial( { map: texture , side: THREE.DoubleSide } );
    var materials = [ matériel1, matériel1, matériel2, matériel2, materialTransparent, materialVideo ]
    mesh = new THREE.Mesh( geometry, materials );
    scene.add( mesh );
    renderer = new THREE.WebGLRenderer( { antialias: vrai } );
    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>