How to load 3D object using AMFLoader in three.js?

问题

I am new to three.js.I am trying to load 3d object on web browser using AMFLoader and STLLoader in three.js. Both AMFLoader and STLLoader has same problem. The 3d object doesn't render on web browser and also doesn't show any error. I don't know how to fix this.Below is my code snippet which I have tried with AMFLoader.

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - loaders - amf 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: #000;
				color: #fff;
				margin: 0px;
				overflow: hidden;
			}
		</style>
	</head>
  <body>

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

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

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

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

		<script>

			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

			var container, stats;

			var camera, controls, scene, renderer;

			init();
			animate();

			function init() {
                
                // camera  
				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000);
				camera.position.z = 7;
				camera.position.set( -0.140892, 0.00959548, 0.0602311);


				controls = new THREE.OrbitControls( camera );

				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0x999999 );

				scene.add( camera );

				// light
				ambient = new THREE.AmbientLight(0xffffff, 1.0);
				scene.add(ambient);

                keyLight = new THREE.DirectionalLight(new THREE.Color('hsl(30, 100%, 75%)'), 1.0);
                keyLight.position.set(-100, 0, 100);

                fillLight = new THREE.DirectionalLight(new THREE.Color('hsl(240, 100%, 75%)'), 0.75);
                fillLight.position.set(100, 0, 100);

                backLight = new THREE.DirectionalLight(0xffffff, 1.0);
                backLight.position.set(100, 0, -100).normalize();
				/*var dirLight = new THREE.DirectionalLight( 0xffffff );
				dirLight.position.set( 200, 200, 1000 ).normalize();

				camera.add( dirLight );
				camera.add( dirLight.target );*/

				var loader = new THREE.AMFLoader();
				loader.load( 'Method1-ConeThenCube.amf', function ( object ) {
				var material = new THREE.MeshPhongMaterial( { color: 0xff5533, specular: 0x111111, shininess: 200 } );
				var mesh = new THREE.Mesh( object, material );
				scene.add( object );

				} );

				// renderer

				renderer = new THREE.WebGLRenderer();
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );

				container = document.createElement( 'div' );
				document.body.appendChild( container );
				container.appendChild( renderer.domElement );

				stats = new Stats();
				container.appendChild( stats.dom );

				//

				window.addEventListener( 'resize', onWindowResize, false );

			}

			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>

Help me to fix this problem.

来源：https://stackoverflow.com/questions/50289524/how-to-load-3d-object-using-amfloader-in-three-js

标签

javascript

three.js