three.js中各种对象汇集

最新推荐文章于 2024-07-17 15:03:55 发布
最新推荐文章于 2024-07-17 15:03:55 发布
阅读量481 收藏 1
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15267341/article/details/118219977
版权 
Material对象：
	var materialId = 0;

	function Material() {

		Object.defineProperty( this, 'id', { value: materialId ++ } );

		this.uuid = _Math.generateUUID();

		this.name = '';
		this.type = 'Material';

		this.fog = true;
		this.lights = true;

		this.blending = NormalBlending;
		this.side = FrontSide;
		this.flatShading = false;
        。。。

Material对象的toJSON：

		toJSON: function ( meta ) {

			var isRoot = ( meta === undefined || typeof meta === 'string' );

			if (isRoot) {

				meta = {
					textures: {},
					images: {}
				};

			}

			var data = {
				metadata: {
					version: 4.5,
					type: 'Material',
					generator: 'Material.toJSON'
				}
			};

			// standard Material serialization
			data.uuid = this.uuid;
			data.type = this.type;

			if (this.name !== '') data.name = this.name;

			if (this.color && this.color.isColor) data.color = this.color.getHex();

			if (this.roughness !== undefined) data.roughness = this.roughness;
			if (this.metalness !== undefined) data.metalness = this.metalness;

			if (this.emissive && this.emissive.isColor) data.emissive = this.emissive.getHex();
			if (this.emissiveIntensity !== 1) data.emissiveIntensity = this.emissiveIntensity;

			if (this.specular && this.specular.isColor) data.specular = this.specular.getHex();
			if (this.shininess !== undefined) data.shininess = this.shininess;
			if (this.clearCoat !== undefined) data.clearCoat = this.clearCoat;
			if (this.clearCoatRoughness !== undefined) data.clearCoatRoughness = this.clearCoatRoughness;

			if (this.map && this.map.isTexture) data.map = this.map.toJSON( meta ).uuid;
			if (this.alphaMap && this.alphaMap.isTexture) data.alphaMap = this.alphaMap.toJSON( meta ).uuid;
			if (this.lightMap && this.lightMap.isTexture) data.lightMap = this.lightMap.toJSON( meta ).uuid;
			if (this.bumpMap && this.bumpMap.isTexture) {

				data.bumpMap = this.bumpMap.toJSON( meta ).uuid;
				data.bumpScale = this.bumpScale;

			}
			if (this.normalMap && this.normalMap.isTexture) {

				data.normalMap = this.normalMap.toJSON( meta ).uuid;
				data.normalScale = this.normalScale.toArray();

			}
			if (this.displacementMap && this.displacementMap.isTexture) {

				data.displacementMap = this.displacementMap.toJSON( meta ).uuid;
				data.displacementScale = this.displacementScale;
				data.displacementBias = this.displacementBias;

			}
			if (this.roughnessMap && this.roughnessMap.isTexture) data.roughnessMap = this.roughnessMap.toJSON( meta ).uuid;
			if (this.metalnessMap && this.metalnessMap.isTexture) data.metalnessMap = this.metalnessMap.toJSON( meta ).uuid;

			if (this.emissiveMap && this.emissiveMap.isTexture) data.emissiveMap = this.emissiveMap.toJSON( meta ).uuid;
			if (this.specularMap && this.specularMap.isTexture) data.specularMap = this.specularMap.toJSON( meta ).uuid;

			if (this.envMap && this.envMap.isTexture) {

				data.envMap = this.envMap.toJSON( meta ).uuid;
				data.reflectivity = this.reflectivity; // Scale behind envMap

			}

			if (this.gradientMap && this.gradientMap.isTexture) {

				data.gradientMap = this.gradientMap.toJSON( meta ).uuid;

			}

			if (this.size !== undefined) data.size = this.size;
			if (this.sizeAttenuation !== undefined) data.sizeAttenuation = this.sizeAttenuation;

			if (this.blending !== NormalBlending) data.blending = this.blending;
			if (this.flatShading === true) data.flatShading = this.flatShading;
			if (this.side !== FrontSide) data.side = this.side;
			if (this.vertexColors !== NoColors) data.vertexColors = this.vertexColors;

			if (this.opacity < 1) data.opacity = this.opacity;
			if (this.transparent === true) data.transparent = this.transparent;

			data.depthFunc = this.depthFunc;
			data.depthTest = this.depthTest;
			data.depthWrite = this.depthWrite;

			// rotation (SpriteMaterial)
			if (this.rotation !== 0) data.rotation = this.rotation;

			if (this.linewidth !== 1) data.linewidth = this.linewidth;
			if (this.dashSize !== undefined) data.dashSize = this.dashSize;
			if (this.gapSize !== undefined) data.gapSize = this.gapSize;
			if (this.scale !== undefined) data.scale = this.scale;

			if (this.dithering === true) data.dithering = true;

			if (this.alphaTest > 0) data.alphaTest = this.alphaTest;
			if (this.premultipliedAlpha === true) data.premultipliedAlpha = this.premultipliedAlpha;

			if (this.wireframe === true) data.wireframe = this.wireframe;
			if (this.wireframeLinewidth > 1) data.wireframeLinewidth = this.wireframeLinewidth;
			if (this.wireframeLinecap !== 'round') data.wireframeLinecap = this.wireframeLinecap;
			if (this.wireframeLinejoin !== 'round') data.wireframeLinejoin = this.wireframeLinejoin;

			if (this.morphTargets === true) data.morphTargets = true;
			if (this.skinning === true) data.skinning = true;

			if (this.visible === false) data.visible = false;
			if (JSON.stringify( this.userData ) !== '{}') data.userData = this.userData;

			// TODO: Copied from Object3D.toJSON

			function extractFromCache( cache ) {

				var values = [];

				for (var key in cache) {

					var data = cache[key];
					delete data.metadata;
					values.push( data );

				}

				return values;

			}

			if (isRoot) {

				var textures = extractFromCache( meta.textures );
				var images = extractFromCache( meta.images );

				if (textures.length > 0) data.textures = textures;
				if (images.length > 0) data.images = images;

			}

			return data;

		},

Object3d方法 

        Object.defineProperty( this, 'id', { value: object3DId ++ } );
        this.uuid = _Math.generateUUID();

		this.name = '';
		this.type = 'Object3D';

		this.parent = null;
		this.children = [];
        this.up = Object3D.DefaultUp.clone();

        Object.defineProperties( this, {
			position: {
				enumerable: true,
				value: position
			},
			rotation: {
				enumerable: true,
				value: rotation
			},
			quaternion: {
				enumerable: true,
				value: quaternion
			},
			scale: {
				enumerable: true,
				value: scale
			},
			modelViewMatrix: {
				value: new Matrix4()
			},
			normalMatrix: {
				value: new Matrix3()
			}
		} );

		this.matrix = new Matrix4();
		this.matrixWorld = new Matrix4();

		this.matrixAutoUpdate = Object3D.DefaultMatrixAutoUpdate;
		this.matrixWorldNeedsUpdate = false;

		this.layers = new Layers();
		this.visible = true;

		this.castShadow = false;
		this.receiveShadow = false;

		this.frustumCulled = true;
		this.renderOrder = 0;

		this.userData = {};

 Object3D的原型方法

copy方法：

		copy: function ( source, recursive ) {

			if ( recursive === undefined ) recursive = true;

			this.name = source.name;

			this.up.copy( source.up );

			this.position.copy( source.position );
			this.quaternion.copy( source.quaternion );
			this.scale.copy( source.scale );

			this.matrix.copy( source.matrix );
			this.matrixWorld.copy( source.matrixWorld );

			this.matrixAutoUpdate = source.matrixAutoUpdate;
			this.matrixWorldNeedsUpdate = source.matrixWorldNeedsUpdate;

			this.layers.mask = source.layers.mask;
			this.visible = source.visible;

			this.castShadow = source.castShadow;
			this.receiveShadow = source.receiveShadow;

			this.frustumCulled = source.frustumCulled;
			this.renderOrder = source.renderOrder;

			this.userData = JSON.parse( JSON.stringify( source.userData ) );

			if ( recursive === true ) {

				for ( var i = 0; i < source.children.length; i ++ ) {

					var child = source.children[ i ];
					this.add( child.clone() );

				}

			}

			return this;

		}

 toJSON方法：

toJSON: function ( meta ) {

			// meta is a string when called from JSON.stringify
			var isRootObject = ( meta === undefined || typeof meta === 'string' );

			var output = {};

			// meta is a hash used to collect geometries, materials.
			// not providing it implies that this is the root object
			// being serialized.
			if ( isRootObject ) {

				// initialize meta obj
				meta = {
					geometries: {},
					materials: {},
					textures: {},
					images: {},
					shapes: {}
				};

				output.metadata = {
					version: 4.5,
					type: 'Object',
					generator: 'Object3D.toJSON'
				};

			}

			// standard Object3D serialization

			var object = {};

			object.uuid = this.uuid;
			object.type = this.type;

			if ( this.name !== '' ) object.name = this.name;
			if ( this.castShadow === true ) object.castShadow = true;
			if ( this.receiveShadow === true ) object.receiveShadow = true;
			if ( this.visible === false ) object.visible = false;
			if ( this.frustumCulled === false ) object.frustumCulled = false;
			if ( this.renderOrder !== 0 ) object.renderOrder = this.renderOrder;
			if ( JSON.stringify( this.userData ) !== '{}' ) object.userData = this.userData;

			object.matrix = this.matrix.toArray();

			//

			function serialize( library, element ) {

				if ( library[ element.uuid ] === undefined ) {

					library[ element.uuid ] = element.toJSON( meta );

				}

				return element.uuid;

			}

			if ( this.geometry !== undefined ) {

				object.geometry = serialize( meta.geometries, this.geometry );

				var parameters = this.geometry.parameters;

				if ( parameters !== undefined && parameters.shapes !== undefined ) {

					var shapes = parameters.shapes;

					if ( Array.isArray( shapes ) ) {

						for ( var i = 0, l = shapes.length; i < l; i ++ ) {

							var shape = shapes[ i ];

							serialize( meta.shapes, shape );

						}

					} else {

						serialize( meta.shapes, shapes );

					}

				}

			}

			if ( this.material !== undefined ) {

				if ( Array.isArray( this.material ) ) {

					var uuids = [];

					for ( var i = 0, l = this.material.length; i < l; i ++ ) {

						uuids.push( serialize( meta.materials, this.material[ i ] ) );

					}

					object.material = uuids;

				} else {

					object.material = serialize( meta.materials, this.material );

				}

			}

			//

			if ( this.children.length > 0 ) {

				object.children = [];

				for ( var i = 0; i < this.children.length; i ++ ) {

					object.children.push( this.children[ i ].toJSON( meta ).object );

				}

			}

			if ( isRootObject ) {

				var geometries = extractFromCache( meta.geometries );
				var materials = extractFromCache( meta.materials );
				var textures = extractFromCache( meta.textures );
				var images = extractFromCache( meta.images );
				var shapes = extractFromCache( meta.shapes );

				if ( geometries.length > 0 ) output.geometries = geometries;
				if ( materials.length > 0 ) output.materials = materials;
				if ( textures.length > 0 ) output.textures = textures;
				if ( images.length > 0 ) output.images = images;
				if ( shapes.length > 0 ) output.shapes = shapes;

			}

			output.object = object;

			return output;

			// extract data from the cache hash
			// remove metadata on each item
			// and return as array
			function extractFromCache( cache ) {

				var values = [];
				for ( var key in cache ) {

					var data = cache[ key ];
					delete data.metadata;
					values.push( data );

				}
				return values;

			}

		},

 Scene对象：

	function Scene() {

		Object3D.call( this );  //构造方法当成一个普通方法来使用

		this.type = 'Scene';

		this.background = null;
		this.fog = null;
		this.overrideMaterial = null;

		this.autoUpdate = true; // checked by the renderer

	}

	Scene.prototype = Object.assign( Object.create( Object3D.prototype ), {

		constructor: Scene,

		copy: function ( source, recursive ) {

			Object3D.prototype.copy.call( this, source, recursive );

			if ( source.background !== null ) this.background = source.background.clone();
			if ( source.fog !== null ) this.fog = source.fog.clone();
			if ( source.overrideMaterial !== null ) this.overrideMaterial = source.overrideMaterial.clone();

			this.autoUpdate = source.autoUpdate;
			this.matrixAutoUpdate = source.matrixAutoUpdate;

			return this;

		},

		toJSON: function ( meta ) {

			var data = Object3D.prototype.toJSON.call( this, meta );

			if ( this.background !== null ) data.object.background = this.background.toJSON( meta );
			if ( this.fog !== null ) data.object.fog = this.fog.toJSON();

			return data;

		}

	} );

 Camera对象:

	function Camera() {

		Object3D.call( this );

		this.type = 'Camera';

		//视图矩阵
		this.matrixWorldInverse = new Matrix4();

		//投影矩阵
		this.projectionMatrix = new Matrix4();

		// 相机对象本质就是视图矩阵和投影矩阵，顶点坐标经过平移旋转缩放模型变换以后
		// 还需要经过视图、投影变换才能显示到画布上

	}
	Camera.prototype = Object.assign( Object.create( Object3D.prototype ), {

注意Camera对象的没有自己的toJSON，使用的父对象的

FR：徐海涛（hunk Xu）

QQ技术交流群：386476712

海涛高软
关注
专栏目录
Three.js - 场景对象 Scene 常用方法和属性
ithanmang
06-25 5277
Scene 对象是 three.js 的核心对象它继承自 Object3D 对象。 在场景中我们可以放置 对象 灯光。 构造器：Scene() 查看源码 源码版本: r93 function Scene() { // 继承Object3D对象 Object3D.call( this ); // 类型 this.type = 'Scene'; // ...
Three.js基础入门系列（九）--导入3D模型
热门推荐
技术专家
03-25 1万+
先来学习今天的知识——Three.js导入3D模型 复杂的3D模型（比如制作一个飞机模型）一般都是用第三方建模工具生成，然后加载到Three.js中。 01 常用建模制作工具 3Dmax 链接地址：https://www.autodesk.com.cn/products/3ds-max/overview?referrer=%2Fproducts%2F3ds-max%2Foverview 最常见的3D建模软件，广泛应用于广告、影视、工业设计、建筑设计、三维动画、多媒体制作、
02-THREE.JS 辅助线使用
weixin_30381793的博客
10-29 544
<!DOCTYPE html> <html> <head> <title></title> <script src="https://cdn.bootcss.com/three.js/r67/three.js"></script> <style> ...
threejs通过uuid选择对应map所处的key值，更改另外一个Map更新几何
最新发布
weixin_45705239的博客
07-17 165
javascript，我现在有个Map结构，存储的key对应的value是一个mesh数组，我现在拿到了一个mesh，我想通过uuid去寻找，他在那个key对应的value数组中，如果找到了，返回对应key值。some() 方法检查某些数组值是否通过了测试。随便记录一下用法吧，
THREE.JS学习笔记一：three.js中的对象
6块腹肌的博客
01-03 631
一个典型的 Three.js 程序至少包括渲染器（Renderer）、场景（Scene）、照相机 （Camera），以及在场景中创建的物体。 three.js中的一些重要对象： Cameras（照相机，控制投影方式）： Camera OrthographicCamera PerspectiveCamera Core（核心对象）： BufferGeometry Clock（用来记录时...
傻瓜开发——three.js 粒子组成字体
weixin_34005042的博客
03-12 1492
一、不废话，先上图。目标效果：使用亮的点，组成字。（完整代码，请滑到最后）二、核心思路①用THREE.Points画点。②用THREE.TextGeometry加载字体文件（不用渲染），然后获取它的vertices属性获取组成字体的点集。二、实现。①引入核心代码//核心js插件 <script src="../../js/lib/three.js"></script> //...
Three.js WebGL 绘制流程(一)
liyong748的专栏
08-17 3575
Three.js 中3D 物体 都继承于 Object3D; 而构造一个3D 物体 需要 提供两个对象 即Gemotry 几何体 和 Material 材质。 Gemotry 中 vertices 决定定点的 列表， face 决定面的构成， faceVertexUv 决定 纹理坐标 而Material 不同类型将会采用不同类型的shader 来绘制， 通过 设定Material 的
JavaScript3D特效集锦
10-27
2. **Three.js**：Three.js是基于WebGL的一个流行JavaScript库，它简化了WebGL的使用，提供了丰富的3D对象、材料、光照和动画功能。许多3D特效集锦中的示例都可能基于Three.js实现。 3. **3D几何形状**：在...
canvas-collection合集
04-07
在"canvas-collection合集"中，可能包含了一些常用的Canvas图形库和框架，如Fabric.js、Paper.js和Three.js等。这些库和框架提供了更高级别的抽象，简化了复杂的图形和动画的实现，同时提供了更多的功能，如对象模型...
react apollo_2020年的React + Apollo教程（真实示例）
cumi6497的博客
08-21 1588
react apolloIf you want to build apps with React and GraphQL, Apollo is the library you should use. 如果要使用React和GraphQL构建应用程序，则应使用Apollo库。 I've put together a comprehensive cheatsheet that goes throu...
【Three.js】九、three.js模型加载器
MAXLZ的博客
09-27 5844
【Three.js】九、three.js模型加载器
THREE.js（一）：搭建Threejs + typescript + webpack项目
ACG_Angel
12-31 3993
webpack + three.js + typescript + vue3 + elementui
three.js 笔记2
workhard0905的博客
09-29 783
场景是所有物体、光源和摄像机的容器 scene中最常用的方法和属性 add(object):用于向场景中添加对象，使用该方法还可以创建对象组 remove(object):使用该方法可以将对象从场景中移除 object为场景中对象的引用 children:用于返回一个场景所有对象的列表，包括摄像机和光源 getObjectByName:在创建对象的时 可以指定唯一的标识name 使用该方法可以查找特定名字的对象，当参数recursive设置为false时，在调用者子元素上查找，当参数recursi
让你快速了解threejs的一些操作的demo代码
那个西瓜有点甜
08-06 3304
里面部分代码来自webgl教程 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script sr...
ThreeJs基础常识
TW934440653的博客
10-13 8253
作者：桑榆 QQ：934440653 有问题，评论留言，或qq联系 前两章的尚未整理，后续整理完成，会补上。 第一章 场景 待更新… 第二章 相机 待更新… 第三章 光源 选择“license server” 输入：http://idea.imsxm.com/ 一、光源的种类 ** 名称 ** ** 描述 ...
three.js 源码注释（十七）Math/Math.js
omni360的专栏
11-20 3497
three.js 源码注释（十七）Math/Math.js Math对象的构造函数.包含了一些常用的数学方法. generateUUID()方法用来生成一个36位的uuid通用唯一识别码 (Universally Unique Identifier). clamp()方法用来限制x的值在a和b之间， 如果x小于a，返回a。 如果x大于b，返回b，否则返回x. sign()方法返回参数x的符号,如果大于0返回1,如果小于0返回-1,否则返回0. isPowerOfTwo()方法是否2的幂,如果该值是2的幂，
threejs 源码解析_Three.js源码阅读笔记(Object3D类)
weixin_39766258的博客
12-19 1120
这是Three.js源码阅读笔记的第二篇，直接开始。Core::Object3DObject3D似乎是Three.js框架中最重要的类，相当一部分其他的类都是继承自Object3D类，比如场景类、几何形体类、相机类、光照类等等：他们都是3D空间中的对象，所以称为Object3D类。Object3D构造函数如下：THREE.Object3D = function () {THREE.Object3D...
Three.js 入门篇-制作3D 动漫角色欣赏
u012609766的博客
09-12 6121
Three.js 入门篇-制作3D 动漫角色欣赏前言一、与卡通相关又与前端相关的主题及制作思路二、Three.js加载3D模型代码一般思路三、源码及关键注释参考引用交流与学习 前言 废话不多说，先上一波炫酷前端效果展示，点我去欣赏。最近有个任务，刚搞完一个卡通网 kt5.cn，没有一点点流量。 如何为卡通网带来点人气呢？ ，于是就有了这篇《Three.js 制作3D 动漫角色欣赏篇》，顺便想带旺一...
Three.js MESH对象详解：属性与方法解析
"Three.js是JavaScript的一个库，用于在Web浏览器中创建和展示3D图形。本文主要关注Three.js中的网格对象（MESH），包括其属性和方法，以帮助理解如何在场景中操纵和控制3D对象。" 在Three.js中，网格对象（Mesh）...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值