I'm creating a 3d world map in three.js and for better quality and precision I'd like to load the texture by tiles dependent on current zoom level.
I'd like to achieve something similar as this but in three.js.
Currently I have one big texture, see fiddle.
var mesh = THREE.Mesh(
new THREE.SphereGeometry(radius, segments, segments),
new THREE.MeshPhongMaterial({
map: THREE.ImageUtils.loadTexture('https://raw.githubusercontent.com/turban/webgl-earth/master/images/2_no_clouds_4k.jpg'),
bumpScale: 0.005,
specular: new THREE.Color('grey')
})
);
But I'd like to request the texture in tiles from here.
Are there any similar solutions done in three.js or does anyone know how can I stitch the texture from tiles.
Related
I'm trying to add lights to a scene where there is a Mesh created by BufferGeometry. The mesh.drawMode is THREE.TriangleStripDrawMode. I don't know why light is not applying to the mesh.
There is an example bellow:
https://jsbin.com/jofasabeji/edit?js,output
Is there a flag to be activated (like face culling)?
Thanks!
Your geometry is missing vertex normals.
You can specify the normals yourself, or -- if you find the result acceptable -- you can call:
geometry.computeVertexNormals();
Alternatively, you can avoid setting vertex normals if you set the material property to flat-shading (and your material supports it):
material.shading = THREE.FlatShading;
Also, you need to set a reasonable intensity for your light:
var light = new THREE.PointLight( 0xffffff, 1 );
three.js r.85
I've managed to set the colour of a mesh face using:
geometry.faces[i].color.setHex('0xff00ff');
Is there a function to set the transparency to true and opacity to say 0.5?
I'm sure there is one, just have no idea of the syntax.
Actually, you cannot achieve that by changing your geometry. Because transparency controlled by materials.
But there's way to do this.
First, each face has materialIndex (Face manual).
Next, Each mesh, drawn within three.js scene has material. And there's special material of type THREE.MeshFaceMaterial (MeshFaceMaterial manual), which takes array of materials as argument.
When faces are drawn, three.js renderer takes face's materialIndex and uses corresponding material from this material array or, if mesh contains single material type.
So you could do something like:
var opacMaterial = new THREE.MeshLambertMaterial({
transparent:true,
opacity:0.7
});
var solidMaterial = new THREE.MeshLambertMaterial({
transparent:false,
color:new THREE.Color(1,0,0)
});
var mesh = new THREE.Mesh(
geometry,
new THREE.MultiMaterial([solidMaterial, opacMaterial])
);
By default, if your geometry have materialIndex == 0 for each faces, you will see solidMaterial drawn.
If you want to make it transparent do something like this;
geometry.faces[i].materialIndex = 1;
Don't forget to update geometry in mesh: (How to update geometry in mesh question.)
Also, aware, if you have materialIndex in your faces greater than length of material array, you will get awkward error inside of deep of THREE.js
I'm facing a issue to render cubes using CanvasRenderer, depends the camera position any cubes lost same parts and show a part of face other cube, as the below images:
In this example, there are two cubes, when the camera in front there aren't problem:
But, when I change de camera:
To render I use a array of materials, this is one of:
new THREE.MeshLambertMaterial({ color: 0x006600, ambient: 0xffff00, side: THREE.DoubleSide, overdraw: 0.5 }),
What you are seeing is an artifact of CanvasRenderer. The best you can do is tessellate your geometry. For example,
var geometry = new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 );
Or better yet, switch to WebGLRenderer.
three.js r.70
I'm using three.js to build a house, i have walls and textures for walls.
Walls are basically CubeGeometry.
I took a unique scale : 1cm = 1px
textures could be bricks or any other construction materials, but textures files are always 512x512 with details in it. for example : One brick in the texture file will be 10px per 4px.
I need to keep this ratio to keep the reality of the scene.
var texture = THREE.ImageUtils.loadTexture("images/wall.jpg");
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat = new THREE.Vector2(0.2 , 0.2);
var wall = new THREE.Mesh(new THREE.CubeGeometry(100, 100, 10), new THREE.MeshBasicMaterial({ map: texture }));
that's works quite well because the case is simple ;), it is also very simple to made a ratio for every walls (which can have any sort of sizes)
But in fact i have plenty of other geometries (procedurally generated and so on), is there by any chance a property like : "THREE.KeepMyTextureSizeAndRepeat" wrapping ? Or will i need to make ratios for each of my custom geometries ?
If you have any advice on this use case, i will be greatfull :)
Many thanks
EDIT : the final goal is to do something like "patterns" in 2D canvas
var pattern = context.createPattern(imageObj, repeatOption);
context.fillStyle = pattern;
context.fill();
when you do something like that, on a rect for example the pattern will be repeated keeping the aspect ratio (e.g http://www.html5canvastutorials.com/tutorials/html5-canvas-patterns-tutorial/)
you'll have to calculate every ratio by yourself because a texture doesn't know anything about the pixels. It only knows about the uvs.
Hi thanks in advance for any help. I have two images of a coin say a head and tail of some coin. I want to create 3D coin from it using three.js. I tried a lot but could not get to the actual shape of a coin. My code is following.
mesh = new THREE.Mesh(
new THREE.CylinderGeometry(20, 20, 0, 20, 1, false),
new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture('coin1.png'),
overdraw: true } ) );
scene.add(mesh);
Please help how can i add second image so that it is shown like a real 3D coin.
Regards
I am not expert on three.js, but I assume it is the same like in others engines.
You have to create one texture containing top, edge and bottom of the coin. Then you have to map the texture on triangles of your cilinder. So you have to create your own cylinder and mappings. You can find details in Texturing a Cylinder in Three.js question.