使用vue架构构建three.js3d场景

仅是构建3d场景，更多请访问 https://blog.csdn.net/Hu_xiao_ge

<template>
    <!-- 主场景 -->
    <div ref="container_team"></div>
</template>

export default {
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      controls: null,
    };
  },
 mounted() {
    this.initChart();
  },
  methods: {
    //场景搭建
    initChart() {
      let container = this.$refs.container_team; //获取容器
      // 1. 创建场景
      this.scene = new THREE.Scene();
      this.scene.background = new THREE.Color("#eee");
      //雾化
      this.scene.log = new THREE.Fog(0xffffff, 10, 3000);

      //2.创建地面
      let floorGeometry = new THREE.PlaneGeometry(500, 500);
      let floorMaterial = new THREE.MeshPhongMaterial({ color: 0x75e8e7 });
      let floor = new THREE.Mesh(floorGeometry, floorMaterial);
      floor.rotation.x = -0.5 * Math.PI;
      floor.receiveShadow = true;
      floor.position.y = -0.001;
      this.scene.add(floor);
      
      // 3. 创建摄像机
      let width = container.clientWidth; //容器宽度
      let height = 500; //容器高度
      let k = width / height;
      let s = 150;
      //const camera = new THREE.OrthographicCamera(-s * k,s*k,s,-s,1,1000);
      this.camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1,1000);
      this.camera.position.set(200, 100, 200);
      this.camera.lookAt(this.scene.position);

      // 4. 创建渲染器
      this.renderer = new THREE.WebGLRenderer();
      this.renderer.setSize(container.clientWidth, 630); //渲染界面大小
      this.renderer.setClearColor(0xb9d3ff, 1);
      container.appendChild(this.renderer.domElement);
      //加这句
      this.renderer.shadowMap.enabled = true;
      
      //5.创建光源
      const dirLight = new THREE.DirectionalLight(0xffffff, 0.6);
      //光源等位置
      dirLight.position.set(-10, 8, -5);
      //可以产生阴影
      dirLight.castShadow = true;
      dirLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
      this.scene.add(dirLight);

      const hemLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6);
      hemLight.position.set(0, 48, 0);
      this.scene.add(hemLight);

      // 6. 添加控件
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls.enableDamping = true;
    },
  },
};
</script>