Threejs制作大海效果

简介: 这篇文章详细介绍了使用Three.js制作大海效果的技术细节,包括创建水面模型、应用波纹纹理以及实现动态波浪效果的方法。

threeJs制作大海效果,实际上是绘制一个平面模型,在平面模型的表面渲染出波浪的效果,因为模型的长和宽要足够的大,有望不到边的效果,如果项目中添加了拖动效果的话,还需要在拖动的Control中添加允许的拖动角度,这样可以防止用户不下心看到了海面的下面就露馅了,哈哈。

好了,下面开始说下怎么实现海面的效果,Threejs官方里包含了组件Water,使用这个组件可以快速绘制大海的效果,包含海面波浪的动态效果,首先我们需要创建一个场景,按照以往的步骤,场景,相机,渲染器等

initScene(){
      scene = new THREE.Scene();
    },
    initCamera(){
      this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
      this.camera.position.set(100,100,100);
    },
 initRenderer(){
      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.container = document.getElementById("container")
      this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
      this.renderer.setClearColor('#294f9a', 1.0);
      this.container.appendChild(this.renderer.domElement);
    },
    initControl(){
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls.enableDamping = true;
      // // 最大角度
      this.controls.maxPolarAngle = Math.PI / 2.2;
    },
    initAnimate() {
      requestAnimationFrame(this.initAnimate);
      this.renderer.render(scene, this.camera);
    },

接着创建一个平面模型作为海面,在海面的模型中添加水纹贴图,通过threejs提供的组件绘制出波浪效果,

 initWater(){
      const waterGeometry = new THREE.PlaneGeometry(10000, 10000);
      this.water = new Water(
          waterGeometry,
          {
            textureWidth: 512,
            textureHeight: 512,
            waterNormals: new THREE.TextureLoader().load('/static/images/waternormals.jpg', function (texture) {
              texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
            }),
            sunDirection: new THREE.Vector3(),
            sunColor: 0xffffff,
            waterColor: 0x294f9a,
            distortionScale: 3.7,
          }
      );
      this.water.rotation.x = - Math.PI / 2;
      scene.add(this.water)
}

需要注意的是大海的颜色和initRendeder中this.renderer.setClearColor('#294f9a', 1.0);设置的颜色有关,大家可以根据需要设置不同的大海颜色。下面提供了波浪的贴图。放到对应的位置。

然后将这个模型加入到场景中,因为水需要有波浪的动态效果,所以需要在渲染的时候不断更新波浪的动态效果

initAnimate() {
      this.water.material.uniforms["time"].value += 1.0 / 60.0;
      requestAnimationFrame(this.initAnimate);
      this.renderer.render(scene, this.camera);
    },

完整的代码如下

<template>
  <div id="container"></div>
</template>

<script>
import * as THREE from 'three'
import {OrbitControls} from "three/addons/controls/OrbitControls";
import { Water } from 'three/examples/jsm/objects/Water.js';

let scene;
export default {
  name: "sea-page",
  data() {
    return{
      camera:null,
      water:undefined,
    }
  },
  methods:{
    initScene(){
      scene = new THREE.Scene();
    },
    initCamera(){
      this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
      this.camera.position.set(100,100,100);
    },
    initWater(){
      const waterGeometry = new THREE.PlaneGeometry(10000, 10000);
      this.water = new Water(
          waterGeometry,
          {
            textureWidth: 512,
            textureHeight: 512,
            waterNormals: new THREE.TextureLoader().load('/static/images/waternormals.jpg', function (texture) {
              texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
            }),
            sunDirection: new THREE.Vector3(),
            sunColor: 0xffffff,
            waterColor: 0x294f9a,
            distortionScale: 3.7,
          }
      );
      this.water.rotation.x = - Math.PI / 2;
      scene.add(this.water)
    },
    initRenderer(){
      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.container = document.getElementById("container")
      this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
      this.renderer.setClearColor('#294f9a', 1.0);
      this.container.appendChild(this.renderer.domElement);
    },
    initControl(){
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls.enableDamping = true;
      // // 最大角度
      this.controls.maxPolarAngle = Math.PI / 2.2;
    },
    initAnimate() {
      this.water.material.uniforms["time"].value += 1.0 / 60.0;
      requestAnimationFrame(this.initAnimate);
      this.renderer.render(scene, this.camera);
    },
    initPage(){
      this.initScene();
      this.initCamera();
      this.initRenderer();
      this.initControl();
      this.initWater();
      this.initAnimate();
    }
  },
  mounted() {
    this.initPage()
  }
}
</script>

<style scoped>
#container{
  position: absolute;
  width:100%;
  height:100%;
  overflow: hidden;
}

</style>

好了,如果有问题可以在评论区给我留言。

相关文章
|
前端开发 JavaScript
中秋之美——html+css+js制作中秋网页
中秋之美——html+css+js制作中秋网页
711 0
|
4月前
Threejs制作窗户透亮效果
这篇文章讲解了如何在Three.js中制作窗户的透亮效果,包括设置透明材质和光照以实现逼真的窗户渲染效果的技术细节。
101 1
|
3月前
|
前端开发
CSS制作月球行走404页面特效源码
CSS制作月球行走404页面特效源码是一款迈克杰克逊在月球上漫步走路404页面模板下载。效果非常逼真,感兴趣的朋友可以查看效果演示,也可以下载源码。
29 3
|
4月前
Threejs制作海面效果
这篇文章详细介绍了利用Three.js制作逼真海面效果的过程,包括设置Water材质、调整光照及实现波动动画的步骤。
90 0
Threejs制作海面效果
|
8月前
浪漫3D圣诞树特效【附源码】Merry Christmas to My Girl !
浪漫3D圣诞树特效【附源码】Merry Christmas to My Girl !
108 1
|
8月前
|
图形学 开发者
【制作100个unity游戏之26】unity2d横版卷轴动作类游11(附带项目源码)
【制作100个unity游戏之26】unity2d横版卷轴动作类游11(附带项目源码)
119 0
|
开发者
用D3制作一个旋转的大风车SVG庆祝国际儿童节
写于2023年的六一国际儿童节,用D3做一个大风车庆祝一下这个快乐的节日,借此机会介绍一下SVG滤镜的使用,代码也是非常简短的
116 0
|
9月前
在微信小游戏制作工具中制作一个下雨的效果
在微信小游戏制作工具中制作一个下雨的效果
99 0
|
存储 前端开发 定位技术
brython | 笨办法写个连连看-3.地图制作
brython | 笨办法写个连连看-3.地图制作
159 4
|
小程序
如何制作一个塔防小游戏(三)
嗨!大家好,我是小蚂蚁。今天我们继续分享制作一个塔防小游戏的第三节,如何创建不同类型的敌人,以及如何利用表格来编辑数据以及创建敌人。
150 0