Setting up a simple configuration for WebGl and Javascript

I am currently using OSX 10.9.5 (Mavericks) and following a WebGL tutorial script provided on . I copied and pasted the code from the tutorial into TextEdit and saved it as HTML with the following file structure:

webgl
|
+--index.html
|
+-- js/three.min.js

However, when I load the index.html file into the browser, instead of seeing the expected result of a WebGl rendered cube, I only see the HTML code rendered just like in my text editor. Can someone please help me understand why this happens? Thank you.

javascriptthree.js

Answer №1

For those interested in three.js development, setting up a simple web server is essential and straightforward.

Here are the steps for Windows:

  1. Download node.js here
  2. Open a Node.js command prompt.
  3. Enter npm install -g http-server

On OSX/Linux:

  1. Download node.js here
  2. Open a terminal / shell.
  3. Type sudo npm install -g http-server

Navigate to your project folder and run http-server. For example,

cd "myproject"
http-server

Access your project in the browser using http://localhost:8080 or 

http://localhost:8080/nameoffile.html

If you encounter issues, check that the path to three.min.js is correct. Consider this directory structure:

myproject
|
+--index.html
|
+--js
   |
   +--three.min.js

In your index.html, ensure the script tag points to the correct location:

<script src="js/three.min.js"></script>

Answer №2

I prefer to work with a text editor like Sublime Text.

While TextEdit may look like a text editor, it is actually a WYSIWYG word processor with an unfortunate name.

If you type this in Sublime Text:

https://i.sstatic.net/pYwcQ.png

And save it as shown below:

https://i.sstatic.net/mEjkL.png

You will get the desired result, displaying what you typed without interpreting it as HTML code:

https://i.sstatic.net/jNjhF.png

To avoid confusion and ensure proper formatting, use real text editors such as:

  • Sublime Text
  • Brackets
  • Vim
  • Komodo Edit

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

Ways to categorize items retrieved from an HTTP request to the backend in Angular

