无法在threejs.org 网站上运行基本示例答案

【问题标题】：Can't run basic example on threejs.org website无法在threejs.org 网站上运行基本示例
【发布时间】：2018-01-26 17:12:48
【问题描述】：

我正在尝试学习three.js，并且正在查找一些示例。我试图运行这段代码https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_cube.html 但是，它显示的只是黑屏。

我把three.js的源码修改到我的目录下，素材也修改成如下，因为我没有crate纹理。 var material = new THREE.MeshStandardMaterial({metalness: 0, roughness: 0.5}); material.color.setHex(0xc23560)

【问题讨论】：

你需要在你的场景中添加一个光源，因为THREE.MeshStandardMaterial()受光的影响。
我在 init() 函数中添加了以下内容 'light = new THREE.PointLight( 0xff0000, 1, 100 ); light.position.set(50, 50, 50);场景.添加（灯光）；'它仍然显示黑色
如果您说控制台中是否有任何错误会很有用:)
控制台没有错误
没有错误，因为一切都是正确的，除了场景中物体的位置。

标签： javascript three.js

【解决方案1】：

一些带有解释的代码：

var camera, scene, renderer;
var mesh;
init();
animate();

function init() {
  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 400;
  scene = new THREE.Scene();

  light = new THREE.PointLight(0xffffff, 1, 1000); // increase the distance
  light.position.set(300,300,300); // [50,50,50] - inside the cube
  scene.add(light);

  var geometry = new THREE.BoxBufferGeometry(200, 200, 200);
  var material = new THREE.MeshStandardMaterial({
    color: 0xc23560,
    metalness: 0,
    roughness: 0.5
  });
  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  //
  window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
  requestAnimationFrame(animate);
  mesh.rotation.x += 0.005;
  mesh.rotation.y += 0.01;
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

&lt;script src="https://threejs.org/build/three.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

我想通了，原来我盒子的材质是金属的，我加错了光源。

【讨论】：

金属度为0，所以不是原因，但是光的位置错误是正确的建议。