用OBJLoader2加载顶点颜色的Obj。

Question

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

我想用three.js来加载它。

我知道我可以用.obj文件加载一个普通的.obj文件和.mtl文件，但我的文件有顶点颜色，所以我想用three.js加载它。

 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 未捕获的语法错误。不能在模块外使用导入语句

如果您使用的是 ES6 模块，您需要将您的脚本放在 <script type="module"> 脚本标签，并将文件组织得和three.js repo中的一样。也就是说

+-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