I am having trouble rendering a simple sphere

I have been closely following the steps outlined in this tutorial: https://www.youtube.com/watch?v=6oFvqLfRnsU to create basic shapes using three.js. I noticed that at the 18:20 mark, the instructor successfully displayed a sphere on the screen.


  var scene = new THREE.Scene();

  var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHieght, 0.1, 1000);
    camera.position.z = 5;
  var renderer = new THREE.WebGLRenderer({antialias: true});

  renderer.setClearColor("#e5e5e5");
  renderer.setSize(window.innerWidth, window.innerHeight);

  window.addEventListener('resize', () => {
      renderer.setSize(window.innerWidth, window.innerHeight);
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
  })

  document.body.appendChild(renderer.domElement);

  var geometry = new THREE.SphereGeometry(1,10,10);
  var material = new THREE.MeshLambertMaterial({color: 0xFFCC00});
  var mesh = new THREE.Mesh(geometry, material);

  scene.add(mesh);

  renderer.render(scene, camera);

Although my scene appears to be correctly set up with the light gray background, I am encountering an issue where the black sphere is not showing up as expected.

javascriptthree.js

Answer №1

There seems to be an error in your code: 

var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHieght, 0.1, 1000);

window.innerHieght should actually be window.innerHeight

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setClearColor("#e5e5e5");
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

window.addEventListener('resize', () => {
  renderer.setSize(window.innerWidth, window.innerHeight);
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
})



var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));

var geometry = new THREE.SphereGeometry(1, 10, 10);
var material = new THREE.MeshLambertMaterial({
  color: 0xFFCC00
});
var mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

renderer.render(scene, camera);
body {
  overflow: hidden;
  margin: 0;
}
<script src="https://threejs.org/build/three.min.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to add an item to an array in JavaScript without specifying a key

Is there a way to push an object into a JavaScript array without adding extra keys like 0, 1, 2, etc.? Currently, when I push my object into the array, it automatically adds these numeric keys. Below is the code snippet that I have tried: let newArr = []; ...

javascriptarraystypescriptvue.js

Alter the background image of the body based on the active ID and class

Currently, I am developing a website where all the pages slide around on the main landing page. The process starts with a div having an ID of "main" and a class of "currentpage." When navigating through the menu items, the content slides away to reveal the ...

javascriptjquerycss

Encountered an issue with reading null properties when trying to access 'defaultPrevented' in bootstrap 5 toast

Implementing a custom hook to display and hide toast messages is working perfectly fine when invoking showToast in the button component of the Toast, but encountering an error when using this hook outside, for example in the button component of the App. Ty ...

javascriptreactjsreact-hooksbootstrap-5

The error message "Encountered an issue when trying to access properties of undefined (reading 'getState')" was

Currently working on developing an app that utilizes a Django backend and React frontend. The goal is to enable users to log in, receive refresh and access tokens from Django, store the token in local storage, and redirect authenticated users to a static p ...

javascriptreactjs

AngularJS handles intricate JSON responses effortlessly

I have been learning angularjs on my own, mostly from w3schools and other websites. I have been trying to download and parse some JSON data. I was successful with a simple JSON url (http://ip.jsontest.com), but I am struggling with a more complex response. ...

javascriptjsonangularjshtmlweb-services

Display a pop-up message asking for confirmation within a set duration?

Is there a way to display a confirmation dialogue that is set to expire after a certain time, triggering one of two actions if the user does not respond? Specifically, the confirmation should expire if the user: a) navigates away from the page b) fails t ...

javascriptphpjqueryhtmlajax

I am encountering an issue where the threejs lighting effects, such as pointlight and ambientlight, are not functioning properly in version "three": "^0.164.1". What could be causing this problem

Embarking on my first threejs project using vite and the threejs library I implemented the following light functions in my JS file: // Emit light evenly in all directions from a specific point in space const pointLight = new Three.PointLight(0xff0000, 1, ...

javascriptreactjsthree.jsreact-three-fiberthree-tier

Loading an HTML page using jQuery's .load() method that contains embedded JavaScript

