例えば展開図を型紙として使う、あるいは3Dプリント用のデータを生成するなど、小物作りの中心になるのがBlenderです。
当初は描画のためだった
デッサンと遠近法がダメだった筆者が、漫画描きのツールとして真っ先に注目したのがBlender。機能てんこ盛りでどこから始めていいかクラクラしますが、まずは単純な形を表示するところから。
星に顔
Blenderでモデルを作りglTF形式で書き出します。筆者はブラウザ表示用にThree.jsというライブラリを使っています。
Three.jsのrendererを作成した後に renderer.setPixelRatio(2); を追加してピクセルレイシオの数値を上げると絵がくっきりしました。
<canvas id="myCanvas" style="width:100%;"></canvas>
<script src="/js/build/three.min.js"></script>
<script src="/js/examples/js/controls/OrbitControls.js"></script>
<script src="/js/examples/js/loaders/GLTFLoader.js"></script>
<script>
window.addEventListener('load', main);
function main() {
const canvas = document.querySelector('#myCanvas');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, gammaInput: true, gammaOutput: true, physicallyCorrectLights: true });
renderer.setPixelRatio(2);
const fov = 50;
const aspect = 2;
const near = 0.1;
const far = 500;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 2.5;
camera.position.y = 0.5;
const controls = new THREE.OrbitControls(camera, canvas);
const scene = new THREE.Scene();
scene.background = new THREE.Color( 'silver' );
const loader = new THREE.GLTFLoader();
loader.load('/asset/2019/07-14/model.glb',function(data){
const gltf = data;
const obj = gltf.scene;
scene.add(obj);
});
const light = new THREE.AmbientLight(0xFFFFFF, 1.0);
scene.add(light);
tick();
function tick() {
renderer.render(scene, camera);
requestAnimationFrame(tick);
}
}
</script>
３Ｄモデルのいい所は色んな角度から見た絵がすぐにできること
