JSFiddle - React, Tailwind, and code Playground

by escapedcat

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 = (sizeX=6, sizeY=4, radius=2, smooth=12) ->

	geometry = new THREE.Geometry()

	radius = radius / 4
	offset = (sizeX - radius) / 2
	offsetX = (sizeX / 2) - radius
	offsetY = (sizeY / 2) - radius


	console.log(offset, offsetX, offsetY, radius)
    
	cornerA = new THREE.CircleGeometry(radius, smooth, (Math.PI * 2 / 4) * 1, Math.PI * 2 / 4);
	matrixA = new THREE.Matrix4();
	matrixA.makeTranslation(0-offsetX, 0+offsetY, 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+offsetX, 0+offsetY, 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+offsetX, 0-offsetY, 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-offsetX, 0-offsetY, 0)
	geometry.merge(cornerD, matrixD)

	planeA = new THREE.PlaneGeometry(sizeX-(2*radius), sizeY)
	geometry.merge(planeA)

	planeB = new THREE.PlaneGeometry(sizeX, sizeY-(2*radius))
	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...