three.js 场景编辑器 源码解析（五）

最新推荐文章于 2024-04-22 09:59:18 发布
最新推荐文章于 2024-04-22 09:59:18 发布
阅读量1.5k 收藏 6
点赞数 1
分类专栏： three.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tianyapai/article/details/104760938
版权

       这一章分析ui中的添加菜单项的内容，与之相关的js文件为Menubar.Add.js,编辑器的结构简单易懂，很适合初学者学习。

                                                                   

这个js文件中值得注意的是场景中的任意操作都会封装成一个命令，例如添加操作时会使用AddObjectCommand这个命令，然后这个命令会被放到Sidebar.History.js中的栈中，方便操作的撤销和重做。

// 菜单栏中的添加菜单
Menubar.Add = function ( editor ) {

	//获取标签文字信息
	var strings = editor.strings;

	//添加panel，即div，设置className为menu，为以后的css使用，这个为容器
	var container = new UI.Panel();
	container.setClass( 'menu' );

	//添加子项，设置子项的className，设置文本内容
	var title = new UI.Panel();
	title.setClass( 'title' );
	title.setTextContent( strings.getKey( 'menubar/add' ) ); //设置标题为'Add'
	container.add( title );  //添加到菜单 

	//添加子项
	var options = new UI.Panel();
	options.setClass( 'options' );
	container.add( options );

	// Group
	// 添加组
	var option = new UI.Row();
	option.setClass( 'option' );
	option.setTextContent( strings.getKey( 'menubar/add/group' ) );  //设置标题为'Group'
	option.onClick( function () {		//添加事件

		var mesh = new THREE.Group();		//创建组，设置名称为组
		mesh.name = 'Group';

		editor.execute( new AddObjectCommand( mesh ) );   //调用执行函数

	} );
	options.add( option ); //添加到options容器当中

	//
	//添加水平分隔符
	options.add( new UI.HorizontalRule() );

	// Plane
	// 添加面
	var option = new UI.Row();
	option.setClass( 'option' );
	option.setTextContent( strings.getKey( 'menubar/add/plane' ) );
	option.onClick( function () {

		//添加面
		var geometry = new THREE.PlaneBufferGeometry( 1, 1, 1, 1 );
		var material = new THREE.MeshStandardMaterial();
		var mesh = new THREE.Mesh( geometry, material );
		mesh.name = 'Plane';

		editor.execute( new AddObjectCommand( mesh ) );

	} );
	options.add( option );

	// Box
	//添加立方体
	var option = new UI.Row();
	option.setClass( 'option' );
	option.setTextContent( strings.getKey( 'menubar/add/box' ) );
	option.onClick( function () {

		var geometry = new THREE.BoxBufferGeometry( 1, 1, 1, 1, 1, 1 );
		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
		mesh.name = 'Box';

		editor.execute( new AddObjectCommand( mesh ) );

	} );
	options.add( option );

	// Circle

	var option = new UI.Row();
	option.setClass( 'option' );
	option.setTextContent( strings.getKey( 'menubar/add/circle' ) );
	option.onClick( function () {

		var geometry = new THREE.CircleBufferGeometry( 1, 8, 0, Math.PI * 2 );
		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
		mesh.name = 'Circle';

		editor.execute( new AddObjectCommand( mesh ) );

	} );
	options.add( option );

	// Cylinder
	//添加
	var option = new UI.Row();
	option.setClass( 'option' );
	option.setTextContent( strings.getKey( 'menubar/add/cylinder' ) );
	option.onClick( function () {

		var geometry = new THREE.CylinderBufferGeometry( 1, 1, 1, 8, 1, false, 0, Math.PI * 2 );
		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
		mesh.name = 'Cylinder';

		editor.execute( new AddObjectCommand( mesh ) );

	} );
	options.add( option );

	// Sphere

	var option = new UI.Row();
	option.setClass( 'option' );
	option.setTextContent( strings.getKey( 'menubar/add/sphere' ) );
	option.onClick( function () {

		var geometry = new THREE.SphereBufferGeometry( 1, 8, 6, 0, Math.PI * 2, 0, Math.PI );
		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
		mesh.name = 'Sphere';

		editor.execute( new AddObjectCommand( mesh ) );

	} );
	options.add( option );

	// Icosahedron

	var option = new UI.Row();
	option.setClass( 'option' );
	option.setTextContent( strings.getKey( 'menubar/add/icosahedron' ) );
	option.onClick( function () {

		var geometry = new THREE.IcosahedronBufferGeometry( 1, 0 );
		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
		mesh.name = 'Icosahedron';

		editor.execute( new AddObjectCommand( mesh ) );

	} );
	options.add( option );

	// Torus

	var option = new UI.Row();
	option.setClass( 'option' );
	option.setTextContent( strings.getKey( 'menubar/add/torus' ) );
	option.onClick( function () {

		var geometry = new THREE.TorusBufferGeometry( 1, 0.4, 8, 6, Math.PI * 2 );
		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
		mesh.name = 'Torus';

		editor.execute( new AddObjectCommand( mesh ) );

	} );
	options.add( option );

	// TorusKnot

	var option = new UI.Row();
	option.setClass( 'option' );
	option.setTextContent( strings.getKey( 'menubar/add/torusknot' ) );
	option.onClick( function () {

		var geometry = new THREE.TorusKnotBufferGeometry( 1, 0.4, 64, 8, 2, 3 );
		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
		mesh.name = 'TorusKnot';

		editor.execute( new AddObjectCommand( mesh ) );

	} );
	options.add( option );

	// Tube

	var option = new UI.Row();
	option.setClass( 'option' );
	option.setTextContent( strings.getKey( 'menubar/add/tube' ) );
	option.onClick( function () {

		var path = new THREE.CatmullRomCurve3( [
			new THREE.Vector3( 2, 2, - 2 ),
			new THREE.Vector3( 2, - 2, - 0.6666666666666667 ),
			new THREE.Vector3( - 2, - 2, 0.6666666666666667 ),
			new THREE.Vector3( - 2, 2, 2 )
		] );

		var geometry = new THREE.TubeBufferGeometry( path, 64, 1, 8, false );
		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
		mesh.name = 'Tube';

		editor.execute( new AddObjectCommand( mesh ) );

	} );
	options.add( option );

	/*
	// Teapot

	var option = new UI.Row();
	option.setClass( 'option' );
	option.setTextContent( 'Teapot' );
	option.onClick( function () {

		var size = 50;
		var segments = 10;
		var bottom = true;
		var lid = true;
		var body = true;
		var fitLid = false;
		var blinnScale = true;

		var material = new THREE.MeshStandardMaterial();

		var geometry = new THREE.TeapotBufferGeometry( size, segments, bottom, lid, body, fitLid, blinnScale );
		var mesh = new THREE.Mesh( geometry, material );
		mesh.name = 'Teapot';

		editor.addObject( mesh );
		editor.select( mesh );

	} );
	options.add( option );
	*/

	// Lathe

	var option = new UI.Row();
	option.setClass( 'option' );
	option.setTextContent( strings.getKey( 'menubar/add/lathe' ) );
	option.onClick( function () {

		var points = [
			new THREE.Vector2( 0, 0 ),
			new THREE.Vector2( 0.4, 0 ),
			new THREE.Vector2( 0.35, 0.05 ),
			new THREE.Vector2( 0.1, 0.075 ),
			new THREE.Vector2( 0.08, 0.1 ),
			new THREE.Vector2( 0.08, 0.4 ),
			new THREE.Vector2( 0.1, 0.42 ),
			new THREE.Vector2( 0.14, 0.48 ),
			new THREE.Vector2( 0.2, 0.5 ),
			new THREE.Vector2( 0.25, 0.54 ),
			new THREE.Vector2( 0.3, 1.2 )
		];

		var geometry = new THREE.LatheBufferGeometry( points, 12, 0, Math.PI * 2 );
		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial( { side: THREE.DoubleSide } ) );
		mesh.name = 'Lathe';

		editor.execute( new AddObjectCommand( mesh ) );

	} );
	options.add( option );

	// Sprite

	var option = new UI.Row();
	option.setClass( 'option' );
	option.setTextContent( strings.getKey( 'menubar/add/sprite' ) );
	option.onClick( function () {

		var sprite = new THREE.Sprite( new THREE.SpriteMaterial() );
		sprite.name = 'Sprite';

		editor.execute( new AddObjectCommand( sprite ) );

	} );
	options.add( option );

	//

	options.add( new UI.HorizontalRule() );

	// PointLight

	var option = new UI.Row();
	option.setClass( 'option' );
	option.setTextContent( strings.getKey( 'menubar/add/pointlight' ) );
	option.onClick( function () {

		var color = 0xffffff;
		var intensity = 1;
		var distance = 0;

		var light = new THREE.PointLight( color, intensity, distance );
		light.name = 'PointLight';

		editor.execute( new AddObjectCommand( light ) );

	} );
	options.add( option );

	// SpotLight

	var option = new UI.Row();
	option.setClass( 'option' );
	option.setTextContent( strings.getKey( 'menubar/add/spotlight' ) );
	option.onClick( function () {

		var color = 0xffffff;
		var intensity = 1;
		var distance = 0;
		var angle = Math.PI * 0.1;
		var penumbra = 0;

		var light = new THREE.SpotLight( color, intensity, distance, angle, penumbra );
		light.name = 'SpotLight';
		light.target.name = 'SpotLight Target';

		light.position.set( 5, 10, 7.5 );

		editor.execute( new AddObjectCommand( light ) );

	} );
	options.add( option );

	// DirectionalLight

	var option = new UI.Row();
	option.setClass( 'option' );
	option.setTextContent( strings.getKey( 'menubar/add/directionallight' ) );
	option.onClick( function () {

		var color = 0xffffff;
		var intensity = 1;

		var light = new THREE.DirectionalLight( color, intensity );
		light.name = 'DirectionalLight';
		light.target.name = 'DirectionalLight Target';

		light.position.set( 5, 10, 7.5 );

		editor.execute( new AddObjectCommand( light ) );

	} );
	options.add( option );

	// HemisphereLight
	//添加
	var option = new UI.Row();
	option.setClass( 'option' );
	option.setTextContent( strings.getKey( 'menubar/add/hemispherelight' ) );
	option.onClick( function () {

		var skyColor = 0x00aaff;
		var groundColor = 0xffaa00;
		var intensity = 1;

		var light = new THREE.HemisphereLight( skyColor, groundColor, intensity );
		light.name = 'HemisphereLight';

		light.position.set( 0, 10, 0 );

		editor.execute( new AddObjectCommand( light ) );

	} );
	options.add( option );

	// AmbientLight
	//添加环境光灯
	var option = new UI.Row();
	option.setClass( 'option' );
	option.setTextContent( strings.getKey( 'menubar/add/ambientlight' ) );
	option.onClick( function () {

		var color = 0x222222;
		//添加环境光
		var light = new THREE.AmbientLight( color );
		light.name = 'AmbientLight';

		editor.execute( new AddObjectCommand( light ) );

	} );
	options.add( option );

	//

	options.add( new UI.HorizontalRule() );

	// PerspectiveCamera
	//添加投影相机
	var option = new UI.Row();
	option.setClass( 'option' );
	option.setTextContent( strings.getKey( 'menubar/add/perspectivecamera' ) );
	option.onClick( function () {

		var camera = new THREE.PerspectiveCamera( 50, 1, 1, 10000 );
		camera.name = 'PerspectiveCamera';

		editor.execute( new AddObjectCommand( camera ) );

	} );
	options.add( option );

	return container;

};

 

