基于threejs 搭建web 3D 简单编辑器

最新推荐文章于 2024-06-12 18:12:09 发布
最新推荐文章于 2024-06-12 18:12:09 发布
阅读量3.4k 收藏 10
点赞数
分类专栏： web组态 3D可视化 工业物联网
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BluePanther/article/details/104375964
版权 

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>智雨物联</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: #f0f0f0;
				margin: 0px;
				overflow: hidden;
			}

			#oldie { background-color: #ddd !important }
		</style>
	</head>
	<body oncontextmenu="return false">
		<div style="position: fixed;top:5%;right:1%;width:10%;height:500px;background: #6699ff;color: #000000">
			<button onclick="empty()" type="button" style="width:100%;height:50px;">鼠标</button>

			<button onclick="cube()" type="button" style="width:100%;height:50px;">矩形</button>

			<button onclick="Sphere()" type="button" style="width:100%;height:50px;">圆形</button>
		</div>
		<script src="js/three.js"></script>
		<script src="js/controls/OrbitControls.js"></script>
		<script src="js/Detector.js"></script>

		<script>

			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
			//容器  变量
			var container;
			//照相机、场景、控制、渲染器  变量
			var camera, scene,controls,renderer;
			//平面 立方体 变量
			var plane, cube;
			//鼠标 光线投射 shift键 变量
			var mouse, raycaster, isShiftDown = false;
			//选取物体轮廓 材质 变量
			var rollOverMesh, rollOverMaterial;
			//立方体 高度 材质 变量
			var cubeGeo, cubeMaterial;
			//obj数组
			var objects = [];
			
			//初始化
			init();
			//传递函数
			render();

			function init() {
				//容器位置div
				container = document.createElement( 'div' );
				//body加载容器
				document.body.appendChild( container );
				//div属性
				var info = document.createElement( 'div' );
				info.style.position = 'absolute';
				info.style.top = '10px';
				info.style.width = '100%';
				info.style.textAlign = 'center';
				info.innerHTML = '<a href="http://www.krmes.com" target="_blank">IMR-3D Desinger</a>';
				//属性加载
				container.appendChild( info );
				//照相机家里并设定属性
				//距离
				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
				//位置位置
				camera.position.set( 400, 1300, 2300 );
				camera.lookAt( new THREE.Vector3() );

				//建立场景
				scene = new THREE.Scene();

				// roll-over helpers
				//轮廓大小
				rollOverGeo = new THREE.BoxGeometry( 50, 50, 50 );
				//材质
				rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } );
				//加载 轮廓 材质
				rollOverMesh = new THREE.Mesh( rollOverGeo, rollOverMaterial );
				//加入到场景
				scene.add( rollOverMesh );

				// obj 模型
				//模型 大小
				objGeo = new THREE.BoxGeometry( 50, 50, 50 );
				//模型 材质
				objMaterial = new THREE.MeshLambertMaterial( { color: 0xfeb74c } ); //, map: new THREE.TextureLoader().load( "textures/square-outline-textured.png" )

				// grid
				//网格 大小 步长
				var size = 1500, step = 100;
				//几何函数
				var geometry = new THREE.Geometry();
				//几何算法完成  复制
				for ( var i = - size; i <= size; i += step ) {

					geometry.vertices.push( new THREE.Vector3( - size, 0, i ) );
					geometry.vertices.push( new THREE.Vector3(   size, 0, i ) );

					geometry.vertices.push( new THREE.Vector3( i, 0, - size ) );
					geometry.vertices.push( new THREE.Vector3( i, 0,   size ) );

				}
				//材质
				var material = new THREE.LineBasicMaterial( { color: 0xa4c2f4, opacity: 1, transparent: true } );
				//加载 大小 材质
				var line = new THREE.LineSegments( geometry, material );
				//加载 到场景
				scene.add( line );

				//投射
				raycaster = new THREE.Raycaster();
				//鼠标 2维函数
				mouse = new THREE.Vector2();
				//几何缓存 
				var geometry = new THREE.PlaneBufferGeometry( 1000, 1000 );
				//算法
				geometry.rotateX( - Math.PI / 2 );
				//面
				plane = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { visible: false } ) );
				//加载 到场景
				scene.add( plane );
				//数组加载
				objects.push( plane );

				// Lights
				//环境灯光
				var ambientLight = new THREE.AmbientLight( 0x606060 );
				//加载 灯光
				scene.add( ambientLight );
				//定向 灯光
				var directionalLight = new THREE.DirectionalLight( 0xffffff );
				directionalLight.position.set( 1, 0.75, 0.5 ).normalize();
				scene.add( directionalLight );
				//渲染
				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setClearColor( 0xf0f0f0 );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				container.appendChild( renderer.domElement );
				 
				 // 视图控制 
				controls = new THREE.OrbitControls( camera, renderer.domElement );
				controls.zoomSpeed = 2;
				
				//鼠标事件监听
				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
				document.addEventListener( 'keydown', onDocumentKeyDown, false );
				document.addEventListener( 'keyup', onDocumentKeyUp, false );

				//
				//窗口监听
				window.addEventListener( 'resize', onWindowResize, false );

			}
			//窗口函数
			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

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

			}
			//鼠标移动事件 函数
			function onDocumentMouseMove( event ) {

				event.preventDefault();

				mouse.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );

				raycaster.setFromCamera( mouse, camera );

				var intersects = raycaster.intersectObjects( objects );

				if( rollOverMesh == null) {
					
				}
				else{

					if ( intersects.length > 0 ) {

						var intersect = intersects[ 0 ];

						rollOverMesh.position.copy( intersect.point ).add( intersect.face.normal );
						rollOverMesh.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );

					}

					render();
				}

			}
			//鼠标 点击事件 函数
			function onDocumentMouseDown( event ) {
				//鼠标事件
				event.preventDefault();

				mouse.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );

				raycaster.setFromCamera( mouse, camera );

				var intersects = raycaster.intersectObjects( objects );

				if( event.button == 2) {
					//删除原有的形状	
					scene.remove( rollOverMesh );
					//延时清空obj
					setTimeout("objempty()",500);
				}

				if( event.button == 0){
					//轮廓不为空时
					if( objGeo != null) {

						if ( intersects.length > 0 ) {

							var intersect = intersects[ 0 ];

							// delete cube
							
							if ( isShiftDown ) {

								if ( intersect.object != plane ) {

									scene.remove( intersect.object );

									objects.splice( objects.indexOf( intersect.object ), 1 );

								}

							// create cube

							} else {

								var voxel = new THREE.Mesh( objGeo, objMaterial );
								voxel.position.copy( intersect.point ).add( intersect.face.normal );
								voxel.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );
								scene.add( voxel );

								objects.push( voxel );

							}

							render();
						}
					}
				}
				
			}
			//键盘keydown事件函数
			function onDocumentKeyDown( event ) {

				switch( event.keyCode ) {

					case 16: isShiftDown = true; break;

				}

			}
			//键盘keyup事件函数
			function onDocumentKeyUp( event ) {

				switch ( event.keyCode ) {

					case 16: isShiftDown = false; break;

				}

			}
			//传递函数
			function render() {

				renderer.render( scene, camera );

			}
			
			//空
			function empty(){

				//删除原有的形状	
				scene.remove( rollOverMesh );

				//延时清空obj
					setTimeout("objempty()",500);
				
			}
			
			//空 清空obj
			function objempty(){
				
				//轮廓大小
				rollOverGeo      = new THREE.BoxGeometry( 50, 50, 50 );
				//材质
				rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } );
				//加载 轮廓 材质
				rollOverMesh     = new THREE.Mesh( rollOverGeo, rollOverMaterial );

				// obj 模型
				//模型 大小
				objGeo = null;
				//模型 材质
				objMaterial = null;

			}
			

			//矩形
			function cube(){

				//删除原有的形状	
				scene.remove( rollOverMesh );
				//轮廓大小
				rollOverGeo      = new THREE.BoxGeometry( 50, 50, 50 );
				//材质
				rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } );
				//加载 轮廓 材质
				rollOverMesh     = new THREE.Mesh( rollOverGeo, rollOverMaterial );
				//加入到场景
				scene.add( rollOverMesh );

				// obj 模型
				//模型 大小
				objGeo = new THREE.BoxGeometry( 50, 50, 50 );
				//模型 材质
				objMaterial = new THREE.MeshLambertMaterial( { color: 0xfeb74c } ); //, map: new THREE.TextureLoader().load( "textures/square-outline-textured.png" )

			}

			//球体
			function Sphere(){

				//删除原有的形状	
				scene.remove( rollOverMesh );
				//轮廓大小
				rollOverGeo      = new THREE.SphereGeometry( 50, 50, 50 );
				//材质
				rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } );
				//加载 轮廓 材质
				rollOverMesh     = new THREE.Mesh( rollOverGeo, rollOverMaterial );
				//加入到场景
				scene.add( rollOverMesh );

				// obj 模型
				//模型 大小
				objGeo = new THREE.SphereGeometry( 50, 50, 50 );
				//模型 材质
				objMaterial = new THREE.MeshLambertMaterial( { color: 0xfeb74c } ); //, map: new THREE.TextureLoader().load( "textures/square-outline-textured.png" )

			}
			
		</script>

	</body>