When making a call to the backend using this http request: this.StudentEnrollment.getRecordsById(list.value.split(/[\r\n]+/)).subscribe(values => { this.studentObject = values; }); The studentObject is structured as shown below: { recor ...

javascriptangulartypescript

Inject a DOM event into a personalized form validator within an Angular application

I'm currently working on validating a form using the reactive approach. I've implemented a file input to allow users to upload files, with custom validation conditions in place. However, I'm encountering an issue where the validator only rec ...

javascriptangulartypescript

Changing Text in React Native is Customizable

As a newcomer to react native, I find myself in need of some guidance. I am currently working on implementing a TextInput feature where users can update the text value as they please. For instance, if a user initially creates a folder named "Bar" but later ...

javascriptreactjsreact-nativereact-hooks

Assigning array materials in ThreeJS allows you to create complex

When I assign framemat to createScene(ID, geometry, 1, framemat), everything works fine. But when I try createScene( ID, geometry, 1, materials[ID] ), it doesn't cooperate. var jsonLoader = new THREE.JSONLoader(), paths = [ "obj/jgd/ ...

javascriptthree.js

Obtain redirected JSON data locally using Angular 5

Currently, I am working on retrieving JSON data which will be sent to my localhost through a POST method. The SpringBoot API controller will validate the JSON content before forwarding it to my localhost. My task is to intercept this JSON data when it is t ...

javascriptangulartypescript

Integrating Bootstrap-vue into your Webpack setup for seamless usage

After beginning a project with vuejs-templates and webpack, I decided to incorporate bootstrap-vue. Now, the challenge is figuring out how to implement a bootstrap button. In my code base, specifically in main.js, I have imported BootstrapVue: import Vu ...

javascripttwitter-bootstrapwebpackecmascript-6vue.js

Having trouble loading an image after successfully connecting to an API with react.js

I've been working on a custom fetch component to load images from the "the dog API" onto my page. However, I'm facing some issues with getting the images to display correctly. Can anyone spot what might be missing in my setup? App.js import &apo ...

javascriptreactjsfetch-api

implementing ng-grid to showcase json information within an angularjs application

Recently I started learning Angularjs and I am looking to showcase the JSON data retrieved from a webservice response in a grid format using ng-grid. Here is my code snippet: function TestController($scope, $http) { alert("test"); $http({ url: &apos ...

javascriptjsonangularjsng-grid

Sequelize makes it easy to input records into various tables simultaneously

Embarking on my first experience with Sequelize and MySQL, I am seeking guidance on inserting data into two tables with a foreign key relationship. Let's delve into the structure of the entities - bookingDescription and bookingSummary. //bookingSumma ...

javascriptmysqlnode.jslambdasequelize.js

Refreshing Bootstrap-Vue Table does not result in updating the table with table.refresh() method

I am facing an issue with a table that is supposed to be updating its data dynamically. The scenario is such that when a button is clicked in the parent component, a server call is triggered and a JSON file is loaded into a child component (the table) via ...

javascriptvue.jsbootstrap-vue

Using the spread operator in a component's render function could potentially lead to an endless update loop

Although this issue has been addressed before in a discussion about the "You may have an infinite update loop in a component render function" warning in Vue component, the solution provided did not resolve my problem. I am seeking assistance to ...

javascriptvue.js

When dynamically adding rules to jQuery validate, I encountered an unexpected error

My dynamic form validation with jQuery validate involves a drop-down menu on my HTML that includes values 1, 2, 3, and 4. Depending on the selection made from the drop-down, different div elements are displayed with corresponding fields. All the input fie ...

javascriptjqueryhtmlvalidation

Finding out which side of a cube has been clicked---Let's identify the side

Currently, I am in the process of developing a navigation menu and I am looking for a way to detect which side the user has clicked. Is it possible to achieve this using raycasting or is there an alternative method that would work better? If you require i ...

javascript3dthree.js

Retrieve a form (for verification purposes) from a separate AngularJS component

I'm facing an issue with accessing a form from one component to another in my project. One component contains a form, and the other has navigation buttons that, when clicked, should validate the form before moving on to the next step. However, I alway ...

javascriptangularjsangularjs-ng-form

Utilizing Angular's ng-repeat directive to dynamically generate images, with the added functionality of attempting to

I am utilizing angular-drupal to fetch data from my backend built on Drupal. My objective is to create an image gallery using the default endpoints provided by the services module. I make a call to node load to retrieve a specific node, then I extract the ...

javascriptangularjsdrupal

The submit button seems to be unresponsive or unreactive

As a newcomer to Angular 2 and Typescript, I am in the process of building a web application. I have created several input fields and, following user submission via a button, I want to log the inputs to the console. However, it seems like my button is not ...

javascriptangulartypescriptbutton

Organize object properties based on shared values using JavaScript

Check out the JavaScript code snippet below by visiting this fiddle. var name = ["Ted", "Sarah", "Nancy", "Ted", "Sarah", "Nancy"]; var prodID = [111, 222, 222, 222, 222, 222]; var prodName = ["milk", "juice", "juice", "juice", "juice", "juice ...

javascriptjqueryhtmlarrays

"Troubleshooting: Why is the JavaScript canvas.toDataURL method returning an

While I know this question has been asked multiple times before, I still haven't been able to find a solution. My goal is to take an image, rotate it, and place it in an HTML canvas. To achieve this, I am utilizing another canvas where I rotate the i ...

javascripthtmlcanvas

CarouFredSel Transition Troubles

I am currently using CarouFredSel to create an image carousel, but I am encountering some issues with the transitions between items. My goal is to incorporate simple HTML elements into the carousel instead of just plain images. However, when I attempt to ...

javascriptjqueryhtmlcsscaroufredsel

Issues with Bootstrap Table Column Widths not Adjusting Properly

I am facing an issue with my Bootstrap 4 table where the fixed column widths specified in the header row are not being respected when the table is rendered. The Time column, for example, should only be 5% of the width but it is taking up more space than ex ...

javascripthtmlcssbootstrap-4