做水果的有什么网站好,网站网页设计原则,蚌埠seo招聘,上海公司注册地址可以是住宅吗1、概念
phong网格材质#xff1a;Mesh - Phong - Material 一种用于具有镜面高光的光泽表面的材质。 它可以模拟#xff0c;具有镜面高光的光泽表面#xff0c;提供镜面反射效果。 MeshPhongMaterial#xff1a; MeshPhongMaterial是一种基于Phong光照模型的材质#…1、概念
phong网格材质Mesh - Phong - Material 一种用于具有镜面高光的光泽表面的材质。 它可以模拟具有镜面高光的光泽表面提供镜面反射效果。 MeshPhongMaterial MeshPhongMaterial是一种基于Phong光照模型的材质主要用于渲染具有光泽表面的物体如金属、塑料等 参数 - shininess 控制高光反射效果的锐利程度。该值越大高光区域越小且更亮。默认值为30但可以根据需要调整。 参数 - specular 设置高光部分的颜色通过调整此参数可以改变高光的颜色效果默认值0x111111深灰色 就这些其他的看官网吧 2、利用此材质实现玻璃水晶球效果 // ts-nocheck
// 引入three.js
import * as THREE from three
// 导入轨道控制器
import { OrbitControls } from three/examples/jsm/controls/OrbitControls
// 导入lil.gui
import { GUI } from three/examples/jsm/libs/lil-gui.module.min.js
// 导入tween
import * as TWEEN from three/examples/jsm/libs/tween.module.js
// 导入hdr加载器专门加载hdr的
import { RGBELoader } from three/examples/jsm/loaders/RGBELoader.js
// 导入gltf加载器
import { GLTFLoader } from three/examples/jsm/loaders/GLTFLoader.js//#region
const scence new THREE.Scene()const camera new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(2, 2, 5) // 设置相机位置
camera.lookAt(0, 0, 0)const renderer new THREE.WebGLRenderer({antialias: true // 开启抗锯齿
})
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
//#endregion//#region
// 添加世界坐标辅助器红色-X轴 绿色-Y轴 蓝色-Z轴
const axesHelper new THREE.AxesHelper(5)
scence.add(axesHelper)const controls new OrbitControls(camera, renderer.domElement)
// 设置带阻尼的惯性
// controls.enableDamping true
// 设置阻尼系数
controls.dampingFactor 0.05// 每一帧根据控制器更新画面
function animate() {// 如果需要控制器带有阻尼效果或者自动旋转等效果就需要加入controls.update()controls.update()// requestAnimationFrame在屏幕渲染下一帧画面时触发回调函数来执行画面的渲染requestAnimationFrame(animate)// 渲染renderer.render(scence, camera)// 更新tweenTWEEN.update()
}
animate()
//#endregion// --------------------------------------------------------------
// --------------------------------------------------------------// 设置贴图
const rgbeLoader new RGBELoader()
rgbeLoader.load(/public/assets/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr, envMap {// 设置球形贴图否则环境贴图就像一个背景图片似的// envMap.mapping THREE.EquirectangularReflectionMapping // 反射envMap.mapping THREE.EquirectangularRefractionMapping // 折射核心-1// 给场景添加环境贴图scence.background envMapscence.environment envMap// 添加环境光必须添加环境光不然会是黑色的const ambientLight new THREE.AmbientLight(0xffffff, 1)scence.add(ambientLight)// 添加一个小鸭子const gltfLoader new GLTFLoader()gltfLoader.load(../public/assets/model/Duck.glb, gltf {scence.add(gltf.scene)// phong实现玻璃水晶效果let duckMesh gltf.scene.getObjectByName(LOD3spShape)console.log(duckMesh, duckMesh)duckMesh.material new THREE.MeshPhongMaterial({color: 0xffffff,envMap: envMap, // 核心-2添加环境贴图reflectivity: 0.99, // 核心-3反射系数把反射的系数调高才能看到反射的强度refractionRatio: 0.7 // 核心-4折射系数因为是和空气做对比嘛空气是11除以这个属性折射率越高这个属性(折射的系数)的值越小})})
})
主要是reflectivity 和 refractionRatio 这两个属性
效果图
