I am not able to render anything

Questions
1

I am sure i am doing something wrong but i am not able to see it. I am stuck, can anyone please help me.

This is my index.js

import * as THREE from "three";

import { OrbitControls } from "three/addons/controls/OrbitControls.js";

import { fillArray } from "./helper";

const WIDTH = 50;

const HEIGHT = 50;

let myCanvas = document.getElementById("screen");

myCanvas.width = 960;

myCanvas.height = 680;

let scene = new THREE.Scene();

scene.background = new THREE.Color(0xa0a0a0);

let camera = new THREE.PerspectiveCamera(

45,

window.innerWidth / window.innerHeight,

1,

10000

);

camera.position.set(0, 20, 100);

let renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setPixelRatio(window.devicePixelRatio);

renderer.setSize(window.innerWidth, window.innerHeight);

renderer.outputEncoding = THREE.sRGBEncoding;

myCanvas.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);

let nodes = [];

fillArray(nodes, 1000, WIDTH, HEIGHT);

for (let i = 0; i < nodes.length; i++) {

scene.add(nodes[i].mesh);

}

function animate() {

controls.update();

requestAnimationFrame(animate);

renderer.render(scene, camera);

}

animate();

and this is my other file helper.js


class Node {
  constructor(index, x, y, z) {
    this.index = index;
    this.x = x;
    this.y = y;
    this.z = z;
    let mesh = new THREE.Mesh(
      new THREE.SphereGeometry(15, 10, 10),
      new THREE.MeshBasicMaterial({ color: 0xffff00 })
    );
    mesh.position.set(x, y, z);
    mesh.updateMatrix();
    mesh.matrixAutoUpdate = false;
    this.mesh = mesh;
  }
}

function fillArray(nodes, count, WIDTH, HEIGHT) {
  for (let i = 0; i < count; i++) {
    let node = new Octree.Node(
      i,
      Math.floor(Math.random() * WIDTH),
      Math.floor(Math.random() * HEIGHT),
      Math.floor(Math.random() * 20)
    );
    nodes.push(node);
  }
}
export {fillArray}

My canvas is empty and there is no error on the console

I even changed that sphere to a box with

class Node {
  constructor(index, x, y, z) {
    this.index = index;
    this.x = x;
    this.y = y;
    this.z = z;
    let mesh = new THREE.Mesh(
      new THREE.BoxGeometry(2, 2, 2),
      new THREE.MeshStandardMaterial({ color: 0xff9999 })
    );
    // mesh.position.set(x, y, z);
    mesh.updateMatrix();
    mesh.matrixAutoUpdate = false;
    this.mesh = mesh;
  }
}

still no output :frowning:

2

Do you render a scene but you cant see objects, or is there no scene all together? Also the way you are calculating object positions , they may be hard to find.

3

I can read scene and when i console scene i can see objects in it !!

4

When you change the camera position, it doesn’t rotate automatically.
So if you want the camera still to look at the world origin add:

camera.position.set(0, 20, 100);
camera.lookAt(0,0,0);

put some simple object at the origin and check if it’s visible.

1 Like