We Keep Coding

Three.js – Applying texture to Collada mesh yields unexpected result

Following the Three.js ColladaLoader example, I've exported a Cinema4D soda
can model (consisting of 4 meshes) to a .dae file. One of the meshes, the body of the can, I want to add a texture to.
In Cinema4D I've already made a texture based on a UV map of the mesh (spherical). However, when I try to apply the texture to the mesh, it simply shows a solid white fill. I've added the entire code in this Codepen. Relevant code below, edited for brevity:
loader = new THREE.ColladaLoader();
loader.load('can.dae', function (collada) {
can = collada.scene;
can.traverse(function (node) {
var textureLoader
if (node.name == 'wrapper') {
textureLoader = new THREE.TextureLoader();
textureLoader.load('wrapper.png', function (texture) {
node.material = new THREE.MeshBasicMaterial({
map: texture
});
node.material.needsUpdate = true;
});
}
});
scene.add(can);
});
Illustration of the result. As you can see, the wrapper of the can isn't the red wrapper.png provided, but a solid white fill. I've tried experimenting with mapping and wrapping modes, but to no avail. Any help very much appreciated!
FYI: I've already ruled out CORS issues.

I added a cube in your loader and gave it that material and it worked.. so the implication is that your can mesh does not have proper UV coordinates assigned to it.. Perhaps it is using an automatic cylindrical mapping in your authoring software which is not exporting it's UVs? What software are you authoring in?
scene.add(new THREE.Mesh(new THREE.BoxGeometry(1,1,1),node.material));
https://codepen.io/manthrax/pen/ePBZbZ?editors=1001

material is not applied to obj file

I am trying to load a 3d object model exported from blender 2.79 in my three JS code using OBJLoader and MTLLoader libraries. Object is loaded but its material is not applied to it.
Material is shown in cycles render blender properly.
What can i do to apply material to the object file?
The code I am using for this is
var mtlLoader = new THREE.MTLLoader();
mtlLoader.load("textures/reception_table.mtl", function(materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.load("textures/reception_table.obj", function(mesh) {
scene.add(mesh);
mesh.position.set(190, -25, 300);
mesh.scale.set(4, 6, 4);
});
});
This is how my model looks in three.js

What can i do to apply material to the object file?
The syntax for adding the material to an instance of a Mesh is
myMesh.material = myMaterial
In order to add it to the object file though, you could use a text editor and edit the file, or you could try re-exporting it with different settings. There is a possibility that this is not a Three.js problem, but rather a problem with your file. Three.js is probably loading everything the way it's told to.

Three.js - Load a model with material that doesn't require a light source to be seen

I'm currently using Three.js, version 71. I first create my models using blender, and then I export them as a JSON file. I then use THREE.JSONLoader to load the models into my scene using the following:
this.jsonLoader.load(pathToModelFile, function(geometry, materials) {
//...
});
The materials list only contains THREE.MeshPhongMaterial at index 0. This material seems to require a light source (like THREE.SpotLight for example) to be in my scene. Otherwise, my model will be black.
I basically just want to be able to load my models and not need to use a light source in order to see them. Therefore, I have the following questions, and answering any one of them would solve my problem:
Is there some flag or property in THREE.MeshPhongMaterial I could change that would allow my model to be seen without a light source?
If number 1 isn't possible, is there a way to use THREE.JSONLoader to give me a different kind of material that doesn't need a light source? For example, like THREE.MeshBasicMaterial?
Is there some way to export my models from blender that will already have the required flags/properties set (if possible)?
It sounds like I'm having the same problem that this guy mentions in the following link, but he never received an answer: Switch lighting of THREE.MeshPhongMaterial on / off dynamically

1 dont know, think not
2 yes
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load(model, addthree1ToScene);
function addthree1ToScene( geometry, materials )
{
material = new THREE.MeshBasicMaterial(blahblah);
three1 = new THREE.Mesh( geometry, material );
scene.add( three1 );
console.log(three1);
}
3 yes, in Blender you can set a material type on mesh before exporting, or you can edit material variables in the exported file
EDIT:
Or most stupid way, it is possible to edit Material in expoted Json File, via discussion to this answer.

How to automatically update a mesh on changing parameters on THREE.js

