在 three.js 中渲染前 2 个对象时出现问题

Question

一切正常，但球体和长方体几何图形不显示，平面也正常！有人有线索吗？我怀疑渲染函数或动画帧可能有问题，我对 three.js 还很陌生，似乎不知道为什么场景不会显示其他几何体，我尝试了不同的材料、旋转、清晰的颜色等

var renderer,
        scene,
        camera,
        myCanvas = document.getElementById('myCanvas');

    //RENDERER
    renderer = new THREE.WebGLRenderer({
      canvas: myCanvas,
      antialias: true,
    });
  renderer.setClearColor(0x000000);
  renderer.setPixelRatio(window.devicePixelRatio);        //device pixel ratio
  renderer.setSize(window.innerWidth, window.innerHeight);                //canvas size

  //CAMERA
  var camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 300, 10000)
  //SCENE
  var scene = new THREE.Scene();
  //LIGHT
  var light = new THREE.AmbientLight(0xffff, 0.5)
  scene.add(light);

  var light1 = new THREE.PointLight(0xffff, 0.5)
  scene.add(light1);

  //MATERIAL

  var material = new THREE.MeshLambertMaterial({
      color: 0xF3FFE2,
      lightMap: null,
      lightMapIntensity: 1,
      emissive: 0x000000,
      emissiveMap: null,
      emissiveIntensity: 1,
      specularMap: null
    });

  //GEOMETRY

  var geometry = new THREE.BoxGeometry(100, 100, 100);
    var mesh = new THREE.Points(geometry, material);
    mesh.position.z = -1000;
    mesh.position.x = -100;
    scene.add(mesh);


  var geometry2 = new THREE.SphereGeometry(50, 20, 20);
    var mesh2 = new THREE.Points(geometry2, material);
    mesh2.position.z = -1000;
    mesh2.position.x = 100;
    scene.add(mesh2);

  var geometry3 =  new THREE.PlaneGeometry(10000, 10000, 100, 100);
    var mesh3 = new THREE.Mesh(geometry3, material);
    mesh3.rotation.x = -90 * Math.PI / 180;
    mesh3.position.y = -100;
    scene.add(mesh3);

  //RENDER LOOP

  render();



      function render() {

        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.01;



        renderer.render(scene, camera);

        requestAnimationFrame(render);
      }

Answer 1

试过你的代码，一切正常，但 2 个对象需要 THREE.Mesh

    var geometry = new THREE.BoxGeometry(100, 100, 100);
    var mesh = new THREE.Mesh(geometry, material);
    mesh.position.z = -1000;
    mesh.position.x = -100;
    scene.add(mesh);


    var geometry2 = new THREE.SphereGeometry(50, 20, 20);
    var mesh2 = new THREE.Mesh(geometry2, material);
    mesh2.position.z = -1000;
    mesh2.position.x = 100;
    scene.add(mesh2);

在 three.js 中渲染前 2 个对象时出现问题

Problem rendering first 2 objects in three.js

javascript

function

three.js

render

renderer