526互联

Three.js#03#Three.js Fundamentals starting lesson（笔记）

发布时间 2023-04-19 16:53:50作者: xkfx

Three.js Fundamentals starting lesson

基础

注意，在图中，相机一半在镜头外，一半在镜头内。这是为了表示，在three.js中，与其他对象不同，相机不必在场景中发挥作用。就像其他对象一样，Camera作为其他对象的子对象，将相对于其父对象移动和定向。在关于场景的文章末尾有一个将多个Camera对象放入场景中的例子。

网格（Mesh）对象表示用特定的材质绘制特定的几何体。材质对象和几何对象都可以被多个网格对象使用。例如，要在不同的位置绘制两个蓝色立方体，我们可能需要两个网格对象来表示每个立方体的位置和方向。我们只需要一个几何体来保存立方体的顶点数据，我们只需要一个材质来指定蓝色。两个网格对象都可以引用相同的几何对象和相同的材质对象。

Mesh表示三个东西的组合：

  • 一个Geometry，描述对象形状；
  • 一个Material，描述如何绘制对象，光泽或平坦，什么颜色，应用什么纹理等。
  • 该对象在场景中相对于其父对象的位置、方向和比例。在下面的代码中，父节点是场景。

几何对象（Geometry）表示一些几何图形的顶点数据，如球体、立方体、平面、狗、猫、人、树、建筑等。js提供了多种内建的几何原语。您还可以创建自定义几何图形以及从文件加载几何图形。

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

这四个设置定义了一个“截锥体（frustum）”。截锥体是一种3d形状的名称，它就像一个尖端被切掉的金字塔。换句话说，把“截锥体”这个词想象成另一个3D形状，比如球体、立方体、棱镜、截锥体。

Responsive Design

https://threejs.org/manual/#en/responsive

就是讲展示区怎么去适应各种不同页面而不畸形。