diff --git a/threed/src/main/resources/template/js/threeedit/threeedit.js b/threed/src/main/resources/template/js/threeedit/threeedit.js index 73168e0796a755f7b2ff47dddc53d7ef19bd4248..42d07725bd4158998ce90abc200f291b55067ea6 100644 --- a/threed/src/main/resources/template/js/threeedit/threeedit.js +++ b/threed/src/main/resources/template/js/threeedit/threeedit.js @@ -8,6 +8,9 @@ layui.config({ winui.renderColor(); var index = parent.layer.getFrameIndex(window.name); + // 添加方向光光源 + threeUtil.initDirectionalLight(); + // 加入模型到场景 $("body").on("click", "#modeList .item", function(e){ var url = $(this).attr("src"); @@ -19,22 +22,10 @@ layui.config({ matchingLanguage(); - //加入地板到场景 + // 加入地板到场景 $("body").on("click", "#floorList .item", function(e){ var url = $(this).attr("src"); - var loader = new THREE.TextureLoader(); - //加载一个资源 - var groundTexture = loader.load(url); - console.log(editor); - console.log(groundTexture); - groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping; - groundTexture.repeat.set(5, 5); - //地基材料 - var groundMaterial = new THREE.MeshLambertMaterial({ map: groundTexture }); - var mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(30, 30), groundMaterial); - mesh.rotation.x = -Math.PI / 2; - mesh.receiveShadow = true; - editor.scene.add(mesh); + threeUtil.initFloor(url); }); }); diff --git a/threed/src/main/resources/template/tpl/threeedit/js/Config.js b/threed/src/main/resources/template/tpl/threeedit/js/Config.js index 5be05e3b651c454b2f5ecc8dbe24f019ffa25a23..35419ccefbf8b162bb9f061b0b940790050cff5b 100644 --- a/threed/src/main/resources/template/tpl/threeedit/js/Config.js +++ b/threed/src/main/resources/template/tpl/threeedit/js/Config.js @@ -10,16 +10,13 @@ function Config() { 'project/title': '', 'project/editable': false, 'project/vr': false, - 'project/renderer/antialias': true, 'project/renderer/shadows': true, 'project/renderer/shadowType': 1, // PCF 'project/renderer/physicallyCorrectLights': false, 'project/renderer/toneMapping': 0, // NoToneMapping 'project/renderer/toneMappingExposure': 1, - 'settings/history': false, - 'settings/shortcuts/translate': 'w', 'settings/shortcuts/rotate': 'e', 'settings/shortcuts/scale': 'r', @@ -28,49 +25,30 @@ function Config() { }; if ( window.localStorage[ name ] === undefined ) { - window.localStorage[ name ] = JSON.stringify( storage ); - } else { - var data = JSON.parse( window.localStorage[ name ] ); - for ( var key in data ) { - storage[ key ] = data[ key ]; - } - } return { - getKey: function ( key ) { - return storage[ key ]; - }, setKey: function () { // key, value, key, value ... - for ( var i = 0, l = arguments.length; i < l; i += 2 ) { - storage[ arguments[ i ] ] = arguments[ i + 1 ]; - } - window.localStorage[ name ] = JSON.stringify( storage ); - console.log( '[' + /\d\d\:\d\d\:\d\d/.exec( new Date() )[ 0 ] + ']', 'Saved config to LocalStorage.' ); - }, clear: function () { - delete window.localStorage[ name ]; - } - }; } diff --git a/threed/src/main/resources/template/tpl/threeedit/js/Editor.js b/threed/src/main/resources/template/tpl/threeedit/js/Editor.js index 393a621096942bfd5655747dc4ea38da307f23cd..862361276e5d83e521cf59e681406525dc9e4a65 100644 --- a/threed/src/main/resources/template/tpl/threeedit/js/Editor.js +++ b/threed/src/main/resources/template/tpl/threeedit/js/Editor.js @@ -550,54 +550,34 @@ Editor.prototype = { }, selectById: function ( id ) { - if ( id === this.camera.id ) { - this.select( this.camera ); return; - } - this.select( this.scene.getObjectById( id ) ); - }, selectByUuid: function ( uuid ) { - var scope = this; - this.scene.traverse( function ( child ) { - if ( child.uuid === uuid ) { - scope.select( child ); - } - } ); - }, deselect: function () { - this.select( null ); - }, focus: function ( object ) { - if ( object !== undefined ) { - this.signals.objectFocused.dispatch( object ); - } - }, focusById: function ( id ) { - this.focus( this.scene.getObjectById( id ) ); - }, clear: function () { @@ -626,58 +606,38 @@ Editor.prototype = { this.materials = {}; this.textures = {}; this.scripts = {}; - this.materialsRefCounter.clear(); - this.animations = {}; this.mixer.stopAllAction(); - this.deselect(); - this.signals.editorCleared.dispatch(); - }, - // - fromJSON: async function ( json ) { - var loader = new THREE.ObjectLoader(); var camera = await loader.parseAsync( json.camera ); this.camera.copy( camera ); this.signals.cameraResetted.dispatch(); - this.history.fromJSON( json.history ); this.scripts = json.scripts; - this.setScene( await loader.parseAsync( json.scene ) ); }, toJSON: function () { - // scripts clean up - var scene = this.scene; var scripts = this.scripts; for ( var key in scripts ) { - var script = scripts[ key ]; - if ( script.length === 0 || scene.getObjectByProperty( 'uuid', key ) === undefined ) { - delete scripts[ key ]; - } - } - // - return { - metadata: {}, project: { shadows: this.config.getKey( 'project/renderer/shadows' ), @@ -691,33 +651,23 @@ Editor.prototype = { scene: this.scene.toJSON(), scripts: this.scripts, history: this.history.toJSON() - }; - }, objectByUuid: function ( uuid ) { - return this.scene.getObjectByProperty( 'uuid', uuid, true ); - }, execute: function ( cmd, optionalName ) { - this.history.execute( cmd, optionalName ); - }, undo: function () { - this.history.undo(); - }, redo: function () { - this.history.redo(); - } }; diff --git a/threed/src/main/resources/template/tpl/threeedit/js/Loader.js b/threed/src/main/resources/template/tpl/threeedit/js/Loader.js index ca5ed292b6ceb045c81129e31762fa30d196cdb6..c6f1a8786cb98371de1f4219ea03f430e383dfd3 100644 --- a/threed/src/main/resources/template/tpl/threeedit/js/Loader.js +++ b/threed/src/main/resources/template/tpl/threeedit/js/Loader.js @@ -26,40 +26,23 @@ function Loader( editor ) { }; this.loadFiles = function ( files, filesMap ) { - if ( files.length > 0 ) { - var filesMap = filesMap || LoaderUtils.createFilesMap( files ); - var manager = new THREE.LoadingManager(); manager.setURLModifier( function ( url ) { - url = url.replace( /^(\.?\/)/, '' ); // remove './' - var file = filesMap[ url ]; - if ( file ) { - console.log( 'Loading', url ); - return URL.createObjectURL( file ); - } - return url; - } ); - manager.addHandler( /\.tga$/i, new TGALoader() ); - for ( var i = 0; i < files.length; i ++ ) { - scope.loadFile( files[ i ], manager ); - } - } - }; this.loadFile = function ( file, manager ) { @@ -78,28 +61,18 @@ function Loader( editor ) { } ); switch ( extension ) { - case '3dm': - reader.addEventListener( 'load', async function ( event ) { - var contents = event.target.result; - var { Rhino3dmLoader } = await import( '../../examples/jsm/loaders/3DMLoader.js' ); - var loader = new Rhino3dmLoader(); loader.setLibraryPath( '../examples/jsm/libs/rhino3dm/' ); loader.parse( contents, function ( object ) { - editor.execute( new AddObjectCommand( editor, object ) ); - } ); - }, false ); reader.readAsArrayBuffer( file ); - break; - case '3ds': reader.addEventListener( 'load', async function ( event ) { @@ -149,23 +122,15 @@ function Loader( editor ) { break; case 'dae': - reader.addEventListener( 'load', async function ( event ) { - var contents = event.target.result; - var { ColladaLoader } = await import( '../../examples/jsm/loaders/ColladaLoader.js' ); - var loader = new ColladaLoader( manager ); var collada = loader.parse( contents ); - collada.scene.name = filename; - editor.execute( new AddObjectCommand( editor, collada.scene ) ); - }, false ); reader.readAsText( file ); - break; case 'drc': @@ -257,45 +222,28 @@ function Loader( editor ) { break; case 'gltf': - reader.addEventListener( 'load', async function ( event ) { - var contents = event.target.result; - var loader; - if ( isGLTF1( contents ) ) { - alert( 'Import of glTF asset not possible. Only versions >= 2.0 are supported. Please try to upgrade the file to glTF 2.0 using glTF-Pipeline.' ); - } else { - var { DRACOLoader } = await import( '../../examples/jsm/loaders/DRACOLoader.js' ); var { GLTFLoader } = await import( '../../examples/jsm/loaders/GLTFLoader.js' ); - var dracoLoader = new DRACOLoader(); dracoLoader.setDecoderPath( '../examples/js/libs/draco/gltf/' ); - loader = new GLTFLoader( manager ); loader.setDRACOLoader( dracoLoader ); - } - loader.parse( contents, '', function ( result ) { - var scene = result.scene; scene.name = filename; - scene.animations.push( ...result.animations ); editor.execute( new AddObjectCommand( editor, scene ) ); - } ); - }, false ); reader.readAsArrayBuffer( file ); - break; - case 'js': case 'json': diff --git a/threed/src/main/resources/template/tpl/threeedit/js/Viewport.js b/threed/src/main/resources/template/tpl/threeedit/js/Viewport.js index a1eaecd46fc2287d953b905d29d2a091ea376862..c94baf955af5f84ff6820475ce10fe32a77ee3e0 100644 --- a/threed/src/main/resources/template/tpl/threeedit/js/Viewport.js +++ b/threed/src/main/resources/template/tpl/threeedit/js/Viewport.js @@ -28,8 +28,6 @@ function Viewport( editor ) { container.add( new ViewportCamera( editor ) ); container.add( new ViewportInfo( editor ) ); - // - var renderer = null; var pmremGenerator = null; @@ -41,15 +39,15 @@ function Viewport( editor ) { var objects = []; // helpers - var grid = new THREE.Group(); - - var grid1 = new THREE.GridHelper( 30, 30, 0x888888 ); + // 网格为30*30 + var grid1 = new THREE.GridHelper(threeUtil.gridWidth, threeUtil.gridHeight, 0x888888); grid1.material.color.setHex( 0x888888 ); grid1.material.vertexColors = false; grid.add( grid1 ); - var grid2 = new THREE.GridHelper( 30, 6, 0x222222 ); + // 将网格划分为6个大格子 + var grid2 = new THREE.GridHelper(threeUtil.gridWidth, threeUtil.gridBigCell, 0x222222); grid2.material.color.setHex( 0x222222 ); grid2.material.depthFunc = THREE.AlwaysDepth; grid2.material.vertexColors = false; @@ -58,8 +56,6 @@ function Viewport( editor ) { var viewHelper = new ViewHelper( camera, container ); var vr = new VR( editor ); - // - var box = new THREE.Box3(); var selectionBox = new THREE.BoxHelper(); @@ -74,83 +70,48 @@ function Viewport( editor ) { var transformControls = new TransformControls( camera, container.dom ); transformControls.addEventListener( 'change', function () { - var object = transformControls.object; - if ( object !== undefined ) { - selectionBox.setFromObject( object ); - var helper = editor.helpers[ object.id ]; - if ( helper !== undefined && helper.isSkeletonHelper !== true ) { - helper.update(); - } - signals.refreshSidebarObject3D.dispatch( object ); - } - render(); - } ); - transformControls.addEventListener( 'mouseDown', function () { + transformControls.addEventListener( 'mouseDown', function () { var object = transformControls.object; - objectPositionOnDown = object.position.clone(); objectRotationOnDown = object.rotation.clone(); objectScaleOnDown = object.scale.clone(); - controls.enabled = false; - } ); - transformControls.addEventListener( 'mouseUp', function () { + transformControls.addEventListener( 'mouseUp', function () { var object = transformControls.object; - if ( object !== undefined ) { - switch ( transformControls.getMode() ) { - case 'translate': - if ( ! objectPositionOnDown.equals( object.position ) ) { - editor.execute( new SetPositionCommand( editor, object, object.position, objectPositionOnDown ) ); - } - break; - case 'rotate': - if ( ! objectRotationOnDown.equals( object.rotation ) ) { - editor.execute( new SetRotationCommand( editor, object, object.rotation, objectRotationOnDown ) ); - } - break; - case 'scale': - if ( ! objectScaleOnDown.equals( object.scale ) ) { - editor.execute( new SetScaleCommand( editor, object, object.scale, objectScaleOnDown ) ); - } - break; - } - } - controls.enabled = true; - } ); sceneHelpers.add( transformControls ); @@ -163,20 +124,14 @@ function Viewport( editor ) { // events function updateAspectRatio() { - camera.aspect = container.dom.offsetWidth / container.dom.offsetHeight; camera.updateProjectionMatrix(); - } function getIntersects( point, objects ) { - mouse.set( ( point.x * 2 ) - 1, - ( point.y * 2 ) + 1 ); - raycaster.setFromCamera( mouse, camera ); - return raycaster.intersectObjects( objects ); - } var onDownPosition = new THREE.Vector2(); @@ -184,107 +139,65 @@ function Viewport( editor ) { var onDoubleClickPosition = new THREE.Vector2(); function getMousePosition( dom, x, y ) { - var rect = dom.getBoundingClientRect(); return [ ( x - rect.left ) / rect.width, ( y - rect.top ) / rect.height ]; - } function handleClick() { - if ( onDownPosition.distanceTo( onUpPosition ) === 0 ) { - var intersects = getIntersects( onUpPosition, objects ); - if ( intersects.length > 0 ) { - var object = intersects[ 0 ].object; - if ( object.userData.object !== undefined ) { - // helper - editor.select( object.userData.object ); - } else { - editor.select( object ); - } - } else { - editor.select( null ); - } - render(); - } - } function onMouseDown( event ) { - // event.preventDefault(); - var array = getMousePosition( container.dom, event.clientX, event.clientY ); onDownPosition.fromArray( array ); - document.addEventListener( 'mouseup', onMouseUp, false ); - } function onMouseUp( event ) { - var array = getMousePosition( container.dom, event.clientX, event.clientY ); onUpPosition.fromArray( array ); - handleClick(); - document.removeEventListener( 'mouseup', onMouseUp, false ); - } function onTouchStart( event ) { - var touch = event.changedTouches[ 0 ]; - var array = getMousePosition( container.dom, touch.clientX, touch.clientY ); onDownPosition.fromArray( array ); - document.addEventListener( 'touchend', onTouchEnd, false ); - } function onTouchEnd( event ) { - var touch = event.changedTouches[ 0 ]; - var array = getMousePosition( container.dom, touch.clientX, touch.clientY ); onUpPosition.fromArray( array ); - handleClick(); - document.removeEventListener( 'touchend', onTouchEnd, false ); - } function onDoubleClick( event ) { - var array = getMousePosition( container.dom, event.clientX, event.clientY ); onDoubleClickPosition.fromArray( array ); - var intersects = getIntersects( onDoubleClickPosition, objects ); - if ( intersects.length > 0 ) { - var intersect = intersects[ 0 ]; - signals.objectFocused.dispatch( intersect.object ); - } - } container.dom.addEventListener( 'mousedown', onMouseDown, false ); @@ -331,295 +244,174 @@ function Viewport( editor ) { } ); signals.rendererUpdated.add( function () { - scene.traverse( function ( child ) { - if ( child.material !== undefined ) { - child.material.needsUpdate = true; - } - } ); - render(); - } ); + // 创建渲染器 signals.rendererCreated.add( function ( newRenderer ) { - if ( renderer !== null ) { - renderer.setAnimationLoop( null ); renderer.dispose(); pmremGenerator.dispose(); - container.dom.removeChild( renderer.domElement ); - } - renderer = newRenderer; - + // 首先渲染器开启阴影 + renderer.shadowMap.enabled = true; renderer.setAnimationLoop( animate ); renderer.setClearColor( 0xaaaaaa ); - if ( window.matchMedia ) { - var mediaQuery = window.matchMedia( '(prefers-color-scheme: dark)' ); mediaQuery.addListener( function ( event ) { - renderer.setClearColor( event.matches ? 0x333333 : 0xaaaaaa ); updateGridColors( grid1, grid2, event.matches ? [ 0x222222, 0x888888 ] : [ 0x888888, 0x282828 ] ); - render(); - } ); - renderer.setClearColor( mediaQuery.matches ? 0x333333 : 0xaaaaaa ); updateGridColors( grid1, grid2, mediaQuery.matches ? [ 0x222222, 0x888888 ] : [ 0x888888, 0x282828 ] ); - } - renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( container.dom.offsetWidth, container.dom.offsetHeight ); - pmremGenerator = new THREE.PMREMGenerator( renderer ); pmremGenerator.compileEquirectangularShader(); - container.dom.appendChild( renderer.domElement ); - render(); - } ); signals.sceneGraphChanged.add( function () { - render(); - } ); signals.cameraChanged.add( function () { - render(); - } ); signals.objectSelected.add( function ( object ) { - selectionBox.visible = false; transformControls.detach(); - if ( object !== null && object !== scene && object !== camera ) { - box.setFromObject( object ); - if ( box.isEmpty() === false ) { - selectionBox.setFromObject( object ); selectionBox.visible = true; - } - transformControls.attach( object ); - } - render(); - } ); signals.objectFocused.add( function ( object ) { - controls.focus( object ); - } ); signals.geometryChanged.add( function ( object ) { - if ( object !== undefined ) { - selectionBox.setFromObject( object ); - } - render(); - } ); signals.objectAdded.add( function ( object ) { - object.traverse( function ( child ) { - objects.push( child ); - } ); - } ); signals.objectChanged.add( function ( object ) { - if ( editor.selected === object ) { - selectionBox.setFromObject( object ); - } - if ( object.isPerspectiveCamera ) { - object.updateProjectionMatrix(); - } - if ( editor.helpers[ object.id ] !== undefined ) { - editor.helpers[ object.id ].update(); - } - render(); - } ); signals.objectRemoved.add( function ( object ) { - controls.enabled = true; // see #14180 if ( object === transformControls.object ) { - transformControls.detach(); - } - object.traverse( function ( child ) { - objects.splice( objects.indexOf( child ), 1 ); - } ); - } ); signals.helperAdded.add( function ( object ) { - var picker = object.getObjectByName( 'picker' ); - if ( picker !== undefined ) { - objects.push( picker ); - } - } ); signals.helperRemoved.add( function ( object ) { - var picker = object.getObjectByName( 'picker' ); - if ( picker !== undefined ) { - objects.splice( objects.indexOf( picker ), 1 ); - } - } ); signals.materialChanged.add( function () { - render(); - } ); signals.animationStopped.add( function () { - render(); - } ); // background - signals.sceneBackgroundChanged.add( function ( backgroundType, backgroundColor, backgroundTexture, backgroundEquirectangularTexture ) { - switch ( backgroundType ) { - case 'None': - scene.background = null; - break; - case 'Color': - scene.background = new THREE.Color( backgroundColor ); - break; - case 'Texture': - if ( backgroundTexture ) { - scene.background = backgroundTexture; - } - break; - case 'Equirectangular': - if ( backgroundEquirectangularTexture ) { - backgroundEquirectangularTexture.mapping = THREE.EquirectangularReflectionMapping; scene.background = backgroundEquirectangularTexture; - } - break; - } - render(); - } ); // environment - signals.sceneEnvironmentChanged.add( function ( environmentType, environmentEquirectangularTexture ) { - switch ( environmentType ) { - case 'None': - scene.environment = null; - break; - case 'Equirectangular': - scene.environment = null; - if ( environmentEquirectangularTexture ) { - scene.environment = pmremGenerator.fromEquirectangular( environmentEquirectangularTexture ).texture; - } - break; - case 'ModelViewer': - scene.environment = pmremGenerator.fromScene( new RoomEnvironment(), 0.04 ).texture; - break; - } - render(); - } ); - // fog - signals.sceneFogChanged.add( function ( fogType, fogColor, fogNear, fogFar, fogDensity ) { - switch ( fogType ) { - case 'None': scene.fog = null; break; @@ -631,15 +423,11 @@ function Viewport( editor ) { break; } - render(); - } ); signals.sceneFogSettingsChanged.add( function ( fogType, fogColor, fogNear, fogFar, fogDensity ) { - switch ( fogType ) { - case 'Fog': scene.fog.color.setHex( fogColor ); scene.fog.near = fogNear; @@ -649,136 +437,86 @@ function Viewport( editor ) { scene.fog.color.setHex( fogColor ); scene.fog.density = fogDensity; break; - } - render(); - } ); signals.viewportCameraChanged.add( function () { - var viewportCamera = editor.viewportCamera; - if ( viewportCamera.isPerspectiveCamera ) { - viewportCamera.aspect = editor.camera.aspect; viewportCamera.projectionMatrix.copy( editor.camera.projectionMatrix ); - } else if ( viewportCamera.isOrthographicCamera ) { - // TODO - } - // disable EditorControls when setting a user camera - controls.enabled = ( viewportCamera === editor.camera ); - render(); - } ); signals.exitedVR.add( render ); - // - signals.windowResize.add( function () { - updateAspectRatio(); - renderer.setSize( container.dom.offsetWidth, container.dom.offsetHeight ); - render(); - } ); signals.showGridChanged.add( function ( showGrid ) { - grid.visible = showGrid; render(); - } ); signals.showHelpersChanged.add( function ( showHelpers ) { - showSceneHelpers = showHelpers; transformControls.enabled = showHelpers; - render(); - } ); signals.cameraResetted.add( updateAspectRatio ); // animations - var clock = new THREE.Clock(); // only used for animations function animate() { - var mixer = editor.mixer; var delta = clock.getDelta(); - var needsUpdate = false; - if ( mixer.stats.actions.inUse > 0 ) { - mixer.update( delta ); needsUpdate = true; - } - if ( viewHelper.animating === true ) { - viewHelper.update( delta ); needsUpdate = true; - } - if ( vr.currentSession !== null ) { - needsUpdate = true; - } - if ( needsUpdate === true ) render(); - } - // - var startTime = 0; var endTime = 0; function render() { - startTime = performance.now(); - // Adding/removing grid to scene so materials with depthWrite false // don't render under the grid. - scene.add( grid ); renderer.setViewport( 0, 0, container.dom.offsetWidth, container.dom.offsetHeight ); renderer.render( scene, editor.viewportCamera ); scene.remove( grid ); - if ( camera === editor.viewportCamera ) { - renderer.autoClear = false; if ( showSceneHelpers === true ) renderer.render( sceneHelpers, camera ); if ( vr.currentSession === null ) viewHelper.render( renderer ); renderer.autoClear = true; - } - endTime = performance.now(); editor.signals.sceneRendered.dispatch( endTime - startTime ); - } - return container; - } function updateGridColors( grid1, grid2, colors ) { diff --git a/threed/src/main/resources/template/tpl/threeedit/threeedit.html b/threed/src/main/resources/template/tpl/threeedit/threeedit.html index aa90562b7e69a08a73516a8c32c3984e6e0898fb..aac8e8171cb094e876e3fd265570cb70fe2bc42a 100644 --- a/threed/src/main/resources/template/tpl/threeedit/threeedit.html +++ b/threed/src/main/resources/template/tpl/threeedit/threeedit.html @@ -102,7 +102,6 @@ }; // - var editor = new Editor(); window.editor = editor; // Expose editor to Console diff --git a/web/src/main/resources/template/assets/lib/layui/custom.js b/web/src/main/resources/template/assets/lib/layui/custom.js index ce72223b2d6d92709083417c9b8b9d77ddf4aebb..d939b47d0f1ac2bebf72454d62099de85af9aa9a 100644 --- a/web/src/main/resources/template/assets/lib/layui/custom.js +++ b/web/src/main/resources/template/assets/lib/layui/custom.js @@ -30,6 +30,7 @@ var customerJS = { "adminAssistantUtil": "../../assets/lib/layui/customer/adminAssistantUtil.js", // 行政管理模块相关工具 "codeDocUtil": "../../assets/lib/layui/customer/codeDocUtil.js", // 代码生成器相关工具类 "organizationUtil": "../../assets/lib/layui/customer/organizationUtil.js", // 组织机构相关工具类 + "threeUtil": "../../assets/lib/layui/customer/threeUtil.js", // 3D编辑器相关工具类 }; //系统基础信息 diff --git a/web/src/main/resources/template/assets/lib/layui/customer/threeUtil.js b/web/src/main/resources/template/assets/lib/layui/customer/threeUtil.js new file mode 100644 index 0000000000000000000000000000000000000000..689c7b10efc8f35f0b41356fdab44e212bb52ced --- /dev/null +++ b/web/src/main/resources/template/assets/lib/layui/customer/threeUtil.js @@ -0,0 +1,52 @@ + +// 3D编辑器相关工具类 +var threeUtil = { + + // 编辑器网格数量 + gridWidth: 30, + gridHeight: 30, + gridBigCell: 6, + + /** + * 添加方向光光源 + */ + initDirectionalLight: function () { + var directionalLight = new THREE.DirectionalLight(0xaaaaaa) + directionalLight.position.set(0, 200, 100) + directionalLight.name = "方向光"; + // 开启阴影投射 + directionalLight.castShadow = true; + editor.scene.add(directionalLight); + }, + + /** + * 添加地板 + * + * @param url 地板文件路径 + */ + initFloor: function (url) { + // 加载一个资源 + var loader = new THREE.TextureLoader(); + var groundTexture = loader.load(url); + groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping; + groundTexture.repeat.set(threeUtil.gridWidth / threeUtil.gridBigCell, threeUtil.gridHeight / threeUtil.gridBigCell); + // 地基材料 + var groundMaterial = new THREE.MeshLambertMaterial({ map: groundTexture }); + var floor = new THREE.Mesh(new THREE.PlaneBufferGeometry(threeUtil.gridWidth, threeUtil.gridHeight), groundMaterial); + floor.rotation.x = -Math.PI / 2; + // 地板接受阴影开启 + floor.receiveShadow = true; + floor.position.y = 0; + floor.name = "地板"; + // 设置模型的每个部位都可以投影 + floor.traverse(function (child) { + if (child.isMesh) { + child.castShadow = true + child.receiveShadow = true + } + }) + editor.scene.add(floor); + } + + +}; \ No newline at end of file