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?
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 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'm using BufferGeometry to draw triangles.
I can use a mesh geometry, specifiyng 3 index-attribute for every triangle. I'm using a basic material without wireframe. I suposse I'll can use raycast.
Also I have seen the linesegments approach for wireframe. Interesting.
Ok, my problem... I'd like to see my triangles as a wireframe and also I need raycast. So .... the solution is to create my own shader, isn't it ?
Thanks
you dont have to create a custom shader you can have a mesh with wireframe material, and the ray should still "hit" the object
var mesh = new THREE.Mesh(geometry,new THREE.MeshBasicMaterial({wireframe : true}));
if it for some reason does not hit or you want to LineSegments object you can keep track of all transformations that affected the object, and apply them onto a mesh you wont add to scene
var segmentObject = new THREE.LineSegments(geometry,lineMaterial);
scene.add(segmentObject);
var meshNotInScene = new THREE.Mesh(geometry,dummyMaterial);
and you will use the mesh object to determine if raycast hit the object
this way you can have a different hitbox for an object for example if you have a flying donut by pairing it with a circle mesh you can select it even if you click in its hole etc...
keep in mind that materials have sides and if you dont care about which side is which set "side" to THREE.DoubleSide
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 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).