/random_dev_notes.txt: diciembre 2021

This example uses the online resources of three.js, we don't have to download any three.js packages.

# Create the Rails webpage

We are going to start with the normal Ruby on Rails new project in a terminal:

$ rails new app
$ cd app
Test if the app is running by:
$ rails s
Go to http://localhost:3000/
If you see a welcome page saying "Yay! You're on Rails!" everything went correctly.

# Create a home page

By creating a new controller we can set it as the home page for this project:

$ rails g controller home index

Now we have home controller with an action called index, which will be the home page once we setup the routes. Right now the only way of accessing the new view of this controller is going to http://localhost:3000/home/index. But with a new route we can set this as the landing page.

Go to the routes file in app/config/routes.rb, then write a new line to indicate the new route:

root 'home#index'

And delete the other route. Then the routers.rb should be looking like this:

Rails.application.routes.draw do
  root 'home#index'
end

The homepage is set. You can go to http://localhost:3000/ and find the home page as the landing page.

# Put a three.js canvas in the home page

In order to use three.js inside the page we can use a partial to have everything organised in our project. By doing a partial we can have a separate file to write our three.js code.

Create a partial

Go to the app/views/home folder and create a new file called:

_3d_viewer.html.erb

Is very important to use the '_' in the beginning of the name of a partial.

Now we can use this partial to write our three.js code. We just need to reference the library and use it with two script tag

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

<script>
    <!-- three.js code goes here -->
</script>

With the source as https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js we can use the three.js library.

Show the partial in home page

The only thing left to do is to show the three.js in the home page. Just write one more line in the view for the homepage:

<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>

<%= render partial: "3d_viewer" %>

# View the results

With an initial code for three.js to work we can see the results in the homepage:

Three.js code of the example

In the _3d_viewer.html.erb

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

<script>
    var scene = new THREE.Scene();
    const WIDTH = 500;
    const HEIGHT = 500;
    var camera = new THREE.PerspectiveCamera( 75, WIDTH/HEIGHT, 0.1, 1000 );
camera.position.z = 4;
    var renderer = new THREE.WebGLRenderer({antialias:true});

    renderer.setClearColor("#000000");
    renderer.setSize( 400, 400 );
    document.body.appendChild( renderer.domElement );

    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    var material = new THREE.MeshBasicMaterial( { color: "#433F81" } );
    var cube = new THREE.Mesh( geometry, material );

    scene.add( cube );

    var render = function () {
        requestAnimationFrame( render );

        cube.rotation.y += 0.01;

        renderer.render(scene, camera);
    };

    render();
</script>

Use Three.js inside Ruby on Rails