Develop Reference

How to add Text on the outer surface of Cylinder geometry?

I am trying to add some text on a cylinder geometry ...I tried to map texture which is working but when I try to add text it doesn't work
I just want to map text (like texture) on the outer side of the cylinder geometry in such a way that if the shape changes, the text follows the shape and look like engraved on the surface
var geometry = new THREE.CylinderGeometry(2.5, 2.5, 5, 10000, 1, true, 100);
var materialOuter = new THREE.MeshLambertMaterial({
color: 0x581845
});
var materialOuter = new THREE.MeshBasicMaterial({
// map: new THREE.TextureLoader().load("https://threejs.org/examples/textures/758px-Canestra_di_frutta_(Caravaggio).jpg")
map: new THREE.FontLoader().load('/fonts/gentilis_regular.typeface.json', function (font) {
var textGeo = new THREE.TextGeometry("My Text", {
font: font,
size: 200,
height: 50,
curveSegments: 12,
bevelThickness: 2,
bevelSize: 5,
bevelEnabled: true
});
var textMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var mesh = new THREE.Mesh(textGeo, textMaterial);
// mesh.position.set(x, y, z);
// scene.add(mesh);
})
});
var materialInner = new THREE.MeshBasicMaterial({
map: new THREE.TextureLoader().load("../images/1.jpg"),
side: THREE.BackSide
});
var materialInner = new THREE.MeshLambertMaterial({ color: 0xd2691e, side: THREE.BackSide });
var meshOuter = new THREE.Mesh(geometry, materialOuter);
var meshInner = new THREE.Mesh(geometry, materialInner);
meshOuter.add(meshInner);
var bottomCylinder = new THREE.Mesh(new THREE.CylinderGeometry(2.5, 2.5, 0.01, 10000, 1, false, 100), new THREE.MeshLambertMaterial({ color: 0xFFC300, wireframe: false, shading: THREE.FlatShading }));
bottomCylinder.position.y = -2.5;
scene.add(bottomCylinder);
scene.add(meshOuter);
var light = new THREE.AmbientLight(0xffffff);
light.position.z = 200;
scene.add(light);

Wrapping a torus with a spiral

I'm trying to create the effect similar to hula hoop covered in tape using three.js.
The 3d model should end up looking something like below.
I can create the hoop in 3d space using TorusGeometry with the ability to pan around, but I have not managed to work out how to get a 2nd TorusGeometry to break into sections.
What is the best way of creating this effect?
// hoop
hoop = new THREE.TorusGeometry(20, .5, 100, 50);
var hoopMaterial = new THREE.MeshPhongMaterial({
ambient: 0xffffff,
color: 0x028fde,
specular: 0x555555,
shininess: 0
});
hoopMesh = new THREE.Mesh(hoop, hoopMaterial);
hoopMesh.position.z = 0;
scene.add(hoopMesh);
hoopTape1 = new THREE.TorusGeometry(20.1, .6, 0, 50);
var hoopTapeMaterial = new THREE.MeshPhongMaterial({
ambient: 0xffffff,
color: 0xDE5102,
specular: 0x555555,
shininess: 0
});
hoopTape1Mesh = new THREE.Mesh(hoopTape1, hoopTapeMaterial);
hoopMesh.position.z = 0;
scene.add(hoopTape1Mesh);
jsfiddle with current working code.

You will have to apply a texture to your torus that is seamless to achieve that effect. The texture should be similar to this one:
Then use this code pattern:
var geometry = new THREE.TorusBufferGeometry( 6, 0.4, 16, 64 );
var loader = new THREE.TextureLoader();
var texture = loader.load( 'stripe.jpg', function ( texture ) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 16, 0.5 ); // or whatever you like
render();
} );
var material = new THREE.MeshPhongMaterial( {
color: 0x998877,
specular: 0x050505,
shininess: 50,
map: texture
} );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
three.js r.77

three.js: switch from simple material to multi- on runtime

