i want to apply the WireframeHelper to the object that is loaded using OBJMTLLoder objects, i know that i must do the traverse the mesh to apply it on the entire object, so here i tried like below
mesh.traverse ( function (child) {
if (child instanceof THREE.Mesh)
{
wfh = new THREE.WireframeHelper( mesh,whfcolor );
wfh.material.depthTest = false;
wfh.material.opacity = 0.25;
wfh.material.transparent = true;
scene.add( wfh );
}
});
but it is not working the wireframe is only apply on the some part of the object only, not the entire object, it is working fine with the OBJLoader alone
Related
I have one Renderer object and two scene objects. One scene contains the objects that should not be processed by the unrealbloom post-processing pass and the other scene contains all “glowing” objects.
Now I thought I could do:
const THREED_Composer = new THREE.EffectComposer( THREED_Renderer );
const THREED_RenderPass = new THREE.RenderPass( THREED_Scene, THREED_Camera );
const THREED_RenderPassGlow = new THREE.RenderPass(
THREED_SceneGlow, THREED_Camera );
const THREED_BloomPass = new THREE.UnrealBloomPass(
new THREE.Vector2(window.innerWidth, window.innerHeight), 0.5, 0.5, 0.4);
//THREED_BloomPass.renderToScreen = false; ???
THREED_Composer.addPass( THREED_RenderPassGlow );
THREED_Composer.addPass( THREED_BloomPass );
THREED_Composer.addPass( THREED_RenderPass );
The intention was to first render the glowing objects and then render the non-glowing objects over them. I want the non-glowing objects to be able to obscure the glowing objects.
My animate function looks like this:
function animate()
{
if(GLOBAL_FocusLost)
return;
requestAnimationFrame(animate);
update();
THREED_Composer.render();
}
Ultimate goal:
I want to have glowing monolith in the midst of a room that can be obscured by all other objects.
I tried to read my way through the documentation but I think that I do not understand it enough.
Cheers. Any help is very much appreciated!
Moving on from yesterday. I'm swapping out a texture on a .GLTF on page refresh. The texture now works fine and dandy...
But only on files that have no animation. The texture update however, seems to stop them in their literal tracks. I've not sure what's causing it or how to reload the animations.
Here's the code:
var creaturePath = "models/gltf/creature/";
var creatureFile = "creature_roar.gltf";
// load the model
var loader = new GLTFLoader().setPath( creaturePath ); // creature
loader.load( creatureFile, function ( gltf )
{
gltf.scene.traverse( function ( child )
{
if ( child.isMesh )
{
// override textures
texture.flipX = false;
texture.flipY = false;
my_material = new THREE.MeshBasicMaterial({map: texture});
// child.material = my_material; // this is the problem line
texture.needsUpdate = true;
}
} );
var model = gltf.scene;
If you replace the material, you have to ensure to set MeshBasicMaterial.skinning and/or MeshBasicMaterial.morphTargets to true. Otherwise skeletal and/or morph target animation won't be supported by the material.
three.js R113
I'have been trying to intersect only one material among 3 materials of the loaded model onclick using their ID's, however, the control continues to the entire model. Let me know if it is possible to intersec on basis of material ID's
var intersects = raycaster.intersectObjects( scene.children );
for ( var i = 0; i < intersects.length; i++ ) {
object.scene.traverse(function(child) {
if ( child instanceof THREE.Mesh ) {
if (child.material.name == "heap") {
child.material.color = new THREE.Color( 0x00ff00 );
}
}
})
}
You can update the material of a raycast object by means of accessing the material property on the object of an intersection result.
Something to keep in mind is that, when you do update the properties of a material object, you need to set needsUpdate = true so threejs knows that the material needs updating internally.
Consider the following code that achieves what you're after:
// If only interested in one intersection, you can use .intersectObject()
var intersection = raycaster.intersectObject( scene.children );
// If intersection found, update material in some way
if(intersection) {
// Extract object and material from intersection
var object = intersection.object;
var material = object.material;
/*
Manipulate your material as you need to
material.color = new THREE.Color( 1, 0, 0 );
*/
// Tell threejs that the material was changed and
// needs to be updated internally
material.needsUpdate = true;
}
I am using OBJloader to load an .obj file in WEBGL , Three.js.
I want to access the vertices and faces of the objects but the geometry.vertices does not return the vertices positions and it gives me undefined.
Here is a piece of code:
var tool= new THREE.OBJLoader();
tool.load( '../obj/tool.obj', function ( object ) {
var material = new THREE.MeshLambertMaterial({color:0xA0A0A0});
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material = material;
console.log( "child" + child.geometry.vertices);} }
r.70
I am thankful for your helps in advance.
This answer only applies to versions of three.js prior to r.125.
If the loader you are using is returning BufferGeometry, you can convert the returned geometry to Geometry in the loader callback using a pattern like so:
var geometry = new THREE.Geometry().fromBufferGeometry( bufferGeometry );
three.js r.124
How to get the geometry of loaded models using OBJMTLloder on callback, i can't get the geometry of the loaded object, if i get it with the object traverse can get the only one portion of the object, i want to get the geometry of the object dynamically to scale the object into center of the scene
object.traverse( function ( child ) {
if (child instanceof THREE.Mesh) {
var geometry = child.geometry;
material = child.material;
child.material.needsUpdate = true;
}
});
If you want to scale the object you dont need to use the traverse() method. You can do:
object.scale.x = x_scale;
object.scale.y = y_scale;
object.scale.z = z_scale;
You can also use the BoundingBoxHelper() method to find the approximate size of the object.