Doc: Update information about 3D Editor

Change-Id: I047b96e1db411ccbbe73a94f701cc7e632bc98c9
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>
Reviewed-by: Mahmoud Badri <mahmoud.badri@qt.io>
This commit is contained in:
Johanna Vanhatapio
2020-05-12 16:20:33 +03:00
parent 0767107c55
commit 1d257e60d1
10 changed files with 129 additions and 110 deletions

View File

@@ -127,7 +127,7 @@
\endlist \endlist
\li \l{Importing 3D Assets} \li \l{Importing 3D Assets}
\li \l{Editing 3D Assets in Design Mode} \li \l{Editing 3D Assets in Design Mode}
\li \l{Working in the 3D Editor} \li \l{Working in 3D Editor}
\li \l{Adding 3D Views} \li \l{Adding 3D Views}
\li \l{Using 3D Components} \li \l{Using 3D Components}
\list \list

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 22 KiB

View File

@@ -94,7 +94,7 @@
\li \l{Editing 3D Scenes} \li \l{Editing 3D Scenes}
\list \list
\li \l{Editing 3D Assets in Design Mode} \li \l{Editing 3D Assets in Design Mode}
\li \l{Working in the 3D Editor} \li \l{Working in 3D Editor}
\li \l{Adding 3D Views} \li \l{Adding 3D Views}
\li \l{Using 3D Components} \li \l{Using 3D Components}
\list \list

View File

@@ -79,7 +79,7 @@
\li \b {\l{Editing 3D Scenes}} \li \b {\l{Editing 3D Scenes}}
\list \list
\li \l{Editing 3D Assets in Design Mode} \li \l{Editing 3D Assets in Design Mode}
\li \l{Working in the 3D Editor} \li \l{Working in 3D Editor}
\li \l{Adding 3D Views} \li \l{Adding 3D Views}
\li \l{Using 3D Components} \li \l{Using 3D Components}
\endlist \endlist

View File

@@ -28,75 +28,120 @@
\page studio-3d-editor.html \page studio-3d-editor.html
\nextpage studio-3d-view.html \nextpage studio-3d-view.html
\title Working in the 3D Editor \title Working in 3D Editor
To project a 3D scene to a 2D viewport, it is necessary to view the scene When editing a 3D scene, you view the scene in \uicontrol {3D Editor} by
from a \l{Using Scene Camera}{camera}. Select the \uicontrol {Toggle using the \uicontrol {3D Editor} camera. You can switch between
Perspective/Orthographic Projection} button (1) on the 3D editor toolbar to \e {perspective camera} and \e {orthographic camera} modes. When using the
switch between a \e {perspective camera} and an \e {orthographic camera}. perspective camera mode, objects that are far from the camera appear smaller
A perspective camera uses field of view and near and far clip planes to than those nearby. In the orthographic camera mode, all objects appear at
specify the projection, whereas an orthographic camera can be thought of the same scale irrespective of their distance from the camera. Both of them
as a 2D camera. Both of them are free-form cameras that you can use to are free-form camera modes that you can use to orbit around the scene.
orbit around the scene.
When you import 3D scenes from files that you exported from 3D graphics When you import 3D scenes from files that you exported from 3D graphics
tools, you also import the camera, light, model, and materials. If your tools, you also import a \l{Using Scene Camera}{scene camera},
scene did not contain them, you can add the corresponding Qt Quick 3D \l{Using Lights}{light}, \l{Adding Models}{model}, and
types from the \uicontrol Library. \l {Using Materials and Shaders}{materials}. If your scene did not contain
them, you can add the corresponding Qt Quick 3D types from \uicontrol
Library.
You can use the toolbar buttons (2) to show the \e transformation You can use the toolbar buttons to \e transform 3D objects and manipulate
gizmo in the \uicontrol {3D Editor} when an item is selected the 3D scene. Transformation refers to moving, rotating, or scaling of an
and to determine what happens when you drag the selected item. object. The \e pivot of the component is used as the origin for
Transformation refers to moving, rotating, or scaling of an object. transformations. You can set a \l{Setting Transform Properties}{local pivot
Select the \uicontrol {Toggle Local/Global Orientation} button (3) to offset} for an item in \uicontrol Properties to transform the component
determine whether the gizmos affect only the local transformations of the around a point other than its local origin. A line is drawn in \uicontrol
item or whether they transform with respect to the global space. {3D Editor} from the pivot point to the center of the component to provide
a visual connection between them.
Toggle between local and global orientation to determine whether the gizmos
affect only the local transformations of the item or whether they transform
with respect to the global space.
Additional helpful features when editing 3D scenes are the \e {edit light},
which is a quick way to light the scene, and the grid that helps you to
navigate in 3D space. Select the \inlineimage grid_on.png
(\uicontrol {Toggle Grid Visibility}) to show or hide the grid.
\image studio-3d-editor.png "3D Editor" \image studio-3d-editor.png "3D Editor"
The \e pivot of the component is used as the origin for position, scale, \section1 Controlling the 3D Editor Camera
and rotation operations. You can set a \l{Setting Transform Properties}
{local pivot offset} for an item in the \uicontrol Properties view to
manipulate the component around a point other than its local origin. A
line is drawn in the 3D editor from the pivot point to the center of the
component to provide a visual connection between them.
\section1 Controlling the Edit View Camera To switch to perspective camera mode, select
\inlineimage perspective_camera.png
(\uicontrol {Toggle Perspective/Orthographic Edit Camera}).
To switch to orthographic camera mode, select
\inlineimage orthographic_camera.png
.
You can add 3D camera types to the scene to project the view you see in You can navigate the scene by panning, rotating, and zooming the 3D Editor
the View3D type in the application. While editing scenes, you can use camera:
a separate \e {edit view camera} (4) to project the scene to the 3D edit
view in the Design mode.
You can navigate the scene by rotating, panning, and zooming the edit view \list
camera. \li To pan, press \key Alt and use the middle mouse button to click
anywhere in the rendered view to slide the view around.
\li To orbit, press \key Alt and click anywhere in the rendered view to
rotate the view.
\li To zoom, use the mouse wheel or press \key Alt and right-click
anywhere in the rendered view to zoom the view in or out as you drag
up or down.
\endlist
To zoom, use the mouse wheel or press \key Alt and right-click anywhere in To zoom and focus the 3D Editor camera on a selected item,
the rendered view to zoom the view in or out as you drag up or down. select \inlineimage fit_selected.png
(\uicontrol {Fit Selected}) or press \key F.
To pan, press \key Alt and use the middle mouse button to click anywhere in The world axis helper (1) shows the direction of the world axes in respect
the rendered view to slide the view around. to the 3D Editor camera. To point the camera at the currently selected
To orbit, press \key Alt and click anywhere in the rendered view to rotate
the view.
To scale the edit view camera and to focus it on the selected items, select
\uicontrol {Fit Selected} button or press \key F.
The world axis helper (5) shows the direction of the world axes in respect
to the edit view camera. To point the camera at the currently selected
component in the direction of an axis, click the axis. If no component component in the direction of an axis, click the axis. If no component
is selected, the camera is pointed at the world origin. This does not is selected, the camera is pointed at the world origin. This does not
affect the camera zoom level. affect the camera zoom level.
For more information about using the cameras in the scene, the available \image studio-3d-editor-axis-helper.png "Axis helper in 3D Editor"
3D camera types, and their properties, see \l{Using Scene Camera}.
You can use scene cameras (2) to view the the View3D type from a specific
angle in \uicontrol {Form Editor} while editing scenes. Different types of
cameras are available in \uicontrol Library under \uicontrol
{Qt Quick 3D}. For more information about using cameras in the scene,
the available camera types, and their properties, see
\l{Using Scene Camera}.
\section1 Using Global and Local Orientation
To switch between local and global orientation, select
\inlineimage local.png
or \inlineimage global.png
(\uicontrol {Toggle Local/Global Orientation})
or press \key Y.
In global orientation mode, transformation of a selected object is presented
with respect to the global space. For example, while the move tool is
selected, selecting a cube will show its move gizmo aligned with the axes
of global space. Dragging on the red arrow of the gizmo moves the object in
the global x direction.
In local orientation mode, the position of a selected object is shown
according to local axes specific to the selected object. For example,
selecting a rotated cube will show its axes rotated, and not aligned with
the axes of global space. Dragging on the red arrow of the gizmo
moves the object in the local x direction in relation to the object.
\section1 Using Edit Light
The edit light is an extra point light that follows the edit camera.
To switch the edit light on and off, select \inlineimage edit_light_on.png
or \inlineimage edit_light_off.png
(\uicontrol {Toggle Edit Light})
or press \key U.
For more information about the available scene light types and their
properties, see \l{Using Lights}.
\section1 Selecting Items \section1 Selecting Items
To move, rotate, or scale items in the scene, you need to select them first. To move, rotate, or scale items in the scene, you need to select them first.
The selection mode buttons determine how items are selected when you click The selection mode buttons determine how items are selected when you click
them in the 3D editor. them in \uicontrol {3D Editor}:
\list \list
\li In the \inlineimage select_item.png \li In the \inlineimage select_item.png
@@ -111,80 +156,54 @@
\section1 Moving Items \section1 Moving Items
\image studio-3d-editor-move.png "3D editor in move mode" \image studio-3d-editor-move.png "3D Editor in move mode"
You can move items in relation to their coordinate system, along the x, y, You can move items in relation to their coordinate system, along the x, y,
or z view axis or on the top, bottom, left, and right clip planes of the or z axis or on the top, bottom, left, and right clip planes of the
render camera. \uicontrol {3D Editor} camera.
To move items, select \inlineimage move_on.png To move items, select \inlineimage move_on.png
or press \key W. or press \key W:
To move items along an axis, click the axis and drag the item along the \list
axis. \li To move items along the axes of the move gizmo, click the axis and
drag the item along the axis.
To move items on a plane, select the plane handle and drag the item on \li To move items on a plane, click the plane handle and drag the item
the plane. on the plane.
\li To move an item freely in the editor, click the gray handle at the
To move an item freely in the editor, select the handle at the center of center of the item.
the item. \endlist
\section1 Rotating Items \section1 Rotating Items
You can rotate items around the view axes of the camera. \image studio-3d-editor-rotate.png "3D Editor in rotate mode"
\image studio-3d-editor-rotate.png "3D editor in rotate mode"
To rotate items, select \inlineimage rotate_on.png To rotate items, select \inlineimage rotate_on.png
or press \key E. or press \key E:
To rotate an item around an axis, select the axis and drag in the direction \list
you want to rotate the item in. \li To rotate an item around its rotation gizmo, click the axis and
drag in the direction you want to rotate the item in.
To freely rotate the item, select the gray circle. \li To freely rotate the item, select the gray circle.
\endlist
\section1 Using Global and Local Orientation
To switch between global and local orientation, select \uicontrol
{Toggle Local/Global Orientation}.
In global orientation mode, transformation of a selected object is presented
with respect to the global space. For example, while the move tool is
selected, selecting a cube will show its move gizmo aligned with the axes
of global space. Dragging on the red arrow of the gizmo moves the object in
the global x direction.
In local orientation mode, the position of a selected object is shown
according to local axes specific to the selected object. For example,
selecting a rotated cube will show its axes rotated, and not aligned with
the axes of global space. Dragging on the red arrow of the gizmo
moves the object in the local x direction in relation to the object.
\section1 Scaling Items \section1 Scaling Items
\image studio-3d-editor-scale.png "3D editor in scale mode" \image studio-3d-editor-scale.png "3D Editor in scale mode"
To scale items, select \inlineimage scale_on.png
or press \key R.
You can use the scale handles to adjust the local x, y, or z scale of an You can use the scale handles to adjust the local x, y, or z scale of an
item. You can adjust the scale across one, two, or three axes, depending item. You can adjust the scale across one, two, or three axes, depending on
on the handle. the handle.
To adjust the scale across one axis, select the scale handle attached to To scale items, select \inlineimage scale_on.png
the axis. To uniformly scale an item across all axes, select the handle or press \key R:
at the center of the item.
To adjust the scale across a plane, select the plane handle and drag the \list
item on the plane. \li To adjust the scale across one axis, click and drag the scale handle
attached to the axis.
\section1 Using Edit View Light \li To adjust the scale across a plane, click the plane handle and drag
the item on the plane.
You use 3D light types to light the models in the scene. While editing \li To uniformly scale an item across all axes, click and drag the
scenes, you can use a separate \e {edit view light} to illuminate the handle at the center of the item.
portions of the scene that the scene lights do not hit. To switch the edit \endlist
view light on and off, select the \uicontrol {Toggle Edit Light} button (6).
For more information about the available scene light types and their
properties, see \l{Using Lights}.
*/ */

View File

@@ -68,7 +68,7 @@
\QDS opens QML files that contain 3D scenes in the Design mode and \QDS opens QML files that contain 3D scenes in the Design mode and
the scenes in the 3D editor. You can add imported 3D assets the scenes in the 3D editor. You can add imported 3D assets
to projects as 3D components. to projects as 3D components.
\li \l {Working in the 3D Editor} \li \l {Working in 3D Editor}
You can select 3D components in the 3D editor to move, rotate, and You can select 3D components in the 3D editor to move, rotate, and
scale them in the scene projected by the camera. scale them in the scene projected by the camera.