[Two Issues][Basic] Can't see object on screen

Questions
1

Hello,

I am working on a project and I am stumbling over the basics.

For some reason, I can’t see anything on the screen despite having a light.

import "./styles.css";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

const { innerHeight, innerWidth } = window;

var scene, renderer, controls, camera, light;

function init() {
  scene = new THREE.Scene();
  renderer = new THREE.WebGL1Renderer();
  renderer.setSize(innerWidth, innerHeight);
  document.body.appendChild(renderer.domElement);
  camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000);
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00
  });
  const cube = new THREE.Mesh(geometry, material);
  cube.position.x = 0;
  cube.position.y = 0;
  cube.position.z = 0;
  light = new THREE.AmbientLight(0x00ff00, 1);
  controls = new OrbitControls(camera, renderer.domElement);
  camera.position.set(0, 0, 0);
  controls.update();
  scene.add(cube);
  scene.add(light);
  console.log(scene.children);
}
init();
function animate() {
  window.requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}
animate();
2

Your camera is inside the cube. Try giving it a new position rather than (0, 0, 0), and don’t forget camera.lookAt(0, 0, 0)

1 Like