JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="container"></div>
</body>
JavaScript
const THREE = await import("https://cdn.skypack.dev/[email protected]");
const { OrbitControls } = await import(
"https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js"
);
const { GUI } = await import(
"https://cdn.skypack.dev/[email protected]/examples/jsm/libs/lil-gui.module.min.js"
);
const { GLTFLoader } = await import(
"https://cdn.skypack.dev/[email protected]/examples/jsm/loaders/GLTFLoader.js"
);
import * as SkeletonUtils from "https://cdn.skypack.dev/[email protected]/examples/jsm/utils/SkeletonUtils.js";
let scene, renderer, camera, controls;
let animationMixers = [];
let clock = new THREE.Clock();
const loader = new GLTFLoader();
let bodySkeletonHelper;
let shirtSkeletonHelper;
const guiParams = {
showBodySkeletonHelper: true,
showShirtSkeletonHelper: true,
};
init();
function init() {
console.log(`three.js: ${THREE.REVISION}`);
const container = document.getElementById("container");
camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.01,
10
);
camera.position.set(0.98, 1.86, 1.42);
scene = new THREE.Scene();
scene.background = new THREE.Color(0x6666aa);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild(renderer.domElement);
controls = new OrbitControls(camera, renderer.domElement);
controls.enablePan = true;
controls.autoRotate = false;
controls.autoRotateSpeed = 0.635;
controls.enableDamping = true;
controls.dampingFactor = 0.1;
controls.target.set(0, 1, 0);
const ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);
const floor_geometry = new THREE.PlaneGeometry(3, 3);
const floor_material = new THREE.MeshPhongMaterial({
color: 0x666699,
...