播放动画

js

scene = new THREE.Scene();
new RGBELoader().setPath( 'textures/equirectangular/' ).load( 'royal_esplanade_1k.hdr', function ( texture ) {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  scene.background = texture;
  scene.environment = texture;
  
  // model
  new GLTFLoader().setPath( 'models/gltf/' ).setDRACOLoader( new DRACOLoader().setDecoderPath( 'jsm/libs/draco/gltf/' ) ).load( 'IridescentDishWithOlives.glb', function ( gltf ) {
    mixer = new THREE.AnimationMixer( gltf.scene );
    mixer.clipAction( gltf.animations[ 0 ] ).play();
    scene.add( gltf.scene );
  } );
} );

改变材质

js 代码

scene = new THREE.Scene();
const loader = new GLTFLoader().setPath( 'models/gltf/MaterialsVariantsShoe/glTF/' ).load( 'MaterialsVariantsShoe.gltf', function ( gltf ) {
  // ...
  scene.add( gltf.scene );
  const variantsExtension = gltf.userData.gltfExtensions[ 'KHR_materials_variants' ];
  let variantName = 'midnight';
  const variantIndex = variantsExtension.variants.findIndex( ( v ) => v.name.includes( variantName ) );
  const parser = gltf.parser;

  scene.traverse( async ( object ) => {
    if ( ! object.isMesh || ! object.userData.gltfExtensions ) return;
    const meshVariantDef = object.userData.gltfExtensions[ 'KHR_materials_variants' ];
    if ( ! meshVariantDef ) return;
    if ( ! object.userData.originalMaterial ) {
	  object.userData.originalMaterial = object.material;
    }
    const mapping = meshVariantDef.mappings.find( ( mapping ) => mapping.variants.includes( variantIndex ) );
    if ( mapping ) {
	  object.material = await parser.getDependency( 'material', mapping.material );
	  parser.assignFinalMaterial( object );
    } else {
	  object.material = object.userData.originalMaterial;
    }
    render();
  });
});

gltf 模型

• 创建以下材质: diffuseMidnight.jpg
• 物体增加 glTF Material Variants: midnight

操作指定物体的光泽

js

scene = new THREE.Scene();
new GLTFLoader() .setPath( 'models/gltf/' ) .load( 'SheenChair.glb', function ( gltf ) {
  scene.add( gltf.scene );
  const object = gltf.scene.getObjectByName( 'SheenChair_fabric' );
  const gui = new GUI();
  gui.add( object.material, 'sheen', 0, 1 );
  gui.open();
} );