I managed to create a unique rounded corner plane by combining circle and plane geometries in my project.
While the flat color in the rendered version looks great, I noticed that the textured part seems to get distorted and chopped up.
If you want to take a look at the code and the project, you can visit this link.
My assumption is that I might need to provide some kind of hint or define the rendering process for the texture, but I'm not entirely sure how to go about it.
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()
generateRoundedCornerPlane = (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 = generateRoundedCornerPlane(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 = generateRoundedCornerPlane(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()