three.js 模拟真实海洋（超详细教程，炫酷海洋）

最新推荐文章于 2025-10-18 10:39:38 发布

原创

最新推荐文章于 2025-10-18 10:39:38 发布 · 1.8k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #数码相机 #开发语言

本文详细介绍如何利用three.js库在JavaScript中实现逼真的海洋表面和船只动画，包括初始化项目、创建海平面、模拟船只随波浪起伏、旋转和加速度计算，以及实时渲染。

很长一段时间没有在掘金发布新的文章了，开始觉得自己发的文章要么不能讲透彻，要么太简单没有必要。

今天用 three.js 模拟渲染海洋，我将点燃大海！！！我将带领读者们一步一步实现最终效果，源码。

超级详细！！！每一步超级详细！！！保证看完即会！！！

实现功能

波涛起伏的浪
海面的船只的高度应该适应海浪的高度
海面的船只应该会发生正确的几何变换（旋转，位移）

那么！开始吧！

1. 初始化 three 项目。

1.1 初始化：相机：camera，渲染器：renderer，场景：scene

javascript

复制代码

import * as THREE from "three"; import { OrbitControls } from "three/addons/controls/OrbitControls.js"; let renderer, camera, scene, controls, clock,lineHelper // 初始化场景基础元素（渲染器，相机，场景，控制器等等） { // 渲染器初始化 renderer = new THREE.WebGLRenderer(); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(innerWidth, innerHeight); document.body.appendChild(renderer.domElement); // 相机初始化 camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000); camera.position.set(0, 10, 20); // 窗口自适应 function resize() { renderer.setSize(window.innerWidth, window.innerHeight); camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); } window.addEventListener('resize', resize, false); // 场景 scene = new THREE.Scene(); // 控制器 controls = new OrbitControls(camera, renderer.domElement); clock = new THREE.Clock(); } function render() { requestAnimationFrame(render); const elapsedTime = clock.getElapsedTime() controls.update(); renderer.render(scene, camera); }

1.2 添加基础三维对象,添加一个Box模拟海面的小船，添加一条方向为（0,1,0）的线，模拟小船方向

csharp

复制代码

// 将三维对象加入场景 { // 添加平行光 const light = new THREE.DirectionalLight(0xffffff, 0.5); light.position.set(0, 10, 20) scene.add(light); // 添加平行光2 const light2 = new THREE.DirectionalLight(0xffffff, 0.1); light2.position.set(-5, 5, -5) scene.add(light2); // 添加环境光 const light3 = new THREE.AmbientLight(0xffffff, 0.2) scene.add(light3) // 添加模拟小船 box = new THREE.Mesh(new THREE.BoxGeometry(2, 2, 2), new THREE.MeshLambertMaterial()); scene.add(box) // 添加法线辅助器 const helperG