ThreeJS 高亮地球
时间:2020-05-21
本文章向大家介绍ThreeJS 高亮地球,主要包括ThreeJS 高亮地球使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
环境
- ThreeJS 107版本
- three.min.js
- OrbitControls.js
说明
网上地球高亮和辉光的效果很多,这里用GLSL做(没学明白,网上东拼西凑拿来用了)。还有尝试过用Render渲染,但是render生成的canvas会覆盖整个浏览器窗口,把背景遮盖住。
解决方案
-
创建球的过程参见"ThreeJS制作地球"
-
创建定点着色器和片元着色器
var vertexShader = [
'varying vec3 vNormal;',
'void main()',
'{',
'vNormal = normalize(normalMatrix * normal);',
'gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
'}'
].join('\n');
var fragmentShader2 = [
'uniform float c;',
'uniform float p;',
'varying vec3 vNormal;',
'void main()',
'{',
'float intensity = pow(c - dot(vNormal, vec3(0.0, 0.0, 1.0)), p);',
'gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0) * intensity;',
'}'
].join('\n');
- 将着色器赋给ShaderMaterial材质
var material_glow = new THREE.ShaderMaterial({
fragmentShader: fragmentShader2,
vertexShader: vertexShader,
uniforms: {
"c": {
type: "f",
value: _cValue
},
"p": {
type: "f",
value: _pValue
}
},
depthWrite: false,
side: THREE.BackSide
});
- 在地球外面再克隆一个稍大的球,把材质贴上
//然后创建一个object,类型为Mesh。他的参数使我们之前创的几何模型以及材料
var sphere = new THREE.Mesh(new THREE.SphereGeometry(_earthOptions.earthBallSize + _pBuffer, 50, 50).clone(), material_glow);
sphere.position.set(0, 0, 0);
scene.add(sphere);
- 执行渲染
render();
// 执行函数
function render() {
if (handle) {
cancelAnimationFrame(handle);
}
//是否开启了辉光渲染,如开启则开启辉光渲染
if (composer) {
composer.render();
}
renderer.clearDepth();
//自转
scene.rotation.y += _earthOptions.autorotationSpeed ? _earthOptions.autorotationSpeed : 0;
renderer.render(scene, camera);
orbitcontrols.update();
handle = requestAnimationFrame(render);
}
附上效果图
原文地址:https://www.cnblogs.com/giser-s/p/12928631.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python自学成才之路 numpy 基础
- python自学成才之路 文件读写操作
- go 中string[0]到底是rune还是byte?
- python自学成才之路 类详细用法
- Linux 监控之 IO
- python自学成才之路 函数详细用法
- 你所不知道的TIME_WAIT和CLOSE_WAIT
- linux之网络
- linux vim编辑器之常用指令
- saltstack手册(含官方pdf)
- 详解Go变量类型的内存布局
- linux vim 编辑器之多文件多窗口编辑
- 深入解析 Go 中 Slice 底层实现
- 2017年的golang、python、php、c++、c、java、Nodejs性能对比(golang python php c++ java Nodejs Performance)
- linux文件时间属性 查看和修改文件时间