JSFiddle - React, Tailwind, and code Playground

by Millieyan

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        #info {
            position: absolute;
            top: 0px;
            width: 100%;
            padding: 10px;
            text-align: center;
            color: #ff1f00
        }

        body {
            overflow: hidden;
        }

    </style>
</head>
<body>
<div id="info">demo page</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">
</script>
<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>

<script>
        var camera, scene, renderer, model;

        init();
        animate();

        function buildModel() {
            loader = new THREE.TextureLoader();
            loader.crossOrigin = "";
            texture = loader.load ("https://i.imgur.com/p8CRm9W.jpg");
            texture.wrapS = texture.wrapT = THREE.WrapRepeating;

            var shape = new THREE.Shape ();
            shape.moveTo (0,0);  // xy plane
            shape.lineTo (4.7,0);
            shape.lineTo (4.7, 0.8);
            shape.lineTo (1.65, 2.6);
            shape.lineTo (0,2.6);
            shape.lineTo(0,0);

            var holePath = new THREE.Path();
            holePath.moveTo(1.5, 1.5);
            holePath.absarc(1.5, 1.5, 0.5, 0, Math.PI * 2, true);
            shape.holes.push(holePath);

            var shapeGeo = new THREE.ShapeGeometry(shape);

            var geometry = new THREE.Geometry();
            geometry.vertices.push(
                new THREE.Vector3(0,0,0),               //0
                new THREE.Vector3(0,2.6,0),
                new THREE.Vector3(1.65,2.6,0),
                new THREE.Vector3(4.7,0.8,0),
                new THREE.Vector3(4.7,0,0),
                new THREE.Vector3(1.65,2.6,-1),         //5
                new THREE.Vector3(4.7,0.8,-1),
                new...