Three.js - 将带有 TextGeometry 的场景导出到 OBJ/GLTF,然后由 OBJ/GLTF Loader 加载
Three.js - exporting scene with TextGeometry to OBJ/GLTF then load by OBJ/GLTF Loader
我对 Three.js 中的 import/export 个场景有疑问
我有几个对象(用 OBJLoader 加载的模型,用 TextGeometry 生成的文本)。我能够使用 OBjExporter/GLTFExporter 将它导出到字符串定义,但是当我尝试再次加载它时,它将文本加载到 BufferGeometry 而不是 TextGeometry。
是否可以加载具有适当几何形状的所有场景网格?
或者它可能解析几何?
我知道我可以在没有文本的情况下保存场景(以不同的定义存储文本参数然后再次生成它),但我想避免它。
我期待着您的帮助。
谢谢。
代码示例:
1.导出场景到OBJ的功能
function CanvasToOBJ(callback) {
var exporter = new THREE.OBJExporter();
var options = {
trs: false,
onlyVisible: true,
truncateDrawRange: true,
binary: false,
forceIndices: false,
forcePowerOfTwoTextures: false,
embedImages: true
};
var result = exporter.parse(scene);
callback(result);
exporter.parse(scene, function (result) {
if (result instanceof ArrayBuffer) {
callback(null);
} else {
var output = JSON.stringify(result, null, 2);
callback(output);
}
}, options);
}
- 从 OBJ 字符串导入的函数
function LoadOBJ() {
var elem = document.getElementById("modelEditor");
if (elem != null && elem !== "undefined" && elem.value !== "undefined" && elem.value != null && elem.value != "") {
var gltfString = elem.value;
var loader = new THREE.OBJLoader();
loader.load = function load(url, localtext, onLoad, onProgress, onError) {
var scope = this;
var loader = new THREE.XHRLoader(scope.manager);
loader.setPath(this.path);
loader.load(url, function (text) {
if (url == "") {
text = localtext;
}
onLoad(scope.parse(text));
}, onProgress, onError);
},
loader.load('', gltfString, function (gltf) {
scene = new THREE.Scene();
scene.background = new THREE.Color(0xf0f0f0);
scene.add(new THREE.AmbientLight(0x505050));
var light = new THREE.SpotLight(0xffffff, 1.5);
light.position.set(0, 500, 2000);
light.angle = Math.PI / 9;
light.castShadow = true;
light.shadow.camera.near = 1000;
light.shadow.camera.far = 4000;
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
scene.add(light);
var elem = gltf.children[0];
scene.add(elem);
objects.push(elem);
renderer.setSize(renderer.domElement.width, renderer.domElement.height, false);
})
}
}
答:没有。 .obj 和 .gltf 都只支持普通的 buffergeometry。
如果您想保留所有内容的原始格式,例如一个由半径和细分数定义的球体,而不仅仅是一堆三角形,您需要使用 three.js's AFAICT 未记录的 three.js editor 使用的自定义格式 .json 格式。
不幸的是,即使它不支持任何几何格式,仅支持像 SphereBufferGeometry 这样的 BufferGeometry 格式,但它目前也不支持 TextBufferGeometry,尽管您可以尝试添加支持。
您需要处理的一个问题是加载和保存对字体的引用。
我对 Three.js 中的 import/export 个场景有疑问 我有几个对象(用 OBJLoader 加载的模型,用 TextGeometry 生成的文本)。我能够使用 OBjExporter/GLTFExporter 将它导出到字符串定义,但是当我尝试再次加载它时,它将文本加载到 BufferGeometry 而不是 TextGeometry。 是否可以加载具有适当几何形状的所有场景网格? 或者它可能解析几何? 我知道我可以在没有文本的情况下保存场景(以不同的定义存储文本参数然后再次生成它),但我想避免它。 我期待着您的帮助。 谢谢。
代码示例:
1.导出场景到OBJ的功能
function CanvasToOBJ(callback) {
var exporter = new THREE.OBJExporter();
var options = {
trs: false,
onlyVisible: true,
truncateDrawRange: true,
binary: false,
forceIndices: false,
forcePowerOfTwoTextures: false,
embedImages: true
};
var result = exporter.parse(scene);
callback(result);
exporter.parse(scene, function (result) {
if (result instanceof ArrayBuffer) {
callback(null);
} else {
var output = JSON.stringify(result, null, 2);
callback(output);
}
}, options);
}
- 从 OBJ 字符串导入的函数
function LoadOBJ() {
var elem = document.getElementById("modelEditor");
if (elem != null && elem !== "undefined" && elem.value !== "undefined" && elem.value != null && elem.value != "") {
var gltfString = elem.value;
var loader = new THREE.OBJLoader();
loader.load = function load(url, localtext, onLoad, onProgress, onError) {
var scope = this;
var loader = new THREE.XHRLoader(scope.manager);
loader.setPath(this.path);
loader.load(url, function (text) {
if (url == "") {
text = localtext;
}
onLoad(scope.parse(text));
}, onProgress, onError);
},
loader.load('', gltfString, function (gltf) {
scene = new THREE.Scene();
scene.background = new THREE.Color(0xf0f0f0);
scene.add(new THREE.AmbientLight(0x505050));
var light = new THREE.SpotLight(0xffffff, 1.5);
light.position.set(0, 500, 2000);
light.angle = Math.PI / 9;
light.castShadow = true;
light.shadow.camera.near = 1000;
light.shadow.camera.far = 4000;
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
scene.add(light);
var elem = gltf.children[0];
scene.add(elem);
objects.push(elem);
renderer.setSize(renderer.domElement.width, renderer.domElement.height, false);
})
}
}
答:没有。 .obj 和 .gltf 都只支持普通的 buffergeometry。
如果您想保留所有内容的原始格式,例如一个由半径和细分数定义的球体,而不仅仅是一堆三角形,您需要使用 three.js's AFAICT 未记录的 three.js editor 使用的自定义格式 .json 格式。
不幸的是,即使它不支持任何几何格式,仅支持像 SphereBufferGeometry 这样的 BufferGeometry 格式,但它目前也不支持 TextBufferGeometry,尽管您可以尝试添加支持。
您需要处理的一个问题是加载和保存对字体的引用。