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.

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];
fork icon51
star icon209
watch icon21

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;
fork icon31
star icon0
watch icon2

+ 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.

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
fork icon26
star icon28
watch icon0

+ 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;
fork icon7
star icon21
watch icon7

+ 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.

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) {
fork icon3
star icon20
watch icon5

+ 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()
fork icon3
star icon4
watch icon2

1374
1375
1376
1377
1378
1379
1380
1381
	return OBJLoader;


} )();


exports.MTLLoader = THREE.MTLLoader;
exports.OBJLoader = THREE.OBJLoader;
fork icon3
star icon6
watch icon1

+ 18 other calls in file

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();
fork icon2
star icon4
watch icon1

+ 3 other calls in file

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 () {
fork icon1
star icon1
watch icon0

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");
fork icon1
star icon0
watch icon1

+ 3 other calls in file

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)
// })
fork icon0
star icon2
watch icon0

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();
fork icon1
star icon0
watch icon1

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;
fork icon0
star icon0
watch icon0

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
fork icon0
star icon0
watch icon0

+ 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
fork icon0
star icon0
watch icon0

+ 3 other calls in file

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')
fork icon0
star icon0
watch icon4

+ 2 other calls in file

216
217
218
219
220
221
        }
};

const onError = function ( xhr ) { };
let material = new THREE.MeshNormalMaterial();
let objLoader = new THREE.OBJLoader();
fork icon0
star icon0
watch icon1

Other functions in three

Sorted by popularity

function icon

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