r65
Hello,
I need to switch from simple material to multi-material on runtime. But can't. May be I miss something obvious?
My test code is below (jsfiddle: http://jsfiddle.net/plotnik/8RtTy/3/). Simple material is assigned to object initially, multi-material is assigned after the render() call to simulate runtime substitution.
var geom = new THREE.CubeGeometry(1, 1, 1);
var materialSimple = new THREE.MeshLambertMaterial({color: 0x020202});
// 6-color
var materialMulti = new THREE.MeshFaceMaterial([
new THREE.MeshLambertMaterial( { color: 0xff0000 }),
new THREE.MeshLambertMaterial( { color: 0xffff00 }),
new THREE.MeshLambertMaterial( { color: 0xffffff }),
new THREE.MeshLambertMaterial( { color: 0x00ffff }),
new THREE.MeshLambertMaterial( { color: 0x0000ff }),
new THREE.MeshLambertMaterial( { color: 0x000000 })
]);
var mesh = new THREE.Mesh(geom, materialSimple);
scene.add(mesh);
var render = function () {
requestAnimationFrame(render);
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.01;
renderer.render(scene, camera);
};
render();
// switch to multi-material
mesh.material = materialMulti;
mesh.material.needsUpdate = true;
The code doesn't work as I expect. The result looks like only materialMulti[0] (of red color) is assigned to the whole mesh.
I will be grateful for the assistance.

Switching materials at runtime can be tricky with WebGLRenderer. You can read more about it in the Wiki article How to Update Things with WebGLRenderer.
In you case, you can just use MeshFaceMaterial all the time, and achieve the effect you want by changing only the material colors.
EDIT: MeshFaceMaterial has been deprecated. You can now pass in an array of materials directly to the Mesh constructor`like so:
var mesh = new THREE.Mesh( geometry, materials_array );
three.js r.91

customize terrain.js (three.js) Need to add lambert/wire material

I've recently started to play with three.js, and I am using terrain.js demo as a start for a design project I am working on.
I will like to add a hybrid shader "wireframe/lambert"
the default comes with wire shader only.
This is the code from the demo, using basic material:
var matrix = new THREE.MeshBasicMaterial({
color:0x10ce58,
wireframe:true
});
var geometry = new THREE.PlaneGeometry(width, height, modelWidth, modelHeight);
mesh = new THREE.Mesh(geometry, matrix);
mesh.doubleSided = false;
and I tried something like this but I only get the "lambert" rendering and not the lambert and wire combined, any ideas?
var darkMaterial = new THREE.MeshLambertMaterial( { color: 0xffffff , shading: THREE.FlatShading, overdraw: true} );
var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x10ce58, wireframe: true, transparent: true } );
var multiMaterial = [ darkMaterial, wireframeMaterial ];
var geometry = new THREE.PlaneGeometry(width, height, modelWidth, modelHeight);
mesh = new THREE.Mesh(geometry, multiMaterial);
mesh.doubleSided = false;
Thanks for your time in advanced,
Regards
-Manuel

This is the code I am using in my non working example for materials (http://jsfiddle.net/xnqUb/3/)
var geometry = new THREE.PlaneGeometry(width, height, model.length - 1, model.length - 1, materials);
materials = [
new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, overdraw: true } ),
new THREE.MeshLambertMaterial({ color: 0x10ce58, wireframe: true,})
];
var mesh = new THREE.Mesh(geometry);
object = THREE.SceneUtils.createMultiMaterialObject(geometry, materials);

Three Js How To Map A Different Random Image On All Sides Of A Cube In A Group Of Cubes

I am trying to incorporate something similar to the example at:
http://mrdoob.github.com/three.js/examples/webgl_geometry_hierarchy.html
I've got the cubes themselves to work fine, but I want to map a different image on each cube.
For example, I want one of the cubes to have a "Blogger" icon wrapped on each side, and a "Facebook" icon wrapped on each side of a different cube, and a "Twitter" icon wrapped on each side of a third cube,...ect, ect.
I've gotten a mapurl to work fine with just one cube, but I am having trouble mapping images when it comes to the Object3D group.
I am new to WebGL and Three Js, and any help would be greatly appreciated, Thanks! :)

This is how it's done since r53:
var geometry = new THREE.CubeGeometry( 100, 100, 100 );
var material = new THREE.MeshFaceMaterial( [
new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'image1.jpg' ) } ),
new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'image2.jpg' ) } ),
new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'image3.jpg' ) } ),
new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'image4.jpg' ) } ),
new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'image5.jpg' ) } ),
new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'image6.jpg' ) } )
] );
var mesh = new THREE.Mesh( geometry, material );

At this moment (December 2017) ImageUtils.loadTexture, MeshFaceMaterial and CubeGeometry are no longer in use (deprecated). https://threejs.org/docs/#api/deprecated/DeprecatedList
New way of doing this is:
var geometry = new THREE.BoxGeometry( 10, 10, 10);
var material = [
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'image1.jpg' ) } ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'image2.jpg' ) } ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'image3.jpg' ) } ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'image4.jpg' ) } ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'image5.jpg' ) } ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'image6.jpg' ) } )
];
var mesh = new THREE.Mesh( geometry, material );
Here's a link to an excellent short tutorial explaining that process:
https://www.youtube.com/watch?v=l77yAZ0E950