I'm building a furniture website in Next.js and want to integrate Unity AR functionality. Is it possible to enable a preview mode on the website where clicking a button opens the phone camera and displays the AR feature from Unity?
Hii, i just encountered your video while i was looking for something. Actually i have a project to be done for academics which is a jewellery application/website and i need to make AR integration where they can try on the jewellery, can u help me out in this please??
Hi, I am getting this following error in line navigator.xr.requestSession('immersive-ar',sessionInit).then(onSessionStarted); -->Failed to execute 'requestSession' on 'XRSystem': The requested session requires user activation
I'm doing a project for school and you saved me with this video, because I'm complete noob. I followed your instuctions all the way. I just don't know how (or where) to add rotation to the gltf/glb, I tried everything (of course with my scarse understanding of three.js and js as a whole). The other thing, I don't have a clue how to add ExitAR button ... now I have to press back button on my mobile and this is not so obvious way to exit the AR mode. Any advice would be much appreciated, since I'm really stuck here. Thank you !!!
The simplest way is to use model-viewer. Take a look at model-viewer.dev, add the script Add . Watch-out for some model-viewer videos coming soon to my channel
@@NikLever thank you sooo so so much for your prompt response. I'm sorry, I haven't explained well ... I would like to add looping rotation animation on one axis (I think y :D ... not sure :D). I tried to add rotation function right after the loader.load: let degrees = 0; function rotateModel() { if (this.earth !== undefined) { degrees = degrees + 0.2; this.earth.rotation.y = THREE.Math.degToRad(degrees); } } and then call it here, right before renderer.render: render( timestamp, frame ) { if ( frame ) { if ( this.hitTestSourceRequested === false ) this.requestHitTestSource( ) if ( this.hitTestSource ) this.getHitTestResults( frame ); } rotateModel(); this.renderer.render( this.scene, this.camera ); } But obviously I don't understand the whole thing, otherwise it would be working 😁
@@FairyFromTheMoon I think your problem is scope. Make rotateModel a class function. Make sure 'this' is what you think it is. I'd pass the earth to the method as a parameter. Use developer console, F122 in Chrome, and breakpoints to debug.
@@NikLever thank you for the advices and for taking your time to help me !!! I will follow your instructions. Do you maybe have Patreon? ... or something similar ... to somehow repay you for your time and goodwill. Thank you again, I'm really grateful. 🙏
@@FairyFromTheMoon I don't have a Patreon, just buy one of my courses - niklever.com/courses and better still leave a 5 star rating and a review comment ;-)
Hello sir, I follow your content from Yemen and I like everything you provide, if you can help me sir to share a way to change the colors of 3d model in augmented reality for free, it will help me in my university graduation project, and I will be grateful to you.. with all due respect.
If the model is loaded using GLTFLoader it will use an instance of a MeshStandardMaterial To change the color use object.material.color = new THREE.Color(0xFF0000) replacing red with the color you choose. To change the texture map use object.material.map = new THREE.TextureLoader().setPath('path to your image').load( 'myTexture.png' ). If your model has multiple materials then it will start with a Group object. You need to look at obj.children and find the child you want to replace the color or map
I followed your video and I want to create AR with react project. I tried to add your codes in my project .I got error :assets/hdr/venice_sunset_1k.hdr not found
@@naturegirl8835 any device that supports WebXR AR. Lot's of Android tablets. Currently not iOS devices. If you want cross platform look at modelviewer.dev/docs/index.html#augmentedreality-events
@@naturegirl8835 place it online and check it on a suitable device. It needs to be on a secure site https. If you need a free site for testing look at pages.github.com/
My chrome doesn't show the webxr extension in inspect section , can you please help me how to enable it please
chrome.google.com/webstore/detail/webxr-api-emulator/mjddjgeghkdijejnciaefnkjmkafnnje?hl=en
Is it possible to add multiple object to the scene in the model-viwer webXR mode? how can i do that to keep model-viwer and also do this
I'm building a furniture website in Next.js and want to integrate Unity AR functionality. Is it possible to enable a preview mode on the website where clicking a button opens the phone camera and displays the AR feature from Unity?
i am working this in my fyp
can you me regarding thsi
does this siftscience project count?
Hii, i just encountered your video while i was looking for something. Actually i have a project to be done for academics which is a jewellery application/website and i need to make AR integration where they can try on the jewellery, can u help me out in this please??
Sorry not taking on contract work. Try the ThreeJS forum. discourse.threejs.org/ or FB page facebook.com/groups/2849849095313442
Nice Video!
Is there anything in webxr threejs to detect surfaces, wall , water , table like anything?
Yes, check out hit testing.
Sir How we resize and rotate 3d chairs. pls help
@@kundalsingh4794 have you seen my gestures class github.com/NikLever/XRGestures
Can you name the packages that needs to install to run this code because I can't run your code in my system
And Import AR was also disable in my system why any library needs to install?
My code doesn't use a package manager. It is just vanilla JavaScript. Just download the repo in the description.
@@NikLever can you make a separate folder for me so that I can run it separately on my system
@@NikLever how to download can you guide me?
@@NikLever it gives error on import three js library and how Web xr can be add as well plz guid me
Hi, I am getting this following error in line navigator.xr.requestSession('immersive-ar',sessionInit).then(onSessionStarted); -->Failed to execute 'requestSession' on 'XRSystem': The requested session requires user activation
What device and browser?
how can i run it?
niksgames.com/webxr/complete/lecture7_3/
Great video!
is there a way to change the colors of the 3d model in augmented reality?
Of course. The example uses WebXR and ThreeJS . The ThreeJS library gives full access to all materials.
@@NikLever awesome! Is there any tutorial you have for this example??
@@albertomatias8815 bit.ly/learn-webxr
@@NikLever great! Thanks!!
tank you
I'm doing a project for school and you saved me with this video, because I'm complete noob. I followed your instuctions all the way. I just don't know how (or where) to add rotation to the gltf/glb, I tried everything (of course with my scarse understanding of three.js and js as a whole). The other thing, I don't have a clue how to add ExitAR button ... now I have to press back button on my mobile and this is not so obvious way to exit the AR mode. Any advice would be much appreciated, since I'm really stuck here. Thank you !!!
The simplest way is to use model-viewer. Take a look at model-viewer.dev, add the script
Add . Watch-out for some model-viewer videos coming soon to my channel
@@NikLever thank you sooo so so much for your prompt response. I'm sorry, I haven't explained well ... I would like to add looping rotation animation on one axis (I think y :D ... not sure :D). I tried to add rotation function right after the loader.load:
let degrees = 0;
function rotateModel() {
if (this.earth !== undefined) {
degrees = degrees + 0.2;
this.earth.rotation.y = THREE.Math.degToRad(degrees);
}
}
and then call it here, right before renderer.render:
render( timestamp, frame ) {
if ( frame ) {
if ( this.hitTestSourceRequested === false ) this.requestHitTestSource( )
if ( this.hitTestSource ) this.getHitTestResults( frame );
}
rotateModel();
this.renderer.render( this.scene, this.camera );
}
But obviously I don't understand the whole thing, otherwise it would be working 😁
@@FairyFromTheMoon I think your problem is scope. Make rotateModel a class function. Make sure 'this' is what you think it is. I'd pass the earth to the method as a parameter. Use developer console, F122 in Chrome, and breakpoints to debug.
@@NikLever thank you for the advices and for taking your time to help me !!! I will follow your instructions. Do you maybe have Patreon? ... or something similar ... to somehow repay you for your time and goodwill. Thank you again, I'm really grateful. 🙏
@@FairyFromTheMoon I don't have a Patreon, just buy one of my courses - niklever.com/courses and better still leave a 5 star rating and a review comment ;-)
Apakah ini kursusnya berbahasa indonesia,,,
Amazing video....I have a project for you
Hello sir, I follow your content from Yemen and I like everything you provide, if you can help me sir to share a way to change the colors of 3d model in augmented reality for free, it will help me in my university graduation project, and I will be grateful to you.. with all due respect.
If the model is loaded using GLTFLoader it will use an instance of a MeshStandardMaterial To change the color use object.material.color = new THREE.Color(0xFF0000) replacing red with the color you choose. To change the texture map use object.material.map = new THREE.TextureLoader().setPath('path to your image').load( 'myTexture.png' ). If your model has multiple materials then it will start with a Group object. You need to look at obj.children and find the child you want to replace the color or map
@@NikLever Ah, thank you very much.
I followed your video and I want to create AR with react project. I tried to add your codes in my project .I got error
:assets/hdr/venice_sunset_1k.hdr not found
The file is in the resources. github.com/NikLever/Learn-WebXR/blob/master/assets/hdr/venice_sunset_1k.hdr . Check the path from your app to this file.
@@NikLever thank you sir and I fiexed that error. I want to know , Is this AR technology only work in Mobile phone?
And How do I check function (work) of this ar shop?
@@naturegirl8835 any device that supports WebXR AR. Lot's of Android tablets. Currently not iOS devices. If you want cross platform look at modelviewer.dev/docs/index.html#augmentedreality-events
@@naturegirl8835 place it online and check it on a suitable device. It needs to be on a secure site https. If you need a free site for testing look at pages.github.com/