Мобильная версияЯ реализую простую 3D-рисовку и хочу реализовать стирание. Для этого я решил использовать два слоя холста: один для изображения текстуры и другой (прозрачный) для рисования, чтобы стереть только холст для рисования. Не могли бы вы посоветовать, как иметь одну сеткуStandardMaterial с текстурой изображения (которую не следует изменять при рисовании/стирании) и одну или несколько прозрачных сетокStandardMaterial только для рисования? Вот код компонента:
{ gl.physicallyCorrectLights = правда; }} камера={{ позиция: [0, 0, 10] }} > {isControlsAllowed && } { setIsControlsAllowed (ложь); }} onPointerUp={() => { setIsControlsAllowed (истина); }} onPointerMove={(ev) => { handleBrushPointerMove(ev, previousPoint.current); }} геометрия={геометрия} > Мой код ловушки:
const currentCanvasRef = useRef(document.createElement("canvas")); const currentTextureRef = useRef(null); const currentDrawingCanvasRef = useRef(document.createElement("canvas")); const currentDrawingTextureRef = useRef(null); useLayoutEffect(() => { const context = currentDrawingCanvasRef.current.getContext("2d"); контекст?.clearRect( 0, 0, currentDrawingCanvasRef.current.width, currentDrawingCanvasRef.current.height ); createCanvasTextureFromImage("/Stool.jpg"); }, []); const createCanvasTextureFromImage = ( imageUrl: строка, ) => { константный холст = currentCanvasRef.current; новый ImageLoader().load(imageUrl, (изображение) => { const ctx = Canvas.getContext("2d"); холст.ширина = изображение.ширина; холст.высота = изображение.высота; если (ctx) { ctx.clearRect(0.0, 0.0, холст.ширина, холст.высота); ctx.drawImage(изображение, 0,0, 0,0, изображение.ширина, изображение.высота); } }); }; const handleBrushPointerMove = ( currentPoint: ThreeEvent, prevPoint?: ThreeEvent ) => { // Немного логики рисования }; Что я ожидаю увидеть:
И что я на самом деле вижу:
ОБНОВЛЕНИЕ: я только что проверил, что массив материалов не работает для сетки. Хотя каждый из материалов работает отдельно, при использовании массива 3D-модель вообще не отображается
