The vertexUv in three.js is currently undefined and needs to be

Question

The vertexUv in three.js is currently undefined and needs to be

I'm currently facing an issue while trying to combine multiple meshes, one of which is created by inputting the vertices coordinates. This specific mesh is causing the following error:

THREE.DirectGeometry.fromGeometry(): Undefined vertexUv 256

While this mesh seems to work fine on its own, it encounters problems when merged with another mesh.

Is there a solution to this problem? I have already attempted to add computeVertexNormals but it did not resolve the issue.

width = window.innerWidth
height = window.innerHeight

// Additional JavaScript code for creating and rendering 3D objects using Three.js library

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

javascript three.js

Answer 1

Answer №1

The error message

THREE.DirectGeometry.fromGeometry(): Undefined vertexUv

Implies that the texture coordinates are missing.

To resolve this error, you need to define texture coordinates similar to how you define the vertex coordinates:

p  = [[4, 4], [-4, 4], [4, -4], [-4, -4]]
uv = [[1, 1], [ 0, 1], [1,  0], [ 0,  0]]

The texture coordinates must be added per face to Geometry.faceVertexUvs[0]

var sq = new THREE.Geometry()

for (i=0; i<4; i++) {
    c = p[i]
    sq.vertices.push(new THREE.Vector3(c[0],0,c[1]))
}

sq.faces.push( new THREE.Face3( 0, 1, 2 ) )
sq.faces.push( new THREE.Face3( 1, 3, 2 ) )

sq.faceVertexUvs[0] = [];
for (var i = 0; i < sq.faces.length ; i++) {

    var i0 = sq.faces[i].a,  
        i1 = sq.faces[i].b, 
        i2 = sq.faces[i].c;

    sq.faceVertexUvs[0].push([
        new THREE.Vector2(uv[i0][0], uv[i0][1]),
        new THREE.Vector2(uv[i1][0], uv[i1][1]),
        new THREE.Vector2(uv[i2][0], uv[i2][1])
    ]);
}

width = window.innerWidth
height = window.innerHeight

renderer = new THREE.WebGLRenderer({antialias: true})
renderer.setClearColor(0x8e8ed7)
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(width, height)
document.body.appendChild(renderer.domElement)

scene = new THREE.Scene()
camera = new THREE.PerspectiveCamera(35, width / height, 0.1, 3000)
camera.position.set(0, -100, 50)

controls = new THREE.OrbitControls(camera, renderer.domElement)
controls.minDistance = 40
controls.maxDistance = 1300

scene.add(camera, new THREE.AmbientLight(0xffffff, 0.48))
light = new THREE.PointLight(0xffffff, 0.55)

light.position.copy( camera.position )
light.position.y -= 80
light.position.x += 100
camera.add(light)

requestAnimationFrame(function animate(){
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
})

function resize() {

    var aspect = window.innerWidth / window.innerHeight
    renderer.setSize(window.innerWidth, window.innerHeight)
    camera.aspect = aspect
    camera.updateProjectionMatrix()
    //controls.handleResize()
  }
window.onresize = resize

material = new THREE.MeshPhongMaterial({color: 0xFF7E14, specular: 0x111111, shininess: 75})

tube_a = new THREE.Mesh(new THREE.CylinderGeometry(6,6,20,32,1,true,0,-6.3))
tube_a.geometry.computeVertexNormals();

tube_b = new THREE.Mesh(new THREE.CylinderGeometry(8,8,20,32,1,true))
ring = new THREE.Mesh(new THREE.RingGeometry(6,8,32))

var geom = new THREE.Geometry()

ta1 = tube_a.clone()
geom.mergeMesh(ta1)
tb1 = tube_b.clone()
geom.mergeMesh(tb1)
r = ring.clone()
r.position.y += 10
r.rotateX((27*Math.PI)/18)
geom.mergeMesh(r)
r = ring.clone()
r.position.y -= 10
r.rotateX((9*Math.PI)/18)
geom.mergeMesh(r)
geom.mergeVertices()

p  = [[4, 4], [-4, 4], [4, -4], [-4, -4]]
uv = [[1, 1], [ 0, 1], [1,  0], [ 0,  0]]

var sq = new THREE.Geometry()

for (i=0; i<4; i++) {
  c = p[i]
  sq.vertices.push(new THREE.Vector3(c[0],0,c[1]))
}

sq.faces.push( new THREE.Face3( 0, 1, 2 ) )
sq.faces.push( new THREE.Face3( 1, 3, 2 ) )

sq.faceVertexUvs[0] = [];
for (var i = 0; i < sq.faces.length ; i++) {

  var i0 = sq.faces[i].a,  
      i1 = sq.faces[i].b, 
      i2 = sq.faces[i].c;

  sq.faceVertexUvs[0].push([
      new THREE.Vector2(uv[i0][0], uv[i0][1]),
      new THREE.Vector2(uv[i1][0], uv[i1][1]),
      new THREE.Vector2(uv[i2][0], uv[i2][1])
  ]);
}

sq.computeVertexNormals()
//sq.computeFaceNormals()

sq = new THREE.Mesh(sq)
sq.position.y -= 10
geom.mergeMesh(sq)

scene.add(new THREE.Mesh(geom, material))

function resize() {
    
    var aspect = window.innerWidth / window.innerHeight;
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = aspect;
    camera.updateProjectionMatrix();
    //controls.handleResize();
  }

window.onresize = resize;

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Answer 2

The error message

THREE.DirectGeometry.fromGeometry(): Undefined vertexUv

Implies that the texture coordinates are missing.

To resolve this error, you need to define texture coordinates similar to how you define the vertex coordinates:

p  = [[4, 4], [-4, 4], [4, -4], [-4, -4]]
uv = [[1, 1], [ 0, 1], [1,  0], [ 0,  0]]

