JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r117/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@r117/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@r117/examples/jsm/libs/tween.module.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/zlibjs@0.3.1/bin/zlib.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@r117/examples/js/loaders/FBXLoader.js"></script>
JavaScript
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const clock = new THREE.Clock();
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
const controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.screenSpacePanning = true;
controls.target.set(0, 1.1, 0);
let mixer;
let modelMesh
camera.position.x = 2;
camera.position.z = 5;
camera.position.y = 2;
addGrid(scene);
const url = "https://threejs.org/examples/models/fbx/Samba Dancing.fbx";
var loaderF = new THREE.FBXLoader();
loaderF.load(
url, function (fbx) {
mixer = new THREE.AnimationMixer( fbx );
const action = mixer.clipAction( fbx.animations[ 0 ] );
console.log(fbx.animations[ 0 ])
action.play();
fbx.scale.set(.022,.022,.022);
fbx.traverse( function ( child ) {
if ( child.isMesh ) {
child.castShadow = true;
child.receiveShadow = true;
}
} );
const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
hemiLight.position.set( 0, 200, 0 );
scene.add( hemiLight );
const dirLight = new THREE.DirectionalLight( 0xffffff...