как загрузить текстуру Canvas в волновой фронт obj (three.js)

Question

Спасибо за ваше внимание. Я хочу использовать three.js, чтобы показать файл obj, экспортированный из Blender, и текстуру карты из canvas. Я попытался опубликовать изображение в 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, необходим какой-либо перевод?

Answer 1

Следует отметить, что я не очень опытен в JS, и я действительно небрежен. Благодаря gman и manthrax, вы очень полезны, ваш ответ заставляет меня успокоиться и проанализировать проблему. Хотя все примеры текстур Three.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>

Answer 2

texture = new THREE.CanvasTexture (yourCanvas)?