tianyapai
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Threejs用官方提供的编辑器做一个简单的模型
Baker的博客
08-21 1629
Threejs有提供一个web端的编辑器制作3D模型，地址是https://threejs.org/editor/，这个打开就可以在线编辑，但是因为比较简陋，所以只能做一些简单的模型用于测试，实际开发中还是用blender这种标准的建模软件来建模，首先打开页面可以看到下面的画面，(是英文版本的，不过单词都比较简单，可以凑合...
Three.js编辑器editor使用详解
热门推荐
saxasx的博客
08-03 5万+
Three.js编辑器editor使用详解官网下载Three.js压缩包其他的文件内容如下：了解过文件内容之后下一步： 官网下载Three.js压缩包 github官网源码包 解压后文件目录如下图： 其他的文件内容如下： Build目录：包含两个文件，three.js 和three.min.js 。这是three.js最终被引用的文件。一个已经压缩，一个没有压缩的js文件。 Docs目录：这里是three.js的帮助文档，里面是各个函数的api，可惜并没有详细的解释。试图用这些文档来学会three.js
通过Three.js Editor探索3D世界: 创作与交互的新维度
最新发布
gitblog_00018的博客
04-22 1022
通过Three.js Editor探索3D世界: 创作与交互的新维度 项目地址:https://gitcode.com/ouyangzhaoxing/three.js-editor 在数字时代，3D建模和动画已经成为表达创意、设计产品或构建虚拟环境的重要工具。如果你对WebGL和JavaScript有所了解，那么【Three.js Editor】是一个不可错过的项目，它提供了一个直观且功能强大的...
图形化开发（五）054-Three.js之Points 粒子——points 粒子-球体、星空
weixin_44867717的博客
09-12 1555
图形化开发（五）054-Three.js之Points 粒子——points 粒子-球体、星空 points 粒子 粒子和精灵的效果是一样的，它们之间的区别就是如果当前场景内的精灵过多的话，就会出现性能问题。粒子的作用就是为解决很多精灵而出现的，我们可以使用粒子去模型数量很多的效果，比如下雨，下雪等，数量很多的时候就适合使用粒子来创建，相应的，提高性能的损失就是失去了对单个精灵的操作，所有的粒子的效果都是一样。总的来说，粒子就是提高性能减少的一些自由度，而精灵就是为了自由度而损失了一些性能。 粒子THREE
webglstudio.js：浏览器中的完整开源3D图形编辑器，包括场景编辑器，编码板，图形编辑器，虚拟文件​​系统以及许多其他功能
01-28
WEBGLSTUDIO正在迁移到新的REPO。 保持沉默 WebGLStudio.js WebGLStudio.js是一个基于浏览器的开源3D图形套件。 您可以使用标准Web技术在浏览器中编辑场景和材质，设计效果和着色器，代码行为并共享您的工作。 WebGLStudio.js的一些重要功能： 完整的3D图形引擎（ ），支持多种光照，，实时反射，自定义材质，postFX，蒙皮，动画等。 一个易于扩展的基于组件的系统，用于控制渲染管道和交互事件挂钩 简单易用，所见即所得（WYSIWYG）编辑器为所有编码，图形合成和时间轴功能提供了一个界面。 使用来控制行为，着色器和后处理效果的图形编辑器。 支持 ，这是一个虚拟文件系统，允许在Web上拖放资源以及可配置的配额，用户和共享文件夹。 通过发送单个链接导出并共享您的工作。 有关更多信息，请访问 功能缺失： 网格编辑，您不能选择面并移动它们 对FBX的支持，它具有某种支持，但功能不完全 物理 正在安装 要安装WebGLStudio.js，请将编辑器文件复制到服务器，然后将安装到editor/目录中的fileserver/文件夹
基于Threejs 3D场景编辑器代码.zip
09-23
【Three.js 3D场景编辑器】是一个利用Three.js库构建的交互式工具，它允许用户在Web浏览器中创建、编辑和管理三维场景。Three.js是JavaScript的一个强大库，专门用于在WebGL的支持下实现3D图形渲染。通过这个3D场景...
Three.js视频教程源码.rar
08-19
《Three.js全方位解析：从源码到实战》 Three.js是基于WebGL的JavaScript库，是目前最流行的浏览器端3D图形渲染库之一，广泛应用于网页游戏、数据可视化、3D建模等领域。本教程围绕"Three.js视频教程源码.rar"展开...
使用three.js制作的Ace编辑器示例源码.zip
01-07
2. `main.js`：这里是核心的JavaScript代码，包含了初始化three.js场景、相机、光源、几何体和材质的逻辑，以及与Ace编辑器交互的代码。 3. `styles.css`：可能包含了项目的样式定义，如编辑器和3D场景的布局。 4. ...
Three.js源码脚本
05-25
Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。
three-editor-master_syllableinh_hidednn_threejseditor_three.js_z
09-29
《深入理解Three.js编辑器：汉化版three.js editor解析》 在当今的Web开发领域，3D图形渲染已经成为一种趋势，特别是在游戏、虚拟现实（VR）和增强现实（AR）应用中。Three.js作为一款强大的JavaScript库，使得在...
ThreeJSEditorExtension:用于Google Chrome的Three.js编辑器扩展
05-19
用于Google Chrome的Three.js编辑器扩展 Chrome DevTools扩展程序，用于管理任何three.js项目。 的双项目 如何安装 在测试版中，您可以直接从磁盘加载扩展程序： 签出仓库 打开Chrome的“扩展程序”页面（ Settings / More tools / Extensions ） 启用Developer Mode 点击``加载解压后的扩展程序...'' 在检出的项目中选择文件夹/ src 或者，您可以自己打包扩展并通过在扩展页面中删除.crx文件来加载。 如何使用 浏览到包含three.js内容的页面（您可以在或找到许多内容） 打开DevTools 选择Three.js Editor选项卡 该扩展程序需要检测THREE ，因此必须使用被注入的脚本重新加载被检查的选项卡。 点击Reload按钮 如果要开发页面，请确保THREE是全局的
scene-editor:Three.js编辑器
05-17
场景编辑 Three.js编辑器
基于threejs的在线3D场景编辑器使用mongodb保存3D模型和场景数据
08-10
基于three.js的在线3D场景编辑器，使用mongodb保存3D模型和场景数据
threeEdit:模型可视化编辑
05-08
Mars3D基础项目模版（含widget模块） - Vue版 Vue技术栈下的一个具备基础widget功能的应用的三维地球项目模版。 这是一个基于 并整合了Cesium、MarsGIS的基础项目。 其他技术栈，请参考 运行效果 运行命令 首次运行前安装依赖 npm install 或 cnpm install http运行项目 npm run serve 运行后访问：http://localhost:2001/ 。 修改代码自动热部署，无缓存不用手动刷新 打包编译项目 运行npm run build来构建项目。 项目说明 部分第三方库不是npm方式引入，是主页head中静态资源方式引入的。资源放在public目录下。 主要原因是： （1）一些第三方cesium插件并没有提供NPM包,以模块化的方式引入cesium没办法直接使用这些第三方插件包,通过静态资源的方式可以解决此问题。 （2）
ThreeStudio：基于Three.js和Electron的3D游戏编辑器
01-28
ThreeStudio 基于Three.js和Electron的3D游戏编辑器。 该项目的目的是使用现有的基于Web的开源框架和库来创建功能性3D编辑器。 应用程序：Node.js + Electron 核心：HTML + CSS + JavaScript + jQuery 界面：jQuery UI + jsTree + GoldenLayout + CodeMirror + jscolor + Bootstrap + FontAwesome 渲染和物理：Three.js + ammo.js + csg.js 脚本：Esprima + CoffeeScript + RapydScript 用法： npm install npm start 按F9或Ctrl+P进入/退出游戏模式。 要以独立模式运行游戏： npm start player
threejs编辑器(3D场景编辑器)
Chou_Junn的博客
06-11 7756
threejs编辑器
Three.js editor 学习笔记（一）
u013384019的博客
02-01 1万+
最近项目需要用到three.js editor，three.js库虽然较为广泛使用，但editor作为“衍生产品”似乎用户较少，使用方法连官方都资料甚少。此次我就自己关于editor的学习进行一下简单的脉络分析，大家共勉呀。 首先，我对three.js 库不是十分了解，打算从editor开始学习，遇到需要查询的地方再从库中按需求学习。 Editor目录下共有四个目录和两个文件。
three.js 场景编辑器 源码解析（二）
tianyapai的专栏
03-09 2398
three.js场景编辑器的一些初始配置信息存放在editor\js\Config.js下,当第一次加载的时候，编辑器会使用这个配置文件设置默认配置，并将这些配置信息存储在浏览器的window.localStorage，当再次打开编辑器时会从浏览器本地的window.localStorage读取这些配置，特别是当用户自己设定了一些配置项时很有用。 //配置的内容，初始化时会依照...
threejs场景编辑器源码
05-01
ThreeJS场景编辑器源码是一个基于ThreeJS JavaScript库开发的可视化编辑器。它能够让用户在浏览器中直观地编辑和调试ThreeJS场景，并能够实时显示场景效果。该编辑器源码包含了一系列的类和方法，可以让开发者轻松地创建、编辑、删除、移动和旋转3D模型，设置模型的材质和纹理，以及实现灯光、相机等3D场景元素的控制和配置。 该场景编辑器源码具有良好的可扩展性，开发者可以在此基础上添加更多的功能和模块。例如，通过添加模型库，可以让用户快速地添加预设的3D模型，从而提高编辑效率。同时，该编辑器源码也支持与其他JavaScript框架或库进行集成，例如Angular、React等。 在使用该编辑器源码时，用户只需在浏览器中打开HTML文件即可使用。在场景编辑器界面中，用户可以在左侧的场景树中选择场景元素，右侧的属性面板中可以编辑该元素的属性和样式。此外，该编辑器还提供了工具栏和菜单栏，方便用户进行更多的操作和设置。总之，该场景编辑器源码是ThreeJS开发的重要工具，为开发者提供了便捷的场景编辑和调试功能，大大提高了开发效率。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值