three.js模拟波动水面Water.js |
您所在的位置：网站首页 › 22k小说读 › three.js模拟波动水面Water.js |
three.js模拟波动水面Water.js
有些数字孪生场景周围的环境，需要模拟一个波动水面效果，自己写shader相对比较麻烦，采用threejs的扩展库更简单方便。 3D在线体验效果 (货轮物流) 视频讲解思路 创建一个矩形平面表示水面，水面的法线贴图地址在官网案例examples里面examples\textures\waternormals.jpg，法线贴图功能是模拟水面波浪的凹凸效果。 const waterGeometry = new THREE.PlaneGeometry(10000, 10000); const water = new Water( waterGeometry, { textureWidth: 512, textureHeight: 512, waterNormals: new THREE.TextureLoader().load('./waternormals.jpg', function (texture) { texture.wrapS = texture.wrapT = THREE.RepeatWrapping; }), sunDirection: new THREE.Vector3(), sunColor: 0xffffff, waterColor: 0x001e0f, distortionScale: 3.7, } ); water.rotation.x = - Math.PI / 2; scene.add(water) 水面波动动画如果你想水面产生波动的动画效果，需要在动画循环中，改变uniform变量time function render() { water.material.uniforms["time"].value += 1.0 / 60.0; requestAnimationFrame(render) } render() |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |