Simple example to apply a CanvasTexture

[sirPixieJerry]

Hello,

I'm reaching out here because I tried to find a good and simple example of how I can apply a canvas as a texture to a cube with react-three-fiber. I found only one example online that uses typescript, that I don't want to use (I am a typescript noob). Does anyone have an idea?

I leave my code so far here to give you a picture of what I want to do:

import React from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import "./App.css";
import * as Drei from "@react-three/drei";

export default function App() {
    // states of the App
    const [isPainting, setIsPainting] = React.useState(false);
    // refs of the App
    const canvasRef = React.useRef(null);
    const contextRef = React.useRef(null);

    React.useEffect(() => {
        // setup the canvas
        const canvas = canvasRef.current;
        canvas.width = 600;
        canvas.height = 800;
        // setup the context for the canvas
        const context = canvas.getContext("2d");
        // setup the style of the pen
        context.lineCap = "round";
        context.strokeStyle = "black";
        context.lineWidth = 5;
        // store context to contextRef
        contextRef.current = context;
    }, []);

    const startPaint = ({ nativeEvent }) => {
        // use nativeEvent to track mouse movement
        const { offsetX, offsetY } = nativeEvent;
        contextRef.current.beginPath();
        contextRef.current.moveTo(offsetX, offsetY);
        // track if user is painting
        setIsPainting(true);
    };

    const stopPaint = () => {
        contextRef.current.closePath();
        // track if user stps painting
        setIsPainting(false);
    };

    const draw = ({ nativeEvent }) => {
        // if user is not painting return
        if (!isPainting) {
            return;
        }
        // else draw paiting to canvas
        const { offsetX, offsetY } = nativeEvent;
        contextRef.current.lineTo(offsetX, offsetY);
        contextRef.current.stroke();
    };

    return (
        <>
            <div id="paint-canvas-container">
                <canvas
                    ref={canvasRef}
                    onMouseDown={startPaint}
                    onMouseUp={stopPaint}
                    onMouseMove={draw}
                />
            </div>
            <div id="cube-container">
                <Canvas camera={{ position: [-5, 2, 10], fov: 60 }}>
                    <ambientLight intensity={0.3} />
                    <group position={[0, 1, 0]}>
                        <mesh>
                            <boxBufferGeometry
                                attach="geometry"
                                args={[4, 4, 4]}
                            />
                            <meshStandardMaterial
                                attach="material"
                                color="goldenrod"
                            ></meshStandardMaterial>
                        </mesh>
                    </group>
                    <Drei.BakeShadows />
                    <Drei.Environment preset="city" />
                    <Drei.OrbitControls autoRotate enableZoom={false} />
                </Canvas>
            </div>
        </>
    );
}

I'm thankful for any hints. I'm stuck since two days now and almost about to drop the project. :(

[sirPixieJerry]

Solved it. ;)

[abenjaminov]

Whats the solution?

[latelier22]

Hi, is it possible to see your complete code? Because i try but my geometry is always black....

[mwmwmw]

You can either create the canvas imperatively (document.createElement) or use a reference to a canvas you've added to the dom (OP's code).

Once you have the canvas, you apply it to your geometry using <canvasMaterial />

In this example, I'm drawing the canvas in useFrame, but you can draw the canvas anywhere. Pass the reference to the canvas in using the image property.

https://codesandbox.io/s/canvas-animated-texture-10p7ws

        <meshBasicMaterial>
          <canvasTexture
            ref={textureRef} <- if you're animating the canvas, you'll need to set needsUpdate to true 
            attach="map"
            image={canvasRef.current} 
          />
        </meshBasicMaterial>

[cedricwaxwing]

This is really cool! I tried adjusting the canvas to just some noise, and then altering the attach attribute from "map" to "displacementMap" (and added the displacementScale to the material), but it didn't seem to work. Do you know if this is possible? The documentation for canvastexture is unclear to me.

[carolinex]

I'm trying to figure out how to achieve this in react-native. What should I pass to the "image" prop instead of the canvas HTML element, which is not used in react-native? I tried passing a View or its container, and that didn't work.

[latelier22]

Hi, is it possible to see your complete code? Because i try but my geometry is always black....

[Muhammad-Athar]

add some light to the scene in canvas. we usually uses
<ambientLight />