JSFiddle - React, Tailwind, and code Playground

by Feiyu Yan

HTML

<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>

<script type="importmap">
	{
	"imports": {
		"three": "https://unpkg.com/[email protected]/build/three.module.js",
		"three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
	}
	}
</script>

CSS

body { margin: 0; }
canvas { width: 100%; height: 100% }

JavaScript

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { STLLoader } from 'three/addons/loaders/STLLoader.js';
import { Face } from 'three/addons/math/ConvexHull.js';

let camera, scene, raycaster, renderer, controls;

        let INTERSECTED;
        let prevIndex = -1
        const pointer = new THREE.Vector2();
        var prevColor = new THREE.Color(0xff0000)

        init();
        animate();

        function init() {

            camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.01, 1000);
            camera.position.set(0.3,2, -0.6);

            scene = new THREE.Scene();

            const light = new THREE.DirectionalLight(0xffffff, 1);
            light.position.set(1, 1, 1).normalize();
            scene.add(light);

            const loader = new STLLoader();
            loader.load('https://oss-yanfeiyu.oss-cn-hangzhou.aliyuncs.com/test_model/cube2.stl', function (geometry) {

                const material = new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors, wireframe: false, side: THREE.DoubleSide });
                const mesh = new THREE.Mesh(geometry, material);

                mesh.position.set(0, 0, 0);
                // mesh.rotation.set(- Math.PI / 2, 0, 0);
                // mesh.scale.set(0.001, 0.001, 0.001)
                scene.add(mesh);

                var wire = new THREE.LineSegments(new THREE.WireframeGeometry(mesh.geometry), new THREE.LineBasicMaterial({ color: "black" }));
                mesh.add(wire);



            });

            renderer = new THREE.WebGLRenderer({
                antialias: true
            });
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setClearColor(0x818181);
            document.body.appendChild(renderer.domElement);

            controls = new OrbitControls(camera, renderer.domElement);

  ...