js 3d 学习

threejs 动画

 2021/02/24 

[TOC]

渲染器（WebGLRender）

用 WebGL 的方式渲染相关。

构造参数

antialias：是否抗锯齿，默认为否

方法

setPixelRatio( window.devicePixelRatio )：设置设备像素比，避免HiDPI设备上绘图模糊
setSize( window.innerWidth, window.innerHeight )：调整输出 canvas 的大小

属性

domElement：输出 canvas 节点

场景（Scene）

整个渲染的空间，可添加各种物体、灯光、摄像机的地方。

透视摄像机（PerspectiveCamera）

有近大远小效果的摄像机，最为逼真。

const camera = new THREE.PerspectiveCamera( fov, aspect, near, far );

摄像机原理

视场角（FOV，the Field Of View）

在显示器上看到的范围，单位是角度（非弧度）
人类有接近180度的视野，有些鸟类有近360度，一般游戏为60-90，默认为 50
确定横向视场，配合 aspect属性确定纵向视场

长宽比（aspect）

宽除以高，一般为 window.innerWidth / window.innerHeight

近截面（near）

从距离摄像机多近开始渲染，默认为 0.1

远截面（far）

摄像机最远能看到多远，默认为 1000
本质上就是获取相同宽高的图像需要的实际尺寸

属性

.positon.set( 0, 75, 160 )：设置机位

轨道控制器（OrbitControls）

纹理（Texture）

const texture = new THREE.TextureLoader().load('textures/water.jpg');
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(4, 4);

倒影实现的原理

构建一个虚拟的相机对需要倒影的物体进行渲染，然后将渲染的结果当作纹理映射到倒影平面上，这样就可以实现倒影的效果了

精灵 sprite

THREE.Points 创建小的物体来模拟雨雪烟等效果。

原文作者：Yizhou Shen

原文链接：http://shenyizhou.github.io/2021/02/24/2021-02-24-threejs/

发表日期：February 24th 2021, 4:56:35 pm

更新日期：March 5th 2024, 10:56:05 pm

Next Post

自动批量请求（3）—— 同时发送多个 batch 请求
Previous Post

今生必读的武侠小说列表

CATALOG

1. 渲染器（WebGLRender）
2. 场景（Scene）
3. 透视摄像机（PerspectiveCamera）
4. 轨道控制器（OrbitControls）
5. 纹理（Texture）
6. 倒影实现的原理
7. 精灵 sprite