Three.js基础学习笔记

<template>
  <div class="home" id="webgl"></div>
</template>

<script>
import * as THREE from 'three';
import { OrbitControls }  from 'three/examples/jsm/controls/OrbitControls'
export default {
  name: 'Home',
  data() {
    return {
      scene: null,
      camera:null,
      renderer:null,
      mesh:null,
      clock:null
    }
  },
  mounted () {
    this.init();
    //监听窗口尺寸变化
    window.addEventListener('resize',()=>{
      //重置渲染器输出画布canvas尺寸
      this.renderer.setSize(window.innerWidth,window.innerHeight);
      //全屏尺寸下，设置观察范围长宽比aspect为窗口宽高比
      this.camera.aspect = window.innerWidth/window.innerHeight;
      // 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix
      // 但是不会每渲染一帧，就通过相机的属性计算投影矩阵(节约计算资源)
      // 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
      this.camera.updateProjectionMatrix();
    })
  },
  methods: {
    init() {
      const width = window.innerWidth; //宽度
      const height = window.innerHeight; //高度
      //场景
      this.scene= new THREE.Scene();
      //几何体
      let geometry = new THREE.BoxGeometry(100, 100, 100);
      //材质
      // let material = new THREE.MeshBasicMaterial({
      //   color:0x0000ff,
      //   transparent:true,
      //   opacity:0.5
      // })
      let material = new THREE.MeshLambertMaterial({
        color:0x00ffff
      })
        //网格
        this.mesh = new THREE.Mesh(geometry,material);
        this.mesh.position.set(0,0,0);
      this.scene.add(this.mesh)
      //光
      // let pointLight= new THREE.PointLight(0xffffff,1.0)
      //点光源
      let pointLight = new THREE.PointLight(0xffffff, 1, 0, 0);
      pointLight.position.set(400,200, 200);//点光源放在x轴上
      
      this.scene.add(pointLight)
      //可视化点光源
      // const pointLightHelper = new THREE.PointLightHelper(pointLight, 10)
      // this.scene.add(pointLightHelper);
      //环境光
      const ambient = new THREE.AmbientLight(0xffffff,1);
      this.scene.add(ambient);
      //平行光
      const directionalLight = new THREE.DirectionalLight(0xffffff,1);
      directionalLight.position.set(50,100,60)
      directionalLight.target= this.mesh
      // 方向光指向对象网格模型mesh，可以不设置，默认的位置是0,0,0
      this.scene.add(directionalLight);
      //平行光辅助观察DirectionalLightHelper
      // const dirLightHelper = new THREE.DirectionalLightHelper(directionalLight,5,0xff0000);
      // this.scene.add(dirLightHelper)
    
      //相机
      this.camera = new THREE.PerspectiveCamera(75,width/height,0.1,1000);
      this.camera.position.set(100,100,100);
      this.camera.lookAt(0,0,0)
      //辅助观察坐标系
      const axesHelper= new THREE.AxesHelper(100);
      this.scene.add(axesHelper)
       //渲染器
      this.renderer= new THREE.WebGLRenderer()
      this.renderer.setSize(width,height);
      // this.renderer.render(this.scene,this.camera)
      document.getElementById('webgl').appendChild(this.renderer.domElement);
      //控制器
      let controls = new OrbitControls(this.camera,this.renderer.domElement);
      controls.addEventListener('change',()=>{
        // console.log(this.camera.position)
        //this.renderer.render(this.scene,this.camera)
      })
       //时钟
       this.clock = new THREE.Clock()
      //动画
      this.render();
     
    },
    //渲染循环
    render(){
      
      const spt = this.clock.getDelta()*1000;
      // console.log('spt',spt)
      // console.log('渲染帧率',1000/spt)
      this.mesh.rotateY(0.01);
      this.renderer.render(this.scene,this.camera)
      requestAnimationFrame(this.render);
      
    },
  },
}
</script>
<style scoped lang="scss">
.home{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>