1. 引言

Three.js是著名的JavaScript 3D图形库，用于浏览器中开发 3D 交互场景的 JS 引擎，可以快速的搭建三维场景

Three.js官网为：创建一个场景 – three.js docs (threejs.org)

GitHub站点为：mrdoob/three.js: JavaScript 3D Library. (github.com)

本文描述使用Three.js实现可透视的水面效果

2. 可透视水面效果

这里主要是指以下这两个官方示例：

如果网络原因加载不出来可以使用下面的示例：

第一个是海洋Ocean，有倒影、水纹波动但是水面不透明，不能从水下往上看：

第二个是水面Water，有倒影、水纹波动，水面不透明，可以从水下往上看，但是从水下往上看没有水面效果：

此处，笔者修改一下Three.js源码中的Water.js：three.js/Water.js at dev · mrdoob/three.js · GitHub

添加了 opacity和transparent参数并设置side参数，实现以下效果：

3. 参考资料

[1] three.js/Water.js at dev · mrdoob/three.js · GitHub

[2] three.js/Water2.js at dev · mrdoob/three.js · GitHub

Three.js实现可透视的水面效果的更多相关文章

  1. 从SQL下载大量数据到Excel

    之前不知设计原理,发生了大量数据(超过100w行)直接从数据库读取加载到网页中,直接导致内存溢出. Rediculous! 所以,现在改为分页查询到页面中. 由于其有全局逻辑,故折中每次加载1w条数据 ...

  2. 10-THREE.JS perspective透视摄像机和orthographic正交摄像机区别

    <!DOCTYPE html> <html> <head> <title></title> <script src="htt ...

  3. React+Three.js——PerspectiveCamera透视相机camera参数以及属性值探索

    因项目问题,对webgl进行了探索,当进行到3d相机时,对camera的up,position属性有部分难以理解的地方,因此做下了记录. 代码如下: import React, {Component} ...

  4. 翻书插件：bookblock.js

    BookBlock 是一个 jQuery插件,用来制作带有翻页效果的小书册.可以用任何形式的内容,比如图像或文本.插件会在翻页时利用变形模拟手工翻页,并产生重叠的阴影以达到更逼真的效果. 基本页面 & ...

  5. Three.js基础部分学习

    一.关于使用Three.js几点理论说明 1.请参考官网地址 https://threejs.org/ 2.使用three.js必备条件 <场景 A scene.相机a camera.渲染器 a ...

  6. three.js初涉略（一）

    <!-- 最近要研究一下webgl,发现了webgl中文网(http://www.hewebgl.com/article/articledir/1).边研究教程边做下记录 --> thre ...

  7. Three.js学习（相机，场景，渲染，形状）

    相机分为透视相机和正交相机(还有第三人称相机不介绍). var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window. ...

  8. Three.js开发指南---使用构建three.js的基本组件（第二章）

    .gui本章的主要内容 1 场景中使用哪些组件 2 几何图形和材质如何关联 3 正投影相机和透视相机的区别 一,Three所需要的基本元素 场景scene:一个容器,用来保存并跟踪所有我们想渲染的物体 ...

  9. three.js入门3

    为什么要用three.js Three.js为我们封装了底层的WebGl接口,使我们在无需掌握繁冗的图形学知识的基础下可以轻松的创建三维场景.相比较使用底层的WebGL我们可以使用更少的代码,大大的降 ...

  10. three.js透视投影照相机

    透视投影照相机(Perspective Camera)的构造函数是: THREE.PerspectiveCamera(fov, aspect, near, far) 让我们通过一张透视照相机投影的图来 ...

随机推荐

  1. Java设计模式-建造者模式Builder

    介绍 建造者模式(Builder Pattern) 又叫生成器模式,是一种对象构建模式.它可以 将复杂对象的建造过程抽象出来(抽象类别),使这个抽象过程的不同实现方 法可以构造出不同表现(属性)的对象 ...

  2. oracle sqlplus命令详解（官方示例）

    以为内容选自Oracle官方文档,只讲command-line: 规范:<变量名> , {举例} , a | b 枚举可选值,(XX)描述 ------------------------ ...

  3. 使用xampp安装部署mantis

    快速教程请参考: 点击打开链接   http://download.csdn.net/detail/indexman/6830003 --------------------------- Dylan ...

  4. Vue实现简单图书管理例子

    以下内容整理自网络. 说明 本例主要涵盖以下知识点: 数据绑定 条件与循环 计算属性 监听器 过滤器 常见数组和对象操作 vue生命周期 示例演示 代码 <!DOCTYPE html> & ...

  5. 文心一言 VS 讯飞星火 VS chatgpt （202）-- 算法导论15.3 1题

    一.对于矩阵链乘法问题,下面两种确定最优代价的方法哪种更高效?第一种方法是穷举所有可能的括号化方案,对每种方案计算乘法运算次数,第二种方法是运行RECURSIVE-MATRIX-CHAIN.证明你的结 ...

  6. beego中数据库表创建

    package main import ( "fmt" "github.com/astaxie/beego/orm" _ "github.com/go ...

  7. HashMap源码窥探

    目录 前言 HashMap的数据结构 HashMap的put方法 HashMap的get方法 HashMap的初始化 HashMap的containsKey方法 HashMap的putAll方法 Ha ...

  8. 如何当个优秀的文档工程师？从 TC China 看技术文档工程师的自我修养

    本文系 NebulaGraph Community Academic 技术文档工程师 Abby 的参会观感,讲述了她在中国技术传播大会分享的收获以及感悟. 据说,技术内容领域.传播领域的专家和决策者们 ...

  9. Vue实现图片瀑布流

    在线演示地址:点击前往 一,创建一个Waterfall组件 代码如下: <template> <div class="waterfall"> <!-- ...

  10. Codeforces Round 651 (Div. 2)C. Number Game（数学思维数论）

    C. Number Game 我们考虑那些状态是必胜态 我的回合时n为奇数(除1外),直接除以n则必胜 下面偶数的情况稍复杂 偶数我们能进行的操作只有除以一个奇数,需要考虑怎么把当前状态变为对手的必败 ...