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
Related
I want to realize a points system on globe that points facing on the center of the globe, right now i am using circleGeometry, it is good in visualization. But if I want to generate and remove points in a large scale. All the circleGeometries will be recalculated. The performance is not so good. Before I tried to use bufferGeometry and points to realize. Then all the points always facing camera when for points there is no orientation.
So what can I do now? Is there some other methods I can have a try?Thank you so much for your help.
corresponding code(using circleGeometry):
for (var city in Data) {
var result = returnSphericalCoordinates(
Data[city].y,
Data[city].x
);
sizes[city] = 3* Math.pow(Data[city].numPoints,1/2);
var geometry = new THREE.CircleGeometry( sizes[city]/2, 32 );
var texture = new THREE.TextureLoader().load('./disc.png')
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
var material = new THREE.MeshBasicMaterial({
map: texture,
transparent:true,
alphaTest: 0.2,
side: THREE.DoubleSide,
depthWrite: false
// antialias: true
});
this.mesh = new THREE.Mesh(geometry, material);
this.mesh.position.set(result.x, result.y, result.z );
this.mesh.lookAt(new THREE.Vector3(0, 0, 0));
Points system I was trying to use:
var geometry = new THREE.BufferGeometry();
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );
geometry.computeBoundingSphere();
// Make texture
var texture = new THREE.TextureLoader().load('./disc.png')
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
ShaderLoader('./pointshader.vert',
'./pointshader.frag',
function(vertex,fragment){
var material = new THREE.ShaderMaterial( {
uniforms: {
texture: {value : texture},
color: {value : new THREE.Color(0xffffff)}
},
vertexShader: vertex,
fragmentShader: fragment,
side: THREE.DoubleSide,
transparent: true,
alphaTest: 0.05,
// depthWrite: false
} );
this.globeDots = new THREE.(geometry, material);
this.globeDots.matrixAutoUpdate = false;
this.globeDots.lookAt(new THREE.Vector3(0, 0, 0));
props.threeObject.add(this.globeDots);
// })
enter image description here
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 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?
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
Demo Can be seen here
I'm using a rather small image to make the skybox and for some reason it's being stretched instead of tiled. I found this tutorial on how to pattern a texture. I noted these lines
var crateTexture = new THREE.ImageUtils.loadTexture( 'images/crate.gif' );
crateTexture.wrapS = crateTexture.wrapT = THREE.RepeatWrapping;
crateTexture.repeat.set( 5, 5 );
var crateMaterial = new THREE.MeshBasicMaterial( { map: crateTexture } );
var crate = new THREE.Mesh( cubeGeometry.clone(), crateMaterial );
crate.position.set(60, 50, -100);
scene.add( crate );
So I tried using this method for the skybox and it didn't produce any change
var path = "/images/";
var urls = [
path + 'startile.png', path + 'startile.png',
path + 'startile.png', path + 'startile.png',
path + 'startile.png', path + 'startile.png'
];
var textureCube = THREE.ImageUtils.loadTextureCube( urls , new THREE.CubeRefractionMapping() );
textureCube.wrapS = textureCube.wrapT = THREE.RepeatWrapping;
textureCube.repeat.set( 10, 10 );
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube, refractionRatio: 0.95 } );
// Skybox
var shader = THREE.ShaderLib[ "cube" ];
shader.uniforms[ "tCube" ].value = textureCube;
var material = new THREE.ShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms,
side: THREE.BackSide
} ),
mesh = new THREE.Mesh( new THREE.CubeGeometry( 1200, 1200, 1200 ), material );
//mesh.overdraw = false;
// mesh.rotation.x = Math.PI * 0.1;
scene.add( mesh );
Any ideas?
Tiling is not supported for texture cubes. However, in your case, since all faces of your cube are identical, you can do something like this:
var geometry = new THREE.CubeGeometry( 1000, 1000, 1000 );
var texture = THREE.ImageUtils.loadTexture( "startile.png" );
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 10, 10 );
var material = new THREE.MeshBasicMaterial( {
color: 0xffffff,
map: texture,
side: THREE.BackSide
} );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
three.js r.59