使用threejs+react创建一个三维场景

首先在这说一下，自己是在去年有幸接触threejs，
一直想尝试好好学一下，所以就跟着开发指南学了一下，
本篇文章是用的threejs-r107版本、webpack4、react16。

准备工作

1. 编辑器（threejs作者推荐webstrom，自己用的vscode）
1. 获取源码下载 https://github.com/mrdoob/three.js/tree/master

搭建react框架

1. 配置webpack

image.png

因为渲染三维的时候会需要一些编辑控件，不建议从三方npm中下载，因为有的包很久没有更新过了，可以在threejs里的源码中找到这些控件，可以直接拿过来用。

image.png

1. 创建react组件引入threejs

image.png

开始创建三维场景

首先想创建一个三维场景，必须有场景（scene）、相机（camera）和渲染器（WebGLRenderer）

1. Sence 场景：是一个容器，保存、跟踪所要渲染的物体和使用的光源。没有Scene对象，那么threejs就无法渲染任何物体
1. camera相机：决定了我们能在场景看到什么。
1. WebGLRenderer渲染器：会使用电脑显卡来渲染场景。

componentDidMount() {
    this.init();
  }
init = () => {
    // 创建一个场景，它将包含所有元素，如对象，相机和灯光。
    let scene = new THREE.Scene();

    // 创建一个相机，定义我们能看到的位置。
    let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

    // 创建渲染并设置大小和阴影。
    let renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0xFFFFFF));
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;

    /** 创建立方体 */
    let cubeGeometry = new THREE.BoxGeometry(4, 4, 4)
    let cubeMaterial = new THREE.MeshLambertMaterial({
      color: 0xFF0000
    });
    let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
    cube.castShadow = true;

    /** 定义立方体的位置 */
    cube.position.x = -4;
    cube.position.y = 2;
    cube.position.z = 0;

    /** 定义球体 */
    let sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
    let sphereMaterial = new THREE.MeshLambertMaterial({
      color: 0x7777ff
    })
    let sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)

    /** 定义球体的位置 */
    sphere.position.x = 20;
    sphere.position.y = 4;
    sphere.position.z = 2;
    sphere.castShadow = true;

    /** 定义地平面 */
    let planeGeometry = new THREE.PlaneGeometry(60, 20);
    let planeMaterial = new THREE.MeshLambertMaterial({
      color: 0xAAAAAA
    });
    let plane = new THREE.Mesh(planeGeometry, planeMaterial);
    console.log(plane)

    /** 旋转定位地平面的位置 */
    plane.rotation.x = -0.5 * Math.PI;
    plane.position.set(15, 0, 0);
    plane.receiveShadow = true;

    /** 将物体添加到场景中 */
    scene.add(cube);
    scene.add(sphere);
    scene.add(plane);

    /** 摆放相机的位置 */
    camera.position.x = -30;
    camera.position.y = 40;
    camera.position.z = 30;
    camera.lookAt(scene.position);

    /** 为阴影添加聚光灯 */
    let spotLight = new THREE.SpotLight(0xFFFFFF);
    spotLight.position.set(-40, 40, -15);
    spotLight.castShadow = true;
    spotLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
    spotLight.shadow.camera.far = 130;
    spotLight.shadow.camera.near = 40;

    /** 
     * 如果你想要更详细的阴影，你可以增加用于绘制阴影的mapSize
     * spotLight.shadow.mapSize = new THREE.Vector2(1024,1024)
     */

    scene.add(spotLight);

    let ambienLight = new THREE.AmbientLight(0x353535);
    scene.add(ambienLight);

    /** 将渲染器的输出添加到html元素 */
    document.getElementById("webgl-output").appendChild(renderer.domElement);

    /** 调用渲染功能 */
    renderer.render(scene, camera)
  }
render() {
    return (
      <div id="webgl-output"></div>
    )
  }

效果：

image.png

注意：这里需要注意的是物体、光源是投射阴影的而地面是接受阴影的。
总结：材质会影响阴影。比如MeshBasicMaterial对光源不会有任何反应。还有并不是所有的光源都能够产生阴影。例子中的SpotLight这个光源是能够产生阴影的，必须设置它的castShadow = true。阴影功能才能被启用。threejs默认是不开启的，因为开启会消耗性能。