Error message when loading JSON model

Questions
1

I’m using the minimized version of threejs.

loader.load( ‘models/animated/monster/monster.js’,…
from the example code yields unknown file message.
Any suggestions?

2

Hi, please include more detail with your question — a live demo, or a ZIP of your project, would help. Because this works in the official example, it has to be something about your setup that is not working, and without information about that we can’t help.

See also, how to run things locally

1 Like
3

I’m using a slightly edited version of the code in examples loader json. I’m using python’s http server which It works with my code of an example that that uses THREE’s font. I’m using the example code to understand THREEjs.
I’ve left some superfluous code in, for example the time code to keep my version almost the same as the original.
Hope I’ve not introduced a typo!

<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webgl - loader -json</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 {
				background:#777;
				padding:0;
				margin:0;
				font-weight: bold;
				overflow:hidden;
			}

			#info {
				position: absolute;
				top: 0px;
				width: 100%;
				color: #ffffff;
				padding: 5px;
				font-family:Monospace;
				font-size:13px;
				text-align:center;
			}

    </style>
</head>
<body>

<div id="container"></div>
<script src="three.min.js"></script>
<script>
			let container, stats, clock, mixer;
			let camera, scene, renderer, objects;
			init();
			animate();
			function init() {
				container = document.getElementById( 'container' );
				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
				camera.position.set( 2, 4, 5 );
				clock = new THREE.Clock();
				scene = new THREE.Scene();
				scene.fog = new THREE.FogExp2( 0x000000, 0.035 );
				mixer = new THREE.AnimationMixer( scene );

				let loader = new THREE.JSONLoader();
				loader.load( 'models/animated/monster/monster.js', // This fails ???
				 function ( geometry, materials ) {
                        	// adjust color a bit
					let material = materials[ 0 ];
					material.morphTargets = true;
					material.color.setHex( 0xffaaaa );
					for ( let i = 0; i < 729; i ++ ) {
						let mesh = new THREE.Mesh( geometry, materials );
						// random placement in a grid
						let x = ( ( i % 27 )  - 13.5 ) * 2 + THREE.Math.randFloatSpread( 1 );
						let z = ( Math.floor( i / 27 ) - 13.5 ) * 2 + THREE.Math.randFloatSpread( 1 );
						mesh.position.set( x, 0, z );
						let s = THREE.Math.randFloat( 0.00075, 0.001 );
						mesh.scale.set( s, s, s );
						mesh.rotation.y = THREE.Math.randFloat( -0.25, 0.25 );
						mesh.matrixAutoUpdate = false;
						mesh.updateMatrix();
						scene.add( mesh );
						mixer.clipAction( geometry.animations[ 0 ], mesh )
								.setDuration( 1 )			// one second
								.startAt( - Math.random() )	// random phase (already running)
								.play();					// let's go
					}
				},
				onErrorCallback,
                    function(err){
	                    console.log(err + " an error happened") 
                    }
				);

				function onErrorCallback(e){
	                alert("JSONLoader failed! because of error " + e.target.status + ", " + e.target.statusText);
                }
				// lights
				let ambientLight = new THREE.AmbientLight( 0xcccccc );
				scene.add( ambientLight );
				let pointLight = new THREE.PointLight( 0xff4400, 5, 30 );
				pointLight.position.set( 5, 0, 0 );
				scene.add( pointLight );
				// renderer
				renderer = new THREE.WebGLRenderer();
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				container.appendChild( renderer.domElement );
				// events
				window.addEventListener( 'resize', onWindowResize, false );
			}
			//

			function onWindowResize( event ) {

				renderer.setSize( window.innerWidth, window.innerHeight );

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
			}
			function animate() {
				requestAnimationFrame( animate );
				render();
			}
			function render() {
				let timer = Date.now() * 0.0005;
				camera.position.x = Math.cos( timer ) * 10;
				camera.position.y = 4;
				camera.position.z = Math.sin( timer ) * 10;
				mixer.update( clock.getDelta() );
				camera.lookAt( scene.position );
				renderer.render( scene, camera );
			}
</script>
</body>
</html>
4

An unknown file error means the file is not where you’ve said it is, relative to the folder your Python HttpServer has access to. Without the complete folder structure, that’s all I can tell you.

5

Thanks, you sent me on the correct path.
There are two problems in the json file: transparency has been replaced by opacity, and ambientColor is no longer valid. Reproducing the example w as a worthwhile exercise.