I am making a panorama like krpano.I want to know how can i use small images as a texture of one cube face?
http://stemkoski.github.io/Three.js/Skybox.html
This example uses 6 pics as texture of cube.Could i use many small tiles as each texture of cube face?
I think the answer is making a new geometry,set your own vertices,faces that meet your demand and then set the faceVertexUvs and materialIndex to make it well textured.
vertices.forEach(function(v){
geom.vertices.push(new THREE.Vector3(v[0],v[1],v[2]));});
faces.forEach(function(v){
geom.faces.push( new THREE.Face3( v[0],v[1],v[2] ) );});
I have a example here:multipleTexture
Also note that
using textures whose sides are a power of two is ideal-
webgl texture
Related
Hello i am new to ThreeJS and texture mapping,
Let's say I have a 3D-Plane with the size of (1000x1000x1). When I apply a texture to it, it will be repeated or it will be scaled, to atleast filling the full plane.
What I try to achieve is, to change the scaling of the picture on the plane at runtime. I want the Image to get smaller and stop fitting the full plane.
I know there is a way to map each face to a part of a picture, but is it also possible to map it to a negative number in the picture, so it will be transparent?
My question is:
I UV-Mapped a Model in Blender and imported it with the UV-Coords into my ThreeJS-Code. Now i need to scale the texture down, like described before. Do I have to remap the UV-Cords or do i have to manipulate the image and add an transparent edge?
Further, will I be able on the same way to move the image on the picture?
I already achieved this kind of usage in java3d by manipulating bufferedImages and drawing them onto transparent ones. I am not sure this will be possible using javascript, so i want to know if it is possible by texture-mapping.
Thank you for your time and your suggestions!
This can be done using mapping the 3d -plane to a canvas ,where the image is drawn (fabric.js can be used for canvas drawings).Inshort set the canvas as texture for the 3d model
yourmodel.material.map = document.getElementById("yourCanvas");
Hope it helps :)
Yes. In THREE, there are some controls on the texture object..
texture.repeat, and texture.offset .. they are both Vector2()s.
To repeat the texture twice you can do texture.repeat.set(2,2);
Now if you just want to scale but NOT repeat, there is also the "wrapping mode" for the texture.
texture.wrapS (U axis) and texture.wrapT (V axis) and these can be set to:
texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;
This will make the edge pixels of the texture extend off to infinity when sampling, so you can position a single small texture, anywhere on the surface of your uv mapped object.
https://threejs.org/docs/#api/textures/Texture
Between those two options (including texture.rotation) you can position/repeat a texture pretty flexibly.
If you need something even more complex.. like warping the texture or changing it's colors, you may want to change the UV's in your modeller, or draw your texture image into a canvas, modify the canvas, and use the canvas as your texture image, as described in ArUns answer. Then you can modify it at runtime as well.
When using a cube camera one normally sets the envMap of the material to the cubeCamera.renderTarget, e.g.:
var myMaterial = new THREE.MeshBasicMaterial({color:0xffffff,
envMap: myCubeCamera.renderTarget,
side: THREE.DoubleSide});
This works great for meshes that are meant to reflect or refract what the cube camera sees. However, I'd like to simply create a texture and apply that to my mesh. In other words, I don't want my object to reflect or refract. I want the face normals to be ignored.
I tried using a THREE.WebGLRenderTarget, but it won't handle a cube camera. And using a single perpspective camera with WebGLRenderTarget does not give me a 360 texture, obviously.
Finally, simply assigning the cubeCamera.renderTarget to the 'map' property of the material doesn't work either.
Is it possible to do what I want?
r73.
Edit: this is not what the author of the question is looking for, I'll keep my answer below for other people
Your envmap is already a texture so there's no need to apply it as a map. Also, cubemaps and textures are structurally different, so it won't be possible to swap them, or if you succeed in doing that the result is not what you probably you might expect.
I understand from what you're asking you want a static envmap instead to be updated at each frame, if that's the case simply don't run myCubeCamera.updateCubeMap() into your render function. Instead place it at the end of your scene initialization with your desired cube camera position, your envmap will show only that frame.
See examples below:
Dynamic Cubemap Example
Static Cubemap Example
The answer is: Set the refractionRatio on the material to 1.0. Then face normals are ignored since no refraction is occurring.
In a normal situation where the Cube Camera is in the same scene as the mesh, this would be pointless because the mesh would be invisible. But in cases where the Cube Camera is looking at a different scene, then this is a useful feature.
My question is related to this article:
http://blog.wolfire.com/2009/06/how-to-project-decals/
If my understanding is correct, a mesh made from the intersection of the original mesh and a cube is added to the scene to make a decal appear.
I need to save the final texture. So I was wondering if there is a way to 'merge' the texture of the original mesh and the added decal mesh?
You'd need to do some tricky stuff to convert from the model geometry space into UV coordinate space so you could draw the new pixels into the texture map. If you want to be able to use more than one material that way, you'd also probably need to implement some kind of "material map" similar to how some deferred rendering systems work. Otherwise you're limited to at most, one material per face, which wouldn't work for detailed decals with alpha.
I guess you could copy the UV coordinates from the original mesh into the decal mesh, and the use that information to reproject the decal texture into the original texture
I have a question about texture mapping and repeat with THREE.js. In my scene there are several thousands of cubes with different height. All shall have the same material with a texture which shall be repeated depending on the height of the object. Since repeat.y isn't the same for each object, I'm afraid I cannot use the same material for all cubes although the texture is the same. Is that right? Or is there a way to use the same material and update the repeat value automatically?
Thank you very much in advance.
Can someone help with videotexture on cube in three.js with WebGLRenderer.
I am trying to use Three.js to render a cube with one-piece videotexture from one file without use
THREE.ImageUtils.loadTextureCube
instead image such as jpg, but I don't get visible cubes. Should ideally i need create something like 180 degrees half sphere video panorama but only with cube. That is, i want to put a texture to all faces of a cube, not cutting it, in the one stream because if I use different video textures on every face then this will affect the performance.
I am trying to use video texture on sphere like here
http://mrdoob.github.com/three.js/examples/webgl_panorama_equirectangular.html
and all works fine, but i want use cube like here
http://mrdoob.github.com/three.js/examples/webgl_materials_cubemap_balls_refraction.html
but I don't get visible cubes.
I don't want to cut a movie file to six different parts to put them on every face of the cube as in this example.
Maybe other methods to overlay material on cube form one video file than using different textures for each face?
Thx and sorry for my english.