Threejs进阶之八：使用Sky和Water创建蓝天大海

Threejs进阶之八：使用Sky和Water创建蓝天大海

这一节我们使用Threejs提供的Sky和Water来创建天空和大海的效果，实现游轮随水波浮动效果，先看下最终效果

话不多说，直接开干，在前面的vue项目中新建组件，

新建SeaView.Vue组件

在components文件夹新建SeaView.Vue组件，并在template模板中新建一个id为scene的div作为threejs的容器

<template><div id="scene"></div>
</template>
<script setup>
</script>
<style scoped>
</style>

App.vue中引用SeaView.vue组件

在App.vue中引用SeaView.vue组件

<template> <sea-view></sea-view>
</template>
<script setup>
import SeaView from './components/SeaView.vue';  
</script>
<style scoped> 
</style>

引入Threejs并初始化

在SeaView.Vue的script标签里引入Threejs并初始化场景，这些就不再细说了，不了解的看前面的文章

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' 
import { onMounted } from 'vue'
let scene,camera,renderer,controls,water,sun,yacht
let mesh = []
onMounted(()=>{init()
})
function init() {initScene()initCamera()initAxesHelper()initLight()initRenderer()initControls() animate() window.addEventListener('resize',onWindowResize.bind(this))
}
// 初始化场景
function initScene() {scene = new THREE.Scene()scene.background = new THREE.Color(0x808080)
}
// 初始化相机
function initCamera() {camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000)camera.position.set(2,2,2)
}