JSFiddle - React, Tailwind, and code Playground

by jrj2211

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.min.js"></script>
<canvas id="canvas" style='width:100vw;height:100vh;'></canvas>

JavaScript

class Joint {
            constructor(length) {
                this.position = new THREE.Vector2(0,0);
                this.effectorPosition =  new THREE.Vector2(0,0);
                this.next = null;
                this.prev = null;
                this.length = length;
                this.angleConstraints = null;
                this.lengthLimits = null;
                this.direction = new THREE.Vector2(1,0);
                this.update();
            }

            appendJoint(joint) {
                var last = this.getEndJoint();
                last.next = joint;
                joint.prev = last;
                joint.update();
                return joint;
            }

            update() {
                if(this.prev) {
                    this.position = this.prev.effectorPosition;
                }
                this.localPosition = this.direction.clone().multiplyScalar(this.length);
                
                this.effectorPosition = this.position.clone();
                console.log(this.localPosition, this.effectorPosition);
                this.effectorPosition.add(this.localPosition);
            }

            setRootPosition(position) {
                this.position = position;
                this.update();
            }

            backward() {
                // Make copies of the current start and end locations
                var p1 = this.effectorPosition.clone();
                var p2 = this.position.clone();

                // Allow the length to shrink or expand if set
                if(this.lengthLimits) {
                    var magnitude = p1.distanceTo(p2);
                    this.length = THREE.Math.clamp(magnitude, this.lengthLimits[0], this.lengthLimits[1]);
                }

                // Get the new end position
                p2.sub(p1);
                p2.normalize();
                p2.multiplyScalar(this.length);

                // Set the new start position
                this.position =...