Home Pages

My goal is to help you understand basic consepts to program on 3D

I started to work on 3D graphics for the web
and I believe is a great technology, and it looks wonderful
my goal is to help you understand the basics of this new technology
so you can start working on great projects on your own

I made this book/story/webPage, with the desire to help you as much as I can

When looking for things on line, can be frustrating
I did my best to keep things simple and hopefully you can understand how this works

You will still need to do some research on your own, or learn more from other books or people
but in general, this will be more than worth it, I promise
you will learn a lot. Just as much as I learned when I did this book

Have fun, enjoy and start learning.


Learning this, is not as easy, if you don't have some previous knowledge
Here are a few things you should know to understand all this better.

  • Basic or medium understanding on computers in general
  • How to use a computer, like copy/paste, or save and organiza files
  • Load programs, and search online
  • Basic understanding of programming, like some experience with C
  • Medium experience in HTML and creating web-pages
  • If you have your own web-page, or server , is much better
  • CSS is very important
  • Javascript, at least the basic
  • And some key concepts of 3D, graphics, Math, and Design

It's a lot? maybe, but if you have this is going to be easier
If you don't, you still can learn, but you will have to do a lot of reasearch.
and you will be learning all this little by little


I discovered threejs.org recently, about March, 2020
A time when we all had to stay home (Coronavirus).
so I had time to start learning, and I did learn.
THREE.js has so much, that please visit their site threejs.org
you will be amazed with all the things you can do.
I created this book, and this learning center
but you can do, anything you can imagine
Here are some great examples of things that you can do

Now imagine what you can do with this,
I'm hoping I can be part of your journey to learn all this.


To do something like this, you need a web-site
My web-site is Songnes.com
if you don't have a web-site
please, see some of my other lessons, to create one
I will show you this, thinking that you do have a web-site

Create a basic web-site, something simple that looks like this:
Basic Web Page
see the full code here:
Basic Web Page: Full Code
The code is so you can copy and paste, so you have the same thing as I do
If you know more, you can have your own web page


If you know how to make a web-page, skip this.

The DOCTYPE is to tell the browser is a web page
All web pages need a "head" and a "body"
the lang="en", is to say that this web page is in English

Inside the head, I have a "title" element with the title of the web page
this is the text you see on top of every web page

then in the body, I have a "h1" to have Bold letters "Basic Web Page" and the "p" element to have "This is a basic web page"

If you have trouble understanding this...

you better study more HTML and then try this lessons.


Javascript needs a script to run,
all the code you need for threeJs is inside a <script>

I have seen the code, inside the body
and also outside the body
for now I'm going to put it, inside the body

<body>
<script>


.... here is were the code will be
.... we type lines of code to make this work


<\script>
<\body>
but first we need the most important thing.


We need to load the three.js library
tree.js is a file, that has many functions and things that we need to run our code
Just like you include a library in other languages
or you import the .css file to make a web page works
the same way you use a script to load the file three.js to make this work
I have seen it, in the head, in the body, and outside the body
for now, I will put it in the head

this is the line of code you need:

<script src="https://threejs.org/build/three.js"></script>

Copy this line and put it in the head of your web page code