当前位置: 首页 > article >正文

3.js - Water2不显示水波纹

文中需要的资源,在我的资源那里能下载

【3.js 有2个水的生成方式:Water、Water2】

注意: 这个问题,是基于 Water2

如下方式,不显示波纹

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'

// 导入water
import { Water } from 'three/examples/jsm/objects/Water2.js'

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(5, 5, 5)
scene.add(camera)

const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)

// --------------------------------------------------------------------------

// THREE.PlaneGeometry:平面网格,尺寸是20*20,并指定u和v方向的细分数量是1024、1024
const water = new Water(new THREE.PlaneGeometry(1, 1, 1024, 1024), {
  color: '#ffffff',
  scale: 1,
  flowDirection: new THREE.Vector2(1, 1),
  textureHeight: 1024,
  textureWidth: 1024,
})
water.rotation.x = -Math.PI / 2
scene.add(water)

// --------------------------------------------------------------------------

// 环境光
const light = new THREE.AmbientLight(0xffffff)
light.intensity = 10
scene.add(light)
// 平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
scene.add(directionalLight)

// 初始化渲染器
const renderer = new THREE.WebGLRenderer()
/*
  最新版本属性名字有改变:
    渲染器属性名`.outputEncoding`已经变更为`.outputColorSpace`
*/
renderer.outputEncoding = THREE.sRGBEncoding // 设置渲染器的输出编码方式(此API已弃用)
// renderer.outputColorSpace = THREE.SRGBColorSpace // 设置渲染器的输出编码方式(此API已启用)
renderer.toneMapping = THREE.ACESFilmicToneMapping
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true

const animate = () => {
  // controls.update()
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
}
animate()

window.addEventListener('resize', () => {
  // 重置相机的宽高比
  camera.aspect = window.innerWidth / window.innerHeight
  // 更新相机的投影矩阵
  camera.updateProjectionMatrix()
  // 重置渲染器的宽高比
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 更新渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio)
})

为什么没有呢?

原因
源码中是:
const normalMap0 = options.normalMap0 || textureLoader.load( ‘textures/water/Water_1_M_Normal.jpg’ )。同理normalMap1。
但是,
我们项目安装的three.js源码并没有这个两个纹理图片,
所以,不会显示水波纹

解决办法

把这两个纹理图片,放到 【three-01\public\textures\water】 目录下,这样源码就能找到这两个图片了,就有水波纹了
如下图,
在这里插入图片描述
下面是正确的代码


import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'

// 导入water
import { Water } from 'three/examples/jsm/objects/Water2.js'

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(5, 5, 5)
scene.add(camera)

const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)

// --------------------------------------------------------------------------

// THREE.PlaneGeometry:平面网格,尺寸是20*20,并指定u和v方向的细分数量是1024、1024
const water = new Water(new THREE.PlaneGeometry(1, 1, 1024, 1024), {
  color: '#ffffff',
  scale: 1,
  flowDirection: new THREE.Vector2(1, 1),
  textureHeight: 1024,
  textureWidth: 1024,
  normalMap0: new THREE.TextureLoader().load('../public/textures/water/Water_1_M_Normal.jpg', texture => {
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping
  }), // 水的纹理,不加就是个平面,没有动态的
  normalMap1: new THREE.TextureLoader().load('../public/textures/water/Water_2_M_Normal.jpg', texture => {
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping
  }) // 水的纹理,不加就是个平面,没有动态的
})
water.rotation.x = -Math.PI / 2
scene.add(water)

// --------------------------------------------------------------------------

// 环境光
const light = new THREE.AmbientLight(0xffffff)
light.intensity = 10
scene.add(light)
// 平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
scene.add(directionalLight)

// 初始化渲染器
const renderer = new THREE.WebGLRenderer()
/*
  最新版本属性名字有改变:
    渲染器属性名`.outputEncoding`已经变更为`.outputColorSpace`
*/
renderer.outputEncoding = THREE.sRGBEncoding // 设置渲染器的输出编码方式(此API已弃用)
// renderer.outputColorSpace = THREE.SRGBColorSpace // 设置渲染器的输出编码方式(此API已启用)
renderer.toneMapping = THREE.ACESFilmicToneMapping
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true

const animate = () => {
  // controls.update()
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
}
animate()

window.addEventListener('resize', () => {
  // 重置相机的宽高比
  camera.aspect = window.innerWidth / window.innerHeight
  // 更新相机的投影矩阵
  camera.updateProjectionMatrix()
  // 重置渲染器的宽高比
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 更新渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio)
})



http://www.kler.cn/a/290867.html

相关文章:

  • 项目代码第6讲:UpdownController.cs;理解 工艺/工序 流程、机台信息;前端的“历史 警报/工艺 记录”
  • springboot472基于web网上村委会业务办理系统(论文+源码)_kaic
  • C++---------随机库,standfor库
  • c# 实现一个简单的异常日志记录(异常迭代+分片+定时清理)+AOP Rougamo全局注入
  • MFC/C++学习系列之简单记录13
  • 36. Three.js案例-创建带光照和阴影的球体与平面
  • k8s调度、污点、容忍、不可调度、排水、数据卷挂载
  • Flux【大模型】【写实模型】:人脸特美画质细腻意境优美的真境写实摄影FluxAura 大模型
  • 测试 UDP 端口可达性的方法
  • 图文解析保姆级教程:Postman专业接口测试工具的安装和基本使用
  • Linux 进程概念 进程状态 fock函数讲解
  • Object-Android关键字,伴生对象,Kotlin静态
  • SOA通信中间件介绍(二)
  • 海康威视 嵌入式 面经 海康威视嵌入式软件 嵌入式硬件总结面试经验 面试题目汇总
  • 经验笔记:容器化
  • livekitAI对话实践(python+next)
  • Java-互斥锁死锁释放锁
  • STM32G474之TIM1更新中断
  • 【JAVA GC垃圾回收器】JAVA GC垃圾回收算法,垃圾回收器,垃圾回收策略总结,可达性分析算法,分代垃圾回收
  • 探究 Eureka 在 Spring Boot 中的配置注入与统一管理机制(下)——第四节
  • (四)vForm 动态表单自定义组件、属性
  • 002.Python爬虫系列_初识协议
  • Netty从入门到超神-NIO 三大核心(selector,channel,buffer)(二)
  • 数学基础 -- 线性代数之向量空间
  • 探究 Eureka 在 Spring Boot 中的配置注入与统一管理机制(下)——第五节
  • guava中对Map的扩展数据结构