标签：vue scene ___# three THREE camera let renderer new

使用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>

标签：vue,scene,___#,three,THREE,camera,let,renderer,new
来源： https://blog.csdn.net/Hu_xiao_ge/article/details/118245173

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。