How to get started with three.js and glTF?

User99 · February 2, 2019, 2:49pm

Hi,

im trying to load a 3d model into my scene but it doesn’t work?

<html>
<head>
	<title>My first three.js app</title>
	<style>
		body { margin: 0; }
		canvas { width: 100%; height: 100% }
	</style>
</head>
<body>
	<script src="js/three.js"></script>
	<script src="js/GLTFLoader.js"></script>
	       var scene = new THREE.Scene();
		var camera = new THREE.PerspectiveCamera( 75,      window.innerWidth/window.innerHeight, 0.1, 1000 );

		var renderer = new THREE.WebGLRenderer();
		renderer.setSize( window.innerWidth, window.innerHeight );
		document.body.appendChild( renderer.domElement );

		var loader = new THREE.GLTFLoader();
		loader.load( 'Models/Model.gltf', function ( gltf )
		{

			scene.add( gltf.scene );

			gltf.animations; // Array<THREE.AnimationClip>
			gltf.scene; // THREE.Scene
			gltf.scenes; // Array<THREE.Scene>
			gltf.cameras; // Array<THREE.Camera>
			gltf.asset; // Object

		}, function ( xhr ) {
			console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
		},
		function ( error ) {

			console.log( 'error' );
		}
	</script>
</body>

Thanks in advance

Mugen87 · February 2, 2019, 5:15pm

Some essential components of a basic three.js app like an animation loop are missing in your scene. I suggest you carefully study the following guide in order to get familiar with basic three.js entities. After that, use the beneath glTF example as a code template for you own scene.

https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene
https://threejs.org/examples/#webgl_loader_gltf

User99 · February 3, 2019, 8:49am

Thanks for the answer.

I used the template for my scene and now using a local python server as described in the docs. But when I try to load the html with that server, I can only save it.

Thanks

Mugen87 · February 3, 2019, 10:28am

There seems to be a problem with your web server’s configuration. Please try it with node.js and http-server.

User99 · February 3, 2019, 2:36pm

Tried it with node.js, same result / error in the console.

Mugen87 · February 3, 2019, 4:52pm

Can you please share the error message here.

User99 · February 3, 2019, 5:02pm

“GET /index.html” “Mozilla/5.0 (X11; Linux x86_64; rv:64.0) Gecko/20100101 Firefox/64.0”
“GET /index.html” Error (404): “Not found”

Mugen87 · February 3, 2019, 5:06pm

Have you actually put your source files in the root directory of the server?

User99 · February 3, 2019, 5:36pm

I started the server in my project folder where the html file is located. Is that wrong?

Mugen87 · February 3, 2019, 9:18pm

No, that sounds correct. Unfortunately, it’s a bit hard to provide support in such cases. Consider to carefully study tutorials like this one in order to do things right:

http://jasonwatmore.com/post/2016/06/22/nodejs-setup-simple-http-server-local-web-server

User99 · February 4, 2019, 8:04am

It works now, but I still can’t load an 3d model.

here is the error from the browser console and the code:

    <!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - glTF loader</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				font-family: Monospace;
				background-color: #b1b1b1;
				color: #fff;
				margin: 0px;
				overflow: hidden;
			}
			#info {
				color: #fff;
				position: absolute;
				top: 10px;
				width: 100%;
				text-align: center;
				z-index: 100;
				display:block;
			}
			#info a {
				color: #75ddc1;
				font-weight: bold;
			}
		</style>
	</head>

	<body>

		<script src="js/three.js"></script>

		<script src="js/OrbitControls.js"></script>
		<script src="js/GLTFLoader.js"></script>

		<script src="js/WebGL.js"></script>
		<script src="js/stats.min.js"></script>

		<script>
			if ( WEBGL.isWebGLAvailable() === false ) {
				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
			}
			var container, stats, controls;
			var camera, scene, renderer, light;
			init();
			animate();
			function init() {
				container = document.createElement( 'div' );
				document.body.appendChild( container );
				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
				camera.position.set( - 1.8, 0.9, 2.7 );
				controls = new THREE.OrbitControls( camera );
				controls.target.set( 0, - 0.2, - 0.2 );
				controls.update();

				scene = new THREE.Scene();

				light = new THREE.HemisphereLight( 0xbbbbff, 0x444422 );
				light.position.set( 0, 1, 0 );
				scene.add( light );
				// model
				var loader = new THREE.GLTFLoader().setPath( 'Models/Model.gltf' );
				loader.load( 'Models/Model.gltf', function ( gltf ) {
					gltf.scene.traverse( function ( child ) {
						if ( child.isMesh ) {
							// child.material.envMap = background;
						}
					} );
					scene.add( gltf.scene );
				}, undefined, function ( e ) {
					console.error( e );
				} );
				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.gammaOutput = true;
				container.appendChild( renderer.domElement );
				window.addEventListener( 'resize', onWindowResize, false );
				// stats
				stats = new Stats();
				container.appendChild( stats.dom );
			}
			function onWindowResize() {
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize( window.innerWidth, window.innerHeight );
			}
			//
			function animate() {
				requestAnimationFrame( animate );
				renderer.render( scene, camera );
				stats.update();
			}
		</script>

	</body>
</html>

init/<http://127.0.0.1:8080/:73:6
_onErrorhttp://127.0.0.1:8080/js/GLTFLoader.js:53:6
load/<http://127.0.0.1:8080/js/three.js:33995:32

Mugen87 · February 4, 2019, 9:23am

This statement does not look correct. Just try it like so:

var loader = new THREE.GLTFLoader();

User99 · February 4, 2019, 9:56am

Loading works now. How can I add XR functionality?

XR.addCameraPipelineModule(XR.XrController.pipelineModule())
XR.addCameraPipelineModule(XR.GlTextureRenderer.pipelineModule())
XR.addCameraPipelineModule(XR.Threejs.pipelineModule())
XR.addCameraPipelineModule({
name: 'myawesomeapp',
onStart: ({canvasWidth, canvasHeight}) => {
const {scene, camera} = XR.Threejs.xrScene()
myInitXrScene({scene, camera})
XR.XrController.updateCameraProjectionMatrix({
      origin: camera.position,
      facing: camera.quaternion,
    })
  },

How do I add that code correctly to my code?

Thanks

Mugen87 · February 4, 2019, 2:19pm

What API or library are you using? I’ve never seen methods like addCameraPipelineModule()?

User99 · February 4, 2019, 2:27pm

It’s from 8thwall

Mugen87 · February 4, 2019, 2:35pm

I’m afraid this forum is not a good place for question about this project. You might have more success right here:

8th wall community: https://www.8thwall.com/slack/

User99 · February 4, 2019, 2:37pm

Ok, thanks for your help.

Topic		Replies	Views
Try to load 3d model (gltf), what im doing wrong? Questions gltf-loader	26	3555	March 5, 2020
Not seeing Model, Troubleshooting Questions gltf-loader	5	457	April 15, 2023
Model loading from blender Questions getting-started	11	845	April 28, 2020
I can't load a model into Three.js Questions gltf-loader	11	2492	January 23, 2021
GLTF loading but not appearing Questions gltf-loader , gltf-format	17	22901	December 27, 2021

How to get started with three.js and glTF?

Related topics