Pārlūkot izejas kodu

docs(core): vector set props documentation

Madjid Taha 2 gadi atpakaļ
vecāks
revīzija
7015fabec6

+ 19 - 0
docs/api/instances-arguments-and-props.md

@@ -89,6 +89,25 @@ All properties whose underlying object has a `.set()` method have a shortcut to
 <TresPerspectiveCamera :position="[1, 2, 3]" />
 ```
 
+To specify transformation properties such as position, rotation, and scale, a shorthand is available that allows you to directly indicate the axis you wish to set within the props.
+
+```vue
+<TresMesh :position-x="1" :scale-y="2" :rotation-x="Math.PI * 2" />
+```
+
+::: warning
+When you set the rotation property in [three.js](https://threejs.org/docs/index.html#api/en/math/Euler), it will use the 'XYZ' order by default.
+It is important to note that when setting the rotation property with the shorthand, the order in which you set the angles matters. For more information on this topic, please refer to  [Euler angles](https://en.wikipedia.org/wiki/Euler_angles)
+:::
+
+```vue
+<TresMesh :rotation-x="1" :rotation-y="2" :rotation-z="Math.PI * 2" />
+
+<TresMesh :rotation-z="Math.PI * 2" :rotation-x="1" :rotation-y="2" />
+
+<!-- Note that the order of the rotation properties matters, and swapping the order can result in different outcomes. -->
+```
+
 ### Scalar
 
 Another shortcut you can use is pass a scalar value to a property that expects a `Vector3` object, using the same value for the rest of the Vector:

+ 0 - 5
packages/tres/src/components/VectorSetProps.vue

@@ -58,11 +58,6 @@ const state = reactive({
         <TresBoxGeometry />
         <TresMeshToonMaterial color="#FBB03B" />
       </TresMesh>
-      <!-- position-w is invalid, it will be logged -->
-      <TresMesh :position-y="1" :position-z="2" :position-w="2" cast-shadow>
-        <TresSphereGeometry />
-        <TresMeshToonMaterial color="#FB0000" />
-      </TresMesh>
       <TresDirectionalLight :position-y="8" :position-z="4" :intensity="0.7" cast-shadow />
       <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
         <TresPlaneGeometry :args="[10, 10, 10, 10]" />