Three.js扯谈系列(一)

qugemingzizhenmafan commented 4 years ago

了解WebGL

WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。

了解Three.js

Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。

用途

物联网3D可视化。演示链接：http://www.yanhuangxueyuan.com/3D/liangcang/index.html 产品在线预览。演示链接：https://attentionsurprise.com/products/sunzi-new-sock WebVR。演示链接：http://www.3dnest.cn/

qugemingzizhenmafan commented 4 years ago

Three.js常见名词

三大对象

场景（scene）、相机（camera）和渲染器（renderer）。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);// 透视相机
const renderer = new THREE.WebGLRenderer();   // 渲染器
renderer.setSize(window.innerWidth, window.innerHeight);    // 设置渲染器的大小为窗口的内宽度，也就是内容区的宽度
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);

PerspectiveCamera( fov: Number, aspect: Number, near: Number, far: Number ) fov — 摄像机视锥体垂直视野角度，可以理解成眼睛睁大的角度,即视角的大小,如果设置为0,相当你闭上眼睛了,所以什么也看不到,如果为180,那么可以认为你的视界很广阔,但是在180度的时候，往往物体很小，因为他在你的整个可视区域中的比例变小了。就是说不是线性变化，中间比较平稳了，两边极端。 aspect — 摄像机视锥体长宽比 near — 摄像机视锥体近端面 far — 摄像机视锥体远端面

光源Light

scene.add(light); .shadow.camera 控制阴影产生区域

物体Mesh

const geometry = new THREE.BoxGeometry(100, 100, 100);
const material = new THREE.MeshLambertMaterial({
  color: 0x0000ff,
});
const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh

几何体Geometry

BufferGeometry 是面片、线或点几何体的有效表述。包括顶点位置，面片索引、法相量、颜色值、UV 坐标和自定义缓存属性值

加载器Loader

import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
import FBXLoader from 'three-fbxloader-offical';

new FBXLoader().load(pathFbx, object => {
  scene.add(object);
});

材质Material

注意材质可能会是共有的

贴图Map

qugemingzizhenmafan commented 4 years ago

控制器Control

import OrbitControls from 'three/examples/jsm/controls/OrbitControls';

const orbitControls = new OrbitControls(camera, renderer.domElement);
orbitControls.update();

物体Object3D

.children 子对象 .add() 添加对象 .remove() 移除对象 .traverse() 遍历所有子对象，包括其本身 .getObjectByName() 从子对象中获取对象 .clone() 克隆对象 .scale 缩放 .position 局部坐标 .getWorldPosition() 世界坐标注意物体大小

Three.js版本

Three.js到目前2020.11.1号为止，是0.122版本，有些类，属性，方法在版本之间都不一致，没有一定的向前兼容，向后兼容。有些内容的使用方法已经过时，寻找摸索新的用法。

qugemingzizhenmafan / blog