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

Question

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

我想用three.js加载它

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

 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

我是做错了还是有其他问题。任何人都可以发布准确的代码来加载顶点颜色的网格。事先感谢任何人试图阅读和解决它..。

如果有人需要一个顶点颜色的网格来工作，我已经在下面附加了。顶点着色模型

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

​

​

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未登录的SyntaxError:无法在模块外使用导入语句

如果使用ES6模块，则需要将脚本放在<script type="module">脚本标记中，并将文件组织得与three.js回购中组织的文件相同。即

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

然后使用import语句加载所有内容。

<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