</html>

 

BluePanther
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端前沿web 3d可视化技术 ThreeJS学习全记录
Beatingworldline的博客
03-11 1万+
就像前端需要webpack来进行模块化开发 three JS也需要一个对应的工具，他就是PARCEL https://www.parceljs.cn/随着浏览器性能和网络带宽的提升 使得3D技术不再是桌面的专利 打破传统平面展示模式。Threejs封装了WebGL的底层细节，可拓展性强，有很多开源的插件和工具，更易上手。就像2G时代文字信息是主要传输媒介 3G时代的图片 4G时代的视频。拷贝项目到本地即可查看文档 案例文件 使用编辑器等。随着硬件性能与技术的提升，未来的前端也一定是3D的。
threejs零基础搭建3D可视化汽车展厅
最新发布
weixin_68658847的博客
07-22 424
threejs零基础搭建3D可视化汽车展厅
three.js 编辑器，three.js 低代码内核搭建
06-12 361
易用性 低代码的创造一定是减少开发者的学习成本，如果让开发者 用了之后发现学习成本更高了，那这个低代码不开发也罢，封装成一个npm 包 对于这来说是一个最好的选择, 开发者使用的时候只需要知道传什么参数，然后能生成什么结果就好，完全不需要去了解内部逻辑。组件化：类似于二维低代码的组件化，three.js 也可以，例如你通过繁琐操作创建了一个三维物体，你将此方法封装起来，下次使用就不用从头写，只需要一些传参就能生成这个物体，一个组件只需要耗费经历写一次，而这个组件代码并不会与其他代码有过多的交集。
Web3D编辑器-使用THREE.JS+Vuejs打造大屏可视化快速搭建工具/BI/WEB3D/可视化平台/编辑平台/大数据可视化工具
热门推荐
stonerao
01-06 1万+
正在开发中
Web在线3D编辑器-全场景编辑全新功能升级
ALLENJIAO的专栏
01-10 7985
在线编辑器采用了在线互动三维引擎技术，为用户提供了快速场景搭建能力， 使用户得以零基础、低门槛、低成本地在数字化世界中，搭建一个真实世界的仿真场景。
初识 ThreeJS （ThreeJS 相关环境搭建）
两个月亮
01-23 4180
ThreeJS 是基于WebGL 封装的一个易于使用且轻量级的 3D 库，ThreeJS 对 WebGL 提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本，同时也极大地提高了性能。，如果你希望可以快速的使用 ThreeJS 官网提供的这些功能（你还可以获取例子中的源码用于学习），可以将 ThreeJS 网站的项目文件下载到本地并对其进行搭建。当然你也可以通过终端的提示，通过访问链接。在完成上述操作后，使用如下命令安装该项目可能缺少的依赖项（第三方模块或插件），这些依赖项被记录在项目中的。
Three.js 入门（一）— 开发环境搭建
qq_40120946的博客
04-25 1079
WebGL ：WebGL（Web图形库）是一个JavaScript API，可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形，而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0非常一致的API来做到这一点，该API可以在HTML5 元素中使用。详细了解可参考官方文档。
Three.js--》实现3D汽车展厅效果展示
ztK63LrD的博客
06-17 3959
今天简单实现一个three.js的3D汽车模型展厅，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。
Threejs实现3D飞行器交互场景
weixin_45785873的博客
04-19 971
最近在b站上面看到up主：gamemcu的3D作品，着实让人感到非常震撼，作品中的SU7模型，利用的是Blender进行建模，利用了webGL的技术进行。由此启发了我对3D极大的乐趣。因此，凭借一点点🤏的前端知识水平，打算从Three.js开始入门3D。基于Three.js的模型交互，包括方向控制、颜色贴图、阻尼效果、TWEEN动画、JavaScript动画、CSS3过渡等效果
vite搭建three.js的开发环境
01-06
在提供的压缩包`vite-threejs-demo`中，可能包含了已经搭建好的Vite和Three.js项目，你可以将其解压后运行`npm install`和`npm run dev`来查看和学习这个示例。这个示例可能会包含更复杂的3D场景和交互功能，通过...
3DviewerPrinter:使用threejs，一个Web应用程序来修改手机外壳的模型stl
06-20
《3DviewerPrinter：利用Three.js构建Web版手机外壳3D模型编辑器》 在现代科技日新月异的时代，3D打印技术已逐渐成为个人定制化产品的重要工具，而Web应用程序更是以其便捷性受到用户的青睐。"3DviewerPrinter"项目...
learn_threejs_3rd_examples
04-18
Visual Studio Code是一款广受欢迎的代码编辑器，其丰富的插件生态系统和强大的代码智能提示使得开发者能够高效地编写和调试代码。ritwickdey.LiveServer是一个VSCode扩展，它能快速启动一个本地HTTP服务器，方便...
浏览器web3d
11-10
这个文件可能是Web3D项目的可执行文件，它可能包含了Web3D场景的预览或编辑器。用户可以运行这个程序来查看或者编辑创建的3D场景，但由于它是.exe文件，通常需要在Windows操作系统上运行。 总的来说，“浏览器web...
VRWorkshopCityU：为香港城市大学媒体与传播系举办的VR研讨会
02-06
它支持创建交互式3D场景，提供了丰富的图形渲染、物理模拟和脚本系统，使得非编程背景的用户也能通过可视化编辑器进行内容创作。在VRWorkshopCityU中，参与者可能学习了如何使用Unity3D构建沉浸式虚拟环境，包括场景...
工业企业数字化转型--设备管理运维系统
BluePanther的专栏
04-25 8065
企业数字化转型已然是企业生存发展的必然趋势。不管是国家十四五规划层面的倡导，还是企业自身产业升级的需求，企业的数字化转型势在必行。 企业数据化转型最佳实践路径 工业企业实现数字化转型需要根据企业自身核心需求，针对生产设备循序渐进的进行。从最底层设备数据连接，设备数据可视化，设备数据分析，设备故障预测，设备自适应到引入AI人工智能分布实现。 设备运维管理一体化平台架构 设备运维管理一体化平台流程闭环 实现设备运维管理一体化，必须先要做到业务流程的整体闭环。
WEB组态 工业物联网平台 SCADA
BluePanther的专栏
02-14 6331
WEB组态 智雨物联 工业物联网平台 SCADA
H5 小程序 移动端 低代码 实现无人值守-污水处理反渗透监控系统
BluePanther的专栏
12-07 3626
H5 小程序 移动端 低代码 实现无人值守
threejs 3d编辑器
05-12
threejs 3d编辑器是一个基于three.js库开发的工具，用于创建和编辑三维图形。它可以让用户轻松地通过GUI（图形用户界面）操作方式来构建三维模型，支持包括几何形状、材质、光源、动画、粒子效果等在内的多种渲染...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值