Question

我是Three.js的新手，我正努力从.obj文件中获取模型以进行加载和显示。

我觉得我已经正确地完成了基本工作：

const renderer = new THREE.WebGLRenderer({
  antialias: true
});

renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setClearColor(0x000000);

const mountNode = document.querySelector("#canvas");
mountNode.appendChild(renderer.domElement);

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  50,
  window.innerWidth / window.innerHeight,
  0.1,
  10000
);

camera.position.z = -10000;

// instantiate a loader
const loader = new THREE.OBJLoader2();
const callbackOnLoad = function(event) {
  console.log("event", event);
  scene.add(event.detail.loaderRootNode);
};
loader.load(
  "https://s3-us-west-2.amazonaws.com/s.cdpn.io/373299/flower.obj",
  callbackOnLoad,
  null,
  function(error) {
    console.log("An error happened", error);
  },
  null,
  false
);

...但是，我得到的只是黑屏。：（

如果我是一个博彩人，我认为也许模型的材料错误？还是也许我们在里面（尽管我已经将相机移动了很多！）？

Codepen在这里：https://codepen.io/jmsherry/pen/XQLXmm?editors=0010

任何帮助将不胜感激！

谢谢

Answer 1

您的代码存在三个问题：

加载资产后，您至少应渲染一次场景。
您的相机放置在错误的位置。默认情况下，它沿负Z轴方向看，因此camera.position.z = 1000;是更好的默认值。
您的场景中没有灯光。对于简单的模型查看器应用程序，以下内容是一个好的开始

https://codepen.io/anon/pen/ZZdWLJ?editors=0010

const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
scene.add( ambientLight );

const pointLight = new THREE.PointLight( 0xffffff, 0.8 );
camera.add( pointLight );
scene.add( camera );

three.js R104

模型似乎已加载但不可见

1 个答案: