Home

Index

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.

main.js

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];

209

main.js

GitHub: mgstauffer/Project2-Toolbox-Functions

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.

index.js

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

shark_viewer.js

GitHub: JaneliaSciComp/SharkViewer

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.

veri.js

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

index.js

GitHub: LetzCodeLuxembourg/threejs-nodejs-exporters

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()

t.js

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

loaders.js

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

main.js

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 () {

webgl_main.js

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

index.js

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)
// })

Resource.js

GitHub: ghost0913/web3dPlatform

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();

letter-manager.js

GitHub: patrickdmiller/anypixel2k3

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;

three.js

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

three.js

GitHub: simsora13/simsora13.github.io-

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

model.js

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

mesh.js

GitHub: zDawnING/MyLearnWebGL

216
217
218
219
220
221
        }
};

const onError = function ( xhr ) { };
let material = new THREE.MeshNormalMaterial();
let objLoader = new THREE.OBJLoader();

Other functions in three

Sorted by popularity

three.Vector3 is the most popular function in three (22341 examples)

Other popular packages:

Home

About