Question

我正在尝试学习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)

Answer 1

一些带有解释的代码：

＆＃13;

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);
}

＆＃13;

body {
  overflow: hidden;
  margin: 0;
}

＆＃13;

<script src="https://threejs.org/build/three.min.js"></script>

＆＃13;

Answer 2

我明白了，结果我的盒子的材料是金属的，我错误地添加了光源。

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

2 个答案: