38three.js StandardMaterial和RectAreaLight

https://threejs.org/docs/index.html#api/materials/MeshStandardMaterial

A standard physically based material, using Metallic-Roughness workflow.

Physically based rendering (PBR) has recently become the standard in many 3D applications, such as Unity, Unreal and 3D Studio Max.

This approach differs from older approaches in that instead of using approximations for the way in which light interacts with a surface, a physically correct model is used. The idea is that, instead of tweaking materials to look good under specific lighting, a material can be created that will react 'correctly' under all lighting scenarios.

Three.js中的新型标准化材质,可以制作出金属或者玻璃效果。
能对矩形光源生效,矩形光源也只对MeshStandardMaterial和 MeshPhysicalMaterial
材质生效。RectAreaLight非常的消耗性能,低端的手机会出现卡顿现象。
有几个重要的属性可以设置,再配置过程中应该参考官方文档,因为版本更新比较大,很多书籍和网络教程都过时了。

object.traverse( function ( child ) {
                if ( child.isMesh ) {
                    child.castShadow = true;
                    child.receiveShadow = true;
                    child.material = new THREE.MeshStandardMaterial({
                        color:child.material.color,
                        //reflectivity:0, //反射率 默认1  不适用该材质
                        refractionRatio:0,//环境贴图折射率 默认0.98
                        roughness: 0, //粗糙程度 0镜面 1完全扩散 默认0.5
                        //roughnessMap:texture2,//与 粗糙程度相乘
                        metalness: 0.5, //金属1 塑料0 默认0.5
                        //metalnessMap:texture2,// 金属贴图和金属属性相乘
                        //wireframe:true //测试线框
                    });
                    child.material.side = THREE.DoubleSide;
                }
            } );

RectAreaLight

RectAreaLight emits light uniformly across the face a rectangular plane. This light type can be used to simulate light sources such as bright windows or strip lighting.
intensity光线强度默认为1,可以设置大于1的值。

var width = 10;
var height = 10;
var intensity = 10;
var rectLight = new THREE.RectAreaLight( 0xffffff, intensity,  width, height );
rectLight.position.set( 5, 5, 0 );
rectLight.lookAt( 0, 0, 0 );
scene.add( rectLight )

rectLightHelper = new THREE.RectAreaLightHelper( rectLight );
scene.add( rectLightHelper );

你可能感兴趣的:(38three.js StandardMaterial和RectAreaLight)