Deutsch
WebGL mit three.js

Video: Thema2

 

HofK
rotierende Leinwand

Bei Discourse gab es eine nicht ganz klare Fragenformulierung "from China".  [...] 

Da ich auch eine Videowand in den Schauraum einbringen will, war das für mich interessant.

Von Mugen87 kam der Hinweis

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

In Abwandlung dieses jsfiddle  habe ich eine rotierende Leinwand gebastelt. Sie sollte zeigen, dass man ein Video nicht nur auf eine einzelne Fläche, sondern auch auf andere Geometrie projezieren kann.



Da  [...]  ist es mit Ton anzuschauen.

Allerdings funktioniert das bei mir nur mit Firefox!
Habe jetzt auch keine Lust mich mit den "Zicken" der Browser herumzuschlagen - Browserchaos, jeder macht was er will! 
<!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 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>
 
14.07.2018  
 



Antworten


Thementitel, max. 100 Zeichen.
 

Systemprofile:

Kein Systemprofil angelegt. [anlegen]

XProfan:

 Beitrag  Schrift  Smilies  ▼ 

Bitte anmelden um einen Beitrag zu verfassen.
 

Themenoptionen

2.215 Betrachtungen

Unbenanntvor 0 min.
Stringray05.01.2022
Rolf Koch28.03.2021
H.Brill18.10.2020
Pedro Miguel17.05.2019
Mehr...

Themeninformationen

Dieses Thema hat 1 Teilnehmer:

HofK (1x)


Admins  |  AGB  |  Anwendungen  |  Autoren  |  Chat  |  Datenschutz  |  Download  |  Eingangshalle  |  Hilfe  |  Händlerportal  |  Impressum  |  Mart  |  Schnittstellen  |  SDK  |  Services  |  Spiele  |  Suche  |  Support

Ein Projekt aller XProfaner, die es gibt!


Mein XProfan
Private Nachrichten
Eigenes Ablageforum
Themen-Merkliste
Eigene Beiträge
Eigene Themen
Zwischenablage
Abmelden
 Deutsch English Français Español Italia
Übersetzungen

Datenschutz


Wir verwenden Cookies nur als Session-Cookies wegen der technischen Notwendigkeit und bei uns gibt es keine Cookies von Drittanbietern.

Wenn du hier auf unsere Webseite klickst oder navigierst, stimmst du unserer Erfassung von Informationen in unseren Cookies auf XProfan.Net zu.

Weitere Informationen zu unseren Cookies und dazu, wie du die Kontrolle darüber behältst, findest du in unserer nachfolgenden Datenschutzerklärung.


einverstandenDatenschutzerklärung
Ich möchte keinen Cookie