Problem rendering first 2 objects in three.js

Question

everything works fine but sphere and box geometry dont show, plane works fine too! does anyone have a clue? i suspect something wrong maybe in the render function or animation frame, im fairly new to three.js and cant seem to know why the scene wont show the other geometry, i tried different materials, rotation, clear color, etc

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

Do you want those sphere and box as points? If so, then use the respective material `PointsMaterial` for those objects. If you want them as solid objects, then use `THREE.Mesh` instead of `THREE.Points` on them. — prisoner849, Jul 22 '20 at 08:11
@wwitshadows Please, mark the question as answer accepted if it solved your initial problem, this way will also help other users to know it was the solution — jscastro, Jul 22 '20 at 14:40

score 2 · Accepted Answer · answered Jul 22 '20 at 08:48

Tried your code, everything is ok but the 2 objects need to be 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);

Problem rendering first 2 objects in three.js

1 Answers1