We Keep Coding

Three-JS Mesh visible on opposite side of model

So I'm using a custom model made in blender for ThreeJS. I exported it to a .obj file and used the Three-js conversion utility to make a json file. I have it set to rotate, and as it rotates, you can see the other side of the model.
This is the code I'm using to load it:
loader.load("pegnin.js", function(geometry, materials){
material = new THREE.MeshPhongMaterial( {
color: 0xff0000,
polygonOffset: true,
polygonOffsetFactor: 1, // positive value pushes polygon further away
polygonOffsetUnits: 1
});
material.depthTest = true;
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
Live Demo

three.js assumes that front-faces have counter-clockwise winding order. Stated another way, the front-face in three.js is determined by the winding order of the face -- not the face normal.
It is likely that front-faces in your model have clockwise winding order.
A work-around that does not require you to change your model is to set:
mesh.material.side = THREE.DoubleSide;
three.js r.85

Using CanvasTexture with a Sprite

I am upgrading some code that used to work with three.js r61 to three.js r74. I know, it's a big jump, but things are not always as they should be.
One of the remaining things that I still didn't get to work properly is a texture built using a canvas, used in a SpriteMaterial which is then used for a THREE.Sprite.
So far, I did the following:
Changed Texture to CanvasTexture
In SpriteMaterial, commented out the usage of useScreenCoordinates, alignment and sizeAttenuation
I tried various stuff, but it seems like this thing just doesn't display at all. Is there any such example anywhere? I just want to display an artifact that is built in a canvas.
Update: the code below is what I tried so far:
var loader = new THREE.TextureLoader();
loader.load(canvas.toDataURL(), function(texture) {
var material = new THREE.SpriteMaterial({
map: texture,
blending: THREE.AdditiveBlending,
color: me.color,
opacity: me.opacity,
transparent: me.transparent,
visible: me.visible
});
var sprite = new THREE.Sprite(material);
scene.add(sprite);
});

You're quite light on details but here's one good way to do it:
https://jsfiddle.net/_jered/xcej4ec6/
var loader = new THREE.TextureLoader();
loader.load(canvas.toDataURL(), function(d){
// 'd' is the loaded texture
// apply it to the object here
});
Basically, just use the built in Loader classes to load the assets you need, including from canvas. It's important to use Loaders and callbacks because assets will become ready asynchronously, and you need to wait until they're done before you make use of them. In my example, I create the mesh with a placeholder texture, and apply it in the Loader's callback.

Three.js - Extreme shadow on face of mesh

I've created a chest model using blender, created a handpainted texture for it and set the whole thing up in an environment rendered with Three.js. The chest front face however has a unusually extreme shadow:
Here's my Renderer setup:
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
return renderer;
This is the light source (in the screenshot, it's the only light source) causing this shadow:
var envLight = new THREE.PointLight(color, 0.5, 320);
envLight.position.set(0, 80, zPos);
return envLight;
Material setup:
var material = new THREE.MeshPhongMaterial();
//diffuse texture setup
material.map = THREE.ImageUtils.loadTexture(textureURL);
material.map.wrapS = material.map.wrapT = THREE.RepeatWrapping;
material.map.repeat.set(repeatX, repeatY);
// specular map setup
material.specularMap = THREE.ImageUtils.loadTexture(specularMapURL);
material.specularMap.wrapS = material.specularMap.wrapT = THREE.RepeatWrapping;
material.specularMap.repeat.set(repeatX, repeatY);
material.specular = that.specularLightingColor;
return material;
The mesh is created using this material together with the JSON data containing the geometry and UV mapping exported from Blender. I use THREE.JSONLoader to get the data at runtime.
Here's a screenshot from blender showing the mesh and UV map unwrapped, it seems to be an issue with the selected face as it matches the exact shape and position of the weird shadow.
I've tried disabling the shadow with Object3D's castShadow/receiveShadow attributes but that doesn't show any effect at all.
Another screenshot of the normals orientation of the mesh
(source: front-a-little.de)

I've updated to the latest three.js release (r70) and updated the completely re-written Blender Export addon.
The described issue was most likely a bug in a previous version of this exporter, an exported model using the new addon doesn't show the weird shadow.
The new exporter comes with new settings in the save screen, I had to make sure the "UVs" box under "Materials" is checked in order to load the model via Three.JSONLoader

Three.js: Import and use 3d models

Hello!
I have searched ALOT about this on the web but havnt got anything that is working.
My question is: HOW do I use 3d models like collada, stl, obj, AND MOVE it with example model.position.rotation=10;?
Whitch is the easiest way of importing models in these formats? I only need one format to import to my three.js code.
Tnx!

I always convert my .obj files to JSON and then load them into Three.js.
For that conversion I use convert_obj_three.py script. You just need to run it and it will do all the work with the conversion.
And for the loading part, you can do this (with some examples how to manipulate the mesh):
function addMapMesh()
{
var loader = new THREE.JSONLoader();
loader.load("convertedFile.js", function(geometry){
mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial(geometry.materials));
mesh.position.x -= 5.0;
mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.05;
mesh.rotation.x = .25*Math.PI;
scene.add(mesh);
//make sure mesh is loaded before renderering
loadRestOfScene()
});
}

can't say much about how to move, rotate or manipulate modells using Three.js, but I remember there were a few converter-scripts and some exporter-scripts for Blender to get different 3D-Modell-types into Three.js.
This link might help you. It provides Links to converter-scripts and even shows a rotation in the example code!

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);
}
});