时游

时游小于 1 分钟

设置背景透明度

// 方法1
renderer.setClearAlpha(0); // 0~1之间的数字

// 方法2
const renderer = new THREE.WebGLRenderer({
	alpha: true, // 设置透明
});

将渲染结果保存为图片

// 1. 开启缓存
const renderer = new THREE.WebGLRenderer({
	preserveDrawingBuffer: true,
});

// 2. 保存
const link = document.createElement("a");
const canvas = renderer.domElement;
const href = canvas.toDataURL("image/png");
const fileName = "screenshot.png";
link.href = href;
link.download = fileName;
link.click();

深度冲突

多个 mesh 重合，电脑 GPU 无法分清，会导致闪烁情况。这就叫做深度冲突 Z-fighting;

// 设置mesh间距后开启深度缓冲区
const renderer = new THREE.WebGLRenderer({
	logarithmicDepthBuffer: true, // 开启深度缓冲区，优化深度冲突问题
});

模型加载进度

loader.load('./models/工厂.glb', (gltf) => { }, (xhr) => {
    // 进度
    const percent = (xhr.loaded / xhr.total) * 100;
})
```