JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.js"></script>
CoffeeScript
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)
remapUVs(geometry)
return geometry
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 =...