Five sides of the Cube were programmed to be drawn on Canvas, but
Sometimes the CanvasTexture does not draw properly and appears white.
If you know why it is displayed like this, please let me know.
Code
useEffect(() => {
if (baseItem === undefined) {
return;
}
if (material0Ref.current !== null) {
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
const texture = new CanvasTexture(canvas);
material0Ref.current.map = texture;
if (context !== null) {
drawPlain(canvas, context, depth, height, background);
}
}
if (material1Ref.current !== null) {
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
const texture = new CanvasTexture(canvas);
material1Ref.current.map = texture;
if (context !== null) {
drawTitle(canvas, context, depth, height, title, background);
}
}
if (material2Ref.current !== null) {
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
const texture = new CanvasTexture(canvas);
material2Ref.current.map = texture;
if (context !== null) {
drawChildren(canvas, context, baseItem.children || [], width, depth);
}
}
if (material4Ref.current !== null) {
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
const texture = new CanvasTexture(canvas);
material4Ref.current.map = texture;
if (context !== null) {
drawPlain(canvas, context, width, height, background);
}
}
if (material5Ref.current !== null) {
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
const texture = new CanvasTexture(canvas);
material5Ref.current.map = texture;
if (context !== null) {
drawPlain(canvas, context, width, height, background);
}
}
}, [
width,
height,
depth,
baseItem,
title,
background,
disableChildrenTexture,
id,
]);
Screenshot