I'm trying to create a background I can tilt (vertical rotation) as-needed. I have a cube map. If I use the built-in scene.background = texture then I won't be able to tilt it. If I use a box (or sphere) geometry, it'll move, but it needs to stay still.
This post:
Tilt three.js background or tilt HDRI image? suggests not writing to the depth buffer. How do you not write to the depth buffer?
material.depthWrite = false;
see docs
Related
I used sprites in Three js to display 2d images, the problem that I faced with sprites that they rotate to face the camera.
I am trying to use it to fake a shadow for the 3d object. When I rotate the camera the 3d object tilt with the camera until it makes a 30-degree angle with the horizontal but it's shadow (2d sprite) still at 0 degrees.
How to disable the auto rotation of sprite, or is there another solution to preview 2d images in three js to look like a 3d object?
How to disable the auto rotation of sprite, or is there another solution to preview 2d images in three js to look like a 3d object?
It's not possible to disable the orientation towards the camera with a flag or configuration. You would have to modify the shader code of SpriteMaterial for this.
I suggest you use a mesh instead based on a PlaneBufferGeometry and a MeshBasicMaterial. Alternatively, you write a custom billboard shader with ShaderMaterial or RawShaderMaterial.
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.
How do I create a three.js material/geometry which uses part of a texture?
I am first rendering a scene to a texture. This texture is used for a Mesh with a CubeGeometry and a MeshLambertMaterial. What I would like to do now is have only a part of the texture displayed on the cube face (like a window into the texture).
I've done this before using OpenGL ES directly, with shaders, but I don't see what parameters might make it possible using the standard three.js library.
That is what texture coordinates are for. See this question and answer:
http://stackoverflow.com/questions/19366991/drawing-part-of-open-gl-texture/19367844#19367844
I want to make a toon border effect. For it, I'll use the depth value of the neighbor pixels of each pixel to determine if it is or isn't supposed to be blacked. How can I access that information inside the fragment shader?
When you render your scene in a normal way (vertex shader, then fragment shader - single pass) then in the fragment shader there is no way to access depth values for another pixels.
But:
You can render scene twice and perform some postprocessing effects. In the first run you store depth values and others (like normals, etc) in RenderTarget (in texture) then you use those textures in the second pass.
Here you have effect from XNA, but can be quickly ported to GLSL: http://xnameetingpoint.weebly.com/shader7f31.html
Here some link about Render to Texture: http://learningwebgl.com/blog/?p=1786
Hint: depth values will not be enough for border detection, you have to use normals as well. But it is covered in the above tutorial from XNA.
I want to create some textured rectangles (I guess the jargon for this is 'quads" :D) with OpenGL ES 2.0 and move them on screen following mouse pointer.
But now comes the "advanced" part: I want that all these rectangles to have a border around them; I could do this by simply overpainting the texture images in software to draw the borders on top of them and after that pass the modified (sw "bordered") texture data to the shaders; But I want to do this in hardware, in the shaders (either vertex or fragment shader or both).
Is this possible? If yes can someone post the GLSL shaders code for this?
One idea would be to test if either coordinate of the UV is less than 0.1 or greater than 0.9, and then replace the texture texel with a border color if the test is true.