SkinnedMesh: Implement skinning in a different coordinate space #24479
Description
Environment
Code
Added midObj to set the offset.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>three-vrm example</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<style>
body {
margin: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script src="https://unpkg.com/[email protected]/build/three.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script>
<script>
// renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );
const offset = 100000.0;
// camera
const camera = new THREE.PerspectiveCamera( 30.0, window.innerWidth / window.innerHeight, 0.1, 30 );
camera.position.set( 0.0, offset, 5.0 );
// camera controls
const controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.screenSpacePanning = true;
controls.target.set( 0.0, offset, 0.0 );
controls.update();
// scene
const scene = new THREE.Scene();
// light
const light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 1.0, 1.0, 1.0 ).normalize();
scene.add( light );
// gltf
const loader = new THREE.GLTFLoader();
loader.crossOrigin = 'anonymous';
loader.load(
// URL of the glb you want to load
'./models/scilly_drophunter_v31.6_Guilty.glb',
// called when the resource is loaded
( gltf ) => {
const midObj = new THREE.Object3D();
scene.add( midObj );
midObj.add( gltf.scene );
midObj.position.copy(new THREE.Vector3( 0, offset, 0 ));
},
// called while loading is progressing
( progress ) => console.log( 'Loading model...', 100.0 * ( progress.loaded / progress.total ), '%' ),
// called when loading has errors
( error ) => console.error( error )
);
// helpers
const gridHelper = new THREE.GridHelper( 10, 10 );
scene.add( gridHelper );
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
// update
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
</script>
</body>
</html>Test 1: offset=0 ==> Correct
Test 2: offset=100000 ==> Bad rendering
