threecap icon indicating copy to clipboard operation
threecap copied to clipboard

problem in threecap with reactjs

Open eboujlal opened this issue 3 years ago • 5 comments

Hello,

I am using threejs to render animation and i want to export this animation to video mp4. When i want to use threecap library, i got an error : TypeError: threecap__WEBPACK_IMPORTED_MODULE_7___default.a is not a constructor

And this is my code :

import THREEcap from 'threecap';


var threecap = new THREEcap({});
threecap.record({
	width: 640,
	height: 480,
	fps: 25,
	time: 10,
	format: 'mp4',
	//canvas: canvasDomElement,   // optional, slowest
	composer: this.renderer.domElement // optional, fastest
}).then(function(video) {
	video.saveFile('myVideo.mp4');
});

eboujlal avatar Mar 16 '21 17:03 eboujlal

This package hasn't been bundled properly for use as a module. I've just tried this myself and the only way I could get it to work was to include the lib via a script tag and access via window.THREEcap

rohan-deshpande avatar Mar 19 '21 03:03 rohan-deshpande

Thank you i will try it

eboujlal avatar Mar 19 '21 11:03 eboujlal

Otherwise i recorded canvas with js vanilla

eboujlal avatar Mar 19 '21 11:03 eboujlal

Yah I just published https://www.npmjs.com/package/canvas-to-video which you can try out... I haven't got any tests yet though but give it a go

rohan-deshpande avatar Mar 24 '21 04:03 rohan-deshpande

You're right, this package was written to be used as a global script. It should be relatively straightforward to convert this to use ES6 modules, I haven't had the time to do so myself though.

jbaicoianu avatar Mar 27 '21 18:03 jbaicoianu