threejs
Reactive icon

ThreeJS

Stable version 1.0.3 (Compatible with OutSystems 11)
Uploaded
 on 09 November 2024
 by 
0.0
 (0 ratings)
threejs

ThreeJS

Documentation
1.0.3

The current version/revision of the framework is 142.

There's a web block in the ThreeJS module called Canvas that will allow you to set up the initial base for your scene.

After that several Client Actions will allow you to create objects and manipulate them to compose the scene.

Hopefully, this library will be increased in future versions.

At this moment the actions are distributed in the following folders 

There's a sample action called AddBoxBasicMaterialToScene that shows how you can create your own actions with JavaScript.

In the Demo App, you also have some examples of how to use the existing actions.

Available Client Actions by folder:

  • Camera:
    • SetCameraLookAtScene;
    • SetPositionToCamera;
    • SetCameraLookAt
  • Geometries:
    • CreateBoxGeometry;
    • CreateBufferGeometry;
    • CreateCapsuleGeometry;
    • CreateConeGeometry;
    • CreateDodecahedronGeometry;
    • CreateEdgesGeometry
    • CreateIcosahedronGeometry;
    • CreateOctahedronGeometry;
    • CreatePlanGeometry;
    • CreateTetrahedronGeometry;
    • CreateTorusKnotGeometry;
    • CreateWireframeGeometry;
  • Lights:
    • CreateDirectionalLight;
    • CreateSpotLight;
  • Materials:
    • CreateLineBasicMaterial;
    • CreateMeshBasicMaterial;
    • CreateMeshLambertMaterial;
    • CreateMeshPhongMaterial;
  • Math
    • CreatePlane;
  • Objects:
    • CreateLine;
    • CreateLineSegments;
    • CreateMesh;
    • SetCastShadowProperty;
    • SetReceiveShadowProperty;
  • Position:
    • CreateBufferGeometry_SetPointsFrom;
    • SetPositionToObject;
  • Rotation:
    • AddRotationToObject;
  • Scene:
    • AddObjectToScene;
    • CheckObjectInScene;
    • RemoveObjectFromScene;
    • GetObjectInScene;
  • Vectors:
    • CreateVector2;
    • CreateVector3;
    • CreateVector4;


Global Variables in the base script:

There are some global variables in the base javascript that you can reuse/access.

  • var renderer - contains the renderer (WebGLRenderer);
  • var scene - the scene variable;
  • var camera - the camera variable;
  • var divOS - the OutSystems div/container where the scene is rendered;
  • var divOSWidth - the width of the OutSystems div/container;
  • var divOSHeight - the height of the OutSystems div/container;


You can use the new web block CanvasExternalJS to fully use Javascript files created by you, removing the dependency on using the above methods and the limitation to the current framework encapsulation.

This block receives a list of JS files that you want to run.


1.0.2

The current version/revision of the framework is 142.

There's a web block in the ThreeJS module called Canvas that will allow you to set up the initial base for your scene.

After that several Client Actions will allow you to create objects and manipulate them to compose the scene.

Hopefully, this library will be increased in future versions.

At this moment the actions are distributed in the following folders 

There's a sample action called AddBoxBasicMaterialToScene that shows how you can create your own actions with JavaScript.

In the Demo App, you also have some examples of how to use the existing actions.

Available Client Actions by folder:

  • Camera:
    • SetCameraLookAtScene;
    • SetPositionToCamera;
  • Geometries:
    • CreateBoxGeometry;
    • CreateBufferGeometry;
    • CreateCapsuleGeometry;
    • CreateConeGeometry;
    • CreateDodecahedronGeometry;
    • CreateIcosahedronGeometry;
    • CreateOctahedronGeometry;
    • CreatePlanGeometry;
    • CreateTetrahedronGeometry;
    • CreateTorusKnotGeometry;
    • CreateWireframeGeometry;
  • Lights:
    • CreateDirectionalLight;
    • CreateSpotLight;
  • Materials:
    • CreateLineBasicMaterial;
    • CreateMeshBasicMaterial;
    • CreateMeshLambertMaterial;
    • CreateMeshPhongMaterial;
  • Objects:
    • CreateLine;
    • CreateMesh;
    • SetCastShadowProperty;
    • SetReceiveShadowProperty;
  • Position:
    • CreateBufferGeometry_SetPointsFrom;
    • SetPositionToObject;
  • Rotation:
    • AddRotationToObject;
  • Scene:
    • AddObjectToScene;
    • CheckObjectInScene;
    • RemoveObjectFromScene;
    • GetObjectInScene;
  • Vectors:
    • CreateVector2;
    • CreateVector3;
    • CreateVector4;


Global Variables in the base script:

There are some global variables in the base javascript that you can reuse/access.

  • var renderer - contains the renderer (WebGLRenderer);
  • var scene - the scene variable;
  • var camera - the camera variable;
  • var divOS - the OutSystems div/container where the scene is rendered;
  • var divOSWidth - the width of the OutSystems div/container;
  • var divOSHeight - the height of the OutSystems div/container;


For the full usage of Javascript files created by you, removing this way the dependency of using the above methods and the limitation to the current framework encapsulation you can use the new web block CanvasExternalJS.

This block receives a list of JS files that you want to run.


1.0.1

The current version/revision of the framework is 142.

There's a web block in the ThreeJS module called Canvas that will allow you to set up the initial base for your scene.

After that several Client Actions will allow you to create objects and manipulate them to compose the scene.

Hopefully, this library will be increased in future versions.

At this moment the actions are distributed in the following folders 

There's a sample action called AddBoxBasicMaterialToScene that shows how you can create your own actions with JavaScript.

In the Demo App, you also have some examples of how to use the existing actions.

Available Client Actions by folder:

  • Camera:
    • SetCameraLookAtScene;
    • SetPositionToCamera;
  • Geometries:
    • CreateBoxGeometry;
    • CreateBufferGeometry;
    • CreateCapsuleGeometry;
    • CreateConeGeometry;
    • CreateDodecahedronGeometry;
    • CreateIcosahedronGeometry;
    • CreateOctahedronGeometry;
    • CreatePlanGeometry;
    • CreateTetrahedronGeometry;
    • CreateTorusKnotGeometry;
    • CreateWireframeGeometry;
  • Lights:
    • CreateDirectionalLight;
    • CreateSpotLight;
  • Materials:
    • CreateLineBasicMaterial;
    • CreateMeshBasicMaterial;
    • CreateMeshLambertMaterial;
    • CreateMeshPhongMaterial;
  • Objects:
    • CreateLine;
    • CreateMesh;
    • SetCastShadowProperty;
    • SetReceiveShadowProperty;
  • Position:
    • CreateBufferGeometry_SetPointsFrom;
    • SetPositionToObject;
  • Rotation:
    • AddRotationToObject;
  • Scene:
    • AddObjectToScene;
    • CheckObjectInScene;
    • RemoveObjectFromScene;
    • GetObjectInScene;
  • Vectors:
    • CreateVector2;
    • CreateVector3;
    • CreateVector4;


Global Variables in the base script:

There are some global variables in the base javascript that you can reuse/access.

  • var renderer - contains the renderer (WebGLRenderer);
  • var scene - the scene variable;
  • var camera - the camera variable;
  • var divOS - the OutSystems div/container where the scene is rendered;
  • var divOSWidth - the width of the OutSystems div/container;
  • var divOSHeight - the height of the OutSystems div/container;

1.0.0

The current version/revision of the framework is 142.

There's a web block in the ThreeJS module called Canvas that will allow you to set up the initial base for your scene.

After that several Client Actions will allow you to create objects and manipulate them to compose the scene.

Hopefully, this library will be increased in future versions.

At this moment the actions are distributed in the following folders 

There's a sample action called AddBoxBasicMaterialToScene that shows how you can create your own actions with JavaScript.

In the Demo App, you also have some examples of how to use the existing actions.

Available Client Actions by folder:

  • Camera:
    • SetCameraLookAtScene;
    • SetPositionToCamera;
  • Geometries:
    • CreateBoxGeometry;
    • CreateBufferGeometry;
    • CreateCapsuleGeometry;
    • CreateConeGeometry;
    • CreateDodecahedronGeometry;
    • CreateIcosahedronGeometry;
    • CreateOctahedronGeometry;
    • CreatePlanGeometry;
    • CreateTetrahedronGeometry;
    • CreateTorusKnotGeometry;
    • CreateWireframeGeometry;
  • Materials:
    • CreateLineBasicMaterial;
    • CreateMeshBasicMaterial;
    • CreateMeshLambertMaterial;
  • Objects:
    • CreateLine;
    • CreateMesh;
  • Position:
    • CreateBufferGeometry_SetPointsFrom;
    • SetPositionToObject;
  • Rotation:
    • AddRotationToObject;
  • Scene:
    • AddObjectToScene;
    • CheckObjectInScene;
    • RemoveObjectFromScene;
  • Vectors:
    • CreateVector2;
    • CreateVector3;
    • CreateVector4;