Question

我想通过说自己不是一名程序员来作为序言，但是我是一名设计师和3D艺术家，喜欢不时地涉猎代码。我的基本问题是，是否有人将three.js编辑器中的模型加载到实际的网页中。我已经尝试运行服务器，并且也知道浏览器的安全问题，所以我也上传到了服务器。

以下是我尝试过的一些事情：

我尝试使用blender导出我的模型，但是无法使它们显示在任何浏览器中。
然后，我能够导出collada文件并将其导入到three.js编辑器中。我调整了一些材料，添加了环境贴图，并使用所有三个不同的导出选项（几何，对象和场景）进行了导出。
我什至尝试从Three.js编辑器中导出基元也没有运气。
我已经尝试了使用在互联网演示中找到的代码进行的所有三个导出，这些代码似乎在尝试将模型替换为我的模型时做着相同的事情（是的，我不是程序员但我喜欢尝试...）
我将在下面发布我的代码
我确实尝试过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()与GEOMETRY多维数据集一起使用时，出现以下错误：

    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 Editor和THREE.js库。如果您正在运行两者的最新版本，请尝试将其降级为THREE.js的早期版本，也许是.70。如果这不起作用，请检查.. THREEjs对象保存例程可能与最新版本不同步。.我们要么需要提交错误报告，要么要找出仍然存在的最新版本。可以使您正常运行。但是，是的，我过去已经可以使用它了……

有人真的可以加载从three.js编辑器导出的模型吗？

1 个答案: