3D viewer

<< Click to Display Table of Contents >>

Navigation:  Components >

3D viewer

3D viewer can display 3D models using three.js library. Model can be defined from JS code or in Delphi code using JSON.

 

 

Component has two scripts - client (JS) script and server (Pascal) script. Client script can call server script methods to obtain model data.

JSON format is the following:

 

{

"objects": [

   {"type:: "box", "x": 0, y: "0", "z":0, "dx":1, "dy":1, dz: 1, "material": "base"}

 ]

}

 

Component designer has the following pages:

 

clip0002

 

Options - component name, CSS class, background color, camera position

Lights - scene lights

Materials - geometries materials

Client - client script

Server - server script

Animation - animation script

 

 

Geometries

box: dx, dy, dz

capsule:  radius, length

circle: o.radius

cone: radius, height

cylinder:radiustop, radiusbottom, height

sphere:o.radius

 

Common parameters are:

x, y, z - position

destx, desty, destz - destination position (object will be animated).

material - surface material defined in Materials tab.

 

Lights

 

 

Define scene light sources, its type, color, intensity and position.

 

Materials

 

Define geometries materials. Materials can have texture loaded from file.

Materials are stored in scene.materials objects by its name, f.e. scene.materials.wood

 

Client script

 

In a client script you can access

 

scene: 3d scene

THREE - three.js namespace

Server - server object for calling server script methods

AsyncServer - server object for asynchronous calling server script methods. Last method parameter should be callback function.

 

To import scene objects from JSON call scene.importJSON(json_string);

 

Client script example:

 

scene.importJSON(Server.sceneObjects());