JSFiddle - React, Tailwind, and code Playground

by A A

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; background: white; }
			canvas { display: block; background: white; }
		</style>
	</head>
	<body>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
    <script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>

<script>
			// Our Javascript will go here.
		</script>
	</body>
</html>

JavaScript

var scene, camera, renderer;
 
//figure
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshNormalMaterial();
var cube = new THREE.Mesh( geometry, material );

//heart
var heartShape = new THREE.Shape();
heartShape.moveTo( 25, 25 );
heartShape.bezierCurveTo( 25, 25, 20, 0, 0, 0 );
heartShape.bezierCurveTo( 30, 0, 30, 35,30,35 );
heartShape.bezierCurveTo( 30, 55, 10, 77, 25, 95 );
heartShape.bezierCurveTo( 60, 77, 80, 55, 80, 35 );
heartShape.bezierCurveTo( 80, 35, 80, 0, 50, 0 );
heartShape.bezierCurveTo( 35, 0, 25, 25, 25, 25 );

var extrudeSettings = { amount: 1, bevelEnabled: true, bevelSegments: 1, steps: 1, bevelSize: 1, bevelThickness: 1 };
var geometry = new THREE.ExtrudeBufferGeometry( heartShape, extrudeSettings );
var mesh = new THREE.Mesh( geometry, new THREE.MeshNormalMaterial() );

//group
var group = new THREE.Group();
group.position.z = 5;
group.add(mesh)

//main
init();
animate();

//init
function init() {
	//scene
	scene = new THREE.Scene();
  
  //camera
	camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10000 );
  renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  scene.add( cube );
  scene.add( group );

	camera.position.z = 5;
}

//controls
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.minPolarAngle = Math.PI/2;
controls.maxPolarAngle = Math.PI/2;

//animate
function animate() {
  requestAnimationFrame( animate );
  render();
};

//render
function render() {
  renderer.render( scene, camera );
};