前提
現在3Dレンダリングの技術を学習しているものです。
Three.jsというライブラリを使用して、3Dレンダリングした画面をプログラムを使って動画として書き出ししたいです。
実現したいこと
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script src="https://unpkg.com/three@0.140.2/build/three.min.js"></script> <script> // ページの読み込みを待つ window.addEventListener('DOMContentLoaded', init); function init() { // サイズを指定 const width = 960; const height = 440; // レンダラーを作成 const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#myCanvas') }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(width, height); // シーンを作成 const scene = new THREE.Scene(); // カメラを作成 const camera = new THREE.PerspectiveCamera(45, width / height); camera.position.set(0, 0, +1000); // 箱を作成 const geometry = new THREE.BoxGeometry(400, 400, 400); const material = new THREE.MeshNormalMaterial(); const box = new THREE.Mesh(geometry, material); scene.add(box); tick(); // 毎フレーム時に実行されるループイベントです function tick() { box.rotation.y += 0.01; box.rotation.x += 0.01; renderer.render(scene, camera); // レンダリング requestAnimationFrame(tick); } } </script> </head> <body> <canvas id="myCanvas"></canvas> </body> </html>
上記のソースを開くとレンダリングが行われますが、その結果を動画として自動で保存したいです。
現在はレンダリング画面の画面録画という方法という方法しか思いつきませんが、何かいい方法をご存じの方はいっらっしゃいませんか?
理想
ren = レンダリングを行うプログラム
output(ren,'sample.mp4')と実行すると
以下のような3Dモデルが動いている動画が生成されるという形を実現したいです。
補足
- 技術はthree.jsにこだわりません
- プログラムでレンダリングしたものを動画として出力できれば技術は何でも大丈夫です。
- blenderをPythonで動かして動画生成することも考えましたが、運用面から難しかったです。
プログラミングの質問のつもりなら丸投げだし、そういうソフトを教えて欲しいってことなら teratail の守備範囲ではないですね。
あなたの回答
tips
プレビュー