0

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

1 ответ 1

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.