Heim > Web-Frontend > js-Tutorial > Hauptteil

Beispiele zur Erläuterung des Ladens externer Modelle durch Three.js

小云云
Freigeben: 2017-12-22 11:26:11
Original
6117 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich das detaillierte Tutorial zum Laden externer Modelle von Three.js vor. In dem Artikel werde ich Ihnen eine ergänzende Einführung in die JSON-Methode zum Laden externer Modelle von Three.js geben. Freunde, die es brauchen, können sich hoffentlich darauf beziehen.

1. Zuerst müssen wir unser komprimiertes Three.js-Paket von der offiziellen Website herunterladen: https:// three.js.org/ und die Three.js über das src-Attribut des Skripts in den Build-Ordner importieren Tag-Paar Gehen Sie zu unserer Seite

2. Erstellen Sie drei.js-Kernobjekte

Szene (Szene)

Kamera (Kamera)

Licht (Lichtquelle). )

Mesh (Modell)

Renderer (Renderer)

Der letzte Schritt besteht darin, es zu rendern und auf unserer Seite renderer.render(scene,camera)

anzuzeigen

3. Import des OBJ-Modells


<script type="text/javascript" src="js/OBJLoader.js"></script>
 <script type="text/javascript" src="js/MTLLoader.js"></script>
Nach dem Login kopieren

4. Import des .JS-Modells

Zuerst Wir benötigen zum Konvertieren der .OBJ-Modelldatei in ein .JS-Dateimodell

.obj-Format in .js-Format das offiziell von threejs.org bereitgestellte Tool „convert_obj_ three.py“. Die Verwendung dieses Tools erfordert die Installation von eine Python-Umgebung.

Konvertierungsprozess:

Platzieren Sie „convert_obj_ three.py“ und die zu konvertierende .obj-Datei und .mtl-Datei im selben Verzeichnis

Öffnen Sie cmd und wechseln Sie in das entsprechende Verzeichnis


python convert_obj_three.py -i infile.obj -o outfile.js [-t ascii|binary]
Nach dem Login kopieren
Sie können .js-Dateien in zwei Kodierungsmethoden (binär und ASCII) erhalten

Auftretende Probleme, Probleme mit der Formatkonvertierung:

Öffnen Sie die .obj-Datei,

Ändern Sie das mtllib-Schlüsselwort in .mtl-Datei relativ zur .obj Datei Der Pfad von

Ändern Sie diese ? in der Datei in Buchstaben, verstümmelte Zeichen

newmtl-Verknüpfung im . mtl-Datei Zur .obj-Datei

Dies ist die .obj-Datei

5. Bereiten Sie den Import

Ascii

< vor 🎜>

Binär

muss importiert werden


<script src="js/BinaryLoader.js"></script>
Nach dem Login kopieren

PS: Das externe Modell von three.js lädt JSONMit Blender können Sie JSON-Dateien direkt exportieren (das Export-Plugin finden Sie in der Datei three.js Paket). Laden Sie das Modell aus dem Internet herunter. Ich verwende 3ds Max, um das Modellformat in obj zu konvertieren, es dann in Blender zu importieren, um das Modell zu verarbeiten, und exportiere dann die JSON-Datei.

Wenn Sie eine JSON-Datei exportieren, aktivieren Sie die Option. Wenn Sie SCENE auswählen, können Sie sie zusammen mit den Lichtern exportieren. Beim Laden müssen Sie ObjectLoader verwenden.


Wenn Sie eine JSON-Datei exportieren möchten. Wenn die Szene nicht aktiviert ist, müssen der Seite Lichter hinzugefügt werden, andernfalls ist das Modell vollständig schwarz. Verwenden Sie JSONLoader
var loader = new THREE.ObjectLoader(); 
loader.load(&#39;youscene1.json&#39;,function(obj){ 
  obj.scale.x = obj.scale.y = obj.scale.z =100; 
  scene.add(obj); 
});
Nach dem Login kopieren


beim Laden Haben Sie gelernt, wie es geht? Beeilen Sie sich und probieren Sie es aus.
var loader = new THREE.JSONLoader(); 
      loader.load( "noscene.json",function( geometry, materials ) { 
        materials[ 0 ].shading = THREE.FlatShading; 
        mesh = new THREE.Mesh( geometry, new THREE.MultiMaterial( materials ) ); 
        mesh.position.x = 0; 
        mesh.position.y = 0; 
        mesh.position.z = 0; 
        mesh.scale.x = mesh.scale.y = mesh.scale.z =100; 
        scene.add( mesh ); 
      });
Nach dem Login kopieren


Verwandte Empfehlungen:

Detaillierte Erläuterung der lokalen Ausführungsmethode von three.js

Three.js verwendet das Leistungs-Plug-in in Statistiken, um Leistung zu erzielen Detaillierte Erklärung der Überwachungsinstanzen

So erstellen Sie eine Szene mit Three.js

Das obige ist der detaillierte Inhalt vonBeispiele zur Erläuterung des Ladens externer Modelle durch Three.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage