playgrdstar/how_to_ccapture_three.txt

## how_to_ccapture_three.txt
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>three.js base</title>
        <style>
        </style>
        <script type="text/javascript" src="./libs/three.js"></script>
        <script type="text/javascript" src="./libs/stats.js"></script>
        <script type="text/javascript" src="./libs/dat.gui.js"></script>
        <script type="text/javascript" src="./libs/TrackballControls.js"></script>
        <script type="text/javascript" src="./libs/OrbitControls.js"></script>
        <script type="text/javascript" src="./libs/CCapture.all.min.js"></script>
<!-- the libraries below are needed if we want to save to gif or mpeg -->
<!--         <script type="text/javascript" src="./libs/gif.js"></script>
        <script type="text/javascript" src="./libs/ffmpegserver.js"></script> -->

    </head>
    <body>
    <div id="container"></div>
    <!-- buttons below are for starting and stopping the recording -->
    <div class="buttons">
        <button id="start">Record</button>
        <button id="stop">Stop</button>
    </div>
<script>
        var container;

        var camera, scene, renderer;

        var recorder = new CCapture({
            verbose: false,
            display: true,
            framerate: 30,
            quality: 100,
            format: 'jpg',
            // workersPath: './libs/',
            timeLimit: 0,
            frameLimit: 0,
            autoSaveTime: 0
        });
...
// Script for buttons

        function setupButtons(){
            const $start = document.getElementById('start');
            const $stop = document.getElementById('stop');
            $start.addEventListener('click', e => {
                e.preventDefault();
                recorder.start();
                $start.style.display = 'none';
                $stop.style.display = 'block';
            }, false);

            $stop.addEventListener('click', e => {
                e.preventDefault();
                recorder.stop();
                $stop.style.display = 'none';
                recorder.save();
            }, false);
        }


        init();
        animate();

        function init() {

            container = document.getElementById( 'container' );

            // camera

            camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 10000 );
            camera.position.set( 0, 50, 500 );

            // scene

            scene = new THREE.Scene();
            scene.background = new THREE.Color( 0xA64D79 );

            // light

            var light = new THREE.DirectionalLight( 0xFFF2CC );
            light.position.set( 0, 0, 1 );
            scene.add( light );
            ...
            // renderer

            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );
            ...
            setupButtons();

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight );

        }

        //

        function animate() {

            requestAnimationFrame( animate );
            controls.update();
            ...
            render();
            recorder.capture(renderer.domElement);

        }

    </script>
    </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>three.js base</title>
	<style>
	</style>
	<script type="text/javascript" src="./libs/three.js"></script>
	<script type="text/javascript" src="./libs/stats.js"></script>
	<script type="text/javascript" src="./libs/dat.gui.js"></script>
	<script type="text/javascript" src="./libs/TrackballControls.js"></script>
	<script type="text/javascript" src="./libs/OrbitControls.js"></script>
	<script type="text/javascript" src="./libs/CCapture.all.min.js"></script>
	<!-- the libraries below are needed if we want to save to gif or mpeg -->
	<!-- <script type="text/javascript" src="./libs/gif.js"></script>
	<script type="text/javascript" src="./libs/ffmpegserver.js"></script> -->

	</head>
	<body>
	<div id="container"></div>
	<!-- buttons below are for starting and stopping the recording -->
	<div class="buttons">
	<button id="start">Record</button>
	<button id="stop">Stop</button>
	</div>
	<script>
	var container;

	var camera, scene, renderer;

	var recorder = new CCapture({
	verbose: false,
	display: true,
	framerate: 30,
	quality: 100,
	format: 'jpg',
	// workersPath: './libs/',
	timeLimit: 0,
	frameLimit: 0,
	autoSaveTime: 0
	});
	...
	// Script for buttons

	function setupButtons(){
	const $start = document.getElementById('start');
	const $stop = document.getElementById('stop');
	$start.addEventListener('click', e => {
	e.preventDefault();
	recorder.start();
	$start.style.display = 'none';
	$stop.style.display = 'block';
	}, false);

	$stop.addEventListener('click', e => {
	e.preventDefault();
	recorder.stop();
	$stop.style.display = 'none';
	recorder.save();
	}, false);
	}


	init();
	animate();

	function init() {

	container = document.getElementById( 'container' );

	// camera

	camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 10000 );
	camera.position.set( 0, 50, 500 );

	// scene

	scene = new THREE.Scene();
	scene.background = new THREE.Color( 0xA64D79 );

	// light

	var light = new THREE.DirectionalLight( 0xFFF2CC );
	light.position.set( 0, 0, 1 );
	scene.add( light );
	...
	// renderer

	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	container.appendChild( renderer.domElement );
	...
	setupButtons();

	}

	function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize( window.innerWidth, window.innerHeight );

	}

	//

	function animate() {

	requestAnimationFrame( animate );
	controls.update();
	...
	render();
	recorder.capture(renderer.domElement);

	}

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