Inserting 3D objects

This page applies to WPF projects only

Microsoft Expression Blend offers useful tools for creating, modifying, and animating 3D objects.

Expression Blend can import 3D content in the .obj file format. For these files to render correctly, you must also import the material file (.mtl file) that defines the materials used on the 3D object, and import all the image files that are used in the material file.

3D content is contained in a Viewport3D control. This viewport acts as a sort of wrapper or container for the 3D content. You can modify the materials, the lights, and the camera in the Properties panel to give desired effects and visual attributes to your 3D content.

Cc295225.eba8e7a7-0039-4fe7-a01f-d20734750a82(en-us,Expression.30).png

Cc295225.25182a96-9a69-478a-9cfe-5b360e6a9bea(en-us,Expression.30).png

Viewport3D

A two-dimensional (2D) control, like an ellipse, that acts as a container for rendering three-dimensional (3D) content in a document.

Cc295225.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(en-us,Expression.30).png

Camera

Represents a viewpoint in a document, and behaves like a video camera. The camera is used to take the 3D content and convert it into a 2D image (a normal, flat object) for the screen. There are two types of camera: perspective and orthographic.

Cc295225.f0c1ff71-7814-42ba-806b-7ea92d616e69(en-us,Expression.30).png

Material

Materials for 3D content represent the color, texture, and general appearance of the actual 3D object itself. Lighting can also affect the visual appearance of the object, but materials directly affect the surfaces of the 3D object. There are three types of material: diffuse, emissive, and specular.

Cc295225.eb6fad93-f17e-4f62-a926-8c8651862891(en-us,Expression.30).png

Lights

As you might expect, lights add illumination to the 3D content. Without light you will not see your 3D content. There are four types of light: ambient, spot, directional, and point.

The 3D model

You have several ways to change the orientation and location of a 3D object using handles. For example, by using the Selection tool Cc295225.2ff91340-477e-4efa-a0f7-af20851e4daa(en-us,Expression.30).png, you can double-click the 3D object to select it, and then drag it around the artboard while your mouse displays the relocation cursor Cc295225.eff911a7-b891-4315-a86c-cc4cd088e647(en-us,Expression.30).png. If you try this, you'll notice that the 3D object does not get closer or farther away from you as you drag it. If you then press ALT while dragging up and down with the mouse, you will notice that the 3D object appears to move closer and farther away from you.

You can also rotate, reposition, and scale a 3D object under Transform in the Properties panel just as you would with any object.

Tip

Scaling and resizing are very different ways to change the size of an object. Scaling changes the size of an object and all its properties by a percentage of the starting size; for example, the stroke of an object that has a Stroke property will also scale and no longer map to a specific stroke width. Resizing means that you are changing the Height and Width properties (dimensions) of the object.

The transformation handles are unique in 3D. The following figure and table describe how to best use each one.

3D object that shows all handles
Cc295225.0aa7c80e-8ae9-492f-808b-91661c79b0ef(en-us,Expression.30).png

Axis

Description

Handles

X axis

You can rotate the object around the X axis (red handles) by dragging the X rotation handle Cc295225.188962b3-2c72-4ef1-968a-cc7293731734(en-us,Expression.30).png (red arc). The rotation handle enables you to rotate the object around the X axis, the position handle Cc295225.31416d04-8419-46e4-9e7f-40ba237ba11e(en-us,Expression.30).png (red arrow) enables you to move the object along the X axis, and the scaling handle Cc295225.ae0eb9fb-170a-44f8-a9ef-cf7e2b7313cc(en-us,Expression.30).png (red box) enables you to scale the object along the X axis.

Cc295225.05557e99-7e25-4fe9-b654-46d5fc6aad11(en-us,Expression.30).png

X axis handles for:

Cc295225.25182a96-9a69-478a-9cfe-5b360e6a9bea(en-us,Expression.30).png

Rotation.

Cc295225.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(en-us,Expression.30).png

Position.

Y axis

You can rotate the object around the Y axis (green handles) by dragging the Y rotation handle Cc295225.215fc14e-368f-4a1f-8c64-1e12229321e8(en-us,Expression.30).png (green arc). The rotation handle enables you to rotate the object around the Y axis, the position handle Cc295225.39165395-57a3-49e2-adf7-5de41da5656c(en-us,Expression.30).png (green arrow) enables you to move the object along the Y axis, and the scaling handle Cc295225.ae0eb9fb-170a-44f8-a9ef-cf7e2b7313cc(en-us,Expression.30).png (green box) enables you to scale the object along the Y axis.

Cc295225.1fd95e6e-9274-462d-83e9-cc0a472b140b(en-us,Expression.30).png

Y axis handles for:

