React

by Millieyan

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

<!DOCTYPE html>
<html>
    <title>drum</title>
    <div id="area"></div> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/108/three.min.js">
	</script>
	<script src="https://threejs.org/examples/js/controls/OrbitControls.js">
	</script>
<script>
function Createbass(){
    var bass  = new THREE.Object3D();
    var bassmain = new THREE.Object3D();
        var extrudeSettings = {
            amount: 12,
            steps: 1,
            bevelEnabled: false,
            curveSegments: 128
        };
        var arcShape = new THREE.Shape();
        arcShape.absarc(0, 5, 5, 0, Math.PI * 2, 0, false);
        var holePath = new THREE.Path();
        holePath.absarc(0, 5, 4.8, 0, Math.PI * 2, true);
        arcShape.holes.push(holePath);
        var geometry = new THREE.ExtrudeGeometry(arcShape, extrudeSettings);
        /////////////////////////////////////////////////////////////////////
        material = new THREE.MeshPhongMaterial({
            color: 0xff1234
        });
        mesh = new THREE.Mesh(geometry, material);
        mesh.castShadow = true; mesh.receiveShadow = true;
        mesh.rotation.x = Math.PI / 2
        mesh.position.set(0, 6, -5);
        var topGeometry = new THREE.CircleGeometry(5, 32);
        var topMaterial = new THREE.MeshPhongMaterial({
            color: 0xffffff
        });
        var topMesh = new THREE.Mesh(topGeometry, topMaterial);
        topMesh.castShadow = true; topMesh.receiveShadow = true;
        var buttonMesh = topMesh.clone();
        topMesh.rotation.x = -Math.PI / 2;
        topMesh.position.y = 5.5;
        buttonMesh.rotation.x = Math.PI / 2;
        buttonMesh.position.y = -5.5;
        //////////////////////
        var extrudeSettingsButton = {
            amount: 6,
            steps: 1,
            bevelEnabled: false,
            curveSegments: 128
        };
        var arcShapeButton = new THREE.Shape();
        arcShape.absarc(0, 5, 5, 0, Math.PI * 2, 0, false);
        var holePathButton...