threejs runtime rendering API

[USMANHEART]

three.js photorealistic rendering for free by using API

Introduction:

Product: Real API
Official website: https://realistic3.com
Editor: https://3d.real-api.com
Join us in revolutionizing the 3D landscape with our cutting-edge runtime rendering system for Three.js. Real API offers a beta version, free of cost, empowering users to generate realistic and high-quality 3D images effortlessly via simple API calls. Join our community and help shape the future of 3D rendering!

Demo

Please visit: https://3d.real-api.com

Installation

npm install real_api

Documentation:

Please visit: https://docs.realistic3.com

Requirements:

• Signup free account at https://realistic3.com (You will need this for API Key Authorization)
• App Key
• Product Key
• Instance ID (Optional, default is 0)
• Kindly check the details at Getting Started | Real API

Getting started

Import:

import * as REAL from "real_api";

Area light

const width = 1;
const height = 1;
const intensity = 1;
const color = new THREE.Color(0xFFFFFF);
const areaLight = new REAL.AreaLight(width, height, color, intensity);
scene.add(areaLight);

Sunlight

const config = {
    intensity: 1,
    castShadow: true,
    color: new THREE.Color(0xFFFFFF),
};
const sunLight = new REAL.SunLight(config);
scene.add(sunLight);

Spotlight

const config = {
    intensity: 1,
    distance: 5.0,
    castShadow: true,
    angle: Math.PI/12,
    color: new THREE.Color(0xFFFFFF),
};
const spotLight = new REAL.SpotLight(config);
scene.add(spotLight);

Point light

const config = {
    intensity: 1,
    distance: 5.0,
    castShadow: true,
    color: new THREE.Color(0xFFFFFF),
};
const pointLight = new REAL.PointLight(config);
scene.add(pointLight);

Render a job:

Step 1: Get render scene

const eye = threeCamera; // Camera or eye to render the view (Optional)
const renderScene = await REAL.Scene(scene, eye);

Step 2: Create new job

const api = REAL.API;

const params = {
    "cred": {
        "insID": 0,
        "appKey": "ABC",
        "prodKey": "XYZ"
    },
    "type": "new",
    "render": {
        "expFrom": "app",
        "output": "PNG",
    }
}

const response = await axios.post(api, params);

Response:

{
    "msg": "SUCCESS",
    "data": {
        "jobID": "1711638968_373829",
        "expFrom": "app",
        "finished": false,
        "status": "NEW",
        "url": "https://....."
    }
}

Note:

You can also render .blend, .gltf, .glb or .fbx directly by changing render parameter in request body

For example:

{
  "cred": {
    "insID": 0,
    "appKey": "ABC",
    "prodKey": "XYZ"
  },
  "type": "new",
  "render": {
    "ext": "glb",
    "expFrom": "app",
    "output": "PNG"
  }
}

Step 3: Upload scene

const uploadUri = response.data.url;
const request = await axios.put(uploadUri, renderScene);

OR

If you have file such as .blend, .gltf, .glb or .fbx then can be passed directly

const request = await axios.put(uploadUri, glbFileBlob);

Step 4: Submit job

const params = {
    "cred": {
        "insID": 0,
        "appKey": "ABC",
        "prodKey": "XYZ"
    },
    "jobID": "1711638968_373829",
    "type": "render"
}

const response = await axios.post(api, params);

Response:

{
    "msg": "SUCCESS",
    "data": {
        "jobID": "1711638968_373829",
        "expFrom": "app",
        "finished": false,
        "status": "WAITING"
    }
}

Step 5: Check job status

You can either check live status or jobs through socket or by using API request

• Using SOCKET: Using SOCKET | Real API
• Using REST API: Using REST API | Real API

const params = {
    "cred": {
        "insID": 0,
        "appKey": "ABC",
        "prodKey": "XYZ"
    },
    "jobID": "1711638968_373829",
    "type": "result"
}

const response = await axios.post(api, params);

Response:

{
  "msg": "SUCCESS",
  "data": {
    "jobID": "1711638968_373829",
    "expFrom": "app",
    "finished": true,
    "result": "https://.....",
    "status": "COMPLETED"
  }
}

[vaibhav_khating]

Great work!

[USMANHEART]

Thanks for your kind response

[Andreas_K]

nice,
but the stl import does not seem to work in the demo.
I have tested the model “drone_01_final.stl” from

Silent Running Drone 01 - Dewey by rpeebord

for testing.

[USMANHEART]

@Andreas_K I am really sorry to hear about that. I have fixed and updated that issue, please try again.
But keep in mind STL models are meshes only without textures.
For full textured models please try FBX or GLTF/GLB. I would recommend GLTF/GLB for better quality results

[Andreas_K]

yes now it works, thank you