Develop Reference

Creating a box with different colored sides using BufferGeometry in three.js

Using Three.js, I would like to create a box that you are able to change the color of on all sides using BufferGeometry. My current solution is creating boxes like this:
// Creating the Cube
let cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1), [new THREE.MeshBasicMaterial({
color: 0xffffff,
vertexColors: THREE.FaceColors
}), new THREE.MeshBasicMaterial({
color: 0xffffff,
vertexColors: THREE.FaceColors,
transparent: true,
opacity: 0
})]);
// Editing the sides (have to set +1 because CubeGeometry has 12 sides with 2 triangles per side)
cube.geometry.faces[faceIndex].color.set(new THREE.Color(color));
cube.geometry.faces[faceIndex + 1].color.set(new THREE.Color(color));
The problems with this being that CubeGeometry is deprecated and this solution has very bad performance wise because BufferGeometry is not being utilized. I've tried to use BoxBufferGeometry but it does not allow you to edit individual faces in the same way. I also don't know if the Three.js built in ray tracer will be able to pick out sides of a BoxBufferGeometry mesh like it does for CubeGeometry.

Three.js - how to create custom shapes

I´m using Three.js and trying to create some custom shapes, similar to one that appears in a project from one of agencies using threejs:
three.js featured project esample
How did they generated these boxes with holes inside? (on that examples
boxes basically have only borders around and are empty inside).
As I saw in the code (I was trying to figure out myself) they use BoxGeometry but I have no idea how to accomplish that. Does anyone know or can give me any directions? It would be really helpfull as i´m stuck with this and have no idea on how to create them.

So in THREE.js Meshes represent any kind of 3D object. They combine Geometries and Shaders. Generally to create a mesh you call
var mesh = new THREE.Mesh( geometry, shader );
If you use any of the builtin shaders (also known as Materials [ MeshBasicMaterial, MeshLambertMaterial, etc]) they have a wireFrame boolean attribute that allows this functionality.
var geometry = new THREE.BoxGeometry( x, y, z ),
material = new THREE.MeshBasicMaterial( {
wireFrame: true, // This makes the object appear wireframe
color: 0xffffff // You can alter other properties
});
var box = new THREE.Mesh( geometry, material );
// You can also change it later
box.material.wireFrame = false;

See back of mapped material with Three.js and Physijs

I have created a very basic cube using Three.js and Physijs. I am mapping a texture that has transparency, and I would like to see the texture on the other side of the cube through the transparency. Right now, I see the background through the transparency, but not the texture on the back of the cube.
var cube = new Physijs.BoxMesh(
new THREE.BoxGeometry( 2, 2, 2),
new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('border.png') } ),
1 );
The texture used:
The result:
As you can see, the background shows through the cube, but not the texture on the back faces. I guess that the back of a 2d texture can't be seen, but it there anyway for me to apply the texture to both sides of each face then?
This is my first go with Threejs, and there looks to be a lot to take in, so I hope I haven't missed something obvious :)

Setting the side to THREE.DoubleSide may does it for you:
var material = new THREE.MeshPhongMaterial( {
map: new THREE.TextureLoader().load( "image.png" ),
transparent: true,
side: THREE.DoubleSide // apply to both sides of the faces
} );
But the illusion is not perfect as you can see here:

Reflective material in THREE.js

How can I create a material that reflects other shapes from the scene? I have tried the reflectivity property but it didn't reflect anything.
There is an example that seems to have this effect
It doesn't look like standard materials were used to create this.

To go into a bit of the theory: a reflection is basically an image of the scene taken from a certain position. So if you want a planar mesh to serve as a mirror, you'll have to add a camera at that position, have it render the scene to a texture in the animation loop, and then use that texture in the material for the planar mesh. I would also recommend looking at http://stemkoski.github.io/Three.js/Reflection.html in addition to the examples WestLangley mentioned.
Also, play around with settings; for a less reflective effect, for example, try:
var mirrorMaterial = new THREE.MeshBasicMaterial( { color: 0x111111, envMap: mirrorCamera.renderTarget } );
or
var mirrorMaterial = new THREE.MeshPhongMaterial( { emissive: 0x111111, envMap: mirrorCamera.renderTarget } );

https://threejs.org/examples/#webgl_materials_cubemap
I did it with the above example:
new THREE.MeshLambertMaterial ({
map: texture,
envMap: scene.background,
combine: THREE.MixOperation,
reflectivity: .5
})
The key variable, as i understand, is THREE.MixOperation

How to access the each element individually in Three.js

I have created mesh and rendered " 10 " 3d objects using three.js?
how to access each object to perform scaling , rotation & all stuffs so there is a
need to get the div object individually?
help me to solve this issue ?
thanks !

You do not seem to be asking a real question. But rather asking for someone to teach you something. In the 'startup code' a SphereGeometry object is combined with a MeshBasicMaterial object in order to create the Mesh object which is your 3d object that you can then use to access/set the objects position, rotation, etc. Here are the lines of code I am referring to:
var geometry = new THREE.SphereGeometry( 75, 20, 10 );
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
var mesh = new THREE.Mesh( geometry, material );
Once you create mesh objects you need to add them to the scene with a call to scene.add(mesh). At this point you can set or get the rotation or position as such
mesh.position.x = 50;
mesh.rotation.z = Math.PI / 2 // rotations are in radians