家にはもう１台古いラップトップがあってそれは７年前のASUS X54Cなんだけど、この子はBlender2.81が動くのです。それでモデルを作ってthree.jsでサイトに載せてみたら、CPU冷却ファンの音が鳴りっぱなしだわパームレストが熱くなるわでビビりました。
原因はオービットコントロールを読み込んだ後のレンダリングの記述。three.jsのビギナーなのであちこちのウェブページからコピペして来たものをそのまま使っていました。
// 毎フレーム時に実行されるループイベント
tick();
function tick() {
// レンダリング
renderer.render(scene, camera);
requestAnimationFrame(tick);
}
requestAnimationFrame()ってアニメーション用のメソッドじゃん！ しかも60fps。私のへなちょこモデルをオービットコントロール付きで表示するだけならアニメ機能は要らないのです。
ということでカメラの視点を変えた時だけレンダリングするようにコードを修正しました。
<canvas id="canvas20191123" style="width:100%;"></canvas>
<script>
window.addEventListener('load', main);
function main() {
const canvas = document.querySelector('#canvas20191123');
const renderer = new THREE.WebGLRenderer({canvas, antialias: true});
renderer.setPixelRatio(2);
const fov = 35;
const aspect = 2;
const near = 0.1;
const far = 500;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 8;
camera.position.y = 1;
const scene = new THREE.Scene();
scene.background = new THREE.Color( 'snow' );
const light = new THREE.AmbientLight(0xFFFFFF, 2.25);
scene.add(light);
const gridHelper = new THREE.GridHelper( 10, 5, '', 'silver' );
gridHelper.position.y = -2;
scene.add( gridHelper );
const loader = new THREE.GLTFLoader();
loader.load('/asset/2019/11-28/untitled.glb', function(data){
const gltf = data;
const obj = gltf.scene;
scene.add(obj);
render(); // カメラコントロールの前に一度レンダリングしておく
});
const controls = new THREE.OrbitControls(camera, canvas);
// カメラの位置が変化したらレンダリングする
controls.addEventListener( 'change', render );
function render() {
renderer.render( scene, camera );
}
}
</script>
これで毎秒60回もモデルの描き直しをしなくなったので、X54Cも唸らなくなりました。めでたし。
