有没有人真正能够加载从三个.js编辑器导出的模型?

Question

我想先声明我不是程序员，但我是一名设计师和3D艺术家，喜欢偶尔涉足代码。我的基本问题是，是否有人运气将三个编辑器.js模型加载到实际的网页中。我尝试运行服务器，并且由于我知道浏览器安全问题，我也上传到了服务器。

以下是我尝试过的一些方法：

1. 我尝试使用blender导出我的模型，但无法让它们显示在任何浏览器中。
2. 然后，我能够导出一个 collada 文件并将其导入三.js编辑器。我调整了一些材质，添加了环境贴图，并使用所有三种不同的导出选项(几何体、对象和场景(导出。
3. 我什至尝试过从三个编辑器导出原语.js也没有运气。
4. 我已经尝试了所有三个导出，使用我在互联网演示中找到的代码，这些代码似乎与我尝试用我的模型替换他们的模型时所做的相同(是的，我不是程序员，但我喜欢尝试......
5. 我将在下面发布我的代码
6. 我确实尝试了THREE.ObjectLoader()和THREE.JSONLoader()。

我不是这段代码的作者，我也不声称自己是。

<script>
var scene, camera, renderer;
var WIDTH  = window.innerWidth;
var HEIGHT = window.innerHeight;
var SPEED = 0.01;
function init() {
scene = new THREE.Scene();
initMesh();
initCamera();
initLights();
initRenderer();
document.body.appendChild(renderer.domElement);
}
function initCamera() {
camera = new THREE.PerspectiveCamera(70, WIDTH / HEIGHT, 1, 10);
camera.position.set(0, 3.5, 5);
camera.lookAt(scene.position);
}

function initRenderer() {
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(WIDTH, HEIGHT);
}
function initLights() {
var light = new THREE.AmbientLight(0xffffff);
scene.add(light);
}
var mesh = null;
function initMesh() {
var loader = new THREE.JSONLoader();
loader.load('models/cubegeo.json', function(geometry, materials) {
mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.75;
mesh.translation = THREE.GeometryUtils.center(geometry);
scene.add(mesh);
});
}
function rotateMesh() {
if (!mesh) {
return;
}
mesh.rotation.x -= SPEED * 2;
mesh.rotation.y -= SPEED;
mesh.rotation.z -= SPEED * 3;
}
function render() {
requestAnimationFrame(render);
rotateMesh();
renderer.render(scene, camera);
}
init();
render();
</script>

我尝试加载的一个模型似乎相当简单，我创建了它并从three.js编辑器下载为 GEOMETRY。

{
"metadata": {
"version": 4.5,
"type": "BufferGeometry",
"generator": "BufferGeometry.toJSON"
},
"uuid": "8A2042A8-9DE2-42F5-A970-56E64669E516",
"type": "BoxBufferGeometry",
"width": 7,
"height": 7,
"depth": 7,
"widthSegments": 1,
"heightSegments": 1,
"depthSegments": 1
}

下面是相同的立方体，但从Three.js编辑器下载为对象：

{
"metadata": {
"version": 4.5,
"type": "Object",
"generator": "Object3D.toJSON"
},
"geometries": [
{
"uuid": "8A2042A8-9DE2-42F5-A970-56E64669E516",
"type": "BoxBufferGeometry",
"width": 7,
"height": 7,
"depth": 7,
"widthSegments": 1,
"heightSegments": 1,
"depthSegments": 1
}],
"materials": [
{
"uuid": "2455ACBD-6ECC-4B17-867B-9C971D647F91",
"type": "MeshStandardMaterial",
"color": 16777215,
"roughness": 0,
"metalness": 0,
"emissive": 9308169,
"depthFunc": 3,
"depthTest": true,
"depthWrite": true
}],
"object": {
"uuid": "CA57782F-5DB8-484F-B3A0-AD27862CE114",
"type": "Mesh",
"name": "Box",
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
"geometry": "8A2042A8-9DE2-42F5-A970-56E64669E516",
"material": "2455ACBD-6ECC-4B17-867B-9C971D647F91"
}
}

当我将THREE.JSONLoader()与几何立方体一起使用时，出现以下错误：

Uncaught TypeError: Cannot read property 'length' of undefined
at parseModel (three.js:36833)
at JSONLoader.parse (three.js:37241)
at Object.onLoad (three.js:36764)
at XMLHttpRequest.<anonymous> (three.js:31352)

当我将ObjectLoader()与对象多维数据集一起使用时，出现以下错误：

THREE.MeshFaceMaterial has been removed. Use an Array instead.
MeshFaceMaterial @ three.js:44719
three.js:46378 THREE.GeometryUtils: .center() has been moved to Geometry. Use geometry.center() instead.
center @ three.js:46378
three.js:46379 Uncaught TypeError: geometry.center is not a function
at Object.center (three.js:46379)
at (index):53
at ObjectLoader.parse (three.js:37362)
at Object.onLoad (three.js:37318)
at XMLHttpRequest.<anonymous> (three.js:31352)

Answer 1

确保从同一版本运行 THREE 编辑器和 THREE.js 库。如果您运行的是两者的最新版本，请尝试降级到 THREE的早期版本.js也许是 .70。如果这不起作用，请回来查看。.THREEjs 对象保存例程可能与最新的构建不同步。我们要么需要提交错误报告，要么找出仍然有效的最新版本，以启动并运行。但是，是的，我过去已经让它工作了...