You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
221 lines
6.9 KiB
221 lines
6.9 KiB
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<title>three.js webgl - animation - skinning - ik</title>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
||
|
|
<meta name="author" content="Antoine BERNIER (abernier)" />
|
||
|
|
<link type="text/css" rel="stylesheet" href="main.css">
|
||
|
|
<style>
|
||
|
|
body {color:white;}
|
||
|
|
#info a {
|
||
|
|
color:#4d6675;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="info">
|
||
|
|
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl - inverse kinematics<br />
|
||
|
|
Character model by <a href="https://assetstore.unity.com/packages/3d/characters/humanoids/humans/kira-lowpoly-character-100303" target="_blank" rel="noopener">Aki</a>, furnitures from <a href="https://poly.pizza" target="_blank" rel="noopener">poly.pizza</a>, scene by <a href="https://abernier.name/three.js/examples/webgl_esher.html" target="_blank" rel="noopener">abernier</a>. CC0.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Import maps polyfill -->
|
||
|
|
<!-- Remove this when import maps will be widely supported -->
|
||
|
|
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
|
||
|
|
|
||
|
|
<script type="importmap">
|
||
|
|
{
|
||
|
|
"imports": {
|
||
|
|
"three": "../build/three.module.js",
|
||
|
|
"three/addons/": "./jsm/"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script type="module">
|
||
|
|
import * as THREE from 'three';
|
||
|
|
|
||
|
|
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
||
|
|
import { TransformControls } from 'three/addons/controls/TransformControls.js';
|
||
|
|
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
|
||
|
|
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
|
||
|
|
import { CCDIKSolver, CCDIKHelper } from './jsm/animation/CCDIKSolver.js';
|
||
|
|
import Stats from 'three/addons/libs/stats.module.js';
|
||
|
|
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
|
||
|
|
|
||
|
|
let scene, camera, renderer, orbitControls, transformControls;
|
||
|
|
let mirrorSphereCamera;
|
||
|
|
|
||
|
|
const OOI = {};
|
||
|
|
let IKSolver;
|
||
|
|
|
||
|
|
let stats, gui, conf;
|
||
|
|
const v0 = new THREE.Vector3();
|
||
|
|
|
||
|
|
init().then( animate );
|
||
|
|
|
||
|
|
async function init() {
|
||
|
|
|
||
|
|
conf = {
|
||
|
|
followSphere: false,
|
||
|
|
turnHead: true,
|
||
|
|
ik_solver: true,
|
||
|
|
};
|
||
|
|
|
||
|
|
scene = new THREE.Scene();
|
||
|
|
scene.fog = new THREE.FogExp2( 0xffffff, .17 );
|
||
|
|
scene.background = new THREE.Color( 0xdddddd );
|
||
|
|
|
||
|
|
camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 0.001, 5000 );
|
||
|
|
camera.position.set( 0.9728517749133652, 1.1044765132727201, 0.7316689528482836 );
|
||
|
|
camera.lookAt( scene.position );
|
||
|
|
|
||
|
|
const ambientLight = new THREE.AmbientLight( 0xffffff, 8 ); // soft white light
|
||
|
|
scene.add( ambientLight );
|
||
|
|
|
||
|
|
renderer = new THREE.WebGLRenderer( { antialias: true, logarithmicDepthBuffer: true } );
|
||
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
||
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
||
|
|
renderer.outputEncoding = THREE.sRGBEncoding;
|
||
|
|
renderer.physicallyCorrectLights = true;
|
||
|
|
document.body.appendChild( renderer.domElement );
|
||
|
|
|
||
|
|
stats = new Stats();
|
||
|
|
document.body.appendChild( stats.dom );
|
||
|
|
|
||
|
|
orbitControls = new OrbitControls( camera, renderer.domElement );
|
||
|
|
orbitControls.minDistance = .2;
|
||
|
|
orbitControls.maxDistance = 1.5;
|
||
|
|
orbitControls.enableDamping = true;
|
||
|
|
|
||
|
|
const dracoLoader = new DRACOLoader();
|
||
|
|
dracoLoader.setDecoderPath( 'js/libs/draco/' );
|
||
|
|
const gltfLoader = new GLTFLoader();
|
||
|
|
gltfLoader.setDRACOLoader( dracoLoader );
|
||
|
|
|
||
|
|
const gltf = await gltfLoader.loadAsync( 'models/gltf/kira.glb' );
|
||
|
|
gltf.scene.traverse( n => {
|
||
|
|
|
||
|
|
if ( n.name === 'head' ) OOI.head = n;
|
||
|
|
if ( n.name === 'lowerarm_l' ) OOI.lowerarm_l = n;
|
||
|
|
if ( n.name === 'Upperarm_l' ) OOI.Upperarm_l = n;
|
||
|
|
if ( n.name === 'hand_l' ) OOI.hand_l = n;
|
||
|
|
if ( n.name === 'target_hand_l' ) OOI.target_hand_l = n;
|
||
|
|
|
||
|
|
if ( n.name === 'boule' ) OOI.sphere = n;
|
||
|
|
if ( n.name === 'Kira_Shirt_left' ) OOI.kira = n;
|
||
|
|
|
||
|
|
if ( n.isMesh ) n.frustumCulled = false;
|
||
|
|
|
||
|
|
} );
|
||
|
|
scene.add( gltf.scene );
|
||
|
|
|
||
|
|
orbitControls.target.copy( OOI.sphere.position ); // orbit controls lookAt the sphere
|
||
|
|
OOI.hand_l.attach( OOI.sphere );
|
||
|
|
|
||
|
|
// mirror sphere cube-camera
|
||
|
|
const cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 1024 );
|
||
|
|
mirrorSphereCamera = new THREE.CubeCamera( 0.05, 50, cubeRenderTarget );
|
||
|
|
scene.add( mirrorSphereCamera );
|
||
|
|
const mirrorSphereMaterial = new THREE.MeshBasicMaterial( { envMap: cubeRenderTarget.texture } );
|
||
|
|
OOI.sphere.material = mirrorSphereMaterial;
|
||
|
|
|
||
|
|
transformControls = new TransformControls( camera, renderer.domElement );
|
||
|
|
transformControls.size = .75;
|
||
|
|
transformControls.showX = false;
|
||
|
|
transformControls.space = 'world';
|
||
|
|
transformControls.attach( OOI.target_hand_l );
|
||
|
|
scene.add( transformControls );
|
||
|
|
// disable orbitControls while using transformControls
|
||
|
|
transformControls.addEventListener( 'mouseDown', () => orbitControls.enabled = false );
|
||
|
|
transformControls.addEventListener( 'mouseUp', () => orbitControls.enabled = true );
|
||
|
|
|
||
|
|
OOI.kira.add( OOI.kira.skeleton.bones[ 0 ] );
|
||
|
|
const iks = [
|
||
|
|
{
|
||
|
|
target: 22, // "target_hand_l"
|
||
|
|
effector: 6, // "hand_l"
|
||
|
|
links: [
|
||
|
|
{
|
||
|
|
index: 5, // "lowerarm_l"
|
||
|
|
rotationMin: new THREE.Vector3( 1.2, - 1.8, - .4 ),
|
||
|
|
rotationMax: new THREE.Vector3( 1.7, - 1.1, .3 )
|
||
|
|
},
|
||
|
|
{
|
||
|
|
index: 4, // "Upperarm_l"
|
||
|
|
rotationMin: new THREE.Vector3( 0.1, - 0.7, - 1.8 ),
|
||
|
|
rotationMax: new THREE.Vector3( 1.1, 0, - 1.4 )
|
||
|
|
},
|
||
|
|
],
|
||
|
|
}
|
||
|
|
];
|
||
|
|
IKSolver = new CCDIKSolver( OOI.kira, iks );
|
||
|
|
const ccdikhelper = new CCDIKHelper( OOI.kira, iks, 0.01 );
|
||
|
|
scene.add( ccdikhelper );
|
||
|
|
|
||
|
|
gui = new GUI();
|
||
|
|
gui.add( conf, 'followSphere' ).name( 'follow sphere' );
|
||
|
|
gui.add( conf, 'turnHead' ).name( 'turn head' );
|
||
|
|
gui.add( conf, 'ik_solver' ).name( 'IK auto update' );
|
||
|
|
gui.add( IKSolver, 'update' ).name( 'IK manual update()' );
|
||
|
|
gui.open();
|
||
|
|
|
||
|
|
window.addEventListener( 'resize', onWindowResize, false );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function animate( ) {
|
||
|
|
|
||
|
|
if ( OOI.sphere && mirrorSphereCamera ) {
|
||
|
|
|
||
|
|
OOI.sphere.visible = false;
|
||
|
|
OOI.sphere.getWorldPosition( mirrorSphereCamera.position );
|
||
|
|
mirrorSphereCamera.update( renderer, scene );
|
||
|
|
OOI.sphere.visible = true;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
if ( OOI.sphere && conf.followSphere ) {
|
||
|
|
|
||
|
|
// orbitControls follows the sphere
|
||
|
|
OOI.sphere.getWorldPosition( v0 );
|
||
|
|
orbitControls.target.lerp( v0, .1 );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
if ( OOI.head && OOI.sphere && conf.turnHead ) {
|
||
|
|
|
||
|
|
// turn head
|
||
|
|
OOI.sphere.getWorldPosition( v0 );
|
||
|
|
OOI.head.lookAt( v0 );
|
||
|
|
OOI.head.rotation.set( OOI.head.rotation.x, OOI.head.rotation.y + Math.PI, OOI.head.rotation.z );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
if ( conf.ik_solver ) {
|
||
|
|
|
||
|
|
IKSolver?.update();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
orbitControls.update();
|
||
|
|
renderer.render( scene, camera );
|
||
|
|
|
||
|
|
stats.update(); // fps stats
|
||
|
|
|
||
|
|
requestAnimationFrame( animate );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function onWindowResize() {
|
||
|
|
|
||
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
||
|
|
camera.updateProjectionMatrix();
|
||
|
|
|
||
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|