Javascript 如何在波阵面obj（three.js）中加载画布纹理

谢谢你的关注。我想使用three.js显示从Blender导出的obj文件，并从画布映射纹理。我试着在obj中发布图像，结果成功了。但当我把画布纹理放在obj上时，模型会变成黑色。我还尝试通过toDataURL将画布转换为图片，然后将其映射，但仍然不起作用。任何帮助都将不胜感激

  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);
    }

---

我想知道，如果three.js有直接在obj文件上对画布进行纹理处理的方法，那么需要进行任何翻译吗？

texture=new three.CanvaTexture（yourCanvas）？

应该说明的是，我不精通js，我真的很粗心。多亏了gman和manthrax，你帮了我大忙，你的回答让我冷静下来，分析问题。虽然我能找到的所有三个.js Canvas纹理示例都是gemotry的纹理贴图，但对于obj也是可能的。事实证明，画布生成的纹理与图像的纹理没有什么不同

<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>

var容器；
摄像机、场景、渲染器、纹理、画布；
var对象；
函数changeCanvas（）{
canvas=document.getElementById（'canvas_id'）；
ctx=canvas.getContext（'2d'）；
img=新图像（）；
img.onload=function（）{ctx.drawImage（img，0，0）}；
img.src=“../assets/UV.png”；//img地址
}
函数init（）{
container=document.createElement（'div'）；
文件.正文.附件（容器）；
摄像头=新的三个透视摄像头（45，window.innerWidth/window.innerHeight，12000）；
摄像机位置z=250；
//场面
场景=新的三个。场景（）；
scene.background=新的三种颜色（“黑色”）；
var环境光=新的三个环境光（0xCCCC，0.4）；
场景。添加（环境光）；
var pointLight=新的三点光源（0xffffff，0.8）；
添加（点光源）；
场景。添加（摄影机）；
//经理
函数loadModel（）{
遍历（函数（子对象）{
如果（child.isMesh）child.material.map=纹理；
});
object.position.y=-95；
场景。添加（对象）；
}
var manager=新的三个加载管理器（加载模型）；
manager.onProgress=功能（项目、已加载、总计）{
控制台日志（项目、已加载、总计）；
};
//质地
changeCanvas（）；
纹理=新的三个。CanvasTexture（canvas）；
//模型
函数onProgress（xhr）{
if（xhr.长度可计算）{
var percentComplete=xhr.loaded/xhr.total*100；
console.log（'model'+Math.round（完成百分比，2）+'%download'）；
}
}
函数onError（）{}
var装入器=新的三个。对象装入器（管理器）；
loader.load（'../assets/426.obj'，函数（obj）{
对象=obj；
}，onProgress，onError）；
renderer=new THREE.WebGLRenderer（）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
container.appendChild（renderer.domeElement）；
var controls=新的三个.OrbitControls（camera、renderer.doElement）；
}
函数animate（）{
//changeCanvas（）；
texture.needsUpdate=true；
摄像机。注视（场景。位置）；
渲染器。渲染（场景、摄影机）；
请求动画帧（动画）；
}
init（）；
制作动画（）；

//纹理=新的三个纹理（画布）//这是我第一次尝试，但没有成功。你可能会觉得很有帮助。你很有帮助。谢谢。