Threejs基本功能——实现自动旋转阴影的立方体

写在前面：
初次接触Three.js，个人认为需要的几个网站地址如下。如果官网打不开，教大家一个办法（借助站长之家的一个工具：打开https://ping.chinaz.com/github.com ，输入你需要的地址，可以测速，然后在自己电脑的host中把你需要打开的地址配置上对应的ip即可）。

1、查看官网教程
2、下载Three.js源码可看里面的例子文件学习
3、自己动手试验Three.js相关api

• Three.js 官网地址：https://threejs.org/
• Three.js CDN地址：https://www.bootcdn.cn/three.js/
• Three.js github地址（下载three.js-master源码包）：https://github.com/mrdoob/three.js/
• 在线GLTF文件预览器：https://gltf-viewer.donmccurdy.com/

Three.js的基本结构

Three.js实现一个基本功能的思路

一、初始化场景
初始化场景后，建立的模型、灯光需要添加到场景中才可以显示。

• 初始化模型：即需要展示的三维物体，可能会有多个分开
• 初始化灯光：灯光的种类会影响是否有投影，另外，模型的材质也会影响投影or反光效果。

二、初始化相机

三、初始化渲染器

Three.js中开启阴影的设置步骤

开启阴影的步骤：
1、添加光源 （注意光源类型、方向）及相关的阴影设置，修改模型材质为MeshLamberMaterial MeshPhongMaterial 等支持反光的材质。
2、开启光源阴影设置 light.castShadow = true
3、开启渲染器阴影开关 renderer.shadowMap.enabled = true
4、开启模型阴影 ，包括 接受阴影的开关，制造阴影的开关。 mesh.castShadow = true \ plane.receiveShadow = true

Demo：使用Three.js实现一个旋转的带阴影的立方体

<template>
  <div>
    <div ref="picture" id="test"></div>
  </div>
</template>

<script>
import * as Three from 'three';

export default {
  data() {
    return {
      scene: null,
      camera: null,
      renderer: null,
      controls:null,
      mesh: null,
      plane: null,
      width: window.innerWidth,
      height: window.innerHeight
    }
  },
  mounted() {
    this.initScene()
    this.initCamera()
    this.initMesh()
    this.initPlane()
    this.initLight()
    this.initRenderer()
    this.animate()
  },
  methods: {
    // 初始化场景
    initScene() {
      this.scene = new Three.Scene();
    },
    // 初始化相机
    initCamera() {
      this.camera = new Three.PerspectiveCamera(45, this.width / this.height, 1, 1000);
      this.camera.position.set(-30, 40, 30) 
      this.camera.lookAt(this.scene.position) //设置相机对应的位置
    },
    // 初始化渲染器
    initRenderer() {
      this.renderer = new Three.WebGLRenderer({
        antialias: true // 开启后，渲染物体无锯齿
      });
      this.renderer.setClearColor(new Three.Color(0x000000)); // 设置渲染背景色
      this.renderer.setSize(this.width, this.height); // 设置渲染大小

      // 将渲染器加入到dom元素中
      this.$refs.picture.appendChild(this.renderer.domElement);
      //这种方式也可：
      // document.getElementById('test').appendChild(this.renderer.domElement)

      // 开启渲染器投影
      this.renderer.shadowMap.enabled = true;

    },
    // 初始化平面模型
    initPlane() {
      var plane = new Three.PlaneGeometry(60, 20);
      var material = new Three.MeshLambertMaterial({
        color: 0xAAAAA
      });
      this.plane = new Three.Mesh(plane, material);
      this.plane.rotation.x = - 0.5 * Math.PI
      this.plane.position.set(15, 0, 0)
      // 开启该模型接受投影
      this.plane.receiveShadow = true;

      this.scene.add(this.plane)
    },
    // 初始化立方体模型
    initMesh() {
      var cube = new Three.BoxGeometry(4, 4, 4)
      var material = new Three.MeshLambertMaterial({
        color: 0xFF0000 
      })
      this.mesh = new Three.Mesh(cube, material);
      this.mesh.position.set(-4, 3, 0)
      // 开启该模型产生投影
      this.mesh.castShadow = true;

      this.scene.add(this.mesh);
    },
    // 初始化灯光
    initLight() {
      let spotLight = new Three.SpotLight(0xffffff);
      spotLight.position.set(-40, 40, -15);
      // 开启灯光产生阴影 及相关设置
      spotLight.castShadow = true; 
      
      // 灯光 相关阴影的设置
      spotLight.shadow.mapSize.width = 1024;
      spotLight.shadow.mapSize.height = 1024;

      spotLight.shadow.camera.near = 40;
      spotLight.shadow.camera.far = 130;
      // spotLight.shadow.camera.fov = 10;
      
      this.scene.add(spotLight);
    },
    // 动态渲染
    animate() {
      this.mesh.rotation.x += 0.01
      this.mesh.rotation.y += 0.01
      this.mesh.rotation.z += 0.01
      this.renderer.render(this.scene, this.camera) // 渲染器执行渲染
      requestAnimationFrame(this.animate) // 自带的循环调用的方法
    }
  }
}
</script>

<style>

</style>

标签：初始化,Threejs,Three,js,基本功能,plane,立方体,new,spotLight
来源： https://blog.csdn.net/xiaozidewawa/article/details/123255516