Databases
StackOverflow2013
Postsdbo
POChange texture of loaded .obj in three.js at runtime
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POChange texture of loaded .obj in three.js at runtime
    primarykey
    data
    text
    <p>I'm trying to swap image texture at runtime on a loaded three.js .obj. Here's the code straight from three.js examples with slight modification:</p> <pre><code> var container, stats; var camera, scene, renderer; var mouseX = 0, mouseY = 0; var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; init(); animate(); function init() { container = document.createElement( 'div' ); document.body.appendChild( container ); camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 ); camera.position.z = 100; //scene scene = new THREE.Scene(); var ambient = new THREE.AmbientLight( 0x101030 ); scene.add( ambient ); var directionalLight = new THREE.DirectionalLight( 0xffeedd ); directionalLight.position.set( 0, 0, 1 ); scene.add( directionalLight ); //manager var manager = new THREE.LoadingManager(); manager.onProgress = function ( item, loaded, total ) { console.log( item, loaded, total ); }; //model var loader = new THREE.OBJLoader( manager ); loader.load( 'obj/female02/female02.obj', function ( object ) { object.traverse( function ( child ) { if ( child instanceof THREE.Mesh ) { //create a global var to reference later when changing textures myMesh = child; //apply texture myMesh.material.map = THREE.ImageUtils.loadTexture( 'textures/ash_uvgrid01.jpg'); myMesh.material.needsUpdate = true; } } ); object.position.y = - 80; scene.add( object ); } ); //render renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild( renderer.domElement ); document.addEventListener( 'mousemove', onDocumentMouseMove, false ); window.addEventListener( 'resize', onWindowResize, false ); } function newTexture() { myMesh.material.map = THREE.ImageUtils.loadTexture( 'textures/land_ocean_ice_cloud_2048.jpg'); myMesh.material.needsUpdate = true; } function onWindowResize() { windowHalfX = window.innerWidth / 2; windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); } function onDocumentMouseMove( event ) { mouseX = ( event.clientX - windowHalfX ) / 2; mouseY = ( event.clientY - windowHalfY ) / 2; } //animate function animate() { requestAnimationFrame( animate ); render(); } function render() { camera.position.x += ( mouseX - camera.position.x ) * .05; camera.position.y += ( - mouseY - camera.position.y ) * .05; camera.lookAt( scene.position ); renderer.render( scene, camera ); } </code></pre> <p>The only thing I added was the newTexture function and a reference to the mesh as myMesh. Here's the original example (<a href="http://threejs.org/examples/webgl_loader_obj.html">http://threejs.org/examples/webgl_loader_obj.html</a>). The function doesn't throw any errors but the .obj does not update. I know I'm just missing something fundamental here..</p> <p><em>Update</em>: <strong>Per the excellent answer below, here's the correct code with some additions to swap texture via an input field</strong>:</p> <pre><code> var container, stats; var camera, scene, renderer; var mouseX = 0, mouseY = 0; var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; var globalObject; init(); animate(); function init() { container = document.createElement('div'); document.body.appendChild(container); camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000); camera.position.z = 100; //scene scene = new THREE.Scene(); var ambient = new THREE.AmbientLight( 0x101030 ); scene.add( ambient ); var directionalLight = new THREE.DirectionalLight( 0xffeedd ); directionalLight.position.set( 0, 0, 1 ); scene.add( directionalLight ); //manager var manager = new THREE.LoadingManager(); manager.onProgress = function (item, loaded, total) { console.log( item, loaded, total ); }; //model var loader = new THREE.OBJLoader( manager ); loader.load( 'obj/female02/female02.obj', function (object) { //store global reference to .obj globalObject = object; object.traverse( function (child) { if ( child instanceof THREE.Mesh ) { child.material.map = THREE.ImageUtils.loadTexture( 'textures/grid.jpg'); child.material.needsUpdate = true; } }); object.position.y = - 80; scene.add( object ); }); //render renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild( renderer.domElement ); document.addEventListener( 'mousemove', onDocumentMouseMove, false ); window.addEventListener( 'resize', onWindowResize, false ); } function onWindowResize() { windowHalfX = window.innerWidth / 2; windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); } function onDocumentMouseMove( event ) { mouseX = ( event.clientX - windowHalfX ) / 2; mouseY = ( event.clientY - windowHalfY ) / 2; } //animate function animate() { requestAnimationFrame( animate ); render(); } function render() { camera.position.x += ( mouseX - camera.position.x ) * .05; camera.position.y += ( - mouseY - camera.position.y ) * .05; camera.lookAt( scene.position ); renderer.render( scene, camera ); } function newTexture() { var newTexturePath = "textures/" + document.getElementById("texture").value + ""; globalObject.traverse( function ( child ) { if (child instanceof THREE.Mesh) { //create a global var to reference later when changing textures child; //apply texture child.material.map = THREE.ImageUtils.loadTexture(newTexturePath); child.material.needsUpdate = true; } }); } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USBrian LoCicero
    1. USBrian LoCicero
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COThere is no need to set `child.material.needsUpdate = true;` in this case. It is set for you by `loadTexture()`. Setting `needsUpdate` yourself can cause problems if the asynchronous texture loading is delayed.
      singulars
      1. POChange texture of loaded .obj in three.js at runtime
      1. USWestLangley
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload