diff options
Diffstat (limited to 'doc/qtdesignstudio/src/qtquick3d-editor')
5 files changed, 176 insertions, 172 deletions
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-design-mode.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-design-mode.qdoc index 3d9da455cb..e2457f512f 100644 --- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-design-mode.qdoc +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-design-mode.qdoc @@ -35,57 +35,41 @@ \title Editing 3D Assets in Design Mode \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 - to projects and edit them to create scenes and states, as well as the - transitions between them. + scenes in \uicontrol {3D Editor}. You can add imported 3D assets to projects + and edit them to create scenes and states, as well as the transitions + between them. The other views enable you to select QML types to use in the + scene, specify properties for them, and view them in a tree structure, + as well as to create connections and browse projects and files. \image studio-editing-3d-scenes.png "3D assets in Design mode" - To edit 3D scenes in the Design mode: + To open the following views, select \uicontrol Window > \uicontrol Views: \list \li \uicontrol {3D Editor} (1) is the working area where you create the scene, position the model, light and camera, as well as move and - scale items. - \li \uicontrol {3D View} (2) is where you see the scene projected by the - camera. - \li The sidebars contain views where you can select QML types to use in - the scene, specify properties for them, and view them in a tree - structure, as well as to create connections and browse projects and - files. You can select the content of the sidebars in the sidebar - menu: - \list - \li \uicontrol {Library} (3) displays the building blocks that you - can use to create scenes: predefined Qt Quick 3D Components, - Qt Quick Controls, your own 3D assets that you import to the - project, and other assets. For more information, see - \l {Adding 3D Views}. - \li \uicontrol {Navigator} (4) displays the items in the current QML - file as a tree structure. For more information, see - \l {Managing Item Hierarchy}. - \li \uicontrol {Properties} (5) organizes the properties of the - selected item. You can change the properties also in the - \uicontrol {Text Editor}. For more information, see - \l {Specifying Item Properties}. - \li \uicontrol Connections enables you to create connections - between objects, signals, and object properties. For more - information, see \l{Adding Connections}. - \li \uicontrol {File System} shows all files in the currently - selected directory. For more information, see - \l{Viewing the File System}. - \li \uicontrol {Open Documents} shows currently open files. - \li \uicontrol {Projects} shows a list of projects open in the - current session. For more information, see - \l{Viewing Project Files}. - \endlist - \li \uicontrol {States} displays the different states of the - item. QML states typically describe user interface configurations, - such as the UI controls, their properties and behavior and the - available actions. For more information, see \l{Adding States}. - \li \uicontrol Timeline (6) provides a timeline and keyframe based + scale items. For more information, see \l {Working in 3D Editor}. + \li \uicontrol {Form Editor} (2) is where you see the scene projected by + the camera. + \li \uicontrol {Library} (3) displays the building blocks that you + can use to create scenes: predefined Qt Quick 3D Components, + Qt Quick Controls, your own 3D assets that you import to the + project, and other assets. For more information, see \l {Adding 3D + Views}. + \li \uicontrol {Navigator} (4) displays the items in the current QML + file as a tree structure. For more information, see + \l {Managing Item Hierarchy}. + \li \uicontrol {Properties} (5) organizes the properties of the + selected item. You can change the properties also in the + \uicontrol {Text Editor}. For more information, see + \l {Specifying Item Properties}. + \li \uicontrol Connections (6) enables you to create connections + between objects, signals, and object properties. For more + information, see \l{Adding Connections}. + \li \uicontrol Timeline (7) provides a timeline and keyframe based editor that enables you to animate the properties of components. \endlist - To close the 3D editor, select \uicontrol 2D in the list on the toolbar (7). - To reopen it, select \uicontrol {2D/3D}. + For more information on other views, see + \l {Editing QML Files in Design Mode}. */ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-editor.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-editor.qdoc index 5b7fe602d5..cc42cbc100 100644 --- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-editor.qdoc +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-editor.qdoc @@ -28,75 +28,120 @@ \page studio-3d-editor.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 - from a \l{Using Scene Camera}{camera}. Select the \uicontrol {Toggle - Perspective/Orthographic Projection} button (1) on the 3D editor toolbar to - switch between a \e {perspective camera} and an \e {orthographic camera}. - A perspective camera uses field of view and near and far clip planes to - specify the projection, whereas an orthographic camera can be thought of - as a 2D camera. Both of them are free-form cameras that you can use to - orbit around the scene. + When editing a 3D scene, you view the scene in \uicontrol {3D Editor} by + using the \uicontrol {3D Editor} camera. You can switch between + \e {perspective camera} and \e {orthographic camera} modes. When using the + perspective camera mode, objects that are far from the camera appear smaller + than those nearby. In the orthographic camera mode, all objects appear at + the same scale irrespective of their distance from the camera. Both of them + are free-form camera modes that you can use to orbit around the scene. 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 - scene did not contain them, you can add the corresponding Qt Quick 3D - types from the \uicontrol Library. - - You can use the toolbar buttons (2) to show the \e transformation - gizmo in the \uicontrol {3D Editor} when an item is selected - and to determine what happens when you drag the selected item. - Transformation refers to moving, rotating, or scaling of an object. - Select the \uicontrol {Toggle Local/Global Orientation} button (3) to - determine whether the gizmos affect only the local transformations of the - item or whether they transform with respect to the global space. + tools, you also import a \l{Using Scene Camera}{scene camera}, + \l{Using Lights}{light}, \l{Adding Models}{model}, and + \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 to \e transform 3D objects and manipulate + the 3D scene. Transformation refers to moving, rotating, or scaling of an + object. The \e pivot of the component is used as the origin for + transformations. You can set a \l{Setting Transform Properties}{local pivot + offset} for an item in \uicontrol Properties to transform the component + around a point other than its local origin. A line is drawn in \uicontrol + {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" - The \e pivot of the component is used as the origin for position, scale, - 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 3D Editor Camera - \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 - the View3D type in the application. While editing scenes, you can use - 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 panning, rotating, and zooming the 3D Editor + camera: - You can navigate the scene by rotating, panning, and zooming the edit view - camera. - - 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. - - To pan, press \key Alt and use the middle mouse button to click anywhere in - the rendered view to slide the view around. - - To orbit, press \key Alt and click anywhere in the rendered view to rotate - the view. + \list + \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 scale the edit view camera and to focus it on the selected items, select - \uicontrol {Fit Selected} button or press \key F. + To zoom and focus the 3D Editor camera on a selected item, + select \inlineimage fit_selected.png + (\uicontrol {Fit Selected}) 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 + The world axis helper (1) shows the direction of the world axes in respect + to the 3D Editor camera. To point the camera at the currently selected 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 affect the camera zoom level. - For more information about using the cameras in the scene, the available - 3D camera types, and their properties, see \l{Using Scene Camera}. + \image studio-3d-editor-axis-helper.png "Axis helper in 3D Editor" + + 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 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 - them in the 3D editor. + them in \uicontrol {3D Editor}: \list \li In the \inlineimage select_item.png @@ -111,80 +156,54 @@ \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, - or z view axis or on the top, bottom, left, and right clip planes of the - render camera. + or z axis or on the top, bottom, left, and right clip planes of the + \uicontrol {3D Editor} camera. 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 - axis. - - To move items on a plane, select the plane handle and drag the item on - the plane. - - To move an item freely in the editor, select the handle at the center of - the item. + \list + \li To move items along the axes of the move gizmo, click the axis and + drag the item along the axis. + \li To move items on a plane, click the plane handle and drag the item + on the plane. + \li To move an item freely in the editor, click the gray handle at the + center of the item. + \endlist \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 - or press \key E. - - To rotate an item around an axis, select the axis and drag in the direction - you want to rotate the item in. - - To freely rotate the item, select the gray circle. - - \section1 Using Global and Local Orientation - - To switch between global and local orientation, select \uicontrol - {Toggle Local/Global Orientation}. + or press \key E: - 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. + \list + \li To rotate an item around its rotation gizmo, click the axis and + drag in the direction you want to rotate the item in. + \li To freely rotate the item, select the gray circle. + \endlist \section1 Scaling Items - \image studio-3d-editor-scale.png "3D editor in scale mode" - - To scale items, select \inlineimage scale_on.png - or press \key R. + \image studio-3d-editor-scale.png "3D Editor in scale mode" 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 - on the handle. - - To adjust the scale across one axis, select the scale handle attached to - the axis. To uniformly scale an item across all axes, select the handle - at the center of the item. + item. You can adjust the scale across one, two, or three axes, depending on + the handle. - To adjust the scale across a plane, select the plane handle and drag the - item on the plane. - - \section1 Using Edit View Light - - You use 3D light types to light the models in the scene. While editing - scenes, you can use a separate \e {edit view light} to illuminate the - portions of the scene that the scene lights do not hit. To switch the edit - view light on and off, select the \uicontrol {Toggle Edit Light} button (6). + To scale items, select \inlineimage scale_on.png + or press \key R: - For more information about the available scene light types and their - properties, see \l{Using Lights}. + \list + \li To adjust the scale across one axis, click and drag the scale handle + attached to the axis. + \li To adjust the scale across a plane, click the plane handle and drag + the item on the plane. + \li To uniformly scale an item across all axes, click and drag the + handle at the center of the item. + \endlist */ diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-scene-environment.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-scene-environment.qdoc index 16653e7f4b..8a54021a19 100644 --- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-scene-environment.qdoc +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-scene-environment.qdoc @@ -80,13 +80,12 @@ To clear the background using a color, select \uicontrol Color, and select the color in the \uicontrol {Clear Color} field. - To leave the scene uncleared, select \uicontrol {Unspecified}. - - \section1 Blending Scene Colors + To render a Skybox or Skydome instead of clearing the scene, + select \uicontrol SkyBox. You can specify the image to use as + a value of the \l{SceneEnvironment::lightProbe}{lightProbe} + property in \uicontrol {Text Editor}. - To determine how colors are blended, select a blend mode in the - \uicontrol {Blend mode} field. For more information on the options, - see \uicontrol {Blending Colors}. + To leave the scene uncleared, select \uicontrol {Unspecified}. \section1 Performing Depth Tests diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-view.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-view.qdoc index de74979357..3cc6c92d2f 100644 --- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-view.qdoc +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-view.qdoc @@ -30,32 +30,34 @@ \title Adding 3D Views - To display \l {Qt Quick 3D} types in the \uicontrol Library, select - \uicontrol Library > \uicontrol {QML Imports} > \uicontrol {Add Import} > - \uicontrol QtQuick3D. The types are displayed in the \uicontrol {QML Types} - tab. + You can use a wizard to create a Qt Quick 3D UI project that imports + the \l{Qt Quick 3D} QML types to the \uicontrol {QML Types} tab in + \uicontrol Library and contains a 3D view, scene light, camera, and + model. A default material is attached to the model. You can attach + textures to materials. For more information about creating projects, + see \l{Creating Projects}. + + To add a 3D view to some other kind of project and to display the Qt Quick + 3D QML types in \uicontrol Library, select \uicontrol Library > + \uicontrol {QML Imports} > \uicontrol {Add Import} > \uicontrol QtQuick3D. \image studio-qtquick-3d-components.png - To add a 3D view to the scene, drag and drop a \uicontrol {View 3D} - component from \uicontrol Library > \uicontrol {QML Types} > - \uicontrol {Qt Quick 3D} to the 3D editor or to the \uicontrol Navigator. - A 3D view contains a reference node that specifies a scene light, camera, - and model. A default material is attached to the model. You can attach - textures to materials. + To add components to the scene, drag and drop them to \uicontrol Navigator + or \uicontrol {Form Editor}. \image studio-navigator-view3d.png "View 3D component in the Navigator" By default, a directional light and a perspective camera are used. - To use other light and camera types, change the type of the component in - the \uicontrol Type field in the \uicontrol Properties view. For example, + To use other light and camera types, change the type of the component + in the \uicontrol Type field in \uicontrol Properties. For example, to use a point light, enter \e {PointLight}. \image studio-3d-properties-type.png "Type field in Properties view" - To edit component properties, select the component in the 3D editor - or in the \uicontrol Navigator and modify the property values in the - \uicontrol Properties view. + To edit component properties, select the component in + \uicontrol {Form Editor} or \uicontrol Navigator and + modify the property values in \uicontrol Properties. \image studio-qtquick-3d-view.png "View 3D component properties" diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d.qdoc index 6a2939e5e9..ab65cea8f4 100644 --- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d.qdoc +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d.qdoc @@ -68,7 +68,7 @@ \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 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 scale them in the scene projected by the camera. |