Cc295225.25182a96-9a69-478a-9cfe-5b360e6a9bea(en-us,Expression.30).png

Rotation.

Cc295225.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(en-us,Expression.30).png

Position.

Z axis

You can also rotate the object around the Z axis (blue handles) by dragging the Z rotation handle Cc295225.a666c7c7-1ed8-4733-bc82-d12b3bd1c58c(en-us,Expression.30).png (blue arc). The rotation handle enables you to rotate the object around the Z axis, the position handle Cc295225.54265b96-4329-4435-942d-e5ed6e61e0da(en-us,Expression.30).png (blue arrow) enables you to move the object along the Z axis, and the scaling handle Cc295225.ae0eb9fb-170a-44f8-a9ef-cf7e2b7313cc(en-us,Expression.30).png (blue box) enables you to scale the object along the Z axis.

Cc295225.19369f35-ddcf-4d84-b365-a36559a116b8(en-us,Expression.30).png

Z axis handles for:

Cc295225.25182a96-9a69-478a-9cfe-5b360e6a9bea(en-us,Expression.30).png

Rotation.

Cc295225.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(en-us,Expression.30).png

Position.

Note

When rotating, you can snap the rotation every 15 degrees by holding down the SHIFT key.

Materials

Materials for 3D content represent the color, texture, and general appearance of the actual 3D object itself. Lighting can also affect the visual appearance of the object, but materials directly affect the surfaces of the 3D object. By selecting from the three different material types, you can make different modifications to your 3D content, as follows:

  • Diffuse Material Cc295225.f4276d84-0e9b-439e-a6f1-dc2db7128d0f(en-us,Expression.30).png   Determines the color of the 3D object that has direct light (white light) applied to it, much like paint on a wall.

  • Emissive Material Cc295225.edb5d581-218f-4bd4-ad88-8f07b9e87140(en-us,Expression.30).png   Causes the object to appear to be giving off light. The color of the light is determined by the color of the material.

  • Specular Material Cc295225.de37968c-c6c7-43b8-9ada-8ca0c9998b5c(en-us,Expression.30).png   Controls the color of the specular highlight on a 3D object. Specular highlights are the bright spots that you see on a glossy surface such as chrome.

The camera

The camera for 3D content represents a vantage point and behaves much like a video camera. The camera is used to convert the 3D content into a 2D image (a normal, flat object) for the screen. The camera for each Viewport3D can be found as a property of that viewport. If you select a camera in the objects view in the Objects and Timeline panel, you can then modify its properties using the Properties panel under Camera. Each viewport has only one camera property associated with it, but you can switch the type of camera between a perspective camera and an orthographic camera to change how the objects appear in your application:

  • A perspective camera works like an ordinary camera lens. As objects get farther away from the camera, they appear to get smaller. Click PerspectiveCameraCc295225.3cacfb92-e2f5-4f68-a478-e79ff491201d(en-us,Expression.30).png under Camera in the Properties panel to switch to this camera.

  • An orthographic camera turns off the perspective of an ordinary camera. Objects do not appear to get smaller or distort as they move farther from an orthographic camera. Click Orthographic CameraCc295225.035d804b-9193-4c84-aca2-308c24e87563(en-us,Expression.30).png under Camera in the Properties panel to switch to this camera.

Perspective camera
Cc295225.6122adef-3582-4de3-8868-fb21a23bf0ce(en-us,Expression.30).pngOrthographic camera
Cc295225.ffa3ca6d-a4b1-4900-b501-decc2c1747d8(en-us,Expression.30).png

You can move the camera by using the Camera Orbit tool Cc295225.0f80cb0b-7405-4759-9e97-fcde9a53cbb5(en-us,Expression.30).png. You can also move the camera and make additional changes to each type of camera under Camera in the Properties panel:

  • Perspective Field of View   For the perspective camera only, this attribute changes the amount of the content that is visible through the camera and the amount that objects in the document appear to be distorted by the camera. Small values reduce the amount that an object is distorted by perspective and large values cause objects to become very distorted, as with a fisheye lens.

  • Width   For the orthographic camera only, this attribute controls how much of the content is visible. As this number increases, more of the content will be visible.

  • Position   The position of the camera in three-dimensional virtual space.

  • Direction   The point at which the camera is looking in three-dimensional virtual space.

  • Up Vector   Moving in the direction that is "up" for this camera.

  • Far/Near Clipping Planes   These options control how close to or far away from the camera an object can get before it disappears from the rendered view.

For more information about how to modify the camera, see Move the camera.

Lights

As you might expect, lights add light to the 3D content. Without light, you will not see much of your 3D content because the appearance would be much like trying to see something with absolutely no light. Lights are properties of Viewport3D controls, and you can modify their settings by selecting them in the objects view in the Objects and Timeline panel.

