title: three.js: Undefined vertexUv
body: <p>I'm trying to merge together some meshes, including one that's  formed by inputting the vertices co-ordinates. That one causes the error </p>
  
  <blockquote>
    <p>THREE.DirectGeometry.fromGeometry(): Undefined vertexUv  256</p>
  </blockquote>
  
  <p>It seems to be fine on it's own, but it doesn't like being merged with something else.</p>
  
  <p>Is there a way to fix this? I tried adding <code>computeVertexNormals</code> but that didn't help.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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]]
  
  var sq = new THREE.Geometry()
  
  for (i=0; i&lt;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.computeVertexNormals()
  sq = new THREE.Mesh(sq)
  sq.position.y -= 10
  geom.mergeMesh(sq)
  
  scene.add(new THREE.Mesh(geom, material))</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://threejs.org/build/three.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://threejs.org/examples/js/controls/OrbitControls.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>