Good evening. I am export two models from Blender 2.79 to three.js.
Scene: link
Shadows work. Objects reflect the world around them but do not reflect among themselves.
Scene code:
function init() {
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, -8, 2 );
// envmap
var path = '/textures/sky_glTF/pisa/'; // ADD "/"
var format = '.png';
var envMap = new THREE.CubeTextureLoader().load( [
path + 'px' + format, path + 'nx' + format,
path + 'py' + format, path + 'ny' + format,
path + 'pz' + format, path + 'nz' + format
] );
scene = new THREE.Scene();
scene.background = envMap;
//MR - YES mirror
var loader = new THREE.GLTFLoader();
loader.load( '/gltf/1.gltf', function ( gltf ) {
gltf.scene.traverse( function ( node ) {
if ( node.isMesh || node.isLight ) node.castShadow = true;
if ( node.isMesh || node.isLight ) node.receiveShadow = true;
} );
gltf.scene.traverse( function ( child ) {
if ( child.isMesh ) {
child.material.envMap = envMap;
}
} );
gltf.scene.position.x = 0;
gltf.scene.position.y = 0;
gltf.scene.position.z = 0;
scene.add( gltf.scene );
} );
//MR - YES mirror
var loader = new THREE.GLTFLoader();
loader.load( '/gltf/2.gltf', function ( gltf2 ) {
gltf2.scene.traverse( function ( node ) {
if ( node.isMesh || node.isLight ) node.castShadow = true;
if ( node.isMesh || node.isLight ) node.receiveShadow = true;
} );
gltf2.scene.traverse( function ( child ) {
if ( child.isMesh ) {
child.material.envMap = envMap;
}
} );
gltf2.scene.position.x = 0;
gltf2.scene.position.y = 0;
gltf2.scene.position.z = 0;
scene.add( gltf2.scene );
} );
How to implement reflections between objects?
What part of the code do you still have to show for a complete answer to my question?
Related
I get Uncaught TypeError: Cannot read properties of undefined (reading 'elements') error and can't see my wheel and plane with a shadow texture on the floor:
Here's my code:
const loader = new FBXLoader();
#foreach ($files as $file)
#if (strtolower(pathinfo($file, PATHINFO_EXTENSION)) == 'fbx')
loader.setResourcePath('storage/models/{{ $modelId }}/').load('storage/{{ $file }}', function ( object ) {
object.traverse( function ( child ) {
if ( child.isMesh ) {
if ( child instanceof THREE.Mesh ) {
// child.material.color.setRGB (1, 0, 0);
child.material = new THREE.MeshPhongMaterial( {
color: 0xffffff,
map: child.material.map
} );
}
}
} );
object.receiveShadow = true;
object.castShadow = true;
scene.add( object );
} );
#endif
#endforeach
here's how this car should looks like:
I tried to apply the texture to the model, but it works only in the case of a single texture. With multiple textures, the model is not displayed.
Sample code with a single texture:
loader = new THREE.GLTFLoader().setPath('models3/');
const textureLoader = new THREE.TextureLoader();
loader.load('01-Fundament-002.gltf', function (gltf) {
var model = gltf.scene;
model.traverse ( ( o ) => {
if ( o.isMesh ) {
o.material.map = textureLoader.load('models3/Beton OsnovaVRay-DiffuseShadowMap-Edit.png');
}
} );
scene.add(model);
});
Sample code with a multiple texture:
loader = new THREE.GLTFLoader().setPath('models3/');
const textureLoader = new THREE.TextureLoader();
loader.load('01-Fundament-002.gltf', function (gltf) {
var model = gltf.scene;
model.traverse ( ( o ) => {
if ( o.isMesh ) {
const materials = [
new THREE.MeshBasicMaterial({map: textureLoader.load('models3/1.png')}),
new THREE.MeshBasicMaterial({map: textureLoader.load('models3/2.png')}),
new THREE.MeshBasicMaterial({map: textureLoader.load('models3/3.png')}),
new THREE.MeshBasicMaterial({map: textureLoader.load('models3/4.png')}),
];
o.material = materials;
}
} );
scene.add(model);
});
You cannot assign an array to the material. I think you are confusing it with cube texture. This should work assuming your model is made out of 4 meshes only.
var i = 1;
loader = new THREE.GLTFLoader().setPath('models3/');
const textureLoader = new THREE.TextureLoader();
loader.load('01-Fundament-002.gltf', function (gltf) {
var model = gltf.scene;
model.traverse ( ( o ) => {
if ( o.isMesh ) {
o.material = new THREE.MeshBasicMaterial({map: textureLoader.load(`models3/${i++}.png`)});
}
});
scene.add(model);
});
Hey there i'm new to three js & was wondering how to cast a shadow with a gltf model?
I can see it's possible as it's working here
I assume i'm not structuring my code correctly-
var model = new THREE.GLTFLoader();
model.load('https://threejs.org/examples/models/gltf/Duck/glTF/Duck.gltf', function(gltf) {scene.add(gltf.scene);});
model.castShadow = true;
Here's the fiddle https://jsfiddle.net/steveham/ckpfwy24/87/
Cheers!
You need to set castShadow = true on each child mesh, like so:
var loader = new THREE.GLTFLoader();
loader.load( 'https://threejs.org/examples/models/gltf/Duck/glTF/Duck.gltf', function( gltf ) {
gltf.scene.traverse( function( node ) {
if ( node.isMesh ) { node.castShadow = true; }
} );
scene.add( gltf.scene );
} );
three.js r.113
var loader = new THREE.GLTFLoader();
loader.load( 'file path/gltf.gltf', function ( gltf ) {
gltf.scene.traverse( function ( node ) {
if ( node.isMesh || node.isLight ) node.castShadow = true;
if ( node.isMesh || node.isLight ) node.receiveShadow = true;
} );
gltf.scene.traverse( function ( child ) {
if ( child.isMesh ) {
child.material.envMap = envMap; //reflection of the world
}
} );
scene.add( gltf.scene );
When I convert the collada from meshbasic to meshphong, parts of the collada disappear. Why is that?
var setMaterial = function( node ) {
node.material = new THREE.MeshBasicMaterial({color: 0xff0000} );
console.log(node);
if (node.children) {
for (var i=0, thelength=node.children.length; i < thelength ; i++ ) {
setMaterial(node.children[i]);
}
}
}
setMaterial(dae);
This works, but then this makes half of it disappear...
var setMaterial = function( node ) {
node.material = new THREE.MeshBasicPhong({color: 0xff0000} );
console.log(node);
if (node.children) {
for (var i=0, thelength=node.children.length; i < thelength ; i++ ) {
setMaterial(node.children[i]);
}
}
}
setMaterial(dae);
i think there no material in the name THREE.MeshBasicPhong.....
change it as MeshPhongMaterial and have a try..
node.material = new THREE.MeshPhongMaterial({color: 0xff0000} );
i really want to use utf8 format because it's very light, but the material in webgl_loader_utf8.html examples set like this:
object.traverse( function( node ) {
node.castShadow = true;
node.receiveShadow = true;
if ( node.material && node.material.name === "skin" ) {
node.material.wrapAround = true;
node.material.wrapRGB.set( 0.6, 0.2, 0.1 );
}
}
);
I haven't seen this before so i don't get it.
Can i use utf8loader with some normal material like MeshPhongMaterial? And how to do that?
Or if that's not impossible so can anyone give me some information about that type of material?
Thank you very much. (Three.js r65)
did you try out shininess for material...
object.traverse( function( node ) {
node.castShadow = true;
node.receiveShadow = true;
if ( node.material && node.material.name === "skin" ) {
node.material.wrapAround = true;
node.material.wrapRGB.set( 0.6, 0.2, 0.1 );
node.material.shininess = 100; // it should between 0-1000
}
});