按需渲染
不每一帧都渲染，按需渲染。例如只在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 tabindex="0"></canvas>
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
