Работаю с three.js. У меня есть canvas в котором я рисую. По сути это UV развёртка. Мне нужно, чтобы когда я меняю что-то в canvase модель тоже менялась в реальном времени.Я могу получить image объект из canvase, но как обновлять текстуру я не представляю.
Так я получаю изображение:
function getImage(canvas){
var imageData = canvas.toDataURL();
var image = new Image();
image.crossOrigin = "anonymous"
image.src = imageData;
return image;};
function saveImage(image) {
var link = document.createElement("a");
link.setAttribute("href", image.src);
link.setAttribute("download", "canvasImage");
link.click();}
var image = getImage(document.getElementById("c"));
Тут рисую цилиндр:
var scene,camera, render;
var cyl_texture,loader;
container = document.createElement('div');
document.body.appendChild(container);
camera = new
THREE.PerspectiveCamera(70,window.innerWidth/window.innerHeight,0.1,1000);
camera.position.y = 0;
camera.position.z = 600;
scene = new THREE.Scene();
var cyl_g = new THREE.CylinderGeometry(50,50,200);
cyl_texture = new THREE.Texture();
THREE.ImageUtils.crossOrigin = '';
var load = new THREE.TextureLoader().load("1.jpg");
var cyl_t = new THREE.MeshBasicMaterial({map:load, overdraw: true});
var cyl = new THREE.Mesh(cyl_g,cyl_t);
scene.add(cyl);
render= new THREE.WebGLRenderer();
render.setSize(window.innerWidth,window.innerHeight);
container.appendChild(render.domElement);
animation();
function animation(){
requestAnimationFrame(animation);
cyl.rotation.y +=180/Math.PI*0.0001;
cyl.rotation.z +=180/Math.PI *0.00005;
render.render(scene,camera);
}
Пока я не знаю как брать картинку с canvase, потому-что когда я передаю картинку как параметр ,мне выдаёт ошибку и требуют url. Подскажите, как это можно реализовать.Я новичок и многое могу не понимать.