使用 OBJLoader2 加载 Obj 以加载顶点颜色

Question

我有一个 .obj 文件，其中包含顶点颜色。那就是它的 Texture 没有单独的 .mtl 文件。 .obj 文件本身包含每个顶点的颜色。

我想使用 three.js

加载它

我知道我可以使用 .mtl 加载普通的 .obj 文件：


 objLoader = new THREE.OBJLoader();
        objLoader.load('meshlabshristi3.obj', function(object) {
            scene.add(object);
        });

但是我的有顶点颜色所以我发现它可以用 OBJLoader2.js 来完成所以尝试像这样执行它：


 var objLoader = new THREE.OBJLoader2();
    objLoader.load('assets/faceimage9.obj', function(object) {
        scene.add(object);
    });

但是它抛出错误说


OBJLoader2.js:6 Uncaught SyntaxError: Cannot use import statement outside a module

index.html:80 Uncaught TypeError: THREE.OBJLoader2 is not a constructor
    at init (index.html:80)
    at index.html:31

是我做错了还是有其他问题。谁能 post 加载顶点彩色网格的确切代码。提前感谢任何试图阅读并解决它的人...

如果有人需要顶点彩色网格来处理我在下面附上的.. Vertex Colored Model

对于下面的评论，我附上这张图片：

Answer 1

OBJLoader 和 OBJLoader2 似乎都工作得很好。

您只需要在所有材质（或所有具有顶点颜色的材质）上设置material.vertexColors = true

objLoader.load('assets/faceimage9.obj', function(object) {
  scene.add(object);
  object.traverse(node => {
    if (node.material) {
      node.material.vertexColors = true;
    }
  });
});

html, body {
  margin: 0;
  height: 100%;
}
#c {
  width: 100%;
  height: 100%;
  display: block;
}

<canvas id="c"></canvas>
<script type="module">
// Three.js - Load .OBJ 
// from https://threejsfundamentals.org/threejs/threejs-load-obj-auto-camera-xz.html

import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r115/build/three.module.js';
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r115/examples/jsm/controls/OrbitControls.js';
import {OBJLoader2} from 'https://threejsfundamentals.org/threejs/resources/threejs/r115/examples/jsm/loaders/OBJLoader2.js';

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});

  const fov = 45;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 50;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(0, 0, 0.7);

  const controls = new OrbitControls(camera, canvas);
  controls.target.set(0, 0, 0);
  controls.update();

  const scene = new THREE.Scene();
  scene.background = new THREE.Color('white');

  {
    const skyColor = 0xB1E1FF;  // light blue
    const groundColor = 0xB97A20;  // brownish orange
    const intensity = 1;
    const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
    scene.add(light);
  }

  {
    const color = 0xFFFFFF;
    const intensity = 1;
    const light = new THREE.DirectionalLight(color, intensity);
    light.position.set(5, 10, 2);
    scene.add(light);
    scene.add(light.target);
  }

  {
    const objLoader = new OBJLoader2();
    // note: this model is CC-BY-NC 4.0 from
    // here: https://sketchfab.com/3d-models/book-vertex-chameleon-study-51b0b3bdcd844a9e951a9ede6f192da8
    // by: Oleaf (https://sketchfab.com/homkahom0)
    objLoader.load('https://greggman.github.io/doodles/models/book-vertex-chameleon-study/book.obj', (root) => {
      scene.add(root);
      root.updateMatrixWorld();
      root.traverse(node => {
        if (node.material) {
          if (Array.isArray(node.material)) {
            node.material.forEach(m => m.vertexColors = true);
          } else {
            node.material.vertexColors = true;
          }
        }
      })
    });
  }

  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }

  function render() {

    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }

    renderer.render(scene, camera);

    requestAnimationFrame(render);
  }

  requestAnimationFrame(render);
}

main();
</script>

至于错误

OBJLoader2.js:6 Uncaught SyntaxError: Cannot use import statement outside a module

如果您使用的是 ES6 模块，则需要将您的脚本放在 <script type="module"> 脚本标签中，并按照在 three.js 存储库中组织文件的方式组织文件。即

+-somefolder
  |
  +-build
  |  |
  |  +-three.module.js
  |
  +-examples
    |
    +-jsm
      |
      +-controls
      | |
      | +-OrbitControls.js (if you're using this)
      |
      +-loaders
        |
        +-OBJLoader2.js

然后使用导入语句加载所有内容

<script type="module">
import * as THREE from 'somefolder/build/three.module.js';
import {OrbitControls} from 'somefolder/examples/jsm/controls/OrbitControls.js';
import {OBJLoader2} from 'somefolder/examples/jsm/loaders/OBJLoader2.js';
...

参见：

如果你想用多个脚本标签而不是 import 的旧方法来做，那么使用 examples/js 中的文件而不是 examples/jsm 在这种情况下你可以把他们在任何地方，但假设你把他们放在同一个地方然后

<script src="somefolder/build/three.min.js"></script>
<script src="somefolder/examples/js/controls/OrbitControls.js"></script>
<script src="somefolder/examples/js/loaders/OBJLoader2.js"></script>

注意它使用 three.min.js 而不是 three.module.js

使用 OBJLoader2 加载 Obj 以加载顶点颜色

Loading Obj with OBJLoader2 to load Vertex Colors

loader

3d-rendering

three.js

objloader