javascript - Unable to change more than one phong material for an object on key press -
thanks stack overflow community helping ammature coders me, here i'm trying switch phong materials .obj loaded model on keypress, reason taking first element in material array on key press. have made sure looping proper.
here demo, please let me know if there anyway resolve
<html> <head> <style> body { background-color: #fff; margin: 0px; overflow: hidden; } </style> </head> <body> <script src="three.js"></script> <script src="ddsloader.js"></script> <script src="mtlloader.js"></script> <script src="objloader.js"></script> <script src="ddsloader.js"></script> <script type="text/javascript" src="orbitcontrols.js"></script> <script> // three.js info box follows shape var renderer, scene, camera; current = 0; var black = new three.meshphongmaterial({ color: 0x000000, combine: three.mixoperation, specular: 0xfafafa, //bbaa99, shininess: 70, emissive: 0x000000, reflectivity: 0.7 }) var white = new three.meshphongmaterial({ color: 0xf6daa5, // specular: 0x000000, shininess: 0, // bumpmap: mapheight, bumpscale: 12, emissive: null, emissiveintensity: null, // envmap: texturecube, // combine: three.mixoperation, reflectivity: 0.1 }); var cleanwhite = new three.meshphongmaterial({ color: 0xffffef, specular: 0x000000, combine: three.addoperation, reflectivity: 0 }) init(); animate(); function init() { // info var info = document.createelement('div'); info.style.position = 'absolute'; info.style.top = '30px'; info.style.width = '100%'; info.style.textalign = 'center'; info.style.color = '#fff'; info.style.fontweight = 'bold'; info.style.backgroundcolor = 'transparent'; info.style.zindex = '1'; info.style.fontfamily = 'monospace'; info.innerhtml = "three.js - material change: press c change colors"; document.body.appendchild(info); // document.body.addeventlistener('keyup', onmouseup); // renderer renderer = new three.webglrenderer({ antialias: true }); renderer.setpixelratio(window.devicepixelratio); renderer.setsize(window.innerwidth, window.innerheight); document.body.appendchild(renderer.domelement); // scene scene = new three.scene(); // ambient light var ambient = new three.ambientlight(0x404040); scene.add(ambient); // directional light var directionallight = new three.directionallight(0xffffff, 0.5); directionallight.position.set(-1, -0.5, 1); scene.add(directionallight); // var bookup = new three.textureloader().load( "js/ice.jpg" ); var cleanbookup = new three.meshphongmaterial({ // map:bookup, //color:16777200, specular: 0x000000, combine: three.addoperation, reflectivity: 0.4 }) var onerror = function(xhr) {}; three.loader.handlers.add(/\.dds$/i, new three.ddsloader()); var mtl1loader = new three.mtlloader(); var lambert = new three.meshlambertmaterial(); mtl1loader.setbaseurl(''); mtl1loader.setpath(''); mtl1loader.load('book_cover.mtl', function(materials) { materials.preload(); var objloader = new three.objloader(); objloader.setmaterials(materials); objloader.setpath(''); objloader.load('book_cover.obj', function(object2) { object2.castshadow = true; object2.receiveshadow = true; object2.updatematrix(); object2.position.set(300, 950, 800); object2.scale.x = object2.scale.y = 0.8; object2.frustumculled = true; object2.traverse(function(child) { if (child instanceof three.mesh) { if (child.material.name == "book_cover") { // child.material.visible=false; // child.material.color = new three.color(16775930); // child.material=cleanbookup; // when include effect onkey press wont change @ child.castshadow = true; child.receiveshadow = true; ////////////important part here issue////// var index = 0; var onkeydown = function(event) { if (event.keycode == 67) { // when 'c' pressed colors = [white, black, cleanwhite]; // (var i=0;i<colors.length;i++) { object2.traverse(function(child) { if (child instanceof three.mesh) { if (child.material.name == "book_cover") { if (index == colors.length) index = 0; child.material = colors[index++]; child.material.needsupdate = true; child.geometry.buffersneedupdate = true; child.geometry.uvsneedupdate = true; } } }); } // object.material.color.sethex(0xff0000); // there sethsv , setrgb // } }; document.addeventlistener('keyup', onkeydown, true); } } scene.add(object2); }); }); }) // object2.updatematrix(); // camera camera = new three.perspectivecamera(45, window.innerwidth / window.innerheight, 1, 5000); camera.position.set(20, -10, 100); camera.lookat(scene.position); // camera.up.set(0, 0, 1); var light = new three.hemispherelight(0xeeeeff, 0x777788, 0.75); light.position.set(0.5, 1, 0.75); scene.add(light); // controls controls = new three.orbitcontrols(camera); controls.target = new three.vector3(0, 0, 0); controls.update(); } // render function render() { renderer.render(scene, camera); } // animate function animate() { requestanimationframe(animate); render(); } </script> </body> </html>
Comments
Post a Comment