模型似乎正在加载但不可见答案

【问题标题】：Model appears to load but is not visible模型似乎正在加载但不可见
【发布时间】：2019-05-01 21:38:22
【问题描述】：

我对 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

任何帮助将不胜感激！

谢谢

【问题讨论】：

您错过了对 renderer.render(scene,camera) 的呼叫，您可以将其放在您的回调函数中。
@gaitat 该死！看起来我在编辑过程中删除了那个电话！好地方！！

标签： javascript three.js

【解决方案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

【讨论】：