如何在three.js中修复圆角平面上的纹理

Question

我通过合并圆和平面几何图形制作了一个圆角平面。

具有平面颜色的渲染版本效果很好，但纹理会被切碎。

http://jsfiddle.net/28usyw12/

我怀疑我必须以某种方式添加一些提示或定义应如何渲染纹理，但我真的不知道如何。

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 90, 1, 0.1, 1000 );

WIDTH = HEIGHT = 500

renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor( 0xffffff );
renderer.setSize(WIDTH, HEIGHT);

light = new THREE.PointLight(0xffffff);
light.position.set(0,0,100);
scene.add(light);

# 628 × 697


camera.position.z = 5;

document.body.appendChild(renderer.domElement);


meshA = new THREE.Mesh()


makeRoundedCornerPlane = (offset=2, radius=2, smooth=16) ->

    geometry = new THREE.Geometry()

    offset = (offset - radius) / 2
    radius = radius / 4
    smooth = 16

    cornerA = new THREE.CircleGeometry(radius, smooth, (Math.PI * 2 / 4) * 1, Math.PI * 2 / 4);
    matrixA = new THREE.Matrix4();
    matrixA.makeTranslation(0-offset, 0+offset, 0)
    geometry.merge(cornerA, matrixA)

    cornerB = new THREE.CircleGeometry(radius, smooth, (Math.PI * 2 / 4) * 0, Math.PI * 2 / 4);
    matrixB = new THREE.Matrix4();
    matrixB.makeTranslation(0+offset, 0+offset, 0)
    geometry.merge(cornerB, matrixB)

    cornerC = new THREE.CircleGeometry(radius, smooth, (Math.PI * 2 / 4) * 3, Math.PI * 2 / 4);
    matrixC = new THREE.Matrix4();
    matrixC.makeTranslation(0+offset, 0-offset, 0)
    geometry.merge(cornerC, matrixC)

    cornerD = new THREE.CircleGeometry(radius, smooth, (Math.PI * 2 / 4) * 2, Math.PI * 2 / 4);
    matrixD = new THREE.Matrix4();
    matrixD.makeTranslation(0-offset, 0-offset, 0)
    geometry.merge(cornerD, matrixD)

    planeA = new THREE.PlaneGeometry((offset+radius) * 2, offset * 2)
    geometry.merge(planeA)

    planeB = new THREE.PlaneGeometry(offset * 2, (offset+radius) * 2)
    geometry.merge(planeB)

    return geometry

meshA.geometry = makeRoundedCornerPlane(2, 0.5)

meshA.material = new THREE.MeshBasicMaterial
    side:THREE.DoubleSide
    color: new THREE.Color("rgb(255,0,0)")
    #wireframe: true

meshB = new THREE.Mesh()
meshB.geometry = makeRoundedCornerPlane(2, 0.5)

meshB.material = new THREE.MeshBasicMaterial
    side:THREE.DoubleSide
    color: new THREE.Color("rgb(255,0,0)")
    #wireframe: true

texture = new THREE.ImageUtils.loadTexture("/img/initializing.png");
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
meshB.material.map = texture
meshB.material.color = new THREE.Color(0xffffff)

meshB.position.x = -1
meshB.position.y = -1

scene.add(meshA)
scene.add(meshB)

update = ->
    # meshA.scale.x += 0.001
    # meshA.scale.y += 0.001
    meshA.rotation.z += 0.002
    meshA.rotation.y += 0.002
    meshB.rotation.z += 0.002
    meshB.rotation.y += 0.002

render = ->
    renderer.render(scene, camera)

tick = ->
    window.requestAnimationFrame(tick)
    update()
    render()

tick()

Answer 1

您需要修复网格中每个面的 UV 坐标。UV 坐标告诉 GL 如何将图像映射到面部。左上角应具有 UV 坐标 (0,0)，右下角应具有 (1,1)。

一种解决方案是遍历每个面并根据其在空间中的位置为其提供归一化的 UV 坐标，这适用于像您这样的简单示例。您基本上计算形状的边界框以标准化顶点坐标，然后为每个面创建 3 个 UV 坐标（因为每个面都是一个三角形）。

试试这个：http : //jsfiddle.net/MacroMeez/e84y9bbq/1/

remapUVs = (geo) ->
geo.computeBoundingBox()
min = geo.boundingBox.min
max = geo.boundingBox.max
offset = new THREE.Vector2(0 - min.x, 0 - min.y)
size = new THREE.Vector2(max.x - min.x, max.y - min.y)
# Remove the old UVs that were incorrect
geo.faceVertexUvs[0] = []
for face, i in geo.faces
    v1 = geo.vertices[face.a]
    v2 = geo.vertices[face.b]
    v3 = geo.vertices[face.c]
    # Push on a new UV based on its position inside the shape
    geo.faceVertexUvs[0].push [
        new THREE.Vector2((v1.x + offset.x)/size.x, (v1.y + offset.y)/size.y),
        new THREE.Vector2((v2.x + offset.x)/size.x, (v2.y + offset.y)/size.y),
        new THREE.Vector2((v3.x + offset.x)/size.x, (v3.y + offset.y)/size.y)
    ]
geo.uvsNeedUpdate = true

基于找到的代码THREE.js 生成 UV 坐标

如果您完全熟悉 Blender 或其他 3d 软件，您也可以在那里创建和映射网格，然后导入它而不处理这个。