Answer the question
In order to leave comments, you need to log in
Texture not updating in Three.js. What's wrong?
$(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()
})
});
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question