I'm facing an issue with loading .html pages (including JavaScript) into a div element. Below is my div setup: <div class="content"></div> This is my php code: <?php if(!$_POST['page']) die("0"); $page = (int)$_POST[&a ...

javascriptjqueryhtmlajaxhttpresponse

Issue with incremental static generation in version 13 not functioning as expected

Is ISR working for anyone in the NextJS 13 Beta version? I have set revalidate to 15 as follows. export const revalidate = 15; However, even after running `npm run build`, the page still remains a statically generated site (SSG). The symbol is showing u ...

javascriptnext.jsnext.js13

Execute a function after another function completes in JQuery

After a page finishes refreshing, a jQuery event is triggered: $(#id).trigger('reloaded'); The 'reloaded' event is custom; How can I set up a listener to run another function when it's done 'reloading'? I had this ide ...

javascriptjquery

What is the best way to separate an array of numbers into individual digits using JavaScript?

I am looking to transform an array const myArr = [ 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106 ] into a new array with digits split like this: const splited = [ 9, 4, 9, 5, 9, 6, 9, 7, 9, 8, 9, 9, 1, 0, 0, 1, 0, 1, 1, 0, 2, 1, 0, 3, 1, 0, ...

javascriptarrayssplitnumbers

Displaying two different dates in AngularJS without any repetition of the similar elements

How can I elegantly display a date range that includes two dates, without repeating information if it's the same for both dates? My idea is something like this: Tue, 05 May 2015 19:31-20:31 GMT Mon, 04 19:31 - Tue, 05 20:31 May 2015 It's accept ...

javascriptangularjsdatetime

Tips for passing an array between components in Angular 2

My goal is to create a to-do list with multiple components. Initially, I have 2 components and plan to add more later. I will be sharing an array of tasks using the Tache class. Navbar Component import { Component } from '@angular/core'; impor ...

javascriptangulartypescriptangular-services

Script for Detecting Table Header Presence in Office Fails to Identify Absence of Header

Currently, I am developing a macro in Office Scripts for Excel that has several requirements: Verify the existence of a column header in a specified table If the column does not exist, add it and set the desired header Write values to that newly added col ...

javascriptexcelexcel-tablesoffice-scripts

Combining two arrays in JavaScript and saving the result as an XLS file

I have a question that I couldn't find an answer to. I need to merge two arrays and export them to an Excel file using only JavaScript/jQuery. Let's say we have two arrays: Array 1 : ["Item 1", "Item 2"] Array 2 : ["Item 3", "Item 4"] When the ...

javascriptjqueryarrayshtml

Tips for modifying a HTML table to switch one column with 60 rows to three columns with 20 rows dynamically

Need assistance with separating a dynamically loaded single-column HTML table of 60 rows into three columns of 20 rows each using jQuery in JSP. For example, starting with the loaded table: test 1 test 2 test 3 test 4 test 5 test 6 test 7 test 8 test 9 t ...

javascriptjquery

The data type 'HTMLCollection | undefined' is required to have a method called '[Symbol.iterator]()' which will then return an iterator

I'm currently working on creating a custom date-picker using web components by following a tutorial. I've encountered an error while translating the JavaScript logic to Typescript, specifically within the connectedCallback() {...} function. The e ...

javascriptarraystypescriptoopreact-tsx

React data is being updated prior to waiting for the API call

I'm currently developing a React app that includes a table with a scroller. On each scroll, the page number is updated and an API call is made using the new page number. However, the page number updates too quickly, exceeding the limit and resulting i ...

javascriptreactjsasync-awaitscrollaxios

Effortlessly importing a parasolid (.x_t) file into Three.js

I'm looking for advice on how to load a parasolid file in three js. Has anyone used a loader for parasolid files before? var loader = new THREE.ObjectLoader(); loader.load('path', callback); If there's no specific loader available for ...

three.js

Converting blobs to strings and vice versa in Javascript

After successfully converting a blob to a string using FileReader, the challenge now is to convert it back: var reader = new window.FileReader(); reader.readAsDataURL(blob); reader.onloadend = function() { base64data = reader.result; var blobToSend ...

javascriptfilereader