BabylonJS - Elementi di base
Babylon.js è un framework popolare per aiutare a creare giochi 3D per sviluppatori. Ha funzioni integrate per implementare le funzionalità 3D. Costruiamo una semplice demo utilizzando Babylon.js e comprendiamo le funzionalità di base necessarie per iniziare.
Per prima cosa creeremo una demo che contiene gli elementi di base di Babylon.js. Inoltre, impareremo anche le varie funzionalità di Babylon.js.
Demo di esempio 1
In questa sezione impareremo come creare una demo contenente gli elementi di base di BabylonJS.
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Babylon.JS : Demo2</title>
<script src = "babylon.js"></script>
<style>
canvas { width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
scene.activeCamera.attachControl(canvas);
var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);
var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);
var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
box.position = new BABYLON.Vector3(-5, 0, 0);
var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
cylinder.position = new BABYLON.Vector3(5, 0, 0);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>
Per eseguire BabylonJS, abbiamo bisogno di browser moderni con supporto WEBGL. Gli ultimi browser -Internet Explorer 11+, Firefox 4+, Google Chrome 9+, Opera 15+, ecc. Hanno il supporto WEBGL e le demo possono essere eseguite sulle stesse piattaforme per vedere l'output. Crea una directory per memorizzare i file per babylonjs. Recupera l'ultimo file BabylonJSscripts dal sito BabylonJS. Tutti i link demo in questo tutorial sono testati con la versione 3.3 di babylonjs.
Passo 1
Crea una semplice pagina html e includi il file Babylon.js.
Crea un tag canvas che viene utilizzato per eseguire il rendering dei contenuti da BabylonJS all'interno del tag body come mostrato di seguito.
Aggiungi CSS alla tela per occupare l'intera larghezza e altezza dello schermo.
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>MDN Games: Babylon.js demo - shapes</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
</body>
</html>Passo 2
Cominciamo ora con BabylonJScode per il rendering dei contenuti sulla tela.
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>MDN Games: Babylon.js demo - shapes</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
</script>
</body>
</html>Ora aggiungi il tag script alla struttura html e archivia il riferimento alla tela in una tela variabile.
Per iniziare con Babylon.js, crea un'istanza del motore e passa il riferimento alla tela per il rendering su di essa.
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
</script>L'oggetto globale BABYLON contiene tutte le funzioni Babylon.js disponibili nel motore.
Passaggio 3
In questo passaggio creeremo prima una scena.
Una scena è dove verranno visualizzati tutti i contenuti. Creeremo i diversi tipi di oggetti e aggiungeremo lo stesso alla scena per renderlo visibile sullo schermo. Per creare una scena, aggiungi il seguente codice alla struttura html già creata. Al momento, aggiungeremo al codice già creato come continuazione della struttura html di cui sopra.
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
};
var scene = createScene();Il file html finale avrà il seguente aspetto:
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>MDN Games: Babylon.js demo - shapes</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0, 1, 0);
return scene;
};
var scene = createScene();
</script>
</body>
</html>Nell'esempio precedente, la funzione CreateScene è definita e var scene = createScene () chiama la funzione.
La funzione CreateScene ha la scena creata al suo interno e la riga successiva aggiunge colore alla scena, che viene eseguita utilizzando BABYLON.Color3 (1, 0.8, 0.8) e il colore qui è rosa.
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);L'esecuzione del collegamento demo sopra nel browser non visualizzerà nulla in questo momento sullo schermo del browser. C'è un altro passaggio da aggiungere al codice che si chiama engine.runRenderLoop come nel passaggio 4.
Passaggio 4
Per rendere la scena effettivamente visibile sullo schermo, dobbiamo renderla utilizzando la chiamata engine.runRenderLoop. Vediamo ora come si fa.
Rendering Loop
engine.runRenderLoop(function() {
scene.render();
});La funzione Engine.runRenderLoop chiama scene.render, che renderà la scena e la renderà visibile all'utente. Il file .html finale apparirà come segue:
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Element-Creating Scene</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>Salva il file sopra come basicscene.html e controlla l'output nel browser. Lo schermo che viene mostrato è di colore rosa come mostrato di seguito -
Passaggio 5
Ora che abbiamo la scena, dobbiamo aggiungere la telecamera.
Aggiunta di fotocamera e luce
Il codice fornito di seguito aggiunge la telecamera alla scena. Esistono molti tipi di fotocamera che possono essere utilizzati su Babylon.
ArcRotateCameraè una telecamera che ruota attorno al bersaglio. Può essere controllato con mouse, cursore o eventi tattili. I parametri richiesti sono nome, alfa, beta, raggio, destinazione e scena. Discutiamo i dettagli della fotocamera in una sezione successiva.
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);Ora dobbiamo capire come aggiungere luce.
Le luci vengono utilizzate per produrre il colore diffuso e speculare ricevuto da ciascun pixel. Esistono molti tipi di luci. Impareremo a conoscere i diversi tipi di luci nella sezione luci.
Qui sto usando PointLight sulla scena. PointLight viene emesso in ogni direzione come il Sole. I parametri sono il nome, la posizione e la scena su cui utilizzare.
Per aggiungere luce, esegui il codice seguente:
var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);Passaggio 6
Vediamo ora come aggiungere forme.
Aggiunta di forme
La demo condivisa sopra ha 4 forme aggiunte.
- Sphere
- Torus
- Box
- Cylinder
Per aggiungere la sfera, eseguire il codice seguente:
var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);Una volta aggiunta la sfera, il codice avrà il seguente aspetto:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MDN Games: Babylon.js demo - shapes</title>
<script src = "babylon.js"></script>
<style>
html,body,canvas { margin: 0; padding: 0; width: 100%; height: 100%; font-size: 0; }
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);
var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);
scene.activeCamera.attachControl(canvas);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>Produzione
Il codice precedente genera il seguente output:
Aggiungiamo ora le altre forme: il Torus e il Box. Esegui il codice seguente per aggiungere la forma Torus.
var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
box.position = new BABYLON.Vector3(-5, 0, 0);Aggiungeremo una posizione alla casella. BABYLON.Vector3 (-5, 0, 0) prende la direzione x, yez.
Al momento dell'esecuzione, il codice precedente genera il seguente output:
Aggiungiamo ora la forma finale mostrata nello screenshot qui sopra: il cilindro.
var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
cylinder.position = new BABYLON.Vector3(5, 0, 0);La posizione viene aggiunta al cilindro che è la direzione x 5. Il codice finale è come mostrato di seguito:
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Babylon.JS : Demo2</title>
<script src = "babylon.js"></script>
<style>
canvas { width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
scene.activeCamera.attachControl(canvas);
var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);
var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);
var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
box.position = new BABYLON.Vector3(-5, 0, 0);
var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
cylinder.position = new BABYLON.Vector3(5, 0, 0);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>Produzione
Al momento dell'esecuzione, il codice precedente genererà il seguente output:
Le forme si muoveranno secondo la direzione in cui muovi il cursore; lo stesso viene fatto utilizzando il controllo di collegamento della telecamera alla scena.
scene.activeCamera.attachControl(canvas);Parliamo ora in dettaglio di ciascuna forma.
Ecco il riepilogo di tutte le forme e la sintassi -
| Suor n | Forma | Sintassi |
|---|---|---|
| 1 | Scatola | |
| 2 | Sfera | |
| 3 | Aereo | |
| 4 | Disco | |
| 5 | Cilindro | |
| 6 | Torus | |
| 7 | Nodo | |
| 8 | Linea Mesh | |
| 9 | Linee tratteggiate | |
| 10 | Nastro | |
| 11 | Tubo | |
| 12 | Terra | |
| 13 | Terreno dall'altezzaMappa | |
| 14 | Terreno piastrellato | |
Elemento di base: posizione, rotazione e scala
In questa sezione impareremo come posizionare, ruotare o scalare gli elementi che abbiamo aggiunto finora.
Abbiamo creato scatola, sfera, cilindro, nodo, ecc. Ora vedremo come posizionare, scalare e ruotare le forme.
| Sr.No. | Elemento e descrizione |
|---|---|
| 1 | Posizione Con il cambio di posizione, la mesh verrà cambiata da una posizione all'altra. |
| 2 | Rotazione Con la rotazione, la mesh verrà ruotata attorno alla mesh. |
| 3 | Ridimensionamento Il ridimensionamento della mesh può essere eseguito rispetto agli assi x, y o z. |
Elemento di base - Genitorialità
Con Parenting, creeremo una relazione genitore-figlio tra le mesh e vedremo come si comportano. Quindi, qualunque trasformazione applichi al genitore, la stessa verrà applicata anche al bambino. Vediamo ora di capire lo stesso con la demo mostrata di seguito.
Demo
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Element-Creating Scene</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0, 1, 0);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
scene.activeCamera.attachControl(canvas);
var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);
var boxa = BABYLON.Mesh.CreateBox("BoxA", 1.0, scene);
boxa.position = new BABYLON.Vector3(0,0.5,0);
var boxb = BABYLON.Mesh.CreateBox("BoxB", 1.0, scene);
boxb.position = new BABYLON.Vector3(3,0.5,0);
boxb.scaling = new BABYLON.Vector3(2,1,2);
var boxc = BABYLON.Mesh.CreateBox("BoxC", 1.0, scene);
boxc.parent = boxb;
boxc.position.z = -3;
var ground = BABYLON.Mesh.CreateGround("ground1", 10, 6, 2, scene);
ground.position = new BABYLON.Vector3(0,0,0);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>Produzione
Spiegazione
Abbiamo creato 3 caselle nella maglia sopra. Nella demo, viene applicato il ridimensionamento boxb e viene assegnato come genitore a boxc che viene ridimensionato anche dal suo boxb genitore e lo stesso viene ridimensionato. Puoi giocare con la demo per vedere come funziona il collegamento genitore-figlio.
Per creare una mesh, devi usare il genitore di un'altra mesh -
child.parent = parentmesh;
Elemento di base - Ambiente
Parliamo ora dell'ambiente della scena in questa sezione. Parleremo delscene background color, ambientcolor, skyboxes, fog mode, ecc. su una scena.
Abbiamo visto il scene background color is demos che abbiamo creato finora.
Colore di sfondo della scena
Vediamo ora come funziona il colore di sfondo della scena.
Sintassi
Di seguito è riportata la sintassi per il colore di sfondo della scena:
scene.clearColor = new BABYLON.Color3(0.5, 0.8, 0.5);
or
scene.clearColor = BABYLON.Color3.Blue();La proprietà sopra cambierà il colore di sfondo della scena.
Colore ambiente scena
Vediamo ora come funziona il colore ambientale della scena.
Sintassi
Di seguito è riportata la sintassi per il colore ambientale della scena:
scene.ambientColor = new BABYLON.Color3(0.3, 0.3, 0.3);AmbientColor viene utilizzato insieme a StandardMaterialcolore e consistenza dell'ambiente. Se non è presente un ambientColor per la scena, il fileStandardMaterial.ambientColor e StandardMaterial.ambientTexturenon ha effetto. StandardMaterial ambientColor / ambientTexture diventerà attivo una volta applicato ambientColor per la scena. Per impostazione predefinita, viene fornita la scenascene.ambientColor e impostato su Color3 (0, 0, 0), che significa nessun colore ambientale.
Modalità nebbia di scena
Ora capiremo come funziona la modalità Nebbia scena.
Sintassi
Di seguito è riportata la sintassi per la modalità Nebbia scena.
scene.fogMode = BABYLON.Scene.FOGMODE_EXP;Il seguente elenco delle modalità nebbia disponibili:
BABYLON.Scene.FOGMODE_NONE - quello predefinito, la nebbia è disattivata.
BABYLON.Scene.FOGMODE_EXP - la densità della nebbia segue una funzione esponenziale.
BABYLON.Scene.FOGMODE_EXP2 - come sopra ma più veloce.
BABYLON.Scene.FOGMODE_LINEAR - la densità della nebbia segue una funzione lineare.
Se è definita la modalità nebbia EXP o EXP2, è possibile definire la densità su di essa come segue:
scene.fogDensity = 0.01;Se la modalità nebbia è LINEARE, puoi definire dove inizia e finisce la nebbia come segue:
scene.fogStart = 20.0;
scene.fogEnd = 60.0;Per dare colore alla nebbia, eseguire il seguente codice:
scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);Skybox
Skybox è un modo per creare uno sfondo nei giochi che rende la scena realistica. È più un involucro attorno allo schermo che copre la trama utilizzata per il materiale. Scegli le tue immagini correttamente per renderle realistiche per la scena che desideri creare. Per creare lo skybox, devi creare una scatola e applicarvi del materiale. Discuteremo il diverso materiale in dettaglio in un capitolo successivo.
Ora vedremo come creare uno skybox usando scatola e materiale.
var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);Creeremo una scatola di dimensione 100 in modo che copra l'intera scena. Inizieremo dando materiale alla scatola che è fatto come segue:
var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);A questo materiale assegneremo le proprietà.
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("images/cubetexture/skybox", scene);Dobbiamo usare la texture di riflessione che è fondamentalmente utilizzata per creare un materiale simile a uno specchio. La proprietà della texture di riflessione utilizza CubeTexture che accetta l'immagine come input. Poiché il cubo ha 6 facce, l'immagine richiesta per skybox deve essere 6, cioè internamente deve essere memorizzata come skybox_nx, skybox_ny, skybox_nz, skybox_px, skybox_py, skybox_pz. Le immagini utilizzate per lo skybox sono incollate di seguito; sono facce del cubo su tutti e sei i lati. Quando si applica una trama alla forma, vengono forniti i dettagli dell'immagine utilizzata e la scena appare realistica. Abbiamo utilizzato la modalità coordinate come SKYBOX_MODE come mostrato di seguito -
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;Ci sono altre proprietà usate per materiale come backfaceCulling, diffuseColor, specularColor, disableLighting, ecc. Le proprietà sono spiegate in dettaglio nella sezione materiale.
Nella demo, mostreremo una scena ambientale creata usando lo skybox, una sfera che ruota nella scena e un aereo che si muove. Alla scena viene applicata la nebbia, che noterai quando ruoterai.
Demo che mostra la scena dell'ambiente
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Babylon.JS : Demo</title>
<script src = "babylon.js"></script>
<style>
canvas { width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
var light = new BABYLON.PointLight("Omni",
new BABYLON.Vector3(10, 50, 50), scene);
var camera = new BABYLON.ArcRotateCamera("Camera", 0.4, 1.2, 20, new BABYLON.Vector3(-10, 0, 0), scene);
camera.attachControl(canvas, true);
var material1 = new BABYLON.StandardMaterial("mat1", scene);
material1.diffuseTexture = new BABYLON.Texture("images/tsphere.jpg", scene);
var sphere = BABYLON.Mesh.CreateSphere("red", 32, 2, scene);
sphere.setPivotMatrix(BABYLON.Matrix.Translation(2, 0, 0));
sphere.material = material1;
// Fog
scene.fogMode = BABYLON.Scene.FOGMODE_EXP;
scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);
scene.fogDensity = 0.01;
//skybox
var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);
var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
skyboxMaterial.backFaceCulling = false;
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("images/cubetexture/skybox", scene);
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.disableLighting = true;
skybox.material = skyboxMaterial;
var spriteManagerPlayer = new BABYLON.SpriteManager("playerManager", "images/plane.png", 8, 1000, scene);
var plane = new BABYLON.Sprite("plane", spriteManagerPlayer);
plane.position.x = -2;
plane.position.y = 2;
plane.position.z = 0;
var alpha = 0;
var x = 2;
var y = 0;
scene.registerBeforeRender(function () {
scene.fogDensity = Math.cos(alpha) / 10;
alpha += 0.02;
sphere.rotation.y += 0.01;
y += 0.05;
if (x > 50) {
x = -2;
}
plane.position.x = -x;
x += 0.02;
});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>Produzione
Spiegazione
Nell'esempio sopra, abbiamo usato il seguente codice per la nebbia:
scene.fogMode = BABYLON.Scene.FOGMODE_EXP;
scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);
scene.fogDensity = 0.01;scene.fogMode = BABYLON.Scene.FOGMODE_EXP - Qui, la densità della nebbia segue una funzione esponenziale.
scene.registerBeforeRender = Con questo, la densità della nebbia cambia come segue -
var alpha = 0;
scene.registerBeforeRender(function () {
scene.fogDensity = Math.cos(alpha) / 10;
alpha += 0.02;
});Il valore di alfa continua ad aumentare di 0,02 mentre procede in un ciclo come nella funzione sopra.
Qui, abbiamo aggiunto un'immagine sprite piana e cambiato la sua posizione con il scene.registerBeforeRender funzionare come segue:
var alpha = 0;
var x = 2;
var y = 0;
scene.registerBeforeRender(function () {
scene.fogDensity = Math.cos(alpha) / 10;
alpha += 0.02;
sphere.rotation.y += 0.01;
y += 0.05;
if (x > 50) {
x = -2;
}
plane.position.x = -x;
x += 0.02;
});
return scene;
};sModificheremo l'asse x del piano e lo ripristineremo quando raggiungerà più di 50.
Inoltre, la sfera viene ruotata lungo l'asse y. Questo è mostrato nell'esempio sopra. Il valore viene modificato utilizzando sphere.rotation.y.
La trama utilizzata per la sfera è - images/tshphere.jpg. Le immagini sono memorizzate in immagini / cartella localmente e anche incollate di seguito per riferimento. Puoi scaricare qualsiasi immagine di tua scelta e utilizzarla nel link demo.
Abbiamo bisogno di sei immagini per un cubo. Le immagini vengono memorizzate localmente in images / cubetexture / folder. Puoi scaricare qualsiasi immagine di tua scelta, ma quando la salvi salvala come nameoftheimage_nx, nameoftheimage_ny, nameoftheimage_nz, nameoftheimage_px, nameoftheimage_py, nameoftheimage_pz. Si noti che le immagini scelte devono essere in sequenza in modo che lo sfondo appaia realistico come quello mostrato per skybox.
Le immagini utilizzate per creare uno skybox sono le seguenti: images/cubetexture/skybox
skybox_nx
skybox_ny
skybox_nz
skybox_px
skybox_py
skybox_pz
