|
|
@@ -0,0 +1,113 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div id="container"></div>
|
|
|
+ </div>
|
|
|
+<!-- <a-card :bordered="false">
|
|
|
+ <div>
|
|
|
+ <div id="container"></div>
|
|
|
+ </div>
|
|
|
+ </a-card>-->
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+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 {
|
|
|
+ name: 'FactoryOne',
|
|
|
+ components: {
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ publicPath: process.env.BASE_URL,
|
|
|
+ mesh: null,
|
|
|
+ camera: null,
|
|
|
+ scene: null,
|
|
|
+ renderer: null,
|
|
|
+ controls: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 初始化
|
|
|
+ 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/厂区1.gltf', model => {
|
|
|
+ // model.scene.children[0].scale.set(50, 50, 50)
|
|
|
+ console.log('model', 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)
|
|
|
+ // directionLight.target = mesh; 设置两个点，就是表示平行光的方向,不设置target 表示（0,0,0,）
|
|
|
+ this.scene.add(directionLight)
|
|
|
+ /* const spotLight = new THREE.SpotLight(0xffffff) // 创建聚光灯
|
|
|
+ spotLight.position.set(150, 150, 150)
|
|
|
+ spotLight.castShadow = true
|
|
|
+ this.scene.add(spotLight) */
|
|
|
+ },
|
|
|
+ // 创建相机
|
|
|
+ createCamera () {
|
|
|
+ // const element = document.getElementById('container')
|
|
|
+ const width = window.innerWidth // 窗口宽度
|
|
|
+ const height = window.innerHeight // 窗口高度
|
|
|
+ console.log('width', width)
|
|
|
+ console.log('height', height)
|
|
|
+ const k = width / height // 窗口宽高比
|
|
|
+ // PerspectiveCamera( fov, aspect, near, far )
|
|
|
+ this.camera = new THREE.PerspectiveCamera(35, k, 1, 800)
|
|
|
+ this.camera.position.set(150, 150, 150) // 设置相机位置
|
|
|
+
|
|
|
+ this.camera.lookAt(new THREE.Vector3(0, 0, 0)) // 设置相机方向
|
|
|
+ this.scene.add(this.camera)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 创建渲染器
|
|
|
+ createRender () {
|
|
|
+ const element = document.getElementById('container')
|
|
|
+ this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
|
|
|
+ this.renderer.setSize(window.innerWidth, window.innerHeight) // 设置渲染区域尺寸
|
|
|
+ this.renderer.shadowMap.enabled = true // 显示阴影
|
|
|
+ this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
|
|
|
+ this.renderer.setClearColor(0x3f3f3f, 1) // 设置背景颜色
|
|
|
+ element.appendChild(this.renderer.domElement)
|
|
|
+ this.renderer.outputEncoding = THREE.sRGBEncoding
|
|
|
+ },
|
|
|
+ render () {
|
|
|
+ /* if (this.mesh) {
|
|
|
+ this.mesh.rotation.z += 0.006
|
|
|
+ } */
|
|
|
+ this.renderer.render(this.scene, this.camera)
|
|
|
+ requestAnimationFrame(this.render)
|
|
|
+ },
|
|
|
+ // 创建控件对象
|
|
|
+ createControls () {
|
|
|
+ this.controls = new OrbitControls(this.camera, this.renderer.domElement)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
