I have a Problem with different textures on a cube. It only takes 1 texture with the following code...
var texture = new THREE.TextureLoader();
var texture1 = texture.load('texture1.jpg');
var texture2 = texture.load('texture2.jpg');
var texture3 = texture.load('texture3.jpg');
var texture4 = texture.load('texture4.jpg');
var texture5 = texture.load('texture5.jpg');
var texture6 = texture.load('texture6.jpg');
var geometry = new THREE.BoxBufferGeometry(height,width,length);
var material = new THREE.MeshBasicMaterial( { map: texture1,
map: texture2,map: texture3,map: texture4,map: texture5,
map: texture6 } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
Try this:
var geometry = new THREE.BoxBufferGeometry(height,width,length);
var materials = [
new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('texture1.jpg')
}),
new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('texture2.jpg')
}),
new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('texture3.jpg')
}),
new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('texture4.jpg')
}),
new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('texture5.jpg')
}),
new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('texture6.jpg')
})
];
mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
scene.add(mesh);
Related
I managed to merge 2 pieces of geometry, namely plane and text. But the two materials must be separated at the end. How to do this ?
const globalMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const texture = THREE.ImageUtils.loadTexture(
"http://127.0.0.1:8080/pin_png/img_gps_dasloop_online.png"
);
texture.minFilter = THREE.LinearFilter;
const workerMaterial = new THREE.MeshBasicMaterial({
map: texture,
side: THREE.DoubleSide,
});
const planeGeometry = new THREE.PlaneGeometry(1, 1);
const textGeometry = new THREE.TextGeometry(`Id : ${dbId}`, {
font: "monaco",
size: 1,
height: 0,
curveSegments: 3,
});
textGeometry.computeBoundingBox();
const workerIdMesh = new THREE.Mesh(textGeometry, globalMaterial);
const workerMesh = new THREE.Mesh(planeGeometry, workerMaterial);
// Merging
modelGeometry.merge(workerMesh.geometry, workerMesh.matrix);
modelGeometry.merge(workerIdMesh.geometry, workerIdMesh.matrix);
modelGeometry.computeVertexNormals();
const workerBufferGeometry = new THREE.BufferGeometry().fromGeometry(
modelGeometry
);
this.humanModel = new THREE.Mesh(workerBufferGeometry, workerMaterial);
// Make a cube with Lambert material
// ---------------------------------
// Lower fragments can increase performance
var cubeWidth = cubeSize,
cubeHeight = cubeSize,
cubeDepth = 10,
cubeQuality = 1;
// create the cube's material
var cubeMaterial = new THREE.MeshLambertMaterial(
{
color: 0xb22222
}
);
// create a cube with sphere geometry and the meterial
cube = new THREE.Mesh(
new THREE.BoxGeometry(
cubeWidth,
cubeHeight,
cubeDepth,
cubeQuality,
cubeQuality,
cubeQuality
),
cubeMaterial);
lift the cube to half of the playing space height
cube.position.z = fieldDepth/2;
set the cube x position in the left of the play field
cube.position.x = -fieldWidth/3;
----------add the cube to the scene-------------------------
scene.add(cube);
I have tried ;
var texture = new THREE.TextureLoader();
var texture1 = texture.load('scripts/kan.png');
cube = new THREE.Mesh(
new THREE.BoxGeometry(
cubeWidth,
cubeHeight,
cubeDepth,
cubeQuality,
cubeQuality,
cubeQuality
));
var cubeMaterial = new THREE.MeshBasicMaterial(
{
map: texture1
//color: 0xb22222
}
);
// create a cube with sphere geometry and the meterial
mesh = new THREE.Mesh( cube, cubeMaterial );
And this, but it didn't work
const texture = new THREE.TextureLoader().load( 'kan.png' );
var cubeMaterial = new THREE.MeshLambertMaterial(
{
//color: 0xb22222
map: texture
}
);
I am also getting the following error : THREE.Material: 'map' parameter is undefined
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 );
The way of reproduction of the texture, independent of the extent of object is necessary to me. If, for example, to do:
var geometry = new THREE.PlaneGeometry( 400, 400, 10, 10 );
var Texture = THREE.ImageUtils.loadTexture( 'textures/texture.png' );
Texture.wrapS = Texture.wrapT = THREE.RepeatWrapping;
Texture.repeat.set( 2, 1 );
var material = new THREE.MeshBasicMaterial({
map: Texture,
side: THREE.DoubleSide,
});
var mesh = new THREE.Mesh( geometry, material );
mesh.position.set(-400,0,0);
scene.add( mesh );
var mesh = new THREE.Mesh( geometry.clone(), material.clone() );
mesh.scale.x = 2;
mesh.position.set(400,0,0);
scene.add( mesh );
result here
How to redefine texture to receive the following result?
here
taken from AlteredQualia demo:
map = THREE3.ImageUtils.loadTexture( "textures/terrain/grasslight-big.jpg" );
map.wrapS = map.wrapT = THREE3.RepeatWrapping;
map.repeat.set( 16, 16 );
var planeGeo = new THREE3.PlaneGeometry( 200, 200 );
ground = new THREE3.Mesh( planeGeo, new THREE3.MeshPhongMaterial( { color: 0xffffff, ambient: 0xffffff, specular: 0x111111, shininess: 50, map: map, perPixel: true, metal: true } ) );
I have extracted png data from an HTML canvas with ExtJS Ext.getDom('cnvs_img').src; into a var and the var string starts " data:image/png;base64, ..." so think it is valid. I want to use this data instead of loading from disk with loadTexture. Would appreciate some pointers, thanks.
THREE3.ImageUtils.loadTexture( imgVar ) does not work of course :-)
To load a texture from a dataURL, you can follow this pattern:
var image = document.createElement( 'img' );
image.src = dataURL;
image.onload = function() {
var texture = new THREE.Texture( image );
texture.needsUpdate = true; // important!
var material = new THREE.MeshLambertMaterial( {
color: 0xffffff,
map: texture
} );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
};
three.js r.67