three.js change material for .obj file using a button - javascript

I'm having trouble creating a button to change the .mtl file of my .obj to another .mtl using three.js. Any thoughts on how to do that would be awesome!
Here is the original code, adapted from the objmtl loader example on threejs.org. So far, I've only been able to make the obj visible / invisible using a button, but I'd love to add more buttons to change the .mtl files to reflect .mtls with other colors and properties.
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setBaseUrl( 'examples/obj/male02/' );
mtlLoader.setPath( 'examples/obj/male02/' );
mtlLoader.load( 'male02_dds.mtl', function( materials ) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );
objLoader.setPath( 'examples/obj/male02/' );
objLoader.load( 'male02.obj', function ( object ) {
object.position.y = - 95;
dude = object;
scene.add( dude );
info.innerHTML += '<br/><br/><input id=pants2 type="button" onclick="dude.visible = false" value="Dude: OFF"/>';
info.innerHTML += '<input id=pants2 type="button" onclick="dude.visible = true" value="Dude: ON"/>';

If you can work without the .mtl file, you can use something like that:
texture = new THREE.TextureLoader().load('dir/to/texture.jpg');
sectexture = new THREE.TextureLoader().load('dir/to/second_texture.jpg');
lambert = new THREE.MeshLambertMaterial({color: 0xffffff, map: texture});
objLoader = new THREE.OBJLoader();
objLoader.setPath( 'examples/obj/male02/' );
objLoader.load( 'male02.obj', function ( object ) {
object.traverse(function(child) {
if (child instanceof THREE.Mesh){
child.material = lambert;
}
});
scene.add( object );
}, onProgress, onError );
With that, you can load your texture into the lambert material, so if you want to change it you can use lambert.map=texture or lambert.map=sectexture.
[EDIT] I have fixed the mistake on child.material

Related

three.js - mask transparency with a texture image

I would like to add a mask effect on my scene.
I found this cool jsfiddle : https://jsfiddle.net/f2Lommf5/4703/
I've been wondering if it's possible to set the white part of that texture transparent so I can have my background object cropped depending on the above plane texture.
I tried to play with the alphaTest value but in vain.
Does anyone have any idea on how to reach this result ? Thank you
I'm not 100% sure I understand your intended result but it should be possible to implement the effect via post processing. In the following live demo, MaskPass is used to create a mask where no pixels of the actually beauty pass are rendered. The important code section is:
var clearPass = new ClearPass();
var maskPass = new MaskPass( sceneMask, camera );
maskPass.inverse = true;
var renderPass = new RenderPass( scene, camera );
renderPass.clear = false;
var clearMaskPass = new ClearMaskPass();
var outputPass = new ShaderPass( CopyShader );
var parameters = {
minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter,
format: THREE.RGBFormat,
stencilBuffer: true
};
var renderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, parameters );
composer = new EffectComposer( renderer, renderTarget );
composer.addPass( clearPass );
composer.addPass( maskPass );
composer.addPass( renderPass );
composer.addPass( clearMaskPass );
composer.addPass( outputPass );
Notice that the mask object (the plane) is managed in a separate scene.
Live demo: https://jsfiddle.net/e6p0axb1/5/

Trying to add custom font in three.js

Trying to add my own custom font, but nothing shows up I think it's crashing??, is there a way to get three.js to render my font: Custom Font
"{%static "js/pink.json"%}" --> this is django's template tagging.
var loader = new THREE.FontLoader();
var font = loader.load( "{%static "js/pink.json"%}", function ( font ) {
var textGeo = new THREE.TextGeometry( "My Text", {
font: font,
size: 3,
height: 3,
} );
var textMaterial = new THREE.MeshPhongMaterial( { color: 0x000000 } );
var mesh = new THREE.Mesh( textGeo, textMaterial );
mesh.position.set( x, y, z );
scene.add( mesh );
I get these errors as well:
Browser crashing
and
Duplicate Point
Thanks you very much #prisoner849, it's work !
Link to convert files in JSON : gero3.github.io/facetype.js
I converted a .ttf file to an .json file and it's work perfectly with the "THREE.FontLoader" of "Three js" !
var loader = new THREE.FontLoader();
loader.load( 'font_file_name.json', function ( font ) { ... }

using three.js, need to replace the image dynamically

I am new to three.js, pls guide me how to change the image dynamically
Tried with the below option of replacing the image from the original image
I tried with the below code
var mtlLoader = new THREE.MTLLoader();
mtlLoader.load( 't2.mtl', function( materials ) {
materials.preload();
var texture = THREE.TextureLoader('bbc.png');
var material = new THREE.MeshLambertMaterial( { map: texture } );
materials.setMaterials( material );
objLoader.load( 't2.obj', function ( object ) {
scene.add( object );
}, onProgress, onError );
});
I am not getting any error but updated image is not displayed ? but the actual object is displayed in blank color. Pls suggest
Thanks
Shaik

How to add outline on child mesh in three js

I'd like to add outline to meshes. I followed the example which created a new mesh using the same geometry, and scaled the mesh.
var outlineMaterial = new THREE.MeshBasicMaterial({color: 0x00ffff, side: THREE.BackSide});
this.outlineMesh = new THREE.Mesh(target.geometry, outlineMaterial);
this.outlineMesh.quaternion = target.quaternion;
this.outlineMesh.position = target.position;
this.outlineMesh.scale.copy(target.scale);
this.outlineMesh.scale.multiplyScalar(1.05);
this.scene.add(this.outlineMesh);
It works fine, the position of outlineMesh is always same to target mesh. However, when I added the target mesh as child to other mesh, the position of outlineMesh is different to the target mesh. I thought it's because the target position is related to parent's coordinate, but the outlineMesh is still in the world coordinate.
Any idea how to make outline work for child mesh? Thank you very much!
Just add the outlineMesh as a child of the target mesh, like so:
var outlineMaterial = new THREE.MeshBasicMaterial( { color: 0x00ffff, side: THREE.BackSide } );
outlineMesh = new THREE.Mesh( geometry, outlineMaterial );
outlineMesh.scale.multiplyScalar( 1.05 );
mesh.add( outlineMesh );
three.js r.67

Three.js - Change Material on Runtime

I have some .js files exported from Blender and load them with THREE.JSONLoader();
my callback:
var callback = function( geometry ) { createMesh(geometry);
my loading:
loader.load( "Models/sculp.js", callback );
my create method:
function createMesh(geometry){
inArr[id] = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0xbbbbbb} ) );
inArr[id].scale.set( 100, 100, 100 );
scene.add( inArr[id] );
id++;
}
Now I want to change my material on runtime by using my keyboard (changes color and opacity).
How can I do that?
As you create a new material for each mesh I assume you only want to change the color of one mesh and not of all in the inArr array, and you probably need some sort of select for that. But changing the color of the material alone is quite easy:
var onKeyDown = function(event) {
if (event.keyCode == 67) { // when 'c' is pressed
object.material.color.setHex(0xff0000); // there is also setHSV and setRGB
}
};
document.addEventListener('keydown', onKeyDown, false);
object is the mesh you want to change. Key codes can be found here: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

Categories