Cube Cities Blog

The Cube Cities Blog

13 April 2015

A How-To Guide For Exploring 3D Buildings in Cesium



Cesium is a great way to explore models of 3D buildings in their actual locations on Earth. Cesium is also an easy (and free) means to embed 3D models on a web page so they can be explored by users on nearly any platform. Here's a quick How-To on loading a building model from SketchUp into Cesium.

Step 1
Create a new model or open an existing model in SketchUp. To find a model of a real building use Trimble's 3D Warehouse. Download the model in SketchUp format. For this example we've shared our model of the Shanghai World Financial on the 3D Warehouse.

Trimble's 3D Warehouse
Step 2
Export a Collada (.dae) file from SketchUp. When doing so its best to create a new folder and export both the .dae file and Collada assets into the new folder. For this example we've exported the file to a folder called WFC.

Compress the Collada folder containing the export into a new file. We now have WFC.zip.

click to expand
Step 3
Use the Cesium-to-glTF Converter tool on the Cesiumjs.org website to generate a .gltf file from the compressed model folder. Simply drag the WFC.zip into the box and the Converter will return a glTF file. The model will be displayed on the page once it's successfully converted.

Cesium-to-glTF Converter page

Step 4
Copy the glTF file to a webserver where you will be running an instance of Cesium. We'll assume Cesium is already deployed on the webserver.


Step 5
Both the .glTF file and the model's coordinates need to be pointed to in the Cesium startup script.

Remember that Collada models are not geolocated. This means that the latitude and longitude of the model needs to be included in the Cesium loading script. If the model has already been geolocated we can find the latitude and longitude in SketchUp from the Model Info window.

Finding geolocation in SketchUp 15.2

SketchUp reports the model has Latitude: 31.236433N and Longitude: 121.502979E

The directional 'N' and 'E' can be omitted and we can record the values into the Cesium script in the following format:

var viewer = new Cesium.Viewer('cesiumContainer');var entity = viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(121.502979, 31.236433),
    model : {
        uri : 'WFC.gltf'
    }});

viewer.trackedEntity = entity;


Step 6
Open and explore the model in Cesium! Click here to see our example page for the Shanghai World Financial Center. Note the page opens directly to a correct birds-eye view of the building model. Remember that because Cesium is amazing and uses WebGL this page will open and behave identically in current web browsers on Mac, PC, iOS or Android.

Shanghai Financial World Center, 100 Century Avenue, Pudong, Shanghai, China
Keep in mind that you can use the Base Map Picker to see different maps around your model no matter where its located on Earth. Imagery providers include Bing Maps, ESRI, OpenStreet-Map and more.

Base Map Picker in Cesium
Contact us with any questions or for help setting up your own 3D building model in Cesium.

9 April 2015

The Density of the 'XYZ' Buildings at Rockefeller Center

The 'XYZ' Buildings
These three enormous buildings in midtown are collectively known as the 'XYZ' buildings, each sharing a similar slab-design that maximizes floor area. The Exxon Building (1971), McGraw-Hill Building (1969) and Time-Life Building (1958) represent the expansion of Rockefeller Center in the 1960s. Harrison, Abramovitz & Harris was the architectural firm that designed each building.

Combined with 1211 Avenue of Americas, which was built in 1973 and also designed by Harrison's firm, these four massive buildings comprise nearly 8.7 million square feet of office and retail space. 

McGraw-Hill: 2,500,000 sqft
Exxon Building: 2,300,000 sqft
Time-Life Building: 1,970,000 sqft
1211 Avenue of the Americas: 1,925,425 sqft
Total = 8,698,425 sqft

When standing in Times Square or on Sixth Avenue anywhere from 47th to 49th Street, these buildings project a feeling of commercial power and corporate establishment.

The imagery below illustrates these buildings in their midtown context with the background buildings of midtown visible in the last image.



8.7M sqft
(click to expand)


5 April 2015

260 & 261 Madison Avenue + 1 Vanderbilt massing

The Cesium mapping software makes it easy to load and manipulate high quality photo textured (Collada) models of office buildings and articulate them with property data. The imagery below showcase these Grand Central-district buildings that were both built in 1953. Web applications that illustrate buildings in this method and can reveal floor level data are products provided by Cube Cities.

260 & 261 Madison Avenue
Floor information highlighted on 261 Madison Avenue

The imagery below compares the scale of 260 & 261 Madison Avenue with One Vanderbilt, the supertall skyscraper proposed West of Grand Central Terminal on 42nd Street.

For comparison purposes, the rooftop heights of 260 & 261 Madison are 300 and 347 feet, the proposed height of 1 Vanderbilt is 1,514 feet. SL Green Realty is the developer behind 1 Vanderbilt.

One Vanderbilt = Orange
260 & 261 Madison Avenue = Blue