three.js学习一

通过three.js实现立方体
vue2 + three.js
安装three.js 并引入
npm i three

<template>
  <div id="box" class="container">
    <!-- <a-button @click="onModulesClick">点击弹框</a-button> -->
    <!-- 弹框组件 -->
    <!-- <HomeModules ref="homeModulesref" :dataInfo="dataInfo" /> -->
  </div>
</template>

<script>
// 引入three.js
import * as THREE from 'three'
// 引入轨道控制器  改变的是相机的参数 监控区域
import {
    
     OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

export default {
    
    
  name: 'HomeView',
  components: {
    
    
  },
  data() {
    
    
    return {
    
    
      dataInfo: {
    
    
        note: '名称名称',
        gender: '类型1111',
      },
      app: null,
      camera: null,
      scene: null,
      renderer: null,
      controls: null,
      clock: null,
      cityModel: null,
    }
  },

  methods: {
    
    
    /
    // 显示弹框
    // onModulesClick() {
    
    
    //   this.$refs.homeModulesref.showModal()
    // },
    init() {
    
    
      const el = document.getElementById('box')
      let width = el.offsetWidth
      let height = el.offsetHeight
      // 创建一个虚拟三维场景
      const scene = new THREE.Scene()
      // 创建一个长方体
      const geometry = new THREE.BoxGeometry(100, 100, 100) //长宽高
      const material = new THREE.MeshLambertMaterial({
    
    
        color: 0x00ffff,
        transparent: true,
        opacity: 0.5,
      }) // 设置材质的颜色

      for (let i = 0; i < 10; i++) {
    
    
        // 控制x
        // 控制Z
        for (let j = 0; j < 10; j++) {
    
    
          let mesh = new THREE.Mesh(geometry, material)
          mesh.position.set(i * 200, 0, j * 200)
          scene.add(mesh)
        }
      }
      // 虚拟的物体  创建一个网格模型对象

      // 把虚拟的物体放进三维场景中

      // mesh.position.set(100, 0, 0)

      // mesh.rotateY(Math.PI / 4)

      // 光源设置
      // 创建一个环境光
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.5) // 颜色 强度
      // 添加到场景中
      scene.add(ambientLight)
      // 添加一个点光源  点光源的位置 会影响每个边是否被折射  显示的弱化程度
      const pointLight = new THREE.PointLight(0xffffff, 0.4)
      pointLight.position.set(200, 200, 200)
      scene.add(pointLight)

      // 设置坐标系
      const axesHelper = new THREE.AxesHelper(150)
      scene.add(axesHelper)

      // 可视化 点光源
      // const pointLightHelper = new THREE.PointLightHelper(pointLight, 10)
      // scene.add(pointLightHelper)

      // 创建一个虚拟的透视相机
      const camera = new THREE.PerspectiveCamera(45, width / height, 1, 8000)
      //  相机拉远可以看到更到的视野
      // camera.position.set(200, 200, 200) // 相机位置
      camera.position.set(2000, 2000, 2000) // 相机位置
      camera.lookAt(1000, 0, 1000)
      // 创建一个webGL渲染
      const renderer = new THREE.WebGLRenderer()
      // 渲染宽高 像素
      renderer.setSize(width, height)
      // 存放在页面上
      el.append(renderer.domElement)

      //  创建时钟
      const clock = new THREE.Clock()
      function render() {
    
    
        const spt = clock.getDelta() * 1000
        console.log('渲染时间间隔 单位毫秒', spt)
        console.log('渲染帧率', 1000 / spt)
        renderer.render(scene, camera) // 咔咔咔 不停拍照
        // mesh.rotateY(0.01) // 每次绕Y轴旋转0.01的弧度
        requestAnimationFrame(render) //   请求再次执行渲染函数render，渲染下一帧
      }
      // 该函数周期性的执行
      render()

      // 把需要控制的相机 以及渲染页面放进控制器
      const controls = new OrbitControls(camera, renderer.domElement)
      controls.target.set(1000, 0, 1000)
      controls.update()

      // // 监听 改变得到 不同的渲染场景
      // controls.addEventListener('change', function () {
    
    
      //   renderer.render(scene, camera)
      // })
    },
  },
  mounted() {
    
    
    this.init()
  },
}
</script>
<style scoped>
.container {
    
    
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #f1f1e7;
}
</style>