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 );
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 have a set of objects that I'd like to always be visible, even if they're occluded by another object. They objects are meshes, not particles or sprites. Here's a screenshot of the effect I'm trying to mimic. This was done in C++ and OpenGL:
Notice the red and green triangles as well as the black lines (and the text, for that matter). They all lie on the ground plane, but they're visible even though the green machine is closer.
Can I force visbility with Three.js?
you can accomplish this by disabling the depth test of the material. this means its always rendered in front of everything.
var material = new THREE.MeshBasicMaterial({color: 0xFF0000});
material.depthTest = false;
var mesh = new THREE.Mesh(new THREE.BoxGeometry(5, 5), material);
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).
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;