运动服饰网站建设预算,石家庄做网站那家好,低代码开发平台公司,如何给公司做网站参考资料
PBR材质简介…三维软件导出PBR材质属性
知识点
注#xff1a;基于Three.jsv0.155.0
PBR材质简介PBR材质金属度和粗糙度#xff1a;metalness、roughness环境贴图.envMap(金属效果)#xff1a;CubeTextureLoader、envMapIntensityMeshPhysicalMaterial清漆层基于Three.jsv0.155.0
PBR材质简介PBR材质金属度和粗糙度metalness、roughness环境贴图.envMap(金属效果)CubeTextureLoader、envMapIntensityMeshPhysicalMaterial清漆层clearcoat、clearcoatRoughness物理材质透光率.transmission、折射率.ior三维软件导出PBR材质属性
PBR材质简介
所谓PBR就是基于物理的渲染(physically-based rendering) 网格模型材质 MeshLambertMaterial: Lambert光照模型(漫反射)MeshPhongMaterialPhong光照模型(漫反射、高光反射)MeshStandardMaterial和MeshPhysicalMaterial基于物理的光照模型(微平面理论、能量守恒、菲涅尔反射…) PBR材质相比MeshLambertMaterial和MeshPhongMaterial可以提供更逼真的、更接近生活中的材质效果当然也会占用更多的电脑硬件资源。 通过MeshPhysicalMaterial文档提供的资源可以查看多个PBR材质的案例效果系统课程中轿车展示案例也会用到PBR材质 渲染占用资源和表现能力 占用渲染资源 MeshBasicMaterial MeshLambertMaterial MeshPhongMaterial MeshStandardMaterial MeshPhysicalMaterial 渲染表现能力 MeshBasicMaterial MeshLambertMaterial MeshPhongMaterial MeshStandardMaterial MeshPhysicalMaterial
代码实现
!DOCTYPE html
html langen
headmeta charsetUTF-8titleThree.js/title
/headbody/body!-- 具体路径配置你根据自己文件目录设置我的是课件中源码形式 --script typeimportmap{imports: {three: ./js/three.module.js,three/addons/: ../three.js/examples/jsm/}}/scriptscript typemoduleimport * as THREE from three;import { OrbitControls } from three/addons/controls/OrbitControls.js;import { GLTFLoader } from three/addons/loaders/GLTFLoader.js;const width window.innerWidthconst height window.innerHeight// 场景const scene new THREE.Scene();const cubeTexture new THREE.CubeTextureLoader().setPath(./img/环境贴图3/).load([px.jpg, nx.jpg, py.jpg, ny.jpg, pz.jpg, nz.jpg])const loader new GLTFLoader();// 加载工厂文件loader.load(assets/金属.glb, function(gltf) {// 模型const model gltf.scene;// 遍历模型model.traverse(function(child){// 判断是否为网格if(child.isMesh){// 设置材质child.material new THREE.MeshStandardMaterial({metalness: 1.0,//金属度属性roughness: 0.5,//粗糙度属性envMap: cubeTexture,//环境贴图envMapIntensity: 0.5,//环境贴图强度})}});scene.add(model);})const loader2 new GLTFLoader();// 加载工厂文件loader2.load(assets/轿车.glb, function(gltf) {// 模型const model gltf.scene;model.position.set(100, 100, 100);console.log( ~ file: 7PBR材质与纹理贴图.html:61 ~ loader2.load ~ model:, model)var waike model.getObjectByName(外壳01)waike.material new THREE.MeshPhysicalMaterial({color: waike.material.color,clearcoat: 1.0, //物体表面清漆层或者说透明涂层的厚度clearcoatRoughness: 0.1, //物体表面清漆的粗糙度metalness: 0.5, //金属度属性roughness: 0.5, //粗糙度属性envMap: cubeTexture,//环境贴图envMapIntensity: 0.5,//环境贴图强度})var boli model.getObjectByName(玻璃01)boli.material new THREE.MeshPhysicalMaterial({color: boli.material.color,transmission: 1, //透射属性ior:1.5,//折射率metalness: 0.0, //金属度属性roughness: 0, //粗糙度属性envMap: cubeTexture,//环境贴图envMapIntensity: 0.5,//环境贴图强度})scene.add(model);})// 点光源const pointLight new THREE.PointLight( 0xffffff, 1.0, 0, 0);pointLight.position.set(200, 200, 200 );scene.add( pointLight );// 环境光const ambientLight new THREE.AmbientLight( 0xffffff, 1);scene.add( ambientLight );// 坐标系const axes new THREE.AxesHelper(200);scene.add(axes);// 相机const camera new THREE.PerspectiveCamera(75, width/height, 0.1, 3000);camera.position.set(348, 403, 362);camera.lookAt(0, 0, 0);// 渲染器const renderer new THREE.WebGLRenderer();renderer.setSize(width, height);renderer.render(scene, camera);document.body.appendChild(renderer.domElement);renderer.outputColorSpace THREE.SRGBColorSpace;//设置为SRGB颜色空间const controls new OrbitControls(camera, renderer.domElement);// 渲染循环function render() {renderer.render(scene, camera);// console.log( ~ file: 7PBR材质与纹理贴图.html:110 ~ render ~ camera:, camera.position)requestAnimationFrame(render);}render();// 控制器controls.addEventListener(change, () {// 因为动画渲染了所以这里可以省略renderer.render(scene, camera);});/script
/html
