Articles of three.js

Convertire le coordinate del mondo in coordinate dello schermo in Three.js utilizzando Projection

Esistono diverse eccellenti domande sullo stack ( 1 , 2 ) sulla non proiezione in Three.js, ovvero come convertire (x, y) le coordinate del mouse nel browser sulle coordinate (x, y, z) nello spazio della canvas Three.js. Per lo più seguono questo schema: var elem = renderer.domElement, boundingRect = elem.getBoundingClientRect(), x = (event.clientX – boundingRect.left) […]

Come ruotare un object 3D su axis three.js?

Ho un grosso problema con la rotazione in three.js Voglio ruotare il mio cubo 3D in uno dei miei giochi. //init geometry = new THREE.CubeGeometry grid, grid, grid material = new THREE.MeshLambertMaterial {color:0xFFFFFF * Math.random(), shading:THREE.FlatShading, overdraw:true, transparent: true, opacity:0.8} for i in [1…@shape.length] othergeo = new THREE.Mesh new THREE.CubeGeometry(grid, grid, grid) othergeo.position.x = grid […]

La fotocamera Three.js si inclina verso l’alto o verso il basso e mantiene il livello dell’orizzonte

camera.rotate.y padella a sinistra oa destra in modo prevedibile. camera.rotate.x guarda in alto o in basso in modo prevedibile quando camera.rotate.y è a 180 gradi. ma quando cambio il valore di camera.rotate.y in qualche nuovo valore, e poi cambio il valore di camera.rotate.x, l’orizzonte ruota. Ho cercato un algoritmo per regolare la rotazione dell’orizzonte dopo […]

Conversione della posizione 3D in posizione 2d dello schermo

Ho bisogno del codice Three.js per convertire le coordinate dell’object 3D in 2d in un elemento ‘div’ in modo da poter posizionare le etichette di testo dove devono essere (senza che le etichette si ridimensionino / si spostino / ruotino insieme al movimento 3D). Sfortunatamente, tutti gli esempi che ho visto e provato finora sembrano […]

THREE.js: 2xMesh con lo stesso vettore della posizione

Ho appena fatto un aggiornamento da r67 – r69 in ThreeJS e ho finito per avere problemi nel riferire le loro posizioni a un (stesso) vettore. Prima ho fatto questo che ha funzionato: var vector = new THREE.Vector3(50, 50, 50); _Mesh1.position = vector; _Mesh2.position = vector; che ha reso ansible che quando ho spostato una […]

Three.js – Larghezza di visualizzazione

C’è un modo per scoprire la larghezza di una porzione renderizzata della scena? Ad esempio, se abbiamo una mesh di larghezza 100, ma renderizzata con un certo livello di zoom … come posso calcolare la larghezza della porzione della mesh che viene visualizzata sullo schermo?

Disegnare una linea con three.js in modo dinamico

Questo è quello che mi piacerebbe ottenere (un poligono modificabile in cui i cerchi rossi sono i vertici) e mi piacerebbe build il poligono in modo dinamico. Quando si inizia la geometria come var geometry = new THREE.Geometry(); geometry.vertices.push(point); geometry.vertices.push(point); var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({})); funziona bene fino al secondo clic, costruisce una […]

Oggetti trasparenti in Threejs

Sto cercando di scrivere un piccolo programma in Three.js che visualizza due sfere, una dentro l’altra. Il raggio di sfera2 dovrebbe oscillare tra 0,5 e 1,5 mentre il raggio di sfera1 è sempre 1,0. Ogni sfera è trasparente (opacità: 0,5) in modo che sia ansible vedere la sfera più piccola contenuta in quella più grande. […]

Three.js – Telecamera ortogonale

Ho lavorato su un’app che mostra alcuni modelli 3D. Carichiamo i modelli, creiamo le maglie, le aggiungiamo alla scena … procedura standard. Dopo aver aggiunto l’ultima mesh, calcoliamo il riquadro di delimitazione per spostare la telecamera e coprire tutta la scena, utilizzando la dimensione della geometria totale e la dimensione della finestra per eseguire i […]

Apprendimento WebGL e three.js

Sono nuovo e sto iniziando a conoscere la computer grafica 3D nei browser web. Sono interessato a creare giochi 3D in un browser. Per chiunque abbia imparato sia WebGL che three.js … È richiesta la conoscenza di WebGL per utilizzare three.js? Quali sono i vantaggi dell’uso di three.js e WebGL?