threejs-day4(小技巧/优化)

按需渲染

不每一帧都渲染，按需渲染。例如只在camera 改变的时候或者纹理模型变化的时候再次渲染等等。
按需渲染不像是连续渲染那么常见,但是有些场合, 例如地图浏览器, 3D编辑器, 3D图产生器等等的, 可能还是按需渲染比较好.

let renderRequested = false;

function render() {
  renderRequested = false;
  if (resizeRendererToDisplaySize(renderer)) {
    const canvas = renderer.domElement;
    camera.aspect = canvas.clientWidth / canvas.clientHeight;
    camera.updateProjectionMatrix();
  }
  renderer.render(scene, camera);
}
render();
 
function requestRenderIfNotRequested() {
  if (!renderRequested) {
    renderRequested = true;
    requestAnimationFrame(render);
  }
}
 
controls.addEventListener('change', requestRenderIfNotRequested);

截屏

canvas.toDataURL
canvas.toBlob better
但是调用后会得到黑色图片，因为浏览器默认在绘制完成后清空webgl canvas的绘制缓冲。所以在获取canvas数据前需要调用render。

防止canvas被清空

WebGLRender添加preserveDrawingBuffer为true
renderer的autoClearColor 设为false

const renderer = new THREE.WebGLRenderer({
  canvas,
  preserveDrawingBuffer: true, 
  alpha: true,
});
renderer.autoClearColor = false;

键盘输入获取

canvas:focus {
  outline:none;
}

canvas透明

const renderer = new THREE.WebGLRenderer({
  canvas,
  alpha: true,
  premultipliedAlpha: false,
});

threejs作为html背景

Set the canvas CSS position to fixed as in
set z-index to -1
Use an iframe

大量对象的优化

合并几何体

优化对象的同时保持动画效果

使用Morphtargets