three.js学习笔记1

1.webgl_animation_keyframes

1.增强环境光
const pmremGenerator = new THREE.PMREMGenerator( renderer );
scene.environment = pmremGenerator.fromScene( new RoomEnvironment( renderer ), 0.04 ).texture;

2.动画混合器
const clock = new THREE.Clock();
mixer = new THREE.AnimationMixer( model );
mixer.clipAction( gltf.animations[ 0 ] ).play();

function animate() {

		const delta = clock.getDelta();

		mixer.update( delta );

			}

2.webgl_animation_skinning_blending

// 1.设置雾效
const color = 0xFFFFFF; // 雾的颜色，白色
const near = 1; // 雾效开始的距离
const far = 100; // 雾效完全覆盖的距离
scene.fog = new THREE.Fog(color, near, far);

//2.THREE.HemisphereLight 是 Three.js 中的一种光源，用于模拟天空和地面光照
THREE.HemisphereLight 的参数
skyColor (Integer): 上方光源的颜色。
groundColor (Integer): 下方光源的颜色。
intensity (Number): 光源的强度。

const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x8d8d8d, 3 );
hemiLight.position.set( 0, 20, 0 );
scene.add( hemiLight );


//3.THREE.DirectionalLight 是 Three.js 中的一种光源，模拟从一个特定方向发出的平行光。这种光源常用于模拟太阳光，因为它照射在场景中的所有物体上，且光线是平行的。

//4.Material
BasicMaterial：最简单的材质，没有光照效果，只有一种基本颜色。

LambertMaterial：Lambert 材质是一种经典的用于表现暗淡表面的材质，不会产生光亮效果。

PhongMaterial：Phong 材质是一种用于表现金属和光滑表面的材质，具有光泽效果。

StandardMaterial：标准材质是基于物理渲染的材质，具有更高的视觉真实感，支持镜面反射、折射等效果。

PhysicalMaterial：物理材质是标准材质的扩展，提供更多的物理属性和参数，例如金属度（metalness）和粗糙度（roughness）。

ToonMaterial：卡通材质是一种用于模拟卡通风格的材质，通常具有扁平的着色效果。

ShaderMaterial：着色器材质允许用户编写自定义的着色器程序，以实现更复杂的渲染效果。

SpriteMaterial：精灵材质用于渲染 2D 精灵，常用于 UI 元素或粒子效果。

//5.骨骼
skeleton = new THREE.SkeletonHelper( model );
skeleton.visible = false;
scene.add( skeleton );