While at the revision "66" when i use THREE.MeshFaceMaterial to load the textures of a tree model everything works fine.. and when i replace the three.min.js r66 with r71 the MeshFaceMaterial shows a black model.
Any ideas about r66-r71 changes?
i found a solution to my problem using r70 revision!(that was quick)! :)
Same problem here. After blind investigation I found that some materials have opacity 0.
The solution is to modify your three r71 library where
// modifiers
if ( m.transparency !== undefined ) {
console.warn( 'THREE.Loader: transparency has been renamed to opacity' );
m.opacity = m.transparency;
}
change to
// modifiers
if ( m.transparency !== undefined ) {
console.warn( 'THREE.Loader: transparency has been renamed to opacity' );
m.opacity = m.transparency;
} else {
m.opacity = 1;
}
Can't wait for r72!
I have the same problem, however, Pawel's answer did not work for me. If it doesn't work for you either, try this. Replace the following lines in r71:
// modifiers
if ( m.transparency !== undefined ) {
console.warn( 'THREE.Loader: transparency has been renamed to opacity' );
m.opacity = m.transparency;
}
with this from r70:
// modifiers
if ( m.transparency ) {
mpars.opacity = m.transparency;
}
note: I'm not sure how this will affect your scene if you have transparency.
Related
I'm completely new to this, and I don't know how to scale my texture to make it look smaller. it is a seamless texture. The three methods that come from materials do work well but the ones that have to do with texture don't do anything, surely it will be silly, but I'm starting to program and I don't know how to do it.
<mesh geometry={nodes.BON_GRAVA.geometry}
material={materials.BON_GRAVA}
material-map={useTexture("Gravel_001_BaseColor.jpg")}(works)
material-metalness={0.0} (works)
material-roughness={1.0} (works)
material-roughnessMap={useTexture("Gravel_001_Roughness.jpg")} (works)
material-normalMap={useTexture("Gravel_001_Normal.jpg")} (works)
material-aoMap={useTexture("Gravel_001_AmbientOcclusion.jpg")} (works)
This is me trying to do something, sorry
I've been trying .repeat, .offset, .wrapS but I don't know how the syntax for THREE methods works since it's a file gltfjsx + react
Call the useTexture hook at the top, then you can modify the Texture's (when the component mounts) with a useEffect hook: (be sure to set the needsUpdate flag to true on the Texture after any changes)
export function Component() {
const color = useTexture("Gravel_001_BaseColor.jpg");
const roughness = useTexture("Gravel_001_Roughness.jpg");
const normal = useTexture("Gravel_001_Normal.jpg");
const ao = useTexture("Gravel_001_AmbientOcclusion.jpg");
useEffect(() => {
color.repeat = new Vector2(1, 1);
color.wrapS = RepeatWrapping;
color.wrapT = RepeatWrapping;
color.needsUpdate = true; // don't forget this!
}, [color])
return (
<mesh
geometry={nodes.BON_GRAVA.geometry}
material={materials.BON_GRAVA}
material-map={color}
material-metalness={0.0}
material-roughness={1.0}
material-roughnessMap={roughness}
material-normalMap={normal}
material-aoMap={ao}
/>
)
}
Suppose i have one gltf model like given here: https://sketchfab.com/3d-models/box-d919737a5a5b464f809d12f7e1fad78f. and cover image like given below:
I have to cover this image on full box not each layer separately.
Below is my code to apply texture on object.
var loader = new GLTFLoader().setPath( 'models/gltf/box/' );
loader.load( 'scene.gltf', function ( gltf ) {
var model = gltf.scene;
model.traverse ( ( o ) => {
if ( o.isMesh ) {
o.material.map = texture;
}
} );
scene.add( model );
render();
} );
Results of code is like given in below image but i have to wrap single image in continues manner to all side.
Thanks in advance for any kind of help.
That's the default texture-mapping behavior of a standard Three.js cube. If you need to modify the way the texture is mapped, then you'll have to perform your own UV Mapping and import the geometry into Three.js so they follow the pattern that you desire. For example, if you want to create a 6-sided die, you'll have to edit your UVs so they follow this pattern:
I recommend you use Blender to do this because it's free, easy, and it has a built-in GLTF exporter that you can use with Three.js.
I have a web application where the users can add objects to the scene, move it around, change the rotation etc. But, I have a drop down which decides the unit system to be followed on the whole page for various parameters. The drop down, on change should go through a page refresh. This causes the whole scene to be reset. Is there any way to save the scene and then reload it to the previous state in three js?
A beautiful example of what you are trying to achieve is the three.js editor itself.You can find its source on github.
What it does it that it stores the editor's state in (i.e configuration, camera and scene objects) into the local storage and indexedDB (you can live with only one also) and then when the page is initialized it checks if scene's state is set there in indexedDB, it loads it from there.
You might have to do some reading of the code itself but I'll explain the main logic here.
1. Loading the scene from local storage when the page loads
You can find that in index.html when there is this piece of code
editor.storage.init( function () {
editor.storage.get( function ( state ) {
if ( state !== undefined ) {
editor.fromJSON( state );
}
var selected = editor.config.getKey( 'selected' );
if ( selected !== undefined ) {
editor.selectByUuid( selected );
}
} );
So this checks that if there is data in the state it goes to fromJSON function in /js/Editor.js which basically sets the camera and scene etc. to whatever was stored in indexedDB .See the exact code is
fromJSON: function ( json ) {
var loader = new THREE.ObjectLoader();
// backwards
if ( json.scene === undefined ) {
var scene = loader.parse( json );
this.setScene( scene );
return;
}
// TODO: Clean this up somehow
var camera = loader.parse( json.camera );
this.camera.position.copy( camera.position );
this.camera.rotation.copy( camera.rotation );
this.camera.aspect = camera.aspect;
this.camera.near = camera.near;
this.camera.far = camera.far;
this.setScene( loader.parse( json.scene ) );
this.scripts = json.scripts;
}
To check how its loaded from the local storage/IndexedDB exactly you can check Config.js and Storage.js files located in the JS folder itself.
2nd Storing the data into IndexedDB periodically
Again in index.html you can find the following code and updates the model in the IndexedDB this behavior can be triggered on an event or on a timeout or even manually by calling this piece of code editor.storage.set( editor.toJSON() );.
var saveState = function ( scene ) {
if ( editor.config.getKey( 'autosave' ) === false ) {
return;
}
clearTimeout( timeout );
timeout = setTimeout( function () {
editor.signals.savingStarted.dispatch();
timeout = setTimeout( function () {
editor.storage.set( editor.toJSON() );
editor.signals.savingFinished.dispatch();
}, 100 );
}, 1000 );
};
Hoping you can make use of this example to achieve your target.
I'm new to three.js and I am working on a project that helps in editing 3D objects. I have used the OBJLoader to load an object in .obj format and render it. Now I want to access the vertices of the rendered object.
Can you please help me in doing this one?
Every three.js Geometry instance has a .verticies array. See the docs.
Output your OBJLaoder object to the javasccript console of your browser and you should be able to find the verticies.
It would help if you posted some code.
loader.load( 'obj/test/testCube.obj', function ( object ) {
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
window.alert("CHILD"+child.geometry.vertices);
child.material.map = texture;
}
}
});
I have a strange issue where, I can not find any simple solution. Using the isotope Plugin and the jQuery.transit Plugin in the same document, makes some of the jQuery.transit plugin supported css3 transitions become unusable (only in FF16).
It looks like the $.cssHooks function in isotope breaks the cssHooks functions from other plugins.
If i disable in isotope.js the line 216
setIsoTransform( elem, 'scale', value );
in this function:
$.cssHooks.scale = {
set: function( elem, value ) {
// uncomment this bit if you want to properly parse strings
// if ( typeof value === 'string' ) {
// value = parseFloat( value );
// }
// alert(elem+" "+value)
setIsoTransform( elem, 'scale', value );
},
get: function( elem, computed ) {
var transform = $.data( elem, 'isoTransform' );
return transform && transform.scale ? transform.scale : 1;
}
};
than the cssHooks function from jQuery transit works well. (In this case the scale function from Isotope does not work any more.)
I don't understand why isotope extend the cssHooks this way, and why this influence any other object on the page, and not just the elements which should be managed via isotope.
I hope you can give me a good direction, or some update.
Cheers,
ThemePunch