alindas / 3d-editor Goto Github PK

物体的变换（缩放、旋转、平移）在计算机图形学中由一种叫做变换矩阵实现，这个矩阵包含了物体在空间中的位置、方向和大小信息。物体的世界变换矩阵是由物体的局部变换矩阵和它的所有父对象的变换矩阵相乘得到的。Three.js 中的 Object3D（所有物体的基类）的 getWorldScale()、getWorldQuaternion()、getWorldPosition() 方法，就是从这个世界变换矩阵中提取出来的信息。

当你对一个物体只应用负缩放（即缩放系数小于0），比如 object.scale.x = -1，你会注意到物体是“倒置”的，或者说看起来像是被“镜像”了。然而，这是由于变换矩阵的行列式（一个数学指标）为负值导致的。正常的空间（也就是“右手法则”下的空间）被变为了镜像空间（左手法则的空间）。在镜像空间中，所有的物体看起来都好像被镜像了，因为所有的面都是反向的。

getWorldScale() 和 getWorldQuaternion() 返回的都是物体在世界坐标系中的缩放和旋转信息。如果你只是简单地设置了负缩放（导致了镜像效果），然后又调用 setWorldScale() 和 setWorldQuaternion() 去设置物体的缩放和旋转，这样实际上是让物体保留了镜像空间的状态，同时也应用了正确的旋转。这样，物体就能保持预期的方向和大小，不会被镜像。

总的来说，只设置负缩放会导致物体看起来像是“被镜像了”，同时设置世界坐标系下的缩放和旋转可以消除这种镜像效果。

解决方案：webworker、八叉树
待续

在Three.js中，PerspectiveCamera是一种用于创建透视投影相机的类。viewport属性用于定义视口，它是用来确定在渲染结果中相机视图所占的空间。

viewport属性是一个包含四个值的数组，分别表示视口的左、上、宽和高的值。它们的取值范围是0到1，并且相对于当前渲染目标的尺寸来进行定义。例如，[0, 0, 0.5, 0.5] 表示视口位于渲染目标的左上角，占用渲染目标宽高的一半。

当设置了viewport属性后，相机视图将被限制在该视口内进行渲染。这在多种情况下都非常有用，比如创建分屏效果、将相机视图限制在特定区域等。

下面是一个设置viewport属性的示例代码：

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.viewport = [0, 0, 0.5, 0.5]; // 设置视口为左上角的四分之一

需要注意的是，viewport属性的设置需要与渲染器的尺寸相匹配，以确保正确地显示相机视图。
另外，正交相机（OrthographicCamera）并没有直接的viewport属性，而是通过设置宽度（width）、高度（height）和位置（left、top）来定义视口的位置和尺寸。

Raycaster.intersectObjects() 返回一个数组，每个元素是一个交点对象，每个交点对象都包含以下属性：

• distance：该属性用于存储从原点（Raycaster发射的起点）到交点的距离。
• face：这是与光线相交的几何体的面。它存储了这个面的各种属性，如面的法线、顶点等。
• faceIndex：这是几何体faces数组中相交面的索引。对于BufferGeometry，这是相交三角形的索引。
• object：这是被光线射线选中的物体。
• point：这是光线与模型相交的点在世界坐标中的位置，是一个THREE.Vector3类型对象。
• uv：这是模型材质的uv坐标，可以用于访问模型材质的详细信息，它是一个THREE.Vector2类型的对象，只有在相交的几何体形状有uv属性时苏醒返回。

当你需要获取用户点击物体的确切位置，或者根据命中点修改物体表面属性如颜色等操作时，这些信息会非常有用。