three.js添加一个圆柱体
2024-06-02 09:54:32
var option = new UI.Row();option.setClass('option');option.setTextContent('圆柱体');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);
Mesh构造方法：
var geometry = new THREE.CylinderBufferGeometry(1, 1, 1, 8, 1, false, 0, Math.PI * 2);
console.log(geometry);
console.log(new THREE.MeshStandardMaterial());
console.log(mesh);
editor.execute(new AddObjectCommand(mesh));
editor对象的addObject方法
下面是Object3D的一个原型方法
traverse: function ( callback ) {callback( this );var children = this.children;for (var i = 0, l = children.length; i < l; i ++) {children[i].traverse( callback );}},editor对象的select方法
下面是three.js中各对象的关系继承图
下面是Object3D的代码：
function Object3D() {Object.defineProperty( this, 'id', { value: _object3DId ++ } );this.uuid = MathUtils.generateUUID();this.name = '';this.type = 'Object3D';this.parent = null;this.children = [];this.up = Object3D.DefaultUp.clone();const position = new Vector3();const rotation = new Euler();const quaternion = new Quaternion();const scale = new Vector3( 1, 1, 1 );function onRotationChange() {quaternion.setFromEuler( rotation, false );}function onQuaternionChange() {rotation.setFromQuaternion( quaternion, undefined, false );}rotation._onChange( onRotationChange );quaternion._onChange( onQuaternionChange );Object.defineProperties( this, {position: {configurable: true,enumerable: true,value: position},rotation: {configurable: true,enumerable: true,value: rotation},quaternion: {configurable: true,enumerable: true,value: quaternion},scale: {configurable: true,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.animations = [];this.userData = {};}Object3D.DefaultUp = new Vector3( 0, 1, 0 );
Object3D.DefaultMatrixAutoUpdate = true;Object3D.prototype = Object.assign( Object.create( EventDispatcher.prototype ), {constructor: Object3D,isObject3D: true,onBeforeRender: function () {},onAfterRender: function () {},applyMatrix4: function ( matrix ) {if ( this.matrixAutoUpdate ) this.updateMatrix();this.matrix.premultiply( matrix );this.matrix.decompose( this.position, this.quaternion, this.scale );},applyQuaternion: function ( q ) {this.quaternion.premultiply( q );return this;},setRotationFromAxisAngle: function ( axis, angle ) {// assumes axis is normalizedthis.quaternion.setFromAxisAngle( axis, angle );},setRotationFromEuler: function ( euler ) {this.quaternion.setFromEuler( euler, true );},setRotationFromMatrix: function ( m ) {// assumes the upper 3x3 of m is a pure rotation matrix (i.e, unscaled)this.quaternion.setFromRotationMatrix( m );},setRotationFromQuaternion: function ( q ) {// assumes q is normalizedthis.quaternion.copy( q );},rotateOnAxis: function ( axis, angle ) {// rotate object on axis in object space// axis is assumed to be normalized_q1.setFromAxisAngle( axis, angle );this.quaternion.multiply( _q1 );return this;},rotateOnWorldAxis: function ( axis, angle ) {// rotate object on axis in world space// axis is assumed to be normalized// method assumes no rotated parent_q1.setFromAxisAngle( axis, angle );this.quaternion.premultiply( _q1 );return this;},rotateX: function ( angle ) {return this.rotateOnAxis( _xAxis, angle );},rotateY: function ( angle ) {return this.rotateOnAxis( _yAxis, angle );},rotateZ: function ( angle ) {return this.rotateOnAxis( _zAxis, angle );},translateOnAxis: function ( axis, distance ) {// translate object by distance along axis in object space// axis is assumed to be normalized_v1$2.copy( axis ).applyQuaternion( this.quaternion );this.position.add( _v1$2.multiplyScalar( distance ) );return this;},translateX: function ( distance ) {return this.translateOnAxis( _xAxis, distance );},translateY: function ( distance ) {return this.translateOnAxis( _yAxis, distance );},translateZ: function ( distance ) {return this.translateOnAxis( _zAxis, distance );},localToWorld: function ( vector ) {return vector.applyMatrix4( this.matrixWorld );},worldToLocal: function ( vector ) {return vector.applyMatrix4( _m1$1.copy( this.matrixWorld ).invert() );},lookAt: function ( x, y, z ) {// This method does not support objects having non-uniformly-scaled parent(s)if ( x.isVector3 ) {_target.copy( x );} else {_target.set( x, y, z );}const parent = this.parent;this.updateWorldMatrix( true, false );_position.setFromMatrixPosition( this.matrixWorld );if ( this.isCamera || this.isLight ) {_m1$1.lookAt( _position, _target, this.up );} else {_m1$1.lookAt( _target, _position, this.up );}this.quaternion.setFromRotationMatrix( _m1$1 );if ( parent ) {_m1$1.extractRotation( parent.matrixWorld );_q1.setFromRotationMatrix( _m1$1 );this.quaternion.premultiply( _q1.invert() );}},add: function ( object ) {if ( arguments.length > 1 ) {for ( let i = 0; i < arguments.length; i ++ ) {this.add( arguments[ i ] );}return this;}if ( object === this ) {console.error( 'THREE.Object3D.add: object can\'t be added as a child of itself.', object );return this;}if ( object && object.isObject3D ) {if ( object.parent !== null ) {object.parent.remove( object );}object.parent = this;this.children.push( object );object.dispatchEvent( _addedEvent );} else {console.error( 'THREE.Object3D.add: object not an instance of THREE.Object3D.', object );}return this;},remove: function ( object ) {if ( arguments.length > 1 ) {for ( let i = 0; i < arguments.length; i ++ ) {this.remove( arguments[ i ] );}return this;}const index = this.children.indexOf( object );if ( index !== - 1 ) {object.parent = null;this.children.splice( index, 1 );object.dispatchEvent( _removedEvent );}return this;},clear: function () {for ( let i = 0; i < this.children.length; i ++ ) {const object = this.children[ i ];object.parent = null;object.dispatchEvent( _removedEvent );}this.children.length = 0;return this;},attach: function ( object ) {// adds object as a child of this, while maintaining the object's world transformthis.updateWorldMatrix( true, false );_m1$1.copy( this.matrixWorld ).invert();if ( object.parent !== null ) {object.parent.updateWorldMatrix( true, false );_m1$1.multiply( object.parent.matrixWorld );}object.applyMatrix4( _m1$1 );object.updateWorldMatrix( false, false );this.add( object );return this;},getObjectById: function ( id ) {return this.getObjectByProperty( 'id', id );},getObjectByName: function ( name ) {return this.getObjectByProperty( 'name', name );},getObjectByProperty: function ( name, value ) {if ( this[ name ] === value ) return this;for ( let i = 0, l = this.children.length; i < l; i ++ ) {const child = this.children[ i ];const object = child.getObjectByProperty( name, value );if ( object !== undefined ) {return object;}}return undefined;},getWorldPosition: function ( target ) {if ( target === undefined ) {console.warn( 'THREE.Object3D: .getWorldPosition() target is now required' );target = new Vector3();}this.updateWorldMatrix( true, false );return target.setFromMatrixPosition( this.matrixWorld );},getWorldQuaternion: function ( target ) {if ( target === undefined ) {console.warn( 'THREE.Object3D: .getWorldQuaternion() target is now required' );target = new Quaternion();}this.updateWorldMatrix( true, false );this.matrixWorld.decompose( _position, target, _scale );return target;},getWorldScale: function ( target ) {if ( target === undefined ) {console.warn( 'THREE.Object3D: .getWorldScale() target is now required' );target = new Vector3();}this.updateWorldMatrix( true, false );this.matrixWorld.decompose( _position, _quaternion$2, target );return target;},getWorldDirection: function ( target ) {if ( target === undefined ) {console.warn( 'THREE.Object3D: .getWorldDirection() target is now required' );target = new Vector3();}this.updateWorldMatrix( true, false );const e = this.matrixWorld.elements;return target.set( e[ 8 ], e[ 9 ], e[ 10 ] ).normalize();},raycast: function () {},traverse: function ( callback ) {callback( this );const children = this.children;for ( let i = 0, l = children.length; i < l; i ++ ) {children[ i ].traverse( callback );}},traverseVisible: function ( callback ) {if ( this.visible === false ) return;callback( this );const children = this.children;for ( let i = 0, l = children.length; i < l; i ++ ) {children[ i ].traverseVisible( callback );}},traverseAncestors: function ( callback ) {const parent = this.parent;if ( parent !== null ) {callback( parent );parent.traverseAncestors( callback );}},updateMatrix: function () {this.matrix.compose( this.position, this.quaternion, this.scale );this.matrixWorldNeedsUpdate = true;},updateMatrixWorld: function ( force ) {if ( this.matrixAutoUpdate ) this.updateMatrix();if ( this.matrixWorldNeedsUpdate || force ) {if ( this.parent === null ) {this.matrixWorld.copy( this.matrix );} else {this.matrixWorld.multiplyMatrices( this.parent.matrixWorld, this.matrix );}this.matrixWorldNeedsUpdate = false;force = true;}// update childrenconst children = this.children;for ( let i = 0, l = children.length; i < l; i ++ ) {children[ i ].updateMatrixWorld( force );}},updateWorldMatrix: function ( updateParents, updateChildren ) {const parent = this.parent;if ( updateParents === true && parent !== null ) {parent.updateWorldMatrix( true, false );}if ( this.matrixAutoUpdate ) this.updateMatrix();if ( this.parent === null ) {this.matrixWorld.copy( this.matrix );} else {this.matrixWorld.multiplyMatrices( this.parent.matrixWorld, this.matrix );}// update childrenif ( updateChildren === true ) {const children = this.children;for ( let i = 0, l = children.length; i < l; i ++ ) {children[ i ].updateWorldMatrix( false, true );}}},toJSON: function ( meta ) {// meta is a string when called from JSON.stringifyconst isRootObject = ( meta === undefined || typeof meta === 'string' );const 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 objmeta = {geometries: {},materials: {},textures: {},images: {},shapes: {},skeletons: {},animations: {}};output.metadata = {version: 4.5,type: 'Object',generator: 'Object3D.toJSON'};}// standard Object3D serializationconst 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.layers = this.layers.mask;object.matrix = this.matrix.toArray();if ( this.matrixAutoUpdate === false ) object.matrixAutoUpdate = false;// object specific propertiesif ( this.isInstancedMesh ) {object.type = 'InstancedMesh';object.count = this.count;object.instanceMatrix = this.instanceMatrix.toJSON();}//function serialize( library, element ) {if ( library[ element.uuid ] === undefined ) {library[ element.uuid ] = element.toJSON( meta );}return element.uuid;}if ( this.isMesh || this.isLine || this.isPoints ) {object.geometry = serialize( meta.geometries, this.geometry );const parameters = this.geometry.parameters;if ( parameters !== undefined && parameters.shapes !== undefined ) {const shapes = parameters.shapes;if ( Array.isArray( shapes ) ) {for ( let i = 0, l = shapes.length; i < l; i ++ ) {const shape = shapes[ i ];serialize( meta.shapes, shape );}} else {serialize( meta.shapes, shapes );}}}if ( this.isSkinnedMesh ) {object.bindMode = this.bindMode;object.bindMatrix = this.bindMatrix.toArray();if ( this.skeleton !== undefined ) {serialize( meta.skeletons, this.skeleton );object.skeleton = this.skeleton.uuid;}}if ( this.material !== undefined ) {if ( Array.isArray( this.material ) ) {const uuids = [];for ( let 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 ( let i = 0; i < this.children.length; i ++ ) {object.children.push( this.children[ i ].toJSON( meta ).object );}}//if ( this.animations.length > 0 ) {object.animations = [];for ( let i = 0; i < this.animations.length; i ++ ) {const animation = this.animations[ i ];object.animations.push( serialize( meta.animations, animation ) );}}if ( isRootObject ) {const geometries = extractFromCache( meta.geometries );const materials = extractFromCache( meta.materials );const textures = extractFromCache( meta.textures );const images = extractFromCache( meta.images );const shapes = extractFromCache( meta.shapes );const skeletons = extractFromCache( meta.skeletons );const animations = extractFromCache( meta.animations );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;if ( skeletons.length > 0 ) output.skeletons = skeletons;if ( animations.length > 0 ) output.animations = animations;}output.object = object;return output;// extract data from the cache hash// remove metadata on each item// and return as arrayfunction extractFromCache( cache ) {const values = [];for ( const key in cache ) {const data = cache[ key ];delete data.metadata;values.push( data );}return values;}},clone: function ( recursive ) {return new this.constructor().copy( this, recursive );},copy: function ( source, recursive = true ) {this.name = source.name;this.up.copy( source.up );this.position.copy( source.position );this.rotation.order = source.rotation.order;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 ( let i = 0; i < source.children.length; i ++ ) {const child = source.children[ i ];this.add( child.clone() );}}return this;}} );FR：徐海涛（hunk Xu)
QQ技术交流群：386476712
three.js添加一个圆柱体相关推荐
- 获取js里添加的css文件,用JS添加一个css文件
我在这里发现了一些关于我的问题的问题,但我无法使用它. 通过JS点击它们时我会改变的CSS属性,JQuery的用JS添加一个css文件 Green Red /*$(document).ready(fu ...
- js给对象添加变量属性 js 更改对象中的属性名 数组对象中每个对象添加一个字段-map用法和forEarch用法
js给对象添加变量属性 & js 更改对象中的属性名 & 数组对象中每个对象添加一个字段-map用法和forEarch用法 1.js给对象添加变量属性 1.js创建一个对象或者在原有对 ...
- jquery js 设置 div 的内容，给 div 添加一个属性
设置 div 的内容的写法: jquery 的写法: $( "#div1" ).html( "aa" ); // 将 div1 元素里面的 html ...
- NProgress.js - 前端全站进度条插件 - 给你的网站添加一个加载进度条
0x00 前言 前几天给博客换了@Veen Zhao大佬的Cuteen主题,非常好看,但是因为不想让自己的博客和其他人的千篇一律,于是决定在Cuteen主题的前提下逐渐设计一些自己需要的东西.正巧前几 ...
- （转）使用Three.js制作一个基本的3D飞行游戏
今天,我们将使用Three.js创建一个简单的3D飞机,使WebGL更简单.由于GLSL的复杂性和语法,WebGL对许多开发人员来说是一个相当陌生的世界.但是通过Three.js,浏览器中的3D变得非 ...
- 用three.js写一个小场景
上次我们用three.js写了一个下雨的动画,主要是用粒子.这次是用three.js搭建了一个小场景. 项目地址依然是:https://github.com/alasolala/threejs-tut ...
- js添加网页水印和three.js场景中加水印
我们在日常网页开发的时候,可能想给自己的网页或者canvas里面添加水印,增添个人标记,我这里分为普通静态html页面和threejs中3d场景里面添加水印功能. 一 静态html页面添加水印 你只需 ...
- 使用 ale.js 制作一个小而美的表格编辑器（2）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
- 【Part2】用JS写一个Blog （node + vue + mongoDB）
[Part1]用JS写一个Blog (node + vue + mongoDB) 上一节前后端项目分别初始化完成,这一小节我就从后端项目开始写.实现mongoDB数据库的连接. 整理后端目录 下面是通 ...
最新文章
- 独家 | 一文读懂机器学习中的贝叶斯统计学
- mysql if countif_关于EXCEL IF COUNTIF 在查找数据的用法
- Android HAL 层，三个重要的结构体的源码~
- 详细设计说明书示例_专利说明书常用句型汇总
- STM32 ADC 单次模式、连续模式、扫描模式（转载）
- 2015总结及2016计划
- php+静态变量的初始值,php 静态变量的初始化
- 迅捷路由器FW325R的无线桥接
- 从苹果店员到机器学习工程师：学习AI，我是这样起步的
- 【BZOJ4196】[Noi2015]软件包管理器 树链剖分
- 基金侧袋机制: 指引与操作规范
- 巧用RoboCopy工具
- 9008刷机教程oppo_OPPO手机解锁教程
- 一个优化好的、成熟的代购网站需要哪些功能，操作流程又是怎么样的？
- 可以使用ActualHeight来判断textblock是否已经trimming
- Linux安装软件提示MD5不同,如何在Debian/Ubuntu Linux中校验已安装软件包的MD5和？
- 重新认识LODGroup
- 同等学力计算机科学与技术真题-2006年
- 「Adobe国际认证」书籍封面设计需要掌握的知识技巧？
- TouchGFX- 1 - 简介与安装