Plane使用教程【Three.js】

2023/02/14 11:39

Three.js 提供了 Plane 概念来表示在 3d 空间中无限延伸的二维表面。 这对于光标交互很有用，因此你可能需要了解如何设置此平面、将其可视化并根据需要进行调整。

Three.js 的 Plane 文档很好而且准确，但它肯定假设你是一个“数学人”（我不是），并且如果你从未听说过四元数之类的东西，它不会解释如何让事情正常进行 和平面法线。 我不得不通过老式的艰难方式学习这些东西，所以我为像我这样刚接触 3d 图形的其他开发人员整理了本指南。

Plane( normal : Vector3, constant : Float )

normal - (optional) a unit length Vector3 defining the normal of the
plane. Default is (1, 0, 0).
constant - (optional) the signed distance from the origin to the
plane. Default is 0.


var myPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);


// There's an object in the scene - myObject - and
// I want to take its rotation and make my plane
// have the same rotation.
var rotation = myObject.quaternion.clone();

// The default forward vector for 3D objects is (0, 0, 1),
// so first set the normal to match myObject like that,
// and then make the plane's rotation match myObject as well.
myPlane.normal.set(0, 0, 1).applyQuaternion(rotation);


var offset = new THREE.Quaternion();

offset.setFromAxisAngle(
// This rotation offset is along the X axis,
// so use a vector where X is 1 here.
new THREE.Vector3(1, 0, 0),

// Offset by -90 degrees (in radians)
-Math.PI / 2);

// Modify the rotation
rotation.multiply(offset);

// The 'rotation' quaternion is now ready to be applied to the plane


0 评论
0 收藏
0