Im trying to give multiple faces to a cube in Three.js using WebGL. Im sure the key lies in the
var geometry = new THREE.CubeGeometry( 80, 80, 80, 4, 4, 4, materials, true,true,false,true,true,true);
but I dont understand how to use the "sides" variables.
Here is my demo:
http://enriquemorenotent.com/demos/cube/
Easier than I thought!
var materials = [
new THREE.MeshLambertMaterial( { ambient: 0xffffff, map: THREE.ImageUtils.loadTexture( '1.png' ) } ),
new THREE.MeshLambertMaterial( { ambient: 0xffffff, map: THREE.ImageUtils.loadTexture( '2.png' ) } ),
new THREE.MeshLambertMaterial( { ambient: 0xffffff, map: THREE.ImageUtils.loadTexture( '3.png' ) } ),
new THREE.MeshLambertMaterial( { ambient: 0xffffff, map: THREE.ImageUtils.loadTexture( '4.png' ) } ),
new THREE.MeshLambertMaterial( { ambient: 0xffffff, map: THREE.ImageUtils.loadTexture( '5.png' ) } ),
new THREE.MeshLambertMaterial( { ambient: 0xffffff, map: THREE.ImageUtils.loadTexture( '6.png' ) } )
];
var geometry = new THREE.CubeGeometry( 80, 80, 80, 3, 3, 3, materials);
cube = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial());
Related
I'm trying to create 3d dice with texture maps on a cube. If I just load a single texture it displays fine (although, of course, I can't specify different images for each side). I tried using CubeTextureLoader but I get a totally garbled texture (Here's what I see). Any suggestions?
// This doesn't work
THREE.CubeTextureLoader().load(['/public/images/dice6-red.png',
'/public/images/dice6-red.png',
'/public/images/dice6-red.png',
'/public/images/dice6-red.png',
'/public/images/dice6-red.png',
'/public/images/dice6-red.png'], function(texture) {
var geometry = new THREE.BoxGeometry( 2,2,2 );
var material = new THREE.MeshPhongMaterial({color: 0xffffff,
map: texture});
var cube = new THREE.Mesh( geometry, material );
cube.position.x = 10;
cube.position.y = -20;
self._scene.add(cube);
self.update();
});
// This works fine
new THREE.TextureLoader().load('/public/images/dice6-red.png', function(texture) {
var geometry = new THREE.BoxGeometry( 2,2,2 );
var material = new THREE.MeshBasicMaterial({color: 0xffffff,
map: texture});
var cube = new THREE.Mesh( geometry, material );
cube.position.y = -20;
self._scene.add(cube);
self.update();
});
To place different images on the sides of a cube in the current version of Three.js (v93), use an array of materials in the mesh constructor. For example:
let cubeGeometry = new THREE.BoxGeometry(1,1,1);
let loader = new THREE.TextureLoader();
let materialArray = [
new THREE.MeshBasicMaterial( { map: loader.load("xpos.png") } ),
new THREE.MeshBasicMaterial( { map: loader.load("xneg.png") } ),
new THREE.MeshBasicMaterial( { map: loader.load("ypos.png") } ),
new THREE.MeshBasicMaterial( { map: loader.load("yneg.png") } ),
new THREE.MeshBasicMaterial( { map: loader.load("zpos.png") } ),
new THREE.MeshBasicMaterial( { map: loader.load("zneg.png") } ),
];
let mesh = new THREE.Mesh( cubeGeometry, materialArray );
I have created the simple triangle plane using
materials = [];
material1 = new THREE.MeshPhongMaterial( { color: 0xff00ff, specular: 0xff00ff, shininess: -3, shading: THREE.FlatShading, side: THREE.FrontSide } );
material2 = new THREE.MeshPhongMaterial( { color: 0xf0f0ff, specular: 0xf0f0ff, shininess: -3, shading: THREE.FlatShading, side: THREE.BackSide } );
materials.push(material1);
materials.push(material2);
mat = new THREE.MeshFaceMaterial(materials);
tri = new THREE.Geometry();
tri.vertices.push(1, 1 ,1);
tri.faces.push(new THREE.Face3(0,1,2));
tri = new THREE.Mesh(tri, mat);
scene.add(tri);
I am not able to get different materials to be applied on either side. How can I do it ?
I am trying to acheive this kind of effect
You need something like this:
var face = tri.faces[0].clone();
face.materialIndex = 1;
tri.faces.push(face);
http://jsfiddle.net/j8k7yhLp/1/
I am able to read successfully stl file by three.js but problem is that is not showing exact color which is defined in the stl file. My code looks like:
var loader = new THREE.STLLoader();
loader.addEventListener( 'load', function ( event ) {
var geometry = event.content;
var material = new THREE.MeshPhongMaterial( { ambient: 0x555555, color: 0xAAAAAA, specular: 0x111111, shininess: 200 } );
if (geometry.hasColors) {
material = new THREE.MeshPhongMaterial({ color: 0xFFFFFF, specular: 0x111111, ambient: 0x555555, opacity: geometry.alpha, vertexColors: THREE.VertexColors });
}
var mesh = new THREE.Mesh( geometry, material );
mesh.position.x = x - w/2;
mesh.position.y = y;
mesh.position.z = - h + h/2 + z/2;
//mesh.rotation.set( 0.5, 0, 0 );
mesh.castShadow = true;
mesh.receiveShadow = true;
board.add(mesh);
} );
loader.load( fileName );
But its showing only black color after applying vertex color.
Any suggestion?
I have this code, it works perfectly:
mesh = new THREE.Mesh( new THREE.SphereGeometry( 500, 60, 40 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/texture01.jpg' ) } ) );
mesh.scale.x = -1;
scene.add( mesh );
But when the material change to MeshLambertMaterial, the object is not displayed and no shows errors.
I need it for this type of material to play with the opacity ..
Thanks!!
I search to repeat texture on the model. On all examples or questions I found only this like as:
var lavaTexture = THREE.ImageUtils.loadTexture( 'images/lava.jpg' );
lavaTexture.wrapS = lavaTexture.wrapT = THREE.RepeatWrapping;
lavaTexture.repeat.set( 3, 3 );
var lavaMaterial = new THREE.MeshBasicMaterial( { map: lavaTexture } );
I understand this, but when the material is written like this:
Wood: new THREE.MeshPhongMaterial( {
color: 0xffffff,
specular:0xffffff,
shininess: 10,
map: new THREE.ImageUtils.loadTexture ( "models/macabann/chataigner.jpg"),
// not sure as right
WrapS : THREE.RepeatWrapping,
WrapT : THREE.RepeatWrapping,
maprepeat : [2,2],
envMap: textureCube,
combine: THREE.MixOperation,
reflectivity: 0.05
} )
I search how to write exactly this in this format if is possible.
Thanks for any answers.
You want a texture to repeat on you model. To do so, follow this pattern:
var loader = new THREE.TextureLoader();
var texture = loader.load( 'myTexture.jpg', function ( texture ) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.offset.set( 0, 0 );
texture.repeat.set( 2, 2 );
} );
var material = new THREE.MeshPhongMaterial( {
color: 0xffffff,
specular:0x111111,
shininess: 10,
map: texture,
. . .
} );
EDIT: Updated to three.js r.84