three.js
关注
分享
扫一扫
小王的进阶之路
这个作者很懒，什么都没留下…
展开
-
three.js 透视投影相机 PerspectiveCamera 自适应渲染
// 窗口事件// onresize 事件会在窗口被调整大小时发生window.onresize = function () { // 重置渲染器输出画布canvas尺寸 renderer.setSize(window.innerWidth, window.innerHeight); // 全屏情况下：设置观察范围长宽比aspect为窗口宽高比 camera.aspect = window.innerWidth / window.innerHeight; // 渲原创 2021-09-29 10:40:14 · 387 阅读 · 0 评论 -
three.js 设置雾化效果（Fog）
这个类中的参数定义了线性雾。也就是说，雾的密度是随着距离线性增大的。构造器Fog( color : Integer, near : Float, far : Float )颜色参数传入Color构造函数中，来设置颜色属性。颜色可以是一个十六进制的整型数，或者是CSS风格的字符串。属性.name : String对象的名称，可选、不必唯一。默认值是一个空字符串。.color : Color雾的颜色。比如说，如果将其设置为黑色，远处的物体将被渲染成黑色。.near : Float开始应用雾的原创 2021-09-27 21:30:21 · 2306 阅读 · 0 评论 -
批量修改 gltf 材质
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>th原创 2021-09-27 21:18:37 · 937 阅读 · 0 评论 -
解决 three.js 模型颜色偏差问题
纹理纹理中包含的颜色信息（.map, .emissiveMap, 和 .specularMap）在glTF中总是使用sRGB颜色空间，而顶点颜色和材质属性（.color, .emissive, .specular） 则使用线性颜色空间。在典型的渲染工作流程中，纹理会被渲染器转换为线性颜色空间，进行光照计算，然后最终输出会被转换回 sRGB 颜色空间并显示在屏幕上。除非你需要使用线性颜色空间进行后期处理，否则请在使用glTF的时候将WebGLRenderer进行如下配置：renderer.outputEn原创 2021-09-27 20:57:39 · 8948 阅读 · 1 评论 -
加载 gltf 模型
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>th原创 2021-09-26 16:08:48 · 1767 阅读 · 1 评论 -
three.js 起步
three.js 下载特定版本：https://github.com/mrdoob/three.js/releases<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi原创 2021-09-23 16:34:31 · 352 阅读 · 0 评论