three.js:未定义的vertexUv

时间:2018-08-01 04:35:14

标签: three.js

我正在尝试将某些网格合并在一起,包括通过输入顶点坐标而形成的网格。那个导致错误

  

THREE.DirectGeometry.fromGeometry():未定义的vertexUv 256

这似乎很好,但它不喜欢与其他东西合并。

是否可以解决此问题?我尝试添加computeVertexNormals,但这没有帮助。

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)
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<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))
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

1 个答案:

答案 0 :(得分:3)

错误消息

  

THREE.DirectGeometry.fromGeometry():未定义的vertexUv

表示缺少纹理坐标。

在定义顶点坐标时,必须定义纹理坐标:

import numpy as np
import matplotlib.cm as cm
import matplotlib.pyplot as plt

data =  np.matrix([[1, 2, 3], [-1, np.nan, -2], [7, -5, -6]])
data_masked = np.ma.array(data, mask=np.isnan(data))
nan_color = 'black' # or 'white' or whatever you like
color = cm.RdBu
color.set_bad(nan_color,1.)
plt.matshow(data_masked, cmap=color)
plt.colorbar()

必须将每个表面的纹理坐标添加到Geometry.faceVertexUvs[0]

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])
    ]);
}
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)
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;