Benutzer-Werkzeuge

Webseiten-Werkzeuge


Seitenleiste

3D

INTERN

ADOBE

ARDUINO

BITBUCKET

DOCKER

C4D

GIT

HTML

IPHONE

JAVASCRIPT

JTL-SHOP

LARAVEL

MAGENTO2

MYSQL

PHP

PLESK

PROCESSING

PYTHON

SUITECRM

SEO

TRYTON

THUNDERBIRD / ICEDOVE / FossaMail

TYPO3

TYPO3: BACKEND

TYPO3: TYPOSCRIPT

UNIX

VLC

VVVV

WINDOWS

WINDOWS 10

WORDPRESS

XAMPP

XT:C 4 (Veyton)

three-js-video-als-textur

Three.js: Video als Textur

/*other important code*/
 
 
	///////////
	// VIDEO //
	///////////
 
	// create the video element
	video = document.createElement( 'video' );
	// video.id = 'video';
	// video.type = ' video/ogg; codecs="theora, vorbis" ';
	video.src = "videos/sintel.ogv";
	video.load(); // must call after setting/changing source
	video.play();
 
	// alternative method -- 
	// create DIV in HTML:
	// <video id="myVideo" autoplay style="display:none">
	//		<source src="videos/sintel.ogv" type='video/ogg; codecs="theora, vorbis"'>
	// </video>
	// and set JS variable:
	// video = document.getElementById( 'myVideo' );
 
	videoImage = document.createElement( 'canvas' );
	videoImage.width = 480;
	videoImage.height = 204;
 
	videoImageContext = videoImage.getContext( '2d' );
	// background color if no video present
	videoImageContext.fillStyle = '#000000';
	videoImageContext.fillRect( 0, 0, videoImage.width, videoImage.height );
 
	videoTexture = new THREE.Texture( videoImage );
	videoTexture.minFilter = THREE.LinearFilter;
	videoTexture.magFilter = THREE.LinearFilter;
 
	var movieMaterial = new THREE.MeshBasicMaterial( { map: videoTexture, overdraw: true, side:THREE.DoubleSide } );
	// the geometry on which the movie will be displayed;
	// 		movie image will be scaled to fit these dimensions.
	var movieGeometry = new THREE.PlaneGeometry( 240, 100, 4, 4 );
	var movieScreen = new THREE.Mesh( movieGeometry, movieMaterial );
	movieScreen.position.set(0,50,0);
	scene.add(movieScreen);
 
/*other important code*/

[.] http://stemkoski.github.io/Three.js/Video.html

three-js-video-als-textur.txt · Zuletzt geändert: 2014/11/21 11:00 von admin