How to use the OBJLoader function from three
Find comprehensive JavaScript three.OBJLoader code examples handpicked from public code repositorys.
three.OBJLoader is a loader that can load Wavefront OBJ files into Three.js, creating a Mesh object based on the loaded data.
GitHub: wkentaro/morefusion
89 90 91 92 93 94 95 96 97 98
function loadObject(data, index) { new THREE.MTLLoader(manager) .setPath('/assets/reconstruction/models/' + data.poses[index].class_name + '/') .load('textured.mtl', function(materials) { materials.preload(); new THREE.OBJLoader(manager) .setMaterials(materials) .setPath('/assets/reconstruction/models/' + data.poses[index].class_name + '/') .load('textured.obj', function(object) { object.position.x = data.poses[index].position[0];
32 33 34 35 36 37 38 39 40 41
] ); scene.background = skymap; // load a simple obj mesh var objLoader = new THREE.OBJLoader(); objLoader.load('/geo/feather.obj', function(obj) { // LOOK: This function runs after the obj has finished loading var featherGeo = obj.children[0].geometry;
+ 15 other calls in file
How does three.OBJLoader work?
three.OBJLoader is a class in Three.js that extends three.Loader and is responsible for loading Wavefront OBJ files. When a OBJ file is loaded, the loader parses the file and extracts the vertex positions, texture coordinates, and vertex normals for each face in the mesh. It then creates a Geometry object and populates it with this data. If the OBJ file also contains material information, the loader creates a MeshPhongMaterial and assigns it to the Mesh object that is created from the geometry. Finally, the Mesh object is returned and can be added to a Three.js scene.
GitHub: ASSERT-KTH/ci-hackathon
78 79 80 81 82 83 84 85 86 87
//var mtlLoader = new THREE.MTLLoader(); //mtlLoader.load("/static/r1.mtl", function(materials){ //materials.preload(); var loader = new THREE.OBJLoader(); //loader.setMaterials(materials); // load a resource loader.load( // resource URL
+ 2 other calls in file
1237 1238 1239 1240 1241 1242 1243 1244 1245
} } } loadCompartment(id, color, geometryData, updateCamera=true) { const loader = new THREE.OBJLoader(); let parsed = loader.parse(geometryData); parsed = applySemiTransparentShader(parsed, color); parsed.name = id;
+ 7 other calls in file
Ai Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
import * as THREE from "three"; import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader"; // create a new instance of the OBJLoader const objLoader = new OBJLoader(); // load the OBJ file objLoader.load("path/to/file.obj", (obj) => { // create a new mesh from the loaded object const mesh = new THREE.Mesh( obj.children[0].geometry, new THREE.MeshPhongMaterial() ); // add the mesh to the scene scene.add(mesh); });
In this example, we first import the necessary modules, including THREE and OBJLoader. We then create a new instance of the OBJLoader class and call its load method to load the OBJ file at the specified path. When the file has finished loading, the onLoad callback function is called, which creates a new THREE.Mesh object from the loaded geometry and material, and adds it to the scene.
GitHub: namel/veri
171 172 173 174 175 176 177 178 179 180
} // add an OBJ resource addOBJfunction(resourcePath, resourceName, pos, material) { let that = this; (new THREE.OBJLoader()).load(resourcePath, function(object) { that.objects[resourceName] = object; object.position.copy(pos); object.traverse(function(child) {
+ 9 other calls in file
21 22 23 24 25 26 27 28 29 30
class NodeThreeExporter { constructor() { this.gltfLoader = new THREE.GLTFLoader() this.gltfLoader.setDRACOLoader(new THREE.DRACOLoader()) this.objLoader = new THREE.OBJLoader() this.fbxLoader = new THREE.FBXLoader() this.stlLoader = new THREE.STLLoader() this.gltfExporter = new THREE.GLTFExporter() this.usdzExporter = new USDZExporter()
GitHub: 52black/scratch-vm
1374 1375 1376 1377 1378 1379 1380 1381
return OBJLoader; } )(); exports.MTLLoader = THREE.MTLLoader; exports.OBJLoader = THREE.OBJLoader;
+ 18 other calls in file
GitHub: avkudr/visa
17 18 19 20 21 22 23 24 25 26
const Loaders = { obj: async function(file){ let promise = new Promise(function(resolve, reject) { let loaderOBJ = new THREE.OBJLoader(); let filepath = path.dirname(file) + '/'; let filename = path.basename(file, '.obj'); var mtlLoader = new THREE.MTLLoader();
+ 3 other calls in file
GitHub: teerzo/btx-face
93 94 95 96 97 98 99 100 101 102
raycastList: [], cameraLastPos: new THREE.Vector3(0, 0, 0), // Loaders OBJLoader: new THREE.OBJLoader(), textureLoader: new THREE.TextureLoader(), initialize: function () {
GitHub: utunga/deeppbr.ai
174 175 176 177 178 179 180 181 182 183
sprite.position.z = 60; scene.add(sprite) new THREE.OBJLoader() .setPath( './assets/webgl/geo/' ) .load( 'plane_sub_div_40.geo', function ( group ) { set_source_image("37");
+ 3 other calls in file
GitHub: onlymg/webgl-react
47 48 49 50 51 52 53 54 55 56
// plane.receiveShadow = true // plane.position.z = 0 // this.scene.add(plane) // add object // new three.OBJLoader().load('assets/models/boy.obj', geometry => { // // const material = new THREE.MeshPhongMaterial({ color: 0xff5533, specular: 0x111111, shininess: 200 }) // // const obj = new three.Mesh(geometry, material) // this.scene.add(geometry) // })
15 16 17 18 19 20 21 22 23 24 25 26
const mtlLoader = new MTLLoader(); mtlLoader.setTexturePath(MODEL_PATH); mtlLoader.setPath(MODEL_PATH); // obj 加载器 const objLoader = new THREE.OBJLoader(); objLoader.setPath(MODEL_PATH); // json 模型加载器 const objectLoader = new THREE.ObjectLoader();
48 49 50 51 52 53 54 55 56 57 58
/** * Event listener for DOMContentLoaded. Configures and loads the pngs and objs into a load queue. */ document.addEventListener('DOMContentLoaded', function() { var texLoader = new THREE.TextureLoader(loadingManager); var objLoader = new THREE.OBJLoader(loadingManager); letterProperties.forEach(function(letterProp, i) { texLoader.load(letterProp.tex, function(tex) { tex.magFilter = THREE.NearestFilter;
GitHub: PrashanthG45/aframe
16 17 18 19 20 21 22 23 24 25 26
if (THREE.Cache) { THREE.Cache.enabled = true; } // TODO: Eventually include these only if they are needed by a component. require('three/examples/js/loaders/OBJLoader'); // THREE.OBJLoader require('three/examples/js/loaders/MTLLoader'); // THREE.MTLLoader require('three/examples/js/BlendCharacter'); // THREE.BlendCharacter require('three/examples/js/loaders/ColladaLoader'); // THREE.ColladaLoader require('../../vendor/VRControls'); // THREE.VRControls
+ 7 other calls in file
16 17 18 19 20 21 22 23 24 25 26
if (THREE.Cache) { THREE.Cache.enabled = true; } // TODO: Eventually include these only if they are needed by a component. require('../../node_modules/three/examples/js/loaders/OBJLoader'); // THREE.OBJLoader require('../../node_modules/three/examples/js/loaders/MTLLoader'); // THREE.MTLLoader require('../../node_modules/three/examples/js/loaders/ColladaLoader'); // THREE.ColladaLoader require('../../node_modules/three/examples/js/controls/VRControls'); // THREE.VRControls require('../../node_modules/three/examples/js/effects/VREffect'); // THREE.VREffect
+ 3 other calls in file
GitHub: Neticon/webgl-tests
20 21 22 23 24 25 26 27 28 29
return (path, extension) => { const urls = faces.map(face => `${path}${face}${extension}`) return loader.load(urls) } })() const objLoader = new THREE.OBJLoader() objLoader.loadP = jsUtil.promifyFn(objLoader.load.bind(objLoader), 1, 'rsv') const mtlLoader = new THREE.MTLLoader() mtlLoader.crossOrigin = true mtlLoader.loadP = jsUtil.promifyFn(mtlLoader.load.bind(mtlLoader), 1, 'rsv')
+ 2 other calls in file
GitHub: zDawnING/MyLearnWebGL
216 217 218 219 220 221
} }; const onError = function ( xhr ) { }; let material = new THREE.MeshNormalMaterial(); let objLoader = new THREE.OBJLoader();
three.Vector3 is the most popular function in three (22341 examples)