<div id="render" style="width:100%; height: 100%"></div>
/**
Many thanks to prisoner849 for solving the algorithm for the gradient
@link https://discourse.threejs.org/t/gradient-to-textgeometry/1603/8
**/
// 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();
This Pen doesn't use any external CSS resources.