How Do I Make a Viewer in SketchUp?

by

In this tutorial, we will learn how to create a viewer in SketchUp. A viewer is a great way to showcase your 3D models and allow others to explore them interactively. So, let’s get started!

Step 1: Importing your model

To begin, open SketchUp and import the 3D model you want to create a viewer for. You can either use an existing model or create a new one from scratch. Once your model is ready, save it.

Step 2: Setting up the viewer environment

Now, let’s set up the environment for our viewer. First, create a new HTML file and open it in your favorite text editor or IDE. Then, add the following code:

<!DOCTYPE html>
<html>
<head>
    <title>SketchUp Viewer</title>
    <style>
        /* Add your custom CSS styles here */
    </style>
</head>
<body>

    <!-- Add your viewer code here -->

    <script src="viewer.js"></script>
</body>
</html>

In this code snippet, we have added the basic structure of an HTML file along with a placeholder for adding custom CSS styles later.

Step 3: Adding the viewer code

Now it’s time to add the actual viewer code. SketchUp provides an official JavaScript library called “SketchUp Viewer API” that allows us to embed models into our web page.

To get started with the SketchUp Viewer API, download the viewer.js file from the official SketchUp website and place it in the same directory as your HTML file. Once you have the viewer.js file, add the following code to your HTML file:

<div id="viewer"></div>

<script>
    var viewerElement = document.getElementById('viewer');
    var options = {
        /* Add your viewer options here */
    };
    var viewer = new SketchupViewer(viewerElement, options);
</script>

In this code snippet, we have added a <div> element with an ID of “viewer” to our HTML. This is where the 3D model will be displayed. We have also created a JavaScript variable named viewer and initialized it with a new instance of the SketchUp Viewer using the SketchupViewer() constructor.

Step 4: Customizing the viewer

The SketchUp Viewer API provides various options that allow us to customize the viewer according to our needs. These options can be passed as an object when initializing the viewer.

To customize the viewer, update the options object in your HTML file with the desired configuration. For example:

<script>
    // ..

    var options = {
        model: 'path/to/your/model.skp',
        /* Add more options here */
    };

    // .
</script>

In this example, we have added a model option that specifies the path to our SketchUp model file (replace ‘path/to/your/model.skp’ with your actual model’s path).

Step 5: Adding interactivity

By default, the SketchUp Viewer allows users to rotate and pan the model using their mouse or touch gestures. However, you can add additional interactivity options to enhance the viewer experience.

For example, you can enable or disable certain navigation tools, show/hide specific components, define custom camera views, etc. Refer to the SketchUp Viewer API documentation for a detailed list of available options and methods.

Step 6: Styling the viewer

Now that our viewer is set up and functional, let’s add some custom styles to make it visually appealing. Update the <style> section in your HTML file with your desired CSS styles.

<style>
    #viewer {
        width: 100%;
        height: 500px;
    }
    
    /* Add more custom styles here */
</style>

In this example, we have set the width of the viewer container to 100% and its height to 500 pixels. You can modify these values and apply any other CSS styles as per your requirements.

Congratulations!

You have successfully created a viewer in SketchUp using HTML. Now you can embed your 3D models into web pages and share them with others!

This tutorial covered only the basics of creating a simple viewer. If you want to explore more advanced features of the SketchUp Viewer API, make sure to check out their official documentation for comprehensive guidance.

Happy viewing!