Three.js运行时渲染API

介绍：

产品：Real API
官方网站：https://realistic3.com
编辑器：https://3d.real-api.com
加入我们，与我们一起颠覆Three.js的3D景观，利用我们的先进运行时渲染系统。Real API提供免费的测试版，通过简单的API调用，用户可以轻松生成逼真且高质量的3D图像。加入我们的社区，共同塑造3D渲染的未来！

Three.js运行时渲染API_哔哩哔哩_bilibili

Three.js运行时渲染API

演示

请访问：Realistic 3D | Real API

安装

npm install real_api

文档

请访问：https://docs.realistic3.com

要求

• 在官方网站注册免费帐户（您将需要此帐户进行应用密钥授权）
• App Key
• Product Key
• Instance ID (可选，默认值为0)
• 更多详情可以在此处检查

开始使用

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);

渲染作业

步骤1：获取渲染场景

const eye = threeCamera; // 渲染视图的摄像机（可选）
const renderScene = await REAL.Scene(scene, eye);

步骤2: 创建新任务

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://….."
   }
}

备注：您也可以通过更改请求体中的 渲染参数，直接渲染 .blend, .gltf, .glb 或 .fbx 文件

例如:

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

步骤 3：上传场景

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

步骤 4：提交作业

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"
   }
}

步骤 5：检查作业状态

您可以通过套接字或使用 API 请求来检查实时状态或作业。
* 使用套接字：https://docs.realistic3.com/zh/using-socket
* 使用 REST API：https://docs.realistic3.com/zh/rest-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"
   }
}