登录页测试

src/views/Login.vue

@@ -1,48 +1,51 @@
 <template>
   <div class="login-container">
-    <h1>欢迎登录</h1>
-    <a-form id="formLogin" ref="formLogin" :form="form" class="login-form" @submit="handleSubmit">
-      <a-form-item>
-        <a-input
-          type="text"
-          placeholder="用户名"
-          class="login-input"
-          v-decorator="[
+    <div style="width:40%;float: left;padding-left: 10%;">
+      <h1>欢迎登录</h1>
+      <a-form id="formLogin" ref="formLogin" :form="form" class="login-form" @submit="handleSubmit">
+        <a-form-item>
+          <a-input
+            type="text"
+            placeholder="用户名"
+            class="login-input"
+            v-decorator="[
             'username',
             {
               rules: [{ required: true, message: '请输入帐户名或邮箱地址' }, { validator: handleUsernameOrEmail }],
               validateTrigger: 'change'
             }
           ]"
-        >
-          <template slot="prefix">
-            <div class="icon">
-              <a-icon type="user" />
-            </div>
-          </template>
-        </a-input>
-      </a-form-item>
-      <a-form-item>
-        <a-input
-          type="password"
-          autocomplete="false"
-          placeholder="请输入密码"
-          class="login-input"
-          max="6"
-          v-decorator="['password', { rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur' }]"
-        >
-          <template slot="prefix">
-            <div class="icon">
-              <a-icon type="lock" />
-            </div>
-          </template>
-        </a-input>
-      </a-form-item>
-      <!-- <a-checkbox :checked="remberMe" v-model="remberMe"
-        ><span style="color: #00deff; font-size: 14px">记住密码</span></a-checkbox
-      > -->
-      <a-button class="btn" type="primary" htmlType="submit"> 登录 </a-button>
-    </a-form>
+          >
+            <template slot="prefix">
+              <div class="icon">
+                <a-icon type="user" />
+              </div>
+            </template>
+          </a-input>
+        </a-form-item>
+        <a-form-item>
+          <a-input
+            type="password"
+            autocomplete="false"
+            placeholder="请输入密码"
+            class="login-input"
+            max="6"
+            v-decorator="['password', { rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur' }]"
+          >
+            <template slot="prefix">
+              <div class="icon">
+                <a-icon type="lock" />
+              </div>
+            </template>
+          </a-input>
+        </a-form-item>
+        <!-- <a-checkbox :checked="remberMe" v-model="remberMe"
+          ><span style="color: #00deff; font-size: 14px">记住密码</span></a-checkbox
+        > -->
+        <a-button class="btn" type="primary" htmlType="submit"> 登录 </a-button>
+      </a-form>
+    </div>
+    <div class="login-three" id="login-three"></div>
   </div>
 </template>
 <script>
@@ -53,6 +56,9 @@ import { getSmsCaptcha, checkCaptchaCode, getInfo } from '@/api/upms/login'
 import { encryptPassword } from '@/common/common'
 import cookie from 'vue-cookie'
 import BaseTool from '@/utils/tool'
+import * as THREE from 'three'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
 
 export default {
   components: {
@@ -78,18 +84,19 @@ export default {
         smsSendBtn: false
       },
       remberMe: null,
-      password: null
+      password: null,
+      // threeJs 涉及变量
+      mesh: null,
+      camera: null,
+      scene: null,
+      renderer: null,
+      controls: null
     }
   },
+  mounted () {
+    this.init()
+  },
   created() {
-    // get2step({ })
-    //   .then(res => {
-    //     this.requiredTwoStepCaptcha = res.result.stepCode
-    //   })
-    //   .catch(() => {
-    //     this.requiredTwoStepCaptcha = false
-    //   })
-    // this.requiredTwoStepCaptcha = true
     // 获取用户名和密码
     let username = cookie.get('username')
     if (BaseTool.Object.isBlank(username)) {
@@ -275,23 +282,89 @@ export default {
       } else {
         return remberMe === 'true'
       }
-    }
+    },
+    // 初始化
+    init () {
+      this.createScene() // 创建场景
+      this.loadGLTF() // 加载GLTF模型
+      this.createLight() // 创建光源
+      this.createCamera() // 创建相机
+      this.createRender() // 创建渲染器
+      this.createControls() // 创建控件对象
+      this.render() // 渲染
+    },
+    // 创建场景
+    createScene () {
+      this.scene = new THREE.Scene()
+    },
+    // 加载GLTF模型
+    loadGLTF () {
+      const loader = new GLTFLoader()
+      loader.load('/models/gltf/工业设备07.gltf', model => {
+        this.scene.add(model.scene)
+      })
+    },
+    // 创建光源
+    createLight () {
+      // 环境光
+      const ambientLight = new THREE.AmbientLight(0xffffff) // 创建环境光
+      this.scene.add(ambientLight) // 将环境光添加到场景
+      // 创建一个平行光
+      const directionLight = new THREE.DirectionalLight(0xffffff, 1)
+      directionLight.position.set(50, 100, 60)
+      this.scene.add(directionLight)
+    },
+    // 创建相机
+    createCamera () {
+      const width = window.innerWidth // 窗口宽度
+      const height = window.innerHeight // 窗口高度
+      const k = width / height // 窗口宽高比
+      this.camera = new THREE.PerspectiveCamera(35, k, 1, 800)
+      this.camera.position.set(20, 20, 25) // 设置相机位置
+      this.camera.lookAt(new THREE.Vector3(0, 0, 0)) // 设置相机方向
+      this.scene.add(this.camera)
+    },
+
+    // 创建渲染器
+    createRender () {
+      const element = document.getElementById('login-three')
+      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
+      this.renderer.setSize(window.innerWidth/2, 424) // 设置渲染区域尺寸
+      //this.renderer.shadowMap.enabled = true // 显示阴影
+      //this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
+      //this.renderer.setClearColor(0xffffff, 1) // 设置背景颜色
+      this.renderer.setClearAlpha(0.0) // 背景透明度值
+      element.appendChild(this.renderer.domElement)
+      this.renderer.outputEncoding = THREE.sRGBEncoding
+    },
+    render () {
+      this.renderer.render(this.scene, this.camera)
+      this.controls.update()
+      requestAnimationFrame(this.render)
+    },
+    // 创建控件对象,并设置自动旋转
+    createControls () {
+      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
+      this.controls.autoRotate = true
+      this.controls.autoRotateSpeed = 2.0
+      this.controls.dampingFactor = 0.9
+    },
   }
 }
 </script>
 <style lang="less" scoped>
 .login-container {
-  width: 588px;
+  width: 100%;
   height: 624px;
-  background: #ffffff;
+  //background: #ffffff;
   border-radius: 24px;
   opacity: 0.83;
   position: absolute;
-  left: 10%;
+  //left: 10%;
   top: 50%;
   font-family: PingFang SC;
   transform: translateY(-50%);
-  padding: 100px;
+  //padding: 100px;
   text-align: center;
   h1 {
     font-size: 40px;
@@ -320,4 +393,10 @@ export default {
     margin-top: 20px;
   }
 }
+.login-three {
+  width: 45%;
+  height: 624px;
+  float: left;
+  padding-top: 8%;
+}
 </style>

src/views/threejs/factory/FactoryOne.vue

@@ -64,7 +64,6 @@ export default {
     loadGLTF () {
       const loader = new GLTFLoader()
       loader.load('/models/gltf/厂区1.gltf', model => {
-        // model.scene.children[0].scale.set(50, 50, 50)
         console.log('model', model)
         this.group = model.scene
         this.scene.add(model.scene)