What steps should I follow to display three.js in a web browser?

Every time I attempt to view my progress with three.js on my local browser, it fails to load and gives me this error message,

Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".

I'm a beginner with three.js and have been struggling to make any headway. Any assistance is greatly appreciated. The first line of my javascript file reads as follows:

import * as THREE from '/Users/16103/Desktop/three'
. Thank you!

Answer №1

Enhance your coding skills by experimenting with a demo featuring a Content Delivery Network (CDN) - like this one borrowed from their collection of samples. You have the option to either download the script from the CDN or keep a local copy for reference.

var camera, scene, renderer, geometry, material, mesh;

initialize();
animateCanvas();

function initialize() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 500;
  scene.add(camera);

  geometry = new THREE.CubeGeometry(200, 200, 200);
  material = new THREE.MeshNormalMaterial();
  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  renderer = new THREE.CanvasRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement);
}

function animateCanvas() {
  requestAnimationFrame(animateCanvas);
  renderCanvas();
}

function renderCanvas() {
  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.02;
  renderer.render(scene, camera);
}
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/three.js/r54/three.js"></script>

<canvas style="margin-top:-200px"></canvas>

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

Sweet treats, items, and data interchange format

Can an object be converted to a string, stored in a cookie, retrieved, and then parsed back to its original form when the user logs on again? Here's a concise example of what I'm asking: var myObject = { prop1: "hello", prop2: 42 }; va ...

Error Encountered: Module 'openpgp' Not Found

Currently, I am in the process of learning javascript and experimenting with importing modules using npm in my js files. So far, I have been able to successfully import modules using require(), however, I encountered a problem with openpgp.js which resulte ...

Struggling with developing a chrome extension

I have successfully developed a Chrome extension that, when clicked, says hello world. However, I am facing an issue with creating a simple button that triggers an alert when pressed. Could it be due to the inclusion of JavaScript in an HTML extension file ...

"The process of updating a div with MySQL data using Socket.io on Node.js abruptly halts without any error message

Embarking on a new project using socket.io has been quite the learning experience for me as a beginner. Despite extensive research, I managed to reach the desired stage where I have divs dynamically populated with data fetched from MySQL. In my server.js f ...

Testing the Angular/Ionic project through unit tests

I am facing a challenge with my controller code, which appears to be quite simple. Here is a snippet of the controller: timeInOut.controller('timeInOutController', function($scope, $filter, $ionicScrollDelegate){ ... }); However, when at ...

Rails 4 does not properly handle the execution of Ajax responses

Currently, I am incorporating ajax functionality within my Rails application. Within the JavaScript file of my application, the following code snippet is present: $('#request_name').on('focusout', function () { var clientName ...

Maximizing Efficiency: Utilizing a Single jQuery Function to Retrieve Specific Values

I have a webpage with select menus for choosing user type, minimum age, and maximum age. I want to select options and send values as an object array to ajax. Initially, the getAjax function is working when the page loads. However, it stops working when I c ...

Seamless transition of lightbox fading in and out

Looking to create a smooth fade in and out effect for my lightbox using CSS and a bit of JavaScript. I've managed to achieve the fading in part, but now I'm wondering how to make it fade out as well. Here is the CSS code: @-webkit-keyframes Fad ...

Customize the default directory for local node modules installation in node.js using npm

If I prefer not to have my local (per project) packages installed in the node_modules directory, but rather in a directory named sources/node_modules, is there a way to override this like you can with bower? In bower, you specify the location using a .bow ...

Encountering Uncaught Promise Rejection Warning in Node.js

I can't figure out why I am receiving this error or warning when my code appears to be correct. Below is a snippet of the UserModel that I have been working on: const fs = require('fs'); class UserModel { constructor(filename) { ...

Fixing the problem of digest overflow in AngularJS

I've been working on a code to display a random number in my view, but I keep encountering the following error message: Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! It seems to be related to a digest outflow issue, and I&apo ...

Alter the hue within Google Chart

I'm working on customizing a Google Bar Chart with Material design and running into an issue with changing the background color. I've tried using backgroundColor and fill identifiers in the options, but the inner area of the chart where the data ...

Interactive Communication: PHP and JQuery Messaging Platform

I am developing a social networking platform and I am looking to integrate a chat feature. Currently, I have a home.php page that displays a list of friends. The friends list is loaded dynamically using jQuery and PHP, like this: function LoadList() { ...

Running an ESNext file from the terminal: A step-by-step guide

Recently, I delved into the world of TypeScript and developed an SDK. Here's a snippet from my .tsconfig file that outlines some of the settings: { "compilerOptions": { "moduleResolution": "node", "experimentalDecorators": true, "module ...

Issue with the Styled Components Color Picker display

For the past 6 months, I have been using VSCode with React and Styled Components without any issues. However, recently I encountered a problem where the color picker would not show up when using CSS properties related to color. Usually, a quick reload or r ...

Retrieve the HTML representation of a progress bar in Ext JS 3.4 prior to its rendering

Is it possible to obtain the HTML representation of a progress bar before it is rendered anywhere? I am currently using a custom renderer for rendering a progress column in a grid: renderer: function( value, metaData, record, rowIndex, colIndex, store ) ...

Why isn't the import statement fetching the necessary function for me?

Hello, I am currently utilizing NextAuth for my application: The main file I am attempting to pull data into: [...nextauth].js import NextAuth from "next-auth" import Providers from "next-auth/providers" export default NextAuth({ // ...

Formatting Numbers in HighCharts Shared Tooltip

My first experience with HighCharts JS has been quite positive. I am currently creating multiple series and using a shared tooltip feature. The numbers displayed in the shared tooltip are accurate, but the formatting is not to my liking. For instance, it s ...

Implementing dynamic rotation of a cube in A-Frame using Javascript

I have been experimenting with A-Frame and Socket.io recently. I have successfully managed to rotate a cube/box statically using the following HTML code: <a-box position="-1 0.5 -3" rotation="0 0 0" color="#4CC3D9"> <a-animation id="cube ...

Testing units with Jest using ES6 import syntax instead of module.exports

There's a script I created that contains all the logic in a single const variable, similar to Moment.js. I'd like to test the functions from this script using Jest. Unfortunately, using module.exports won't work when I publish the script. ...