Threejs载入obj和mtl以及添加旋转和阴影,自适应，鼠标控制

本文链接：https://blog.youkuaiyun.com/grief_of_the_nazgul/article/details/42776605
该博客演示了如何使用Threejs库加载obj和mtl格式的3D模型，并添加旋转、阴影以及鼠标控制功能。通过创建场景、相机、渲染器以及添加光源和坐标轴，实现了模型在网页中的展示。同时，模型可以随着鼠标的移动进行视角调整，并有自动旋转的效果。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
</pre><pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>Example 03.01 - Ambient Light</title>
    <script type="text/javascript" src="../libs/three.js"></script>
    <script type="text/javascript" src="../libs/OBJLoader.js"></script>
    <script type="text/javascript" src="../libs/MTLLoader.js"></script>
    <script type="text/javascript" src="../libs/OBJMTLLoader.js"></script>
    <script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
    <script type="text/javascript" src="../libs/stats.js"></script>
    <script type="text/javascript" src="../libs/dat.gui.js"></script>
    <script type="text/javascript" src="../libs/Detector.js"></script>
    <script type="text/javascript" src="../libs/OrbitControls.js"></script>
    <style>
			body {
				background:#000;
				color:#000;
				padding:0;
				margin:0;
				overflow:hidden;
				font-family:monospace;
				font-size:13px;
				text-align:center;
			}

			a { color:skyblue }

			#info {
				position: absolute;
				top: 0px; width: 100%;
				color: #fff;
				background:rgba(0,0,0,0.65);
				padding: 5px;
				text-align: center;
				z-index:100;
				display:block;
			}

			#stats { position: absolute; top:5px; left: 0; z-index: 100 }
			#stats #fps { background: transparent !important }
			#stats #fps #fpsText { color: #aaa !important }
			#stats #fps #fpsGraph { display: none }
    </style>
</head>
<body>

<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<script type="text/javascript">

    $(function () {

        var stats = initStats();

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();
		
		
        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
		
		
		// SKYBOX
/*		var  sceneCube;
		var textureCube;
				sceneCube = new THREE.Scene();
				//sceneCube.add( camera );

				var r = "textures/cube/pisa/";
				var urls = [ r + "px.png", r + "nx.png",
							 r + "py.png", r + "ny.png",
							 r + "pz.png", r + "nz.png" ];


			textureCube = THREE.ImageUtils.loadTextureCube( urls );

				var shader = THREE.ShaderLib[ "cube" ];
				shader.uniforms[ "tCube" ].value = textureCube;
	
			var material = new THREE.ShaderMaterial( {

					fragmentShader: shader.fragmentShader,
					vertexShader: shader.vertexShader,
					uniforms: shader.uniforms,
					depthWrite: false,
					side: THREE.BackSide

				} ),

				mesh1 = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100 ), material );
				sceneCube.add( mesh1 );
	
		
		
		*/
		
		



        // create a render and set the size
        var renderer = new THREE.WebGLRenderer();
        renderer.setClearColorHex(0xffffff, 1.0);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMapEnabled = true;
		
		
		
		
		
		
		//添加坐标轴
		var axes = new THREE.AxisHelper( 20 );
        scene.add(axes);
		

        // 创建一个平面
        var planeGeometry = new THREE.PlaneGeometry(100,100, 1, 1);
        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xededed});
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.receiveShadow = true;

        // rotate and position the plane
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.x = 15
        plane.position.y = -20
        plane.position.z = 0
        scene.add(plane);
		
		

		
		
		
		//添加模型
		var gui = new dat.GUI();
        var mesh;
		var loader = new THREE.OBJMTLLoader();
		loader.addEventListener('load', function (event) {
         var object = event.content;
		 for(k in object.children){
            object.children[k].castShadow = true;
            object.children[k].receiveShadow = true;
        }
			object.position.x = 20;
			object.position.y = 0;
			object.position.z = 0;
            object.scale.set(0.5, 0.5, 0.5);
            mesh = object;
            scene.add(mesh);
        });
        loader.load('../assets/models/00.obj', '../assets/models/00.mtl', {side: THREE.DoubleSide});

        // 相机在场景中的位置和指向
        camera.position.x = -25;
        camera.position.y = 40;
        camera.position.z = 25;
        camera.lookAt(new THREE.Vector3(10, 0, 0));
		
		//添加控制
		var orbitControls = new THREE.OrbitControls(camera);
        orbitControls.autoRotate = true;//设置平面自动旋转
        var clock = new THREE.Clock();
		
        // 增加外界环境光照
        var ambiColor = "#8b8a87";
        var ambientLight = new THREE.AmbientLight(ambiColor);
        scene.add(ambientLight);

        // 为了增加阴影添加一个点光源
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40, 60, -10);
        spotLight.castShadow = true;
        scene.add(spotLight);

        // add the output of the renderer to the html element
        $("#WebGL-output").append(renderer.domElement);


        // call the render function
        var step = 0;

        var controls = new function () {
            this.rotationSpeed = 0.01;
            this.bouncingSpeed = 0;
            this.ambientColor = ambiColor;
        }

        var gui = new dat.GUI();
        gui.addColor(controls, 'ambientColor').onChange(function (e) {
            ambientLight.color = new THREE.Color(e);
        });


        render();
		
		//监听窗口时间使其自适应
		window.addEventListener( 'resize', onWindowResize, false );
		window.addEventListener( 'mousemove', onDocumentMouseMove, false );
		
        function render() {
            stats.update();
			
			//sphere.rotation.y=step+=0.01;
            var delta = clock.getDelta();
            orbitControls.update(delta);
			 if (mesh) {
                //      mesh.rotation.y+=0.006;
				 mesh.rotation.y+=0.006;//只是水平旋转
				//mesh.rotation.x += controls.rotationSpeed;
				//mesh.rotation.y += controls.rotationSpeed;
				//mesh.rotation.z += controls.rotationSpeed;
            }
            // render using requestAnimationFrame
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        }
		
        function initStats() {
            var stats = new Stats();
            stats.setMode(0); // 0: fps, 1: ms
            // Align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';
            $("#Stats-output").append(stats.domElement);
            return stats;
        }
		
		
		//窗口监听事件
		function onWindowResize( event ) {
			SCREEN_WIDTH = window.innerWidth;
			SCREEN_HEIGHT = window.innerHeight;
			renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
			camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
			camera.updateProjectionMatrix();
			cameraCube.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
			cameraCube.updateProjectionMatrix();

		}
		//鼠标监听事件
		function onDocumentMouseMove(event) {
			mouseX = ( event.clientX - windowHalfX );
			mouseY = ( event.clientY - windowHalfY );
		}



		
		
		
		
		
    });


</script>
</body>
</html>