I'm new to Threejs and to javascript in general. I'm building a mesh based on a json parameters object and it works great.
Now I'm adding some UI components (button, slider, etc) to change the json and rebuild the mesh. I'm writing some monkey-code and I'm sure it can be avoided. Now my stuff works correctly but I'm sure that the problem can be solved more elegantly.
This is my actual workflow:
on slider change use a callback
that callback calls a setter
the setter change the JSON parameters and rebuild the mesh
I'm sure all this can be automated by simply change the JSON and some javascript magic.
Here is the actual pseudocode:
sliderWidth.onChange( function(newValue) {
MyObject3D.setWidth(newValue);
});
and this is a skelton of my MyObject3D:
var MyObject3D = function(parameters) {
this.parameters = parameters;
this.init();
};
MyObject3D.prototype.init = function() {
var geometry = this.initGeometry();
var material = new THREE.MeshPhongMaterial( { color: this.parameters.color, shading: THREE.FlatShading } );
this.mesh = new THREE.Mesh(geometry, material);
}
MyObject3D.prototype.setWidth = function(n) {
this.parameters.width = n;
scene.remove( this.mesh );
this.init();
scene.add( this.mesh );
}
I'm sure that with the javascript high-dinamicity and with all brand new frameworks this piece of code can be easily automated. I've looked mainly at d3.js and at angular.js. In particular d3.js seems to be perfect with the enter-update-exit paradigm (but I didn't find a standard way to conjugate it with Three.js) and angular for sure has to be something in it.
Any kind of advice on structure, pattern, specific use case or examples based on one of the frameworks mentioned THREE.js, d3.js, angular.js) can be enlightening. Actually I'd prefer a solution with angular.js..

There was an excellent talk about using three.js and angular.js which exactly showcases your problem.
https://www.youtube.com/watch?v=mCIZoLaPJxM&t=8m5s
Im using angular directives that watch on a specific attribute and then execute some logic onchange in my projects.
$scope.$watch($attrs.something, function(changedSomething){
doSomeLogicWith(changedSomething);
});

How to texture animated js model exported from blender ? [Three.js]

I have successfully animated a model in blender using bone animation technique and i have also textured it in blender using uv texturing. Then Using three.js export add-on in blender i have exported the model making sure uv and animation in checked in. However i don't know the technique to load the texture for the animated model. I viewed the morph normal example included in three.js where there is simple color texture is used using Lambert material. I have texture from external file. How do i load the texture. In js animated model file there is location for the texture and it is in same location. But it doesn't load. i used the face material technique as well.
the location for three.js example that i used to modify:
http://threejs.org/examples/webgl_morphnormals.html
Here is my code:
var loader = new THREE.JSONLoader();
loader.load( "bird_final.js", function( geometry, materials ) {
morphColorsToFaceColors( geometry );
geometry.computeMorphNormals();
// the old code to set color to the model
//var material = new THREE.MeshLambertMaterial( { color: 0xffffff, morphTargets: true, morphNormals: true, vertexColors: THREE.FaceColors, shading: THREE.SmoothShading } );
// my code
var meshAnim = new THREE.MorphAnimMesh( geometry, new THREE.MeshFaceMaterial( materials ) );
meshAnim.duration = 500;
meshAnim.scale.set( 20, 20, 20 );
meshAnim.position.y = 150;
meshAnim.position.x = -100;
scene1.add( meshAnim );
morphs.push( meshAnim );
} );
Except the documentation and some basic tutorials scattered across the web, is there anywhere i can learn three.js from ground up. like i know setting up scene and creating basic geometry stuffs but some detail info like loading textured model loading scenes etc.

I have created a series of commented examples for Three.js that illustrate features one at a time, starting with very basic features and progressing to more advanced ones (including loading models).
http://stemkoski.github.io/Three.js
Hope this helps!

Working with complex geometry, materials, textures, and animations are some of the hardest things to figure out in THREE.js - that's why we started there with our editor.
We make all of these easy. Export an FBX file (or OBJ/MTL, or Collada) from Blender. Bring it into a project in Verold Studio, then load it into your THREE.js program using our loader. Service is free for use, you pay us if you want enablement services or have a client who wants a maintenance/support agreement.
See the example below, couldn't be easier to bring your scene to THREE.js,
http://jsfiddle.net/rossmckegney/EeMCk/
// 1. Set and then start the animation :)
this.model.setAnimation("mixamo.com");
this.model.playAnimation(true);
//this.model.pauseAnimation();
// 2. Get the threedata for a model
console.log(this.model.threeData);
// 3. Move the model
this.tweenObjectTo(
this.model.threeData, // the model
new THREE.Vector3(1, 0, 0), // go to
new THREE.Quaternion(), // rotation
1, // time, in seconds
false, // smooth start
true); // smooth end
// 4. Clone the model
that = this;
this.model2 = this.model.clone({
success_hierarchy: function(clonedModel) {
that.veroldEngine.getActiveScene().addChildObject(clonedModel);
}
});