UV-mapping a BufferGeometrys indices in Three.js
I'm having trouble UV mapping each side of a cube. The cube was made as a BufferGeometry where each side is a rotated copy of one side (sort of a working template) and rotated accordingly by applying a quarternion. UVs are copied as well. I'll skip any vertex coordinate I've seen before and rely on indices.
This leaves me with a total of 8 vertices and 12 faces. But I think I'm running short on vertices when I have to set all of my UVs. As obvious on the screenshot I've "correctly" mapped each side of the cube. But the top and bottom is lacking. I don't know how to set the vertex UV top and bottom faces.
Can I in some way apply several UVs on the same vertex depending on which face it is used in or have I completely lost the plot?
I could solve the problem by applying 6 PlaneBufferGeometry but that would leave me with 4*6=24 vertices. That is a whole lot more than 8.
I haven't been able to figure this one out. Either I've complete misunderstood how it works or what I'm trying to accomplish is impossible given my constraints.
With BufferGeometry, vertices can only be reused if all the attributes for that vertex match. Since each corner of the cube has 3 perpendicular normals, there must be 3 copies of that vertex.
If you have uvs, it is the same issue -- vertices must be duplicated if the uvs are different.
Study BoxBufferGeometry, which is implemented as "indexed-BufferGeometry".
three.js r.90
- Render second scene to texture not working
- How to use rendering result of scene as texture in ThreeJS
- 360 degree rotation using orbit controls in threejs?
- How do you update a uniform In Three.js?
- How to add text into along the object using three.js
- raycasting coordinate problems
- React three fiber using different materials on faces of cylinder
- How i can make the object steady 180 degrees?
- Using Three.js, and Rapier physics: Why does this object have a jitter on moving?
- Three.js: change the pivot point of a sprite
- Specify three.js graph size
- How can I see the whole shader's text content, with all the prepended code by Three.js, when using ShaderMaterial or RawShaderMaterial (r148)?
- How to automatically center imported GLTF model and orient camera to show full model in Three.js
- three.js - how to make camera look at an object during a tween
- How to connect two points with a tube in threejs?
- Three.js - Color based on occlusion
- Blazor using typescript and import three.js
- Problem reading generated texture from fragment shader using ThreeJS
- Move object along spline(circle) in Three.js
- Cannot get a simple cube to load using React-Three-Fiber
- Three js line thickness
- Large number of polygons with react-three-fiber
- How to modify UV coordinates with three.js
- Is there a way to only have one instance of THREE when using Threebox
- Error message "Uncaught TypeError: Cannot destructure property 'basename' of 'React2.useContext(...)' as it is null"
- GLTF 3D model isn't animated when it should be
- how to import THREE.InfiniteGridHelper
- Changing three.js background to transparent or other color
- What’s the difference between linear depth, perspective depth, and orthographic depth?
- Three.js breaks when trying to import OrbitControls.js