Scene three js appears to be stuck in a perpetual state of emptiness, making it challenging to start

I've encountered a major issue with understanding how to use three.js. Despite my best efforts over the past few days, I haven't been able to successfully implement three.js into my projects. Initially, I attempted using Parcel by starting a new project, only to switch quickly to Vite. The installation process went smoothly, and here are the commands I executed in my terminal:

npm create vite@latest ( vanilla, javascript ) npm install
npm add three npm run dev

Upon navigating to my project folder, I found folders such as node_modules and public, along with files like .gitignore, index.html, javascript.svg, main.js, package-lock.json, package.json, and style.css. Within the node_modules directory, there were both a 'three' folder and another quick one.

The code snippet I inserted in main.js is as follows:

import { Scene, WebGLRenderer } from 'three';
import './style.css';

const scene = new Scene();
const renderer = new WebGLRenderer();
renderer.setSize(widnow.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
document.body.appendChild(renderer.domElement);

In my code editor, an error message appears between 'from' and 'three' on the first line stating: Could not find a declaration file for module 'three'. c:/Users/cerng/Desktop/Three/particles/node_modules/three/build/three.js' implicitly has an 'any' type.

Below is the content of the package.json file:

{ "name": "particles", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "devDependencies": { "@types/three": "^0.160.0", "vite": "^5.0.8" }, "dependencies": { "three": "^0.160.0" } }

Although the code I've written is intended to display a completely black scene, it continues to show up as white (tested on both Chrome and Edge browsers).

I have attempted uninstalling and reinstalling three.js, as well as running the command: npm install --save-dev @types/three. Additionally, I've explored other proposed solutions in various forums, but they do not quite address the specific issues I am facing.

Answer №1

There is a minor mistake in your code

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

Correction:

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

Additionally, make sure to execute the render method with the arguments: scene and camera.

renderer.render(scene, camera)

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

Tips for creating horizontal dividers with CSS in Vuetify using <v-divider> and <v-divider/> styling

Currently, I am working on a project using Vue.js and adding Vuetify. However, I need to use a component. .horizontal{ border-color: #F4F4F4 !important; border-width: 2px ; } <v-divider horizontal class=" horizontal ...

Unable to send event from JavaScript to Component in Ionic

My goal is to notify a component that a script file has finished loading. My approach involves using the onload event of an element to dispatch an event. A service will then register an event listener for this event, waiting for clients to subscribe to an ...

Highlighting table column when input is selected

I am working with a table where each <td> contains an <input>. My goal is to apply the class .highlighted to all the column <td>s when an <input> is being focused on. Additionally, I want to remove this class from all other columns ...

Issue with jQuery Master-Detail dropdown list selection

Having trouble isolating the code in this jsfiddle script. Despite my efforts, it seems that isolation is not working as expected and Firebug isn't showing any errors on the console: <!DOCTYPE html> <html lang="en"> <head> ...

unable to retrieve / interpret data from herdsmen using fetch

When sending a request to a node server, the server responds with headers and a blank body. Despite being able to view the headers in the network activity panel within dev-tools, I faced difficulties reading them using the following code: let uploaded ...

Showing error messages in Angular when a form is submitted and found to be invalid

My form currently displays an error message under each field if left empty or invalid. However, I want to customize the behavior of the submit button when the form is invalid. <form #projectForm="ngForm" (ngSubmit)="onSubmit()"> ...

What could be causing the jQuery spritely animation to display an additional frame upon the second mouseenter event?

I have been experimenting with CSS sprites and the jQuery plugin called spritely. My goal is to create a rollover animation using a Super Mario image. When the mouse hovers over the Super Mario <div>, I want the animation to play forward. And when t ...

Removing the Tawk.to integration in React Redux using external JavaScript

Seeking help with integrating the Tawk.To Widget into my React APP. The widget (javascript) loads successfully when the page is first opened, but remains present when navigating to another page. How can I properly unmount this script when moving to a diff ...

Invoking a .js file within an UpdatePanel from the CodeBehind

I have been dedicating my time to self-teach ASP.NET and JavaScript for a project, and I've hit a roadblock that has consumed dozens of hours. After discovering a fantastic drag-and-drop JavaScript list online, I copied the provided source code and o ...

struggling with responseText functionality in javascript

I am encountering an issue with passing variables from PHP to JavaScript using JSON. The problem lies in the fact that I am able to debug and view the items in the responseText within my JavaScript, but I am unable to assign them to a variable or properly ...

Design a recurring report using an endless JavaScript cycle

I am in the process of creating a brand new scheduled report and have encountered an issue. How can I incorporate a script that includes a loop to run a specific function every 10 seconds? Here's what I have so far: var count = 1; while(count > 0 ...

Implement dynamic routes within your Nuxt single page application once it has been generated

I'm currently exploring the possibility of implementing dynamic routes in a Nuxt SPA. While I am familiar with using dynamic routes in Universal Mode and generating them during build time through functions, I am searching for a solution that does not ...

Encountering an HTTP parsing failure while sending XML through Angular 5's HttpClient

Struggling to access a local webservice through XML: Take a look at the code below: const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'text/xml', 'Accept': 'text/xml', 'Response- ...

Confusion surrounding the Javascript object prototype (utilizing require.js and three.js)

I'm feeling a bit confused about my understanding of Objects, prototypes, require.js and three.js. Let me illustrate with an example: In Summary: The instance "wee" is derived from "Wee," which acts as a wrapper or monkey patch for THREE... Shouldn& ...

Is there a way to prevent mouse wheel scrolling on a React "number" input field?

Currently, I am encountering an issue with MUI type="number" textfields. When I focus on the field and then scroll the mousewheel, the input value changes unexpectedly. I have looked into adding a blur function after scrolling to prevent this, but I would ...

Having trouble implementing express-unless to exclude specific routes from requiring authentication

Being relatively new to JavaScript and Node.js, I decided to incorporate express-jwt for authenticating most of my APIs. However, I wanted to exclude certain routes like /login and /register from authentication. After exploring the documentation for expr ...

Rendering illuminated component with continuous asynchronous updates

My task involves displaying a list of items using lit components. Each item in the list consists of a known name and an asynchronously fetched value. Situation Overview: A generic component named simple-list is required to render any pairs of name and va ...

Where can Vue.js be found?

After dedicating an hour to watching instructional YouTube videos on Vue.js, I am still struggling to grasp the language! In the past, I have worked with Node.js, Jquery, and Mongodb to develop websites... I believe that web applications require multiple ...

Find the position of the object in a list

I have an array that looks something like this data: Array(3) 0: data: Object account_id: (...) address_1: (...) address_2: (...) amount: 10.00 id: 1234 ... 1: data: Object account_id: (...) address_ ...

What steps should I take to set up search paths for node modules in Code Runner within Visual Studio Code?

Just recently, I embarked on a Javascript course and successfully configured my Visual Studio Code to run JavaScript. Check out the code snippet that I came up with: const prompt = require('prompt-sync')(); var fname = prompt("First name please : ...