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;
let skeletonHelper, animationMixer;
let clock = new THREE.Clock();
const guiParams = {
showSkeleton: true,
};
init();
function init() {
const container = document.getElementById('container');
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.set(0.75, 1.85, -0.86);
scene = new THREE.Scene();
scene.background = new THREE.Color(0x66aa66);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.shadowMap.enabled = true;
container.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
controls.enablePan = false;
controls.enableDamping = true;
controls.dampingFactor = 0.1;
controls.target.set(0, 1, 0);
scene.add(new THREE.GridHelper(400, 1000));
const gui = new GUI();
gui.add(guiParams, 'showSkeleton')
.name('Show skeleton')
.onChange(function (value) {
skeletonHelper.visible = value;
});
const loader = new GLTFLoader();
loader.load('https://raw.githubusercontent.com/mrdoob/three.js/master/examples/models/gltf/Soldier.glb', function (gltf) {
const model = gltf.scene
const material = new THREE.MeshNormalMaterial();
...