How can i set materials to collada child in THREE.js - three.js

i created a scene in blender it contains some meshs with out materials then i exported it to collada, i load it to three.js scene with colladaloader everything is ok but when i put some materials to children using the following code :
loader.load( "../models/islands/"+islandselected.getAttribute("data-model")+".dae", function(object){
scene.remove("island");
plane=object.scene;
plane.name=islandselected.innerHTML;
plane.traverse(function(child){
if(child.children[0]){
if(child.children[0].geometry){
console.log(child)
var t = new THREE.ImageUtils.loadTexture( '../models/islands/'+child.name+'.jpg' );
t.wrapS = t.wrapT = THREE.RepeatWrapping;
t.repeat.set( 50, 50 );
var ma= new THREE.MeshBasicMaterial( {map:t} );
child.children[0].material=ma
}
}
});
plane.scale.set(100,100,100);
scene.add(plane);
});
i get errors in console :
[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1
empcreator.jsp:1 WebGL: too many errors, no more errors will be reported to the console for this context.

var model,mat;
var loader = new THREE.ColladaLoader();
var lastTimestamp = 0;
var progress = 0;
loader.load( 'obj/mymodel.dae', function ( collada ) {
model = collada.scene;
model.children[3].children[0].material = new THREE.MeshPhongMaterial({map:THREE.ImageUtils.loadTexture('obj/images/myimage.jpg')});
console.log(model.material);
model.scale.x = model.scale.y = model.scale.z = 0.10;
model.rotation.y = 0.80;
scene.add( model );
}
//you will need to modify a little to work it, i took it from my old project

Related

Recreating Sketchfab's "ambient environment" with threejs - multiple CubeMaps?

I am trying to recreate Sketchfab's "ambient environment" feature in threejs.
see sketchfab background settings
I want my model in threejs to show a traditional environment map (360 picture of a location), but I want the scene to show a blurred, ambient image as the environement.
I tried loading two cubetextures and applying one to the envMap of the model, and the other to the scene.background:
var loader = new THREE.TextureLoader();
loader.load( "../../image/download/img1.jpg", function ( texture ) {
texture.encoding = THREE.sRGBEncoding;
texture.anisotropy = maxAnisotropy;
var cubemapGenerator = new THREE.EquirectangularToCubeGenerator( texture, { resolution: 512 } );
var cubeMapTexture = cubemapGenerator.update( renderer );
var pmremGenerator = new THREE.PMREMGenerator( cubeMapTexture );
pmremGenerator.update( renderer );
var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
pmremCubeUVPacker.update( renderer );
envMapCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
var envMap = envMapCubeRenderTarget ? envMapCubeRenderTarget.texture : null;
texture.dispose();
pmremGenerator.dispose();
pmremCubeUVPacker.dispose();
object.material.envMap = envMap
var loader2 = new THREE.TextureLoader();
loader2.load( "../../image/download/img2.jpg", function ( texture ) {
texture.encoding = THREE.sRGBEncoding;
texture.anisotropy = maxAnisotropy;
var cubemapGenerator = new THREE.EquirectangularToCubeGenerator( texture, { resolution: 512 } );
envMapBackground = cubemapGenerator.renderTarget;
scene.background = envMapBackground; //old = texture
scene.background.anisotropy = maxAnisotropy;
});
});
When I try to use two cubemaps, my scene just renders a blank background...

Animating a THREE.Points object

I'm trying to load a model from Blender, apply a PointsMaterial to it and animate it. So far, I've been able to load the model and animate it successfully as long as I use a material other than THREE.PointsMaterial to create the mesh.
When I create a THREE.Points object, the animation doesn't play. I noticed that when I set the PointsMaterial's morphTargets property to true, there's a warning saying that there is no such property of PointsMaterial. Does Threejs not support animation of Points objects using morph targets?
monster refers to a mesh that works when animated. It uses the loaded geometry and material. ParticleSystem is the the THREE.Points object.
Code:
function loadObject(path){
var loader = new THREE.JSONLoader();
loader.load(
path,
function(geometry, materials){
var material = materials[ 0 ];
material.morphTargets = true;
material.color.setHex( 0xffaaaa );
monster = new THREE.Mesh( geometry, materials );
monster.position.set( 0, 0, 0 );
var s = .003;
monster.scale.set( s, s, s );
var particleMaterial = new THREE.PointsMaterial({
color: 0xffffff,
size: .005,
morphTargets: true
});
particleSystem = new THREE.Points(geometry, particleMaterial);
particleSystem.morphTargetInfluences = monster.morphTargetInfluences;
particleSystem.morphTargetDictionary = monster.morphTargetDictionary;
particleSystem.position.set(0, 0, 0);
particleSystem.scale.set(s, s, s);
particleSystem.matrixAutoUpdate = false;
particleSystem.updateMatrix();
particleSystem.geometry.verticesNeedUpdate = true;
scene.add(particleSystem);
mixer.clipAction( geometry.animations[ 0 ], particleSystem )
.setDuration( 5 ) // one second
.startAt( - Math.random() ) // random phase (already running)
.play(); // let's go
}
)
}

Regarding Threejs texture Animation

I'm Working with Threejs in which I'm Facing Problems with Textures, so I would like to ask A question that is, how to load the textures without starting the animation, it shows blank image without starting the animation. Can anyone tell me how to do that..
var geometry = new THREE.PlaneGeometry( 15, 5.3, 2 );
var te = new THREE.ImageUtils.loadTexture("b4.jpg") ;
var material = new THREE.MeshBasicMaterial( {color: "",map:te} );
plane = new THREE.Mesh( geometry, material);
plane.position.set(-12.89,-7.2,19);
plane.visible=false;
scene.add( plane );
Did you try having a callback function to trigger after the texture is successfully loaded? Like how it is done in the documentation: TextureLoader
So something like:
var geometry = new THREE.PlaneGeometry( 15, 5.3, 2 );
var loader = new THREE.TextureLoader();
// load a resource
loader.load(
// resource URL
'b4.jpg',
// Function when resource is loaded
function ( texture ) {
// do something with the texture
var material = new THREE.MeshBasicMaterial( {color: "",map:te} );
plane = new THREE.Mesh( geometry, material);
plane.position.set(-12.89,-7.2,19);
plane.visible=false;
scene.add( plane );
},
// Function called when download errors
function ( xhr ) {
console.log( 'An error happened' );
}
);

threejs wireframe not working with OBJMTLLoader

am loading my object in threejs using OBJMTLLoader, the wireframe control is working alone for OBJLoader, but for the OBJMTLLoader it doesn't working
var loader = new THREE.OBJMTLLoader();
loader.load( 'obj/male02/male02.obj', 'obj/male02/male02_dds.mtl', function ( object ) {
object.children[0].geometry.computeFaceNormals();
var geometry = object.children[0].geometry;
console.log(geometry);
THREE.GeometryUtils.center(geometry);
geometry.dynamic = true;
var material = new THREE.MeshLambertMaterial({color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors });
mesh = new THREE.Mesh(geometry, material);
scene.add( mesh );
} );
function wireframe(){
//alert('hhhhhh');
mesh.material.wireframe = true;
mesh.material.color = new THREE.Color( 0x6893DE );
}
but it causing the following error, so my model is not showing on the viewer,
so here i want to know that we can create wireframe on any kind of 3d models??
object.children[0].geometry is undefined
Even though the OBJMTLLoader returns a THREE.Object3D object which does have .children, you should not assume that the .children is of type THREE.Mesh. So you should actually traverse() the THREE.Object3D in order to find the THREE.Mesh.
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh )
// do something with the geometry
} );

geometry.materials[0][0].shading: Three JS property 0 is undefined

I would like to add some shading to my 3D model in Three JS.
I'm using this code:
var loader = new THREE.JSONLoader();
loader.load("peer.js", createScene);
function createScene( geometry ) {
geometry.materials[0][0].shading = THREE.FlatShading;
geometry.materials[0][0].morphTargets = true;
var material = new THREE.MeshFaceMaterial();
//var material = new THREE.MeshLambertMaterial({color: 0|(0xffffff*Math.random())})
var cube = new THREE.Mesh( geometry, material );
cube.scale.set(50, 50, 50);
cube.position.z = -50;
m.model.matrixAutoUpdate = false;
m.model.add(cube);
scene.add(m.model);
}
And I'm getting the error message 'Cannot read propery 0 of undefined'.
It has something to do wit this line: geometry.materials[0][0].shading = THREE.FlatShading;
And I think the [0][0] has to be changed in something else, only I don't know what because I don't know what [0][0] is standing for. Does someone know how to fix this problem?

Resources