Не обновляется текстура в Three.js.В чем ошибка?

Question

[abrillian]

$(window).load(function(){
	var container, w, h, canvas;
	var camera, controls, scene, renderer, light;
	var meshes= [], textureCarpet, manager, loader, objLoader, carpet, mapHeightCarpet;
	container = document.getElementById( 'DesignView' );
	container.innerHTML = "";
	var raycaster = new THREE.Raycaster();
	var mouse = new THREE.Vector2();
	init();
	animate();
	getCanvasData('model/texture/textur2.jpg')
	function getCanvasData(urlImage) {
		var img = new Image();
		img.src = urlImage;
		img.onload = function() {
			canvas = document.createElement('canvas');
			canvas.width = img.width;
			canvas.height = img.height;
			canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
			return canvas
		}
	}
	function init() {
		w = container.offsetWidth;
		h = container.offsetHeight;
		renderer = new THREE.WebGLRenderer( { antialias: true } );
		renderer.setPixelRatio( window.devicePixelRatio );
		renderer.setSize( w, h, false );
		renderer.setClearColor( 0xFFFFFF );
		container.appendChild( renderer.domElement );
		scene = new THREE.Scene();
		scene.background = new THREE.Color( 0xffffff );
		camera = new THREE.PerspectiveCamera( 45, w/h, 1, 100000 );
		camera.position.z = 1900;
		light = new THREE.AmbientLight( 0xffffff, 1);
		scene.add(light);
      	var url = 'model/texture/tokyo.jpg'
 		manager = new THREE.LoadingManager();
		loader  = new THREE.ImageLoader( manager );
		textureCarpet = new THREE.Texture();
		loader.load( url, function ( image ) {
			textureCarpet.image = image;
			textureCarpet.needsUpdate = true;
		});
		var material = new THREE.MeshPhongMaterial({map: textureCarpet, specular: 0xfceed2, shininess: 25});
		var loadingElem = document.querySelector('#loading');
		var progressBarElem = loadingElem.querySelector('.progressbar');
		manager.onLoad = () => {
			loadingElem.style.display = 'none';
			var geometry = new THREE.BoxGeometry( 960, 1347, 10 );
			var mesh = new THREE.Mesh(geometry, material);
			scene.add(mesh);
		};
    	manager.onProgress = (urlOfLastItemLoaded, itemsLoaded, itemsTotal) => {
    		var progress = itemsLoaded / itemsTotal;
    		progressBarElem.style.transform = 'scaleX(${progress})';
    	};

		container.addEventListener( 'mousemove', onMouseMove, false );
		container.addEventListener( 'mousedown', onMouseClik, false );

		window.addEventListener( 'resize', onWindowResize, false );
		controls = new THREE.TrackballControls( camera, container );
		controls.rotateSpeed = 3.0;
		controls.zoomSpeed = 1.0;
		controls.panSpeed = 1.0;
		controls.enabled = false;
	}
	function onWindowResize() {
		w = container.offsetWidth;
		h = container.offsetHeight;
		camera.aspect = w / h;
		camera.updateProjectionMatrix();
		renderer.setSize( w, h );
	}
	function animate() {
		requestAnimationFrame( animate );
		render();
	}
	function render() {
		controls.update();
		renderer.render( scene, camera );
	}
	function ControlsReset() {
		controls.reset();
	}
	$('#ResetDesign').click(function() {
		ControlsReset();
	});
	function onMouseClik(event) {
		var rect = renderer.domElement.getBoundingClientRect();
		mouse.x = ( ( event.clientX - rect.left ) / rect.width ) * 2 - 1;
		mouse.y = - ( ( event.clientY - rect.top ) / rect.height ) * 2 + 1;
		console.log('x: ' + mouse.x+ '|    y:'+ mouse.y);
		raycaster.setFromCamera( mouse, camera );
		var intersects = raycaster.intersectObjects( scene.children, true );
		if(intersects.length){
			var x = Number(intersects[0].point.x.toFixed(0))+Number((intersects[0].object.geometry.parameters.width/2))
			var y = Math.abs(Number(intersects[0].point.y.toFixed(0))-Number((intersects[0].object.geometry.parameters.height/2)))
			var pixelData = canvas.getContext('2d').getImageData(x, y, 1, 1).data;
          	var r = pixelData[0], g = pixelData[1], b = pixelData[2]
          	var colorPic = rgbToHsl(r, g, b)
			console.log(colorPic);
		}
	}
	function onMouseMove( event ) {
		var rect = renderer.domElement.getBoundingClientRect();
		mouse.x = ( ( event.clientX - rect.left ) / rect.width ) * 2 - 1;
		mouse.y = - ( ( event.clientY - rect.top ) / rect.height ) * 2 + 1;
		//console.log('x: ' + mouse.x+ '|    y:'+ mouse.y);
		raycaster.setFromCamera( mouse, camera );
		var intersects = raycaster.intersectObjects( scene.children, true );
		for ( var i = 0; i < intersects.length; i++ ) {
			//console.log(intersects[i]);
			controls.enabled = true;
		}
	}
	function adaptTexture() {
		var image = new Image();
		image.src = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD...';
		var texture = new THREE.Texture();
		texture.image = image;
		image.onload = function() {
			texture.needsUpdate = true;
		};
		var material = new THREE.MeshPhongMaterial({map: texture, specular: 0xfceed2, shininess: 25});
	}
	$('#Order').on('click',function() {
		adaptTexture()
	})
});

Base64 пециальнос сократи в вопросе

Comments

[abrillian]

Вообще надо из канваса в текстуру но функция

function adaptTexture() {
		var texture = new THREE.Texture (canvas);
    	texture.needsUpdate = true ;
		var material = new THREE.MeshPhongMaterial({map: texture, specular: 0xfceed2, shininess: 25});
	}

и

function adaptTexture() {
		texture = new THREE.CanvasTexture(canvas);
		var material = new THREE.MeshPhongMaterial({map: texture, specular: 0xfceed2, shininess: 25});
	}

не работают

[RAX7]

Для начала вынеси texture, material и mesh из функций init(), manager.onLoad и adaptTexture()

$(window).load(function(){
  var texture, material, mesh

а то ты создаешь новый материал, но нигде его не используешь.
И не пиши в ответах к вопросу доп. инфу, ты можешь отредактировать свой вопрос и добавить в него всё что забыл написать.