# Model not loading in Three.js webxr hit test **URL:** \ **Category:** Questions\ **Tags:** obj-loader\ **Created:** [July 20, 2020, 11:33am UTC](https://discourse.threejs.org/t/model-not-loading-in-three-js-webxr-hit-test/17244 "2020-07-20T11:33:24Z")\ **Posts on this page:** 10\ **Page:** 1

**Author:** ![Sivamurugan\_S](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sivamurugan_s/32/12361_2.png) [@Sivamurugan\_S](https://discourse.threejs.org/u/Sivamurugan_S)\ **Post date:** [July 20, 2020, 11:33am UTC](https://discourse.threejs.org/t/model-not-loading-in-three-js-webxr-hit-test/17244/1 "2020-07-20T11:33:24Z")

Hi, I am trying to load my model in hit-test webxr example but its throwing an error and some time scene getting freeze tried to laod model from local folder still its not loading. i have given my code below, please take a look and help me out to solve this issue. CODE: ``` ``` three.js ar - hit test ```

three.js ar - hit test
(Chrome Android 81+)

``` ---

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\ **Post date:** [July 20, 2020, 11:49am UTC](https://discourse.threejs.org/t/model-not-loading-in-three-js-webxr-hit-test/17244/2 "2020-07-20T11:49:01Z")

[https://threejs.org/examples/models/obj/walt/monkey.mtl](https://threejs.org/examples/models/obj/walt/monkey.mtl) [https://threejs.org/examples/models/obj/walt/monkey.obj](https://threejs.org/examples/models/obj/walt/monkey.obj) Both URLs do not exist. So it’s not surprising that no model is displayed. ---

**Author:** ![Sivamurugan\_S](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sivamurugan_s/32/12361_2.png) [@Sivamurugan\_S](https://discourse.threejs.org/u/Sivamurugan_S)\ **Post date:** [July 21, 2020, 4:22am UTC](https://discourse.threejs.org/t/model-not-loading-in-three-js-webxr-hit-test/17244/3 "2020-07-21T04:22:25Z")

Sorry, Here is the link for the model, this is also not working. [https://threejstesting.z13.web.core.windows.net/models/monkey.mtl](https://threejstesting.z13.web.core.windows.net/models/monkey.mtl) [https://threejstesting.z13.web.core.windows.net/models/monkey.obj](https://threejstesting.z13.web.core.windows.net/models/monkey.obj) ---

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\ **Post date:** [July 21, 2020, 8:56am UTC](https://discourse.threejs.org/t/model-not-loading-in-three-js-webxr-hit-test/17244/4 "2020-07-21T08:56:18Z")

With this (reduced) code the model is rendered on my system: ```auto import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.118.3/build/three.module.js'; import { OBJLoader } from 'https://cdn.jsdelivr.net/npm/three@0.118.3/examples/jsm/loaders/OBJLoader.js'; import { MTLLoader } from 'https://cdn.jsdelivr.net/npm/three@0.118.3/examples/jsm/loaders/MTLLoader.js'; var container; var camera, scene, renderer; var controller; var reticle; var hitTestSource = null; var hitTestSourceRequested = false; var mtlLoader; var monkeymesh; init(); animate(); function init() { container = document.createElement( 'div' ); document.body.appendChild( container ); scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 20 ); camera.position.z = 10; var light = new THREE.HemisphereLight( 0xffffff, 0xbbbbff, 1 ); light.position.set( 0.5, 1, 0.25 ); scene.add( light ); // renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.xr.enabled = true; container.appendChild( renderer.domElement ); //////////////////////////////////////////////////////////////////////////////////////////////// mtlLoader = new MTLLoader(); mtlLoader.setPath( "./models/obj/monkey/" ); mtlLoader.load( 'materials.mtl', function ( materials ) { materials.preload(); var objLoader = new OBJLoader(); objLoader.setMaterials( materials ); objLoader.setPath( "./models/obj/monkey/" ); objLoader.load( 'model.obj', function ( object ) { monkeymesh = object; scene.add( monkeymesh ); } ); } ); var boxgeometry = new THREE.BoxBufferGeometry( 0.25, 0.25, 0.25 ).translate( 0, 0.1, 0 ); function onSelect() { if ( reticle.visible ) { var material = new THREE.MeshPhongMaterial( { color: 0xffffff * Math.random() } ); var mesh = new THREE.Mesh( boxgeometry, material ); mesh.position.setFromMatrixPosition( reticle.matrix ); //mesh.scale.y = Math.random() * 2 + 1; mesh.scale.set( 0.25, 0.25, 0.25 ); scene.add( mesh ); } } controller = renderer.xr.getController( 0 ); controller.addEventListener( 'select', onSelect ); scene.add( controller ); reticle = new THREE.Mesh( new THREE.RingBufferGeometry( 0.15, 0.2, 32 ).rotateX( - Math.PI / 2 ), new THREE.MeshBasicMaterial() ); reticle.matrixAutoUpdate = false; reticle.visible = false; scene.add( reticle ); // window.addEventListener( 'resize', onWindowResize, false ); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); } // function animate() { renderer.setAnimationLoop( render ); } function render( timestamp, frame ) { if ( frame ) { var referenceSpace = renderer.xr.getReferenceSpace(); var session = renderer.xr.getSession(); if ( hitTestSourceRequested === false ) { session.requestReferenceSpace( 'viewer' ).then( function ( referenceSpace ) { session.requestHitTestSource( { space: referenceSpace } ).then( function ( source ) { hitTestSource = source; } ); } ); session.addEventListener( 'end', function () { hitTestSourceRequested = false; hitTestSource = null; } ); hitTestSourceRequested = true; } if ( hitTestSource ) { var hitTestResults = frame.getHitTestResults( hitTestSource ); if ( hitTestResults.length ) { var hit = hitTestResults[0]; reticle.visible = true; reticle.matrix.fromArray( hit.getPose( referenceSpace ).transform.matrix ); } else { reticle.visible = false; } } } renderer.render( scene, camera ); } ``` - You have to ensure to import `OBJLoader` and `MTLLoader` from the same release and from the same origin. - There is no need to use the `THREE` namespace when creating the loaders. - If you export models by yourself from Blender, I highly recommend to export to the more modern glTF instead. It’s the recommended 3D format of `three.js`. ---

**Author:** ![Sivamurugan\_S](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sivamurugan_s/32/12361_2.png) [@Sivamurugan\_S](https://discourse.threejs.org/u/Sivamurugan_S)\ **Post date:** [July 22, 2020, 7:03am UTC](https://discourse.threejs.org/t/model-not-loading-in-three-js-webxr-hit-test/17244/5 "2020-07-22T07:03:25Z")

Can you please tell me how to apply the textures on this model? I have multiple textures for my model i want to apply it, but dont know how to do that, can you please help me out? ---

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\ **Post date:** [July 22, 2020, 8:40am UTC](https://discourse.threejs.org/t/model-not-loading-in-three-js-webxr-hit-test/17244/6 "2020-07-22T08:40:36Z")

Your OBJ file defines no texture coordinates. Hence, it’s not possible to use it with textures. ---

**Author:** ![Sivamurugan\_S](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sivamurugan_s/32/12361_2.png) [@Sivamurugan\_S](https://discourse.threejs.org/u/Sivamurugan_S)\ **Post date:** [July 22, 2020, 10:15am UTC](https://discourse.threejs.org/t/model-not-loading-in-three-js-webxr-hit-test/17244/7 "2020-07-22T10:15:05Z")

but i have applied the multiple textures in my obj file and exported. and what you mean by texture coordinates? can you please explain that? ---

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\ **Post date:** [July 22, 2020, 1:42pm UTC](https://discourse.threejs.org/t/model-not-loading-in-three-js-webxr-hit-test/17244/8 "2020-07-22T13:42:25Z")

> [@Sivamurugan\_S](#): > > and what you mean by texture coordinates? > can you please explain that? Sorry, but I’m not going to start explaining basics in computer graphics. There are many existing resources about texture coordinates that explain this topic much better than I ever could. I also suggest you read how OBJ represents texture coordinates. You will then quickly understand that these definitions are missing in your file: [http://paulbourke.net/dataformats/obj/](http://paulbourke.net/dataformats/obj/) ---

**Author:** ![Sivamurugan\_S](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sivamurugan_s/32/12361_2.png) [@Sivamurugan\_S](https://discourse.threejs.org/u/Sivamurugan_S)\ **Post date:** [July 22, 2020, 2:03pm UTC](https://discourse.threejs.org/t/model-not-loading-in-three-js-webxr-hit-test/17244/9 "2020-07-22T14:03:48Z")

Sure, i will check that. Thanks. ---

**Author:** ![Rakesh6720](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rakesh6720/32/12823_2.png) [@Rakesh6720](https://discourse.threejs.org/u/Rakesh6720)\ **Post date:** [August 8, 2020, 7:31pm UTC](https://discourse.threejs.org/t/model-not-loading-in-three-js-webxr-hit-test/17244/10 "2020-08-08T19:31:41Z")

Super helpful, thank you so much! One question, though: where in the code did you instantiate the “monkeymesh” object at the location of the reticle?