The texture coordinates must be added per face to Geometry.faceVertexUvs[0]

var sq = new THREE.Geometry()

for (i=0; i<4; i++) {
    c = p[i]
    sq.vertices.push(new THREE.Vector3(c[0],0,c[1]))
}

sq.faces.push( new THREE.Face3( 0, 1, 2 ) )
sq.faces.push( new THREE.Face3( 1, 3, 2 ) )

sq.faceVertexUvs[0] = [];
for (var i = 0; i < sq.faces.length ; i++) {

    var i0 = sq.faces[i].a,  
        i1 = sq.faces[i].b, 
        i2 = sq.faces[i].c;

    sq.faceVertexUvs[0].push([
        new THREE.Vector2(uv[i0][0], uv[i0][1]),
        new THREE.Vector2(uv[i1][0], uv[i1][1]),
        new THREE.Vector2(uv[i2][0], uv[i2][1])
    ]);
}

width = window.innerWidth
height = window.innerHeight

renderer = new THREE.WebGLRenderer({antialias: true})
renderer.setClearColor(0x8e8ed7)
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(width, height)
document.body.appendChild(renderer.domElement)

scene = new THREE.Scene()
camera = new THREE.PerspectiveCamera(35, width / height, 0.1, 3000)
camera.position.set(0, -100, 50)

controls = new THREE.OrbitControls(camera, renderer.domElement)
controls.minDistance = 40
controls.maxDistance = 1300

scene.add(camera, new THREE.AmbientLight(0xffffff, 0.48))
light = new THREE.PointLight(0xffffff, 0.55)

light.position.copy( camera.position )
light.position.y -= 80
light.position.x += 100
camera.add(light)

requestAnimationFrame(function animate(){
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
})

function resize() {

    var aspect = window.innerWidth / window.innerHeight
    renderer.setSize(window.innerWidth, window.innerHeight)
    camera.aspect = aspect
    camera.updateProjectionMatrix()
    //controls.handleResize()
  }
window.onresize = resize

material = new THREE.MeshPhongMaterial({color: 0xFF7E14, specular: 0x111111, shininess: 75})

tube_a = new THREE.Mesh(new THREE.CylinderGeometry(6,6,20,32,1,true,0,-6.3))
tube_a.geometry.computeVertexNormals();

tube_b = new THREE.Mesh(new THREE.CylinderGeometry(8,8,20,32,1,true))
ring = new THREE.Mesh(new THREE.RingGeometry(6,8,32))

var geom = new THREE.Geometry()

ta1 = tube_a.clone()
geom.mergeMesh(ta1)
tb1 = tube_b.clone()
geom.mergeMesh(tb1)
r = ring.clone()
r.position.y += 10
r.rotateX((27*Math.PI)/18)
geom.mergeMesh(r)
r = ring.clone()
r.position.y -= 10
r.rotateX((9*Math.PI)/18)
geom.mergeMesh(r)
geom.mergeVertices()

p  = [[4, 4], [-4, 4], [4, -4], [-4, -4]]
uv = [[1, 1], [ 0, 1], [1,  0], [ 0,  0]]

var sq = new THREE.Geometry()

for (i=0; i<4; i++) {
  c = p[i]
  sq.vertices.push(new THREE.Vector3(c[0],0,c[1]))
}

sq.faces.push( new THREE.Face3( 0, 1, 2 ) )
sq.faces.push( new THREE.Face3( 1, 3, 2 ) )

sq.faceVertexUvs[0] = [];
for (var i = 0; i < sq.faces.length ; i++) {

  var i0 = sq.faces[i].a,  
      i1 = sq.faces[i].b, 
      i2 = sq.faces[i].c;

  sq.faceVertexUvs[0].push([
      new THREE.Vector2(uv[i0][0], uv[i0][1]),
      new THREE.Vector2(uv[i1][0], uv[i1][1]),
      new THREE.Vector2(uv[i2][0], uv[i2][1])
  ]);
}

sq.computeVertexNormals()
//sq.computeFaceNormals()

sq = new THREE.Mesh(sq)
sq.position.y -= 10
geom.mergeMesh(sq)

scene.add(new THREE.Mesh(geom, material))

function resize() {
    
    var aspect = window.innerWidth / window.innerHeight;
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = aspect;
    camera.updateProjectionMatrix();
    //controls.handleResize();
  }

window.onresize = resize;

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

The vertexUv in three.js is currently undefined and needs to be

Answer №1

Similar questions

Transferring data from SocketIO to Vue.js

Calculating the time difference between two dates in the format yyyy-MM-ddTHH:mm:ss.fffffff can be done by following these steps

Relaying event arguments from client-side JavaScript to server-side code-behind through ClientScript.GetPostBackEventReference

Unable to retrieve data from PHP using AJAX request

Unable to use jQuery to delete class from an element

Using NextJS to navigate user journey by mapping an array of values from Formik to

The function .css() in jQuery is malfunctioning

Why are there red squiggly lines appearing on properly written JavaScript code in Visual Studio Code?

Include scrollView on smaller screens based on conditions

Would it be possible to continuously send multiple documents to MongoDB using a loop?

Executing Node.js Function from an External File Dynamically

Ways to implement real-time search feature in Rails 4.2

Timing of Vue mounting and initialization phases

Oops! Make sure to explicitly allow the dependency @types/html2canvas by adding it to the "allowedNonPeerDependencies" option

Creating a jQuery countdown script

Custom directives are designed to receive arrays as string inputs

Limit the input to numbers when pasting into Angular

Combining three.js geometry and selecting objects with an octree

Attempting to establish a cookie from the server end, however, it is not being successfully set on my client

Displaying and Concealing Messages with VueJS