Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="render" style="width:100%; height: 100%"></div>    
              
            
!

CSS

              
                /**

Many thanks to prisoner849 for solving the algorithm for the gradient

@link https://discourse.threejs.org/t/gradient-to-textgeometry/1603/8

**/
              
            
!

JS

              
                // Requisiti: scene, camera e renderer
// scene è lo spazio
var scene = new THREE.Scene();

// (FOV verticale in degrees (default 50), aspect ratio, near, far)
// "near" e "far" servono per capire cosa renderizzare. In sostanza: 1000 è come un orizzonte
// 0.1 è la posizione dei "propri occhi", quindi se più vicino di 0.1 o lontano di 1000 nello spazio non si vede
var camera = new THREE.PerspectiveCamera(30, window.innerWidth/window.innerHeight, 0.1, 1000);
// qui si stabilisce la distanza della camera. Default è x 0, y 0, z 0
camera.lookAt(scene.position);
camera.position.set( 0, 20, 0 );

// WebGL render principale, ma si possono settare dei fallback
var renderer = new THREE.WebGLRenderer({ antialias: true })
// Si settano dimensioni finestra (più piccolo più performante), e opzionale 3° argomento a setSize "false" che permette di dimezzare la risoluzione (ancora più performante)
renderer.setSize( window.innerWidth, window.innerHeight, false );
// si colora lo sfondo di bianco
renderer.setClearColor(0xffffff, 1);
document.getElementById('render').appendChild( renderer.domElement );

// modulo dei controlli per il mouse di Three.js
var controls = new THREE.OrbitControls( camera, document.getElementsByClassName('wrapper')[0] );
// auto rotazione della camera e sua velocità, autorotatespeed default 2
controls.autoRotate = true;
controls.autoRotateSpeed = 0.1;
// velocità di rotazione all'input manuale 
controls.rotateSpeed = 0.1;
// effetto ease\inertia alla rotazione manuale, dampingFactor di default 0.25
controls.enableDamping = true;
controls.dampingFactor = 0.1;
// così si disabilita lo spostamento su x e y della camera
controls.enablePan = false;
// disabilitare zoom 
controls.enableZoom = false;
// abilitare rotazione, anche per singolo asse con valori da -Math.PI a Math.PI per i min e max
controls.minPolarAngle = Math.PI/2;
controls.maxPolarAngle = Math.PI/2;
//controls.update() must be called after any manual changes to the camera's transform
controls.update();

// luminosità d'ambiente. Alternativa è spotlight che è un punto di luce
// var ambientLight = new THREE.AmbientLight(0xeeeeee);
// scene.add(ambientLight);

// Per creare un oggetto, bisogna creare  degli oggetti 3d tendenzialmente chiamati "-prefisso"Geometry, cioè la forma
// ogni oggetto 3d a sua volta dev'essere costituito da un materiale a cui si applicheranno le palette di colori di tipo Mesh*Material, che quindi è l'aspetto
// Questi due servono a creare una Mesh, cioè Shape+Appearance che verrà aggiunto alla "scene"
// in questo caso ci serve un TextGeometry di una C usando un font, partendo da un font-family in formato json compatibile con three.js
// e grazie al FontLoader trasformarlo in un oggetto Shape usabile da three.js
var loader = new THREE.FontLoader();
loader.load('https://threejs.org/examples/fonts/helvetiker_bold.typeface.json', function (font) {
    // siccome bisogna aspettare che finisca la generazione del font prima di fare la scritta, si invoca la creazione
    // del testo in 3d in una funzione qua definita
    createText(font);
});
var text;
var geometry;
function createText(font) {
    container = document.createElement( 'div' );
    document.body.appendChild( container );
    // "forma" testo C
    geometry = new THREE.TextGeometry( "C", {
        font: font,
        size: 9,
        height: 3,
        curveSegments: 15,
        bevelEnabled: false
    });

    // calcola il cubo circoscritto, e si usano le dimensioni per centrare l'asse in mezzo alla "scene"
    geometry.computeBoundingBox();

    // serve a centrare l'oggetto in base all'asse centrale e non quello y
    geometry.center();

    var centerOffset = -0.5 * ( geometry.boundingBox.max.x - geometry.boundingBox.min.x );
    
    // due materiali: uno per l'interno e l'altro per l'esterno
    var materials = [
        new THREE.MeshBasicMaterial( { color: '#ECECEE'} ),
        new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors, wireframe: false } )
    ];
    
    var faceIndices = [ 'a', 'b', 'c'];

    var bbox = geometry.boundingBox;
    var size = new THREE.Vector3().subVectors(bbox.max, bbox.min);
    var length = geometry.faces.length;
    var face, vertex, normalized = new THREE.Vector3(), normalizedAxis = 0;

    var colors = [{
        stop: 0,
        color: new THREE.Color(0xf7b000)
    }, {
        stop: .3,
        color: new THREE.Color(0xdd0080)
    }, {
        stop: .6,
        color: new THREE.Color(0x622b85)
    }, {
        stop: .85,
        color: new THREE.Color(0x007dae)
    }, {
        stop: 1,
        color: new THREE.Color(0x77c8db)
    }];
    var vertexIndices = ['a', 'b', 'c'];
    var axis = 'y', reverse = true;

    for (var c = 0; c < colors.length -1; c++) {

        var colorDiff = colors[c + 1].stop - colors[c].stop;

        for ( var i = 0; i < length; i++ ) 
        {
            face = geometry.faces[i];

            for (var v = 0; v < 3; v++){
                vertex = geometry.vertices[face[vertexIndices[v]]];
                normalizedAxis = normalized.subVectors(vertex, bbox.min).divide(size)[axis];
                if (reverse) {
                    normalizedAxis = 1 - normalizedAxis;
                }
                if (normalizedAxis >= colors[c].stop && normalizedAxis <= colors[c + 1].stop) {
                    var localNormalizedAxis = (normalizedAxis - colors[c].stop) / colorDiff;
                    face.vertexColors[v] = colors[c].color.clone().lerp(colors[c + 1].color, localNormalizedAxis);
                }                
            }
        }
    }

    text = new THREE.Mesh( geometry, materials );
    text.position.x = 0;
    text.position.y = 0;
    text.position.z = 0;

    text.rotation.x = -0.5;
    text.rotation.y = 0.6;
    text.rotation.z = 0.9;

    scene.add(text);
}

// funzione di rendering
// al suo interno è anche stabilita la rotazione dell'oggetto sul proprio asse y
var animate = function () {
    requestAnimationFrame( animate );
    
    //text.rotation.y += 0.001;
    // required if controls.enableDamping or controls.autoRotate are set to true
    controls.update();

    renderer.clear();
    renderer.render(scene, camera);
};
animate();
              
            
!
999px

Console