You can transform a light by using the transformation handles that appear when you select a light (the red, green, and blue handles in the following images in the "Types of light" section, later in this topic).

For more information about how to move lights, see Move the direction of a light.

Additionally, you can change several attributes of a light, but the two primary attributes you will probably want to change are its color and type.

Light color

Changing the color of a light is as simple as changing the color of a 2D object. You can change light color as long as you have a Light object selected in a Viewport3D. Then, you can change a light by using the color editor under Light in the Properties panel.

For an example, see Change the color of a light.

Types of light

The following table describes the types of light that you can apply to a 3D object. You can change the light type as long as you have a Light object selected in a Viewport3D. Then, you can select a different light type under Light in the Properties panel.

For an example, see Change the type of light.

Light type and description

Working with lights on the artboard

Ambient LightCc295225.9f305304-9ef4-40c3-8c40-2195dd8bde81(en-us,Expression.30).png

Ambient light casts light as if it is coming from all directions. Use this option when you want to light all objects evenly.

Cc295225.alert_tip(en-us,Expression.30).gifTip:
If you have only an ambient light, your object might appear to be washed out and lit by only one shade of color. For the best effect, use an additional nonambient light also.
Cc295225.a6d6e8c5-0307-45a6-aff0-c3972353e92b(en-us,Expression.30).png

Spot Light Cc295225.7273622f-aa70-4d16-a093-ed15d8e66ef0(en-us,Expression.30).png

Spot light casts light like a real spot light. The light starts from the position of the light and spreads out in the shape of a cone. Parts of a 3D object outside the cone of light will not be affected by the spot light.

Cc295225.66eb0a06-7bfc-4c9e-976e-f2be9cc4446d(en-us,Expression.30).png

Directional Light Cc295225.662d3d1c-a7ce-4637-a770-06a07cad45dd(en-us,Expression.30).png

Directional light casts light evenly in a specific direction, much like sunlight.

Cc295225.5af771b3-e0bd-4798-988f-f8e5ed3df458(en-us,Expression.30).png

Point Light Cc295225.48a69ca1-852e-48ce-8424-4ec9a4d20c43(en-us,Expression.30).png

Point light casts light outward from a single point in all directions, much like a standard light bulb.

Cc295225.261f55a3-4604-4474-915f-c88665bf8aab(en-us,Expression.30).png

Tip

To see all the lights acting on your object at the same time, point to 3D on the View menu, and then click Toggle Lights.

Other light properties

You can make additional changes to each type of light under Light in the Properties panel by modifying the following attributes:

  • Attenuation   The way in which the power of the light decays as it moves farther from the lit object. You can modify the following attenuation properties:

    • ConstantAttenuation   The power of the light will not change as the lit object moves farther from the light.

    • LinearAttenuation   The power of the light drops at a constant rate as the lit objects moves farther from the light.

    • QuadraticAttenuation   The power of the light drops quickly at first and then more slowly as the lit object moves farther from the light.

    Note

    Attenuation properties apply only to the Spot Light and Point Light light types.

  • Direction   The direction in which the light is facing. Direction properties apply only to the Spot Light and the Directional Light light types.

  • Cone Angle   The angle that determines the width of the cone of light that extends from the selected light. If you shine a flashlight on the ground, the flashlight does not light the ground evenly, but is dimmer farther from the center. Cone Angle lets you control how quickly this falloff occurs. You can modify the following cone angle properties:

    • InnerConeAngle   The angle of the brightest, central part of the light.

    • OuterConeAngle   The angle of the dimmer, outer part of the light. To create a strong light, make the inner and outer cone angles the same. If the value of the inner cone angle is larger than the outer cone angle, the values are treated as the same as the outer cone angle.

    Note

    Cone angle properties apply only to the Spot Light light type.

  • Position   The position of the light in the group that contains it. The three values are the X, Y, and Z position of the light. Position properties apply only to the Spot Light and Point Light light types.

  • Range   The range of the light. Objects that are in range will be lit by the light. Objects beyond the range of the light will not be lit by the light. Range properties apply only to the Spot Light and Point Light light types.

Support for new 3D objects

The .NET Framework 3.5 introduces the following new 3D objects:

  • UIElement3D (not supported in XAML)

  • ContainerUIElement3D

  • ModelUIElement3D

  • Viewport2DVisual3D

Expression Blend does not include the new 3D objects in the Assets panel. However, you can use them by making modifications manually in XAML, or by using Microsoft Visual Studio 2008 to add the objects and then open your project in Expression Blend. The new 3D objects are recognized by Expression Blend, and you can use the 3D adorners to adjust those objects in the scene. Example code for the new objects can be found on MSDN.