From 09a4df9591ab821b9b6b05781b5486691063ff40 Mon Sep 17 00:00:00 2001 From: DefectingCat Date: Thu, 8 Sep 2022 03:39:49 +0000 Subject: [PATCH] Add new post --- ...mponent-encapsulate-reusable-component.mdx | 11 --- data/posts/object-around-in-threejs.mdx | 84 +++++++++++++++++++ .../p/object-around-in-threejs/around.svg | 4 + 3 files changed, 88 insertions(+), 11 deletions(-) create mode 100644 data/posts/object-around-in-threejs.mdx create mode 100644 public/images/p/object-around-in-threejs/around.svg diff --git a/data/posts/generic-component-encapsulate-reusable-component.mdx b/data/posts/generic-component-encapsulate-reusable-component.mdx index 6ca5d16..b70295f 100644 --- a/data/posts/generic-component-encapsulate-reusable-component.mdx +++ b/data/posts/generic-component-encapsulate-reusable-component.mdx @@ -4,17 +4,6 @@ date: '2022-08-12' tags: [TypeScript, React] --- -import app from 'assets/sandpack/generic-component-encapsulate-reusable-component/hook-form-basic/App.ts'; -import app2 from 'assets/sandpack/generic-component-encapsulate-reusable-component/react-generic/App.ts'; -import child from 'assets/sandpack/generic-component-encapsulate-reusable-component/react-generic/Child.ts'; - -export const RUASandpack = dynamic(() => import('components/RUA/RUASandpack')); -export const RUACodeSandbox = dynamic(() => - import('components/RUA/RUACodeSandbox') -); - -export default ({ children }) => {children}; - 当前很多 UI 库都会为我们集成可复用的 Form 组件，并且是开箱即用。但有时候我们往往可能需要为自己的组件集成 Form。单纯的手动管理所有的状态可能不是件理想的活，尤其是表单验证。 [React Hook Forms](https://react-hook-form.com/) 为我们提供了完善的状态管理，并且可以集成到任何组件中去。 diff --git a/data/posts/object-around-in-threejs.mdx b/data/posts/object-around-in-threejs.mdx new file mode 100644 index 0000000..2446b49 --- /dev/null +++ b/data/posts/object-around-in-threejs.mdx @@ -0,0 +1,84 @@ +--- +title: Three.js 中的物体围绕运动 +date: '2022-09-02' +tags: [Three.js, React] +--- + +使一个物体围绕另一个物体运动，主要是保证围绕物体的运动轨迹。在 three.js 中，一个 Mesh 实例可以通过其自身的 `add()` 方法，去添加另一个实例。 + +通过此方法就可以达成添加一个实例成为另一个实例的子节点。当父节点进行运动时（例如自身旋转），子节点也会跟随运动。 + +在物体围绕运动中，我们可以把围绕物体添加到被围绕物体中。当父节点绕自身旋转时，离父节点有一定距离的围绕物体就会随着父节点的旋转而旋转。但这样做就会导致本不需要运动的父节点自身进行运动。 + +## Object3D + +three.js 提供了一个可以在场景中添加的“点”。它与 Mesh 等物体不同，它相当于在场景中添加一个不可见的点。并且它也拥有 `add()` 方法，也就可以添加其他物体到这个点中。 + +```tsx +const target = new THREE.Object3D(); +``` + +当这个点进行旋转时，被添加的物体也就可以按照预想的方式进行运动。同时它也可以被添加到一个物体中，其位置就会与添加的物体相同，就不用手动为其设置相同的位置了。 + +```tsx +const target = new THREE.Object3D(); + +const material = new THREE.MeshPhongMaterial({ + color: '#4d4d4d', + specular: '#fdfdfd', + emissive: 'rgb(0,0,0)', +}); +const boxGeo = new THREE.BoxGeometry(2, 2, 2); +const box = new THREE.Mesh(boxGeo, material); +box.castShadow = true; +box.receiveShadow = true; +box.position.set(0, 2, 0); +box.add(target); +three.scene.add(box); + +const sphereGeo = new THREE.SphereGeometry(0.5, 32, 16); +const sphere = new THREE.Mesh(sphereGeo, material); +sphere.castShadow = true; +sphere.receiveShadow = true; +sphere.position.set(-2, 2, 0); + +// target.position.set(0, 2, 0); +target.add(sphere); +three.scene.add(target); +``` + +类型推断 + +### 相对位置 + +如果被围绕的物体没有通过 `add()` 方法添加 Object3D，那么就需要手动添加 Object3D 到场景中，并设置到特定的位置。可以通过其 `position.set()` 方法设置。这对于 Object3D 本身来说是相对于世界坐标位置的。 + +如果被围绕物体已经添加到场景中，通过 `add()` 方法添加 Object3D 也会被添加到场景中。且它的位置与父节点相同。 + +对于围绕物体来说，其自身被 Object3D 通过 `add()` 方法添加到 Object3D 中。而它通过 `position.set()` 进行设置时，就是相对与 Object3D 已经设置过的位置进行设置。 + +```tsx +box.position.set(0, 2, 0); +box.add(target); +target.add(sphere); +sphere.position.set(-2, 0, 0); +// sphere position in world is (-2, 2, 0); +``` + +### 获取世界位置 + +默认情况下 `Mesh.position` 得到是其自身的相对位置。获取世界全局位置需要一个 Vector3 来保存，再使用 `Mesh.getWorldPosition` 来获取。 + +```tsx +const position = new THREE.Vector3(); +earth.getWorldPosition(position); +``` + +## Demo + + \ No newline at end of file diff --git a/public/images/p/object-around-in-threejs/around.svg b/public/images/p/object-around-in-threejs/around.svg new file mode 100644 index 0000000..30bd75c --- /dev/null +++ b/public/images/p/object-around-in-threejs/around.svg @@ -0,0 +1,4 @@ + + + +
Object3D
target
Object3D...
sphere
sphere
Box
Box
Box add--> target add--> sphere
Box add--> target add--> sphere
around
aroundText is not SVG - cannot display \ No newline at end of file