three.js динамическое изменение текстур

323

25 октября 2017, 07:33

Работаю с 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. Подскажите, как это можно реализовать.Я новичок и многое могу не понимать.

Answer 1

Не финальное решение, но как вариант.

Three.js в последней ревизии (r87) имеет в своем наборе такой объект как THREE.CanvasTexure(), что в некоторой степени, если не упрощает работу с canvas, то делает ее синтаксически более понятной.

Смотрите код функции onClick и уделите внимание комментариям в нем.

var scene = new THREE.Scene(); 
scene.background = new THREE.Color(0x404040); 
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000); 
camera.position.set(0, 0, 10); 
var renderer = new THREE.WebGLRenderer({ 
  antialias: true 
}); 
renderer.setSize(window.innerWidth, window.innerHeight); 
document.body.appendChild(renderer.domElement); 
 
var controls = new THREE.OrbitControls(camera, renderer.domElement); 
 
var ctx = holst.getContext("2d"); 
var color = new THREE.Color(); 
ctx.fillStyle = "white"; 
ctx.fillRect(0, 0, holst.width, holst.height); 
var texture = new THREE.CanvasTexture(holst); 
 
var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(1, 1, 5, 8, 1, true), new THREE.MeshBasicMaterial({ 
  map: texture, 
  side: THREE.DoubleSide 
})); 
scene.add(cylinder); 
 
holst.addEventListener("click", onClick, false); 
 
function onClick(event) { 
  // неважно как изменяется содержимое холста 
  ctx.fillStyle = "#" + color.setHex(Math.random() * 0xffffff).getHexString(); 
  ctx.fillRect( 
    THREE.Math.randInt(0, holst.width), 
    THREE.Math.randInt(0, holst.height), 
    THREE.Math.randInt(0, holst.width), 
    THREE.Math.randInt(0, holst.height) 
  ); 
  texture.needsUpdate = true; // после любого изменения на холсте - ставить этот флаг в true 
  // после рендеринга кадра этот флаг будет сброшен в false автоматически 
} 
 
render() 
 
function render() { 
  requestAnimationFrame(render); 
  renderer.render(scene, camera); 
}

body { 
  overflow: hidden; 
  margin: 0; 
} 
 
canvas { 
  border: 1px solid black; 
}

<script src="https://threejs.org/build/three.min.js"></script> 
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script> 
<canvas id="holst" style="position:absolute;" width="128" height="128"></canvas>