how to load Canvas texture in wavefront obj (three.js)

Question

Thank you for your attention. I want to use three.js to show the obj file exported from Blender and map texture from canvas. I tried to post the image in obj and it succeeded. But when I put the canvas texture on obj, the model turns black. I also tried to convert the canvas to a picture via toDataURL and then map it, but it still doesn't work.Any help will be appreciated。

  function convertCanvasToImage(ele) {

    var image = new Image();
    image.src = ele.toDataURL("image/png");
    return image;
  }

  function changeCanvas() {

    canvas = document.getElementById('canvas_id'),
    ctx = canvas.getContext('2d');
    ctx.font = '20pt Arial';
    ctx.fillStyle = 'red';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'white';
    ctx.fillRect(10, 10, canvas.width - 20, canvas.height - 20);
    ctx.fillStyle = 'black';
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText(new Date().getTime(), canvas.width / 2, canvas.height / 2);
    image_t = convertCanvasToImage(canvas);
    return image_t;
}

    function init() {

        container = document.createElement('div');
        document.body.appendChild(container);

        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
        camera.position.z = 250;

        // scene
        scene = new THREE.Scene();
        scene.background = new THREE.Color( 'red' );

        var ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
        scene.add(ambientLight);

        var pointLight = new THREE.PointLight(0xffffff, 0.8);
        camera.add(pointLight);
        scene.add(camera);

        // manager

        function loadModel() {

            object.traverse(function (child) {

                if (child.isMesh) child.material.map = texture;

            });

            object.position.y = -95;
            scene.add(object);

        }

        var manager = new THREE.LoadingManager(loadModel);

        manager.onProgress = function (item, loaded, total) {

            console.log(item, loaded, total);

        };

        // texture
    // texture = new THREE.Texture(canvas); //it's my initial try,but it didn't work

    var textureLoader = new THREE.TextureLoader();
    texture = textureLoader.load("three.js-master/examples/models/obj/clothes/426_con.png");//this works!!!
    // img = changeCanvas()
    texture = textureLoader.load(image_t);//but this doesn't work!!!


        // model
        function onProgress(xhr) {
            if (xhr.lengthComputable) {
                var percentComplete = xhr.loaded / xhr.total * 100;
                console.log('model ' + Math.round(percentComplete, 2) + '% downloaded');
            }
        }

    function onError() {
    }

    var loader = new THREE.OBJLoader(manager);

    loader.load('three.js-master/examples/models/obj/clothes/426_con.obj', function (obj) {

        object = obj;
    }, onProgress, onError);

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);

    function animate() {
        requestAnimationFrame(animate);
        camera.lookAt(scene.position);
        changeCanvas();
        texture.needsUpdate = true;
        renderer.render(scene, camera);
    }

I want to konw that if three.js has method to texture canvas on obj file directly,any translation is needed?

Answer 1

It should be stated that I am not proficient in JS, and I am really careless. Thanks to gman and manthrax, you are very helpful, your answer makes me calm down and analyze the problem. Although all of the Three.js Canvas texture examples I can find are texture maps for gemotry, it is also possible for obj. It turns out that the texture generated by the canvas is no different from the texture of the image.

<script>
    var container;
    var camera, scene, renderer,texture,canvas;
    var object;

  function changeCanvas() {
    canvas = document.getElementById('canvas_id');
    ctx = canvas.getContext('2d');
    img = new Image();
    img.onload = function(){ctx.drawImage(img, 0, 0)};
    img.src = "../assets/UV.png";//img address
  }

    function init() {

        container = document.createElement('div');
        document.body.appendChild(container);

        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
        camera.position.z = 250;

        // scene
        scene = new THREE.Scene();
        scene.background = new THREE.Color( 'black' );

        var ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
        scene.add(ambientLight);

        var pointLight = new THREE.PointLight(0xffffff, 0.8);
        camera.add(pointLight);
        scene.add(camera);

        // manager

        function loadModel() {
            object.traverse(function (child) {
                if (child.isMesh) child.material.map = texture;
            });
            object.position.y = -95;
            scene.add(object);
        }

        var manager = new THREE.LoadingManager(loadModel);
        manager.onProgress = function (item, loaded, total) {
            console.log(item, loaded, total);
        };

        //texture
    changeCanvas();
    texture = new THREE.CanvasTexture(canvas);

        // model
        function onProgress(xhr) {
            if (xhr.lengthComputable) {
                var percentComplete = xhr.loaded / xhr.total * 100;
                console.log('model ' + Math.round(percentComplete, 2) + '% downloaded');
            }
        }

    function onError() {}

    var loader = new THREE.OBJLoader(manager);

    loader.load('../assets/426.obj', function (obj) {
        object = obj;
    }, onProgress, onError);

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);

  var controls = new THREE.OrbitControls( camera, renderer.domElement );
}

    function animate() {
      // changeCanvas();
      texture.needsUpdate = true;
      camera.lookAt(scene.position);
      renderer.render(scene, camera);
    requestAnimationFrame(animate);
    }

  init();
    animate();

</script>

Answer 2

texture = new THREE.CanvasTexture(yourCanvas) ?