【前端杂记】加载三维obj模型&&layer.open弹窗

最新推荐文章于 2025-06-17 09:50:42 发布

bingJiaJia

最新推荐文章于 2025-06-17 09:50:42 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/bingjia103126/article/details/105997296

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用three.js加载obj格式的三维模型，并通过layer.open实现弹窗功能，展示页面内嵌内容。文章包含代码示例，涵盖三维模型加载、光影设置、弹窗样式配置等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言:

本篇文章主要介绍两方面的内容:加载三维模型和layer.open弹窗

一、加载obj格式的三维模型

1、样例
前端显示出来三维的obj模型
在这里插入图片描述
2、代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/jquery-2.0.3.min.js" ></script>
		<script type="text/javascript" src="js/three.js" ></script>
		<script type="text/javascript" src="js/TrackballControls.js" ></script>
		<script type="text/javascript" src="js/DDSLoader.js" ></script>
		<script type="text/javascript" src="js/OBJLoader.js" ></script>
		<script type="text/javascript" src="js/OBJMTLLoader.js" ></script>	
		<title></title>
	</head>
	<style>
		body{
			margin: 0;
			overflow: hidden;
		}
		#percent {
		    position: absolute;
		    width: 200px;
		    height: 20px;
		    color: red;
		    text-align: center;
		    border: 1p;
		}
	</style>
	<body>
		<div id="percent"></div>
		<div id="WebGL-output">
			
		</div>
		<script>
			$(function(){
				//直接开启帧数检测
				//编辑代码处
				var scene = new THREE.Scene();//场景构建
				var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);//相机构建
				var renderer = new THREE.WebGLRenderer();//渲染器构建
				renderer.setClearColor(0xEEEEEE);
				renderer.setSize(window.innerWidth,window.innerHeight);
				renderer.shadowMapEnabled = true;//激活阴影
				//构建一个坐标轴
				var axes = new THREE.AxisHelper(20);
				scene.add(axes);
				//创建控件并绑定在相机上
				trackballControls = new THREE.TrackballControls(camera);
				trackballControls.rotateSpeed = 1.0;
				trackballControls.zoomSpeed = 1.0;
				trackballControls.panSpeed = 1.0;
				trackballControls.noZoom=false;
				trackballControls.noPan=false;
				trackballControls.staticMoving = true;
				trackballControls.dynamicDampingFactor = 0.3;
				var planeGeometry = new THREE.PlaneGeometry(40,20);
				//var planeMaterial = new THREE.MeshBasicMaterial({color:0xcccccc});
				var planeMaterial = new THREE.MeshLambertMaterial({color:0xffffff});//转换对光源有渲染的材质
				var plane = new THREE.Mesh(planeGeometry,planeMaterial);
				plane.rotation.x = -0.5*Math.PI;
				plane.position.x = 15;
				plane.position.y = 0;
				plane.position.x = 0;
				scene.add(plane);
				plane.receiveShadow  = true;
				//添加材质灯光阴影
				var spotLight = new THREE.SpotLight(0xffffff);
				spotLight.position.set(-10,20,10);
				spotLight.castShadow = true;
				scene.add(spotLight);
				
				 // model
			    var onProgress = function(xhr) {
			        if (xhr.lengthComputable) {
			            var percentComplete = xhr.loaded / xhr.total * 100;
			            var percent = document.getElementById("percent");
			            percent.innerText = Math.round(percentComplete, 2) + '% 已经加载';
			        }
			    };
			    var onError = function(xhr) {};
			    var mtlLoader = new THREE.MTLLoader();
			    // mtl文件路径
			    mtlLoader.load('map.mtl', function(materials) {
			
			        materials.preload();
			
			        var objLoader = new THREE.OBJLoader();
			        objLoader.setMaterials(materials);
			        // obj文件路径;
			        objLoader.load('map.obj', function(object) {
			
			            object.position.y = 0;
			            object.rotation.y = 0.5;
			            object.scale.set(0.05, 0.05, 0.05);
			            scene.add(object);
			
			        }, onProgress, onError);
			    });
				//渲染视图视角
				camera.position.x = -30;
				camera.position.y = 20;
				camera.position.z = 30;
				camera.lookAt(scene.position)
				$("#WebGL-output").append(renderer.domElement)
				renderScene();
				function renderScene(){
					var clock = new THREE.Clock();
		       		var delta = clock.getDelta();
		       		trackballControls.update(delta);
					requestAnimationFrame(renderScene);
					renderer.render(scene,camera);
				}

			})
		</script>
		
	</body>
</html>

3、该js控件重要是使用three.js
详情参考 three.js

二、 layer.open弹窗

前言:
如何实现在前端页面弹出其他页面的内容,iframe标签可以在本页面内部嵌入另一个页面的内容, js 的layer.open也能胜任该功能,并且可以以弹窗的方式弹出来,而不是嵌入。
1、样例
在这里插入图片描述
2、代码实现及分析(更多属性可以查看)

function defect_image(defect_type, image_type) {
        // 缺陷图片
        layer.open({
        	// layer.open 根据type不同，类型也就不一样,有五种类型：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
            type: 2,
            // 皮肤
            skin: 'demo-class',
			// 标题
            title: '样例图片',
            // 鼠标滚动时，层是否固定在可视区域
            fix: true,
            // 不同风格的关闭按钮
            closeBtn: 2,
            // 如果你的shade是存在的，那么你可以设定shadeClose来控制点击弹层外区域关闭
            // shadeClose: true,
            // 罩透明度
            //shade: 0.4,   //遮罩透明度
			// 宽高(弹出层)
            area: ['825px', '470px'],
            // 可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同
            content: '/PV/projects/DefectImage/1',
            {#content: 'tail_sm.html',#}
        });
    }