Question

所以我试图学习如何使用THREE.js制作浏览器游戏，但是当我尝试使用代码导入模型时，屏幕呈现黑色。我正在使用Brackets进行编码并运行它，到目前为止，我还没有遇到任何问题。

在这里输入代码

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

scene.background = new THREE.Color(0xdddddd);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var loader = new THREE.GLTFLoader();

loader.load('CabbageBase.glb', function(gltf) {

  scene.add(gltf.scene);

}, undefined, function(error) {

  console.error(error);

});

camera.position.z = 5;

var animate = function() {
  requestAnimationFrame(animate);

  /*cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;*/

  renderer.render(scene, camera);
};

animate();

body {
  background: linear-gradient(#e4e0ba, #f7d9aa);
  margin: 0px;
  overflow: hidden;
}

canvas {
  display: block;
}

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="GLTFLoader.js"></script>

Answer 1

除了URL，我看不到代码有什么问题。

您需要通过下载特定版本的Three.js或使用CDN版本来使用它。所有的加载器，控件和示例都需要特定的版本。永远不要链接到threejs.org，总要下载自己的版本或使用CDN。例如jsdeliver。

https://www.jsdelivr.com/package/npm/three

因此，对于three.js库，URL为

https://cdn.jsdelivr.net/npm/three@0.113.2/build/three.min.js

，对于与版本兼容的GLTFLoader，URL为

https://cdn.jsdelivr.net/npm/three@0.113.2/examples/js/loaders/GLTFLoader.js

之后，您需要一个模型。我在three.js网站上指出了这一点（这也很糟糕，因为不能保证它会保持其兼容性或保持兼容性，但是对于我们选择较少的模型，通常您会使用自己的模型）

并且代码按原样工作。

注意：对于three.js，通常还需要运行covered in the docs

的本地服务器

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

scene.background = new THREE.Color(0xdddddd);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var loader = new THREE.GLTFLoader();

loader.load('https://threejs.org/examples/models/gltf/Horse.glb', function(gltf) {

  scene.add(gltf.scene);

}, undefined, function(error) {

  console.error(error);

});

camera.position.z = 5;

var animate = function() {
  requestAnimationFrame(animate);

  /*cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;*/

  renderer.render(scene, camera);
};

animate();

body {
  background: linear-gradient(#e4e0ba, #f7d9aa);
  margin: 0px;
  overflow: hidden;
}

canvas {
  display: block;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.113.2/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.113.2/examples/js/loaders/GLTFLoader.js"></script>

渲染屏幕不清晰

1 个答案: