I have a problem with rendering a texture on a ShapeGeometry. First a little background on the problem.
I am attempting to render a SVG path with a texture using Three.js. I already managed to render the path properly. The problem is with the texture:
http://s14.postimage.org/9xifetrf5/scene.png
The Cube renders the texture properly, where the Shape in the corner appears to render without the texture
After a very big zoom the texture can be noticed, but it's scaled down:
http://s9.postimage.org/9fof5f3sv/close_up.png
Both objects are similar in size and both use the same material. I suspect that this is a problem with the UV mapping, but I am not sure how to calculate the UV map, any information on the subject would be great.
The code for loading the texture looks like this:
texture = t.ImageUtils.loadTexture "/images/#{pe.element.element_id}/top.png"
texture.wrapS = texture.wrapT = THREE.RepeatWrapping
texture.repeat.set(1, 1)
mat = new t.MeshBasicMaterial
map: texture
overdraw: true
side: t.DoubleSide
I'm using Revision 54 of Three.js
https://github.com/mrdoob/three.js/blob/master/src/extras/geometries/CubeGeometry.js#L126
Check out the example for Cube Geometry, if you answer the questions posed above it would be easier but I suspect that you need to set the UV (at line 94 in example).
Related
I'm trying to apply a texture of a little window repeated to the buildings I get from the example code:
https://maptalks.org/maptalks.three/demo/vectortilelayer-mvt.html
What I would like to do is to have one window (png 64x64) repeated in the buildings sides
I'm trying to put this texture:
texture.offset.set(0,0);
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(1,1);
var buildMaterial = new THREE.MeshPhongMaterial( { map: texture });
The problem is the texture is applied wrong in some buildings like stretch and all the windows are not the same for all the buildings that's the thing I would like to achieve.
I know the buildings mesh tile are made with a THREE.BufferGeometry of several buildings (extracted from the feature of the geojson data) and then created a Mesh with that BufferGeometry and then apply the material.
On the attached image you can see with red the wrong texture mapping and green what I would like to see.
Image of the texture mapping issues
Hope you can help me with this! Or maybe you know a code of getting the buildings with texture with maptalks.
I have a project with 360 scene - camera is inside the sphere and 360 photo is wrapped as texture around the sphere:
http://kitchen-360.herokuapp.com/
I added several smaller spheres with transparent textures and Im seeing sudden drop of performance. It is 'fill bound' issue as described in this link:
Debugging low FPS in Three.js
Im trying to solve this performance issue. Im thinking of having only one sphere with multiple textures on it. Is this gonna be faster then stacked spheres with one texture each?
I tried to create sphere mesh with array of MeshBasicMaterial but its not working. Only first texture in the array is visible:
// when texture is loaded I push it to array
var sphereMaterial = new THREE.MeshBasicMaterial({
map: texture,
side: THREE.DoubleSide
})
sphereMaterial.transparent = true;
matArr.push(sphereMaterial);
//... then later when all textures loaded
roomMesh = new THREE.Mesh( sphereGeometryR, matArr );
roomMesh.name = 'great room';
scene.add( roomMesh );
I saw this example for custom shader but dont know how to add and change textures dynamically at later time:
Multiple transparent textures on the same mesh face in Three.js
Is there any other way to optimize this problem? Would geometry merge help here?
I am rendering a sphere using a threejs lib for react "import * as THREE from 'three';".
The sphere renders fine, as does the texture.
I have an image that's being loaded just fine, and it wraps the entirety of the sphere.
The question: how can I repeat the image across the sphere? In my specific example, imagine I have an image of half a face. Per hemisphere, I would like to mirror that image, so that I would have two symmetrical faces on each side of the sphere, looking outwards. Brand new to threejs, any help is appreciated!
Maybe set repeat on the Texture.
eg.
// load a texture, set wrap mode to repeat
var texture = new THREE.TextureLoader().load( "textures/water.jpg" );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 4, 4 );
I want the sprite in the scene don't change the size when the camera zoom in or out. and the sprites use different canvas texture as the material.
I found that the sizeAttenuation in ParticleBasicMatierial can work for me. But if I use the WenGLRenderer, I must use ParticleSystem instead of the Particle with the CanvasRenderer.
I currently use ParticleSystem to contain only one vertex, and every vertex correspond to one ParticleSystem, so there are about 800+ ParticleSystem in my scene, this can work, but consume a lot.
Obviously, I can't use "HUD" as the example in three.js source, because the sprites are all in 3D scene.
Can some one help me. Or add the sizeAttenuation to Sprite Material! Thanks!
If you want to prevent size attenuation with sprites, and you are using a perspective camera, you can set the sizeAttenuation property of your material to false:
var material = new THREE.SpriteMaterial( {
color: 0xffffff,
map: texture,
sizeAttenuation: false
} );
This feature was added in three.js r.96.
EDIT: Updated to three.js r.96
I have a mesh that i am loading from 3d studio max into three.js. I modified three.js to hold another typed array for the binormal data. It all seems to be working fine and dandy until shadows are involved. For some reason, the shadow map is wrong, and it seems as if its rendering the mesh with faces flipped.
In this example, the shadows are showing up correctly on the floor, because the renderer has
.shadowMapCullFace = THREE.CullFaceBack
http://dusanbosnjak.com/test/webGL/new/StojadinCeo/stojadinCeo.html
I can get other shadows to show up on my shader, but self shadowing leads to horrible artifacts, and the shadow that my mesh casts on other meshes is always inverted.
I've tried reversing the order in which the face indecis come in, (acb instead of abc), which flips the faces. This creates proper shadow cast, but the mesh shows flipped.
What im thinking of doing at the moment is exporting a flipped mesh, and reversing the cull order in the shaderMaterial, but it would be wonderful to find out why this is happening.
I basically connected the phong and shadow mapping shader chunks with what i've had.
edit
Here is an updated scene with some shadow casters and receive shadows on imported meshes
http://dusanbosnjak.com/test/webGL/new/StojadinCeo/stojadinCeo2.html
light = new THREE.SpotLight(0xaaaaaa);
light.position.set(10,10,10);
light.shadowCameraVisible = true;
light.shadowDarkness = .5;
light.castShadow = true;
light.shadowCameraNear = 1;
light.shadowCameraFar = 250;
light.shadowCameraFov = 57;
light.shadowMapWidth = 2048;
light.shadowMapHeight = 2048;
scene.add(light);
the rest of the meshes just have receiveShadow and castShadow set to true
The shadow shows on the shaderMaterial (i copied the shadowfrag chunk)
THREE.Mesh() with THREE.CubeGeometry() both casts shadows and receives shadows properly, but the shadow cast by the shaderMaterial mesh is inverted.
I can't really isolate this to 50 lines of code as it's a whole import/export process from max.
I don't understand why would the shadow camera render this one particular mesh inverted, while the normal camera renders it correctly, if that is what is happening?
You can zoom out and move the car using wasd
Unless you changed the default settings in three.js, only back-faces cast shadows. A work-around is to set:
renderer.shadowMapCullFace = THREE.CullFaceBack;
or
renderer.shadowMapCullFace = THREE.CullFaceNone;
But these options can lead to other issues.
The best approach is to make sure every mesh has depth. Avoid planes, like the car roof.
For example, you can add an interior liner to the car roof to give it depth.
Shadow mapping in WebGL can be tricky, so read all you can about it so you will be familiar with the issues involved.
three.js r.66