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.