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

【问题标题】：Problem rendering first 2 objects in three.js在 three.js 中渲染前 2 个对象时出现问题
【发布时间】：2020-11-11 17:26:58
【问题描述】：

一切正常，但球体和盒子几何图形不显示，平面也正常工作！有人有线索吗？我怀疑渲染函数或动画帧可能有问题，我对 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);
      }

【问题讨论】：

你想要那些球体和盒子作为点吗？如果是这样，则为这些对象使用相应的材料PointsMaterial。如果您希望它们作为实体对象，请在它们上使用THREE.Mesh 而不是THREE.Points。
@wwitshadows 如果它解决了您最初的问题，请将问题标记为已接受的答案，这样也可以帮助其他用户知道它是解决方案

标签： javascript function three.js render renderer

【解决方案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);

【讨论】：