Three.js 对象不显示，只显示黑屏答案

【问题标题】：Three.js Objects not showing, there is only a black screen shownThree.js 对象不显示，只显示黑屏
【发布时间】：2019-07-24 02:44:16
【问题描述】：

我的其他一些 three.js 代码也遇到了类似的问题。我在 html 中设置了 js，但对象没有显示出来。运行文件时只显示黑屏。

该文件应该在运行时显示雨滴从天而降。我用 atom 来构建它。我在atom、atom live server internet explorer chrome上尝试了html预览，当我尝试运行它时它们都显示相同的黑屏。

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8 />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <title>RAIN ON ME BABY</title>
  </head>
  <body>
    <script src="js/three.min.js"></script>


    <script>
    let scene,camera, renderer, cloudParticles = [], flash, rain, rainGeo, rainCount = 15000;
    function init() {
      scene = new THREE.Scene();
      camera = new THREE.PerspectiveCamera(60,window.innerWidth / window.innerHeight, 1, 1000);
      camera.position.z = 1;
      camera.rotation.x = 1.16;
      camera.rotation.y = -0.12;
      camera.rotation.z = 0.27;
      ambient = new THREE.AmbientLight(0x555555);
      scene.add(ambient);

      directionalLight = new THREE.DirectionalLight(0xffeedd);
      directionalLight.position.set(0,0,1);
      scene.add(directionalLight);

      flash = new THREE.PointLight(0x062d89, 30, 500 ,1.7);
      flash.position.set(200,300,100);
      scene.add(flash);

      renderer = new THREE.WebGLRenderer();
      scene.fog = new THREE.FogExp2(0x11111f, 0.002);
      renderer.setClearColor(scene.fog.color);
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      rainGeo = new THREE.Geometry();
      for(let i=0;i<rainCount;i++) {
        rainDrop = new THREE.Vector3(
          Math.random() * 400 -200,
          Math.random() * 500 - 250,
          Math.random() * 400 - 200
        );
        rainDrop.velocity = {};
        rainDrop.velocity = 0;
        rainGeo.vertices.push(rainDrop);
      }
      rainMaterial = new THREE.PointsMaterial({
        color: 0xaaaaaa,
        size: 0.1,
        transparent: true
      });
      rain = new THREE.Points(rainGeo,rainMaterial);
      scene.add(rain);
      let loader = new THREE.TextureLoader();
      loader.load("smoke.png", function(texture){
        cloudGeo = new THREE.PlaneBufferGeometry(500,500);
        cloudMaterial = new THREE.MeshLambertMaterial({
          map: texture,
          transparent: true
        });
        for(let p=0; p<25; p++) {
          let cloud = new THREE.Mesh(cloudGeo,cloudMaterial);
          cloud.position.set(
            Math.random()*800 -400,
            500,
            Math.random()*500 - 450
          );
          cloud.rotation.x = 1.16;
          cloud.rotation.y = -0.12;
          cloud.rotation.z = Math.random()*360;
          cloud.material.opacity = 0.6;
          cloudParticles.push(cloud);
          scene.add(cloud);
        }
        animate();
      });
    }
    function animate() {
      cloudParticles.forEach(p => {
        p.rotation.z -=0.002;
      });
      rainGeo.vertices.forEach(p => {
        p.velocity -= 0.1 + Math.random() * 0.1;
        p.y += p.velocity;
        if (p.y < -200) {
          p.y = 200;
          p.velocity = 0;
        }
      });
      rainGeo.verticesNeedUpdate = true;
      rain.rotation.y +=0.002;
      if(Math.random() > 0.93 || flash.power > 100) {
        if(flash.power < 100)
          flash.position.set(
            Math.random()*400,
            300 + Math.random() *200,
            100
          );
        flash.power = 50 + Math.random() * 500;
      }
      renderer.render(scene, camera);
      requestAnimationFrame(animate);
    }
    init();
    </script>
  </body>
</html>

【问题讨论】：

标签： javascript html three.js

【解决方案1】：

您的问题实际上是重复的：https://stackoverflow.com/a/57114890/5250847

对于R016，无法使用THREE.Geometry 创建THREE.Points。这已经在dev 中修复，并最终在 7 月底发布下一个版本R107。

我已将您的代码复制到以下小提琴中，并将构建文件替换为当前的 dev 版本，从而解决了该问题。

https://jsfiddle.net/76tw2jL0/

顺便说一句：最好的解决方法实际上是使用THREE.BufferGeometry。

【讨论】：