I'm using a cubeCamera to get refraction material on my mesh (here a cube).
var myCubeCamera = new THREE.CubeCamera( 0.1, 70, 512 )
myCubeCamera.renderTarget.mapping = THREE.CubeRefractionMapping;
When a use the CubeReflectionMapping the reflection looks quite good but with CubeRefractionMapping I get a weird pixelated texture like on the picture. I manage to resolve this problem by increase the cubeResolution to 2048 but performance are so bad :/.
Here the fiddlejs
So I'm looking for another way to solve the problem without degraded the frame rate.
Related
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.
I am building quite a complex 3D environment in Three.js (FPS-a-like). For this purpose I wanted to structure the loading of textures and materials in an object oriënted way. For example; materials.wood.brownplank is a reusable material with a certain texture and other properties. Below is a simplified visualisation of the process where models uses materials and materials uses textures.
loadTextures();
loadMaterials();
loadModels();
//start doing stuff in the scene
I want to use that material on differently sized objects. However, in Three.js you can't (AFAIK) set a certain texture scale. You will have to set the repeat to scale it appropiate to your object. But I don't want to do that for every plane of every object I use.
Here is how it looks now
As you can see, the textures are not uniform in size.
Is there an easy way achieve this? So cloning the texture and/or material every time and setting the repeat according to the geometry won't do :)
I hope someone can help me.
Conclusion:
There is no real easy way to do this. I ended up changing my loading methods, where things like materials.wood.brownplank are now for example getMaterial('wood', 'brownplank') In the function new objects are instantiated
You should be able to do this by modifying your geometry UV coordinates according to the "real" dimensions of each face.
In Three.js, UV coordinates are relative to the face and texture (as in, 0.0 = one edge, 1.0 = other edge), no matter what the actual size of texture or face is. But by modifying the UVs in geometry (multiply them by some factor based on face physical size), you can use the same material and texture in different sizes (and orientations) per face.
You just need to figure out the mapping between UVs, geometry scale and your desired working units (eg. mm or m). Sorry I don't have, or know a ready algorithm to do it, but that's the approach you probably need to take. Should be quite doable with a bit of experimentation and google-fu.
I'm trying to apply textures to meshes in THREE.js, but to get an acceptable level of clarity, I am forced to use PNGs much larger than desirable, up to several hundred pixels squared in size. If I were to use something simple such as an eight-by-eight checkered pattern, for example, the smallest resolution possible looks like a bunch of dots.
The code being used for the textures is THREE.ImageUtils.loadTexture("sprites/land1.png");
As shown in this example you need to set the filtering of the texture.
var texture = THREE.ImageUtils.loadTexture( 'texture.png' );
texture.magFilter = THREE.NearestFilter;
texture.minFilter = THREE.LinearMipMapLinearFilter;
Question: Is it possible to flip/mirror a Three.js sprites texture?
Background: Using the current DEV branch of three.js
Findings so far: I first try'd to change it's 3d rotation without any effect. Then I inspected the sprites code and saw that the rotation is reseted in this line in Sprite.js:
this.rotation3d.set( 0, 0, this.rotation );
Changing the values there didn't had any effect. Digging deeper I ended up in the SpriteRenderer plugin where I got completely lost.
My understanding is that three.js is using shaders to render sprites and that this is a huge performance plus. So writing my own sprite implementation using simple faces feels like the wrong direction.
Okey, this is a long shot, but try setting your sprite's scale to -1 (in the directions you want to flip it).
Just posting it as an alternative:
texture = new three60.THREE.Texture(video);
texture.repeat.set(-1, 1);
texture.offset.set( 1, 0);
the easiest way to flip a texture is actually to flip the texture image before uploading to the GPU.
So, I was reading about clipping in this Wikipedia article. It seems pretty essential to any and all games, so, do I have to do it, or is it done automatically by Three.js, or even WebGL? Thanks!
You can pass values for the near and far clipping planes to your camera object:
var camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
near and far can contain values for example near = 0.1 and far = 10000 so an object which lies between these values will be rendered.
EDIT:
near and far, represent the clipping planes for your world. In a scene with thousands of objects and textures being drawn at once, it would be taxing on the CPU and GPU to try and show everything. Even worse, it would be wasteful to draw the things you cant even see. The near clipping plane is usually relatively close to the user, whereas the far clipping plane is somewhere off in the distance. As objects cross the far plane, they spontaneously appear or disappear. Some games use fog to make the appearance and disappearance of objects more realistic.