THREEJS第一篇，初始化和弹跳的篮球

THREEJS作为WebGL的一个开源框架，在三维可视化领域内有着广泛的应用。这里结合自己的学习经历，分享学习过程心得，希望能和想学THREEJS的伙伴一起学习成长，更希望大牛指点。
本篇介绍THREEJS(R140)的引入，相关场景搭建，Geometry球体的创建和动画的设置。

1 引入

创建vue项目，然后使用命令npm install three安装THREE，在组件内部使用下面代码引入。

//全部的THREEJS
import * as THREE from 'three';
//鼠标控制
import OrbitControls from 'three-orbitcontrols';

2 初始化

THREE中必不可少的，也是最基础的三个对象分别是场景（scene）、摄像机（camera）和渲染器（renderer）。
● 场景：是个容器，主要用于保存、跟踪所要渲染的物体和使用的光源。
● 摄像机：摄像机决定了场景中对应角度的景色会显示出来。类似人的眼睛，在不同的位置，抬头或者低头都能够看到不同的景色。
● 渲染器：渲染器的作用就是将相机拍摄下来的图片，放到浏览器中去显示。

//1.1 场景
this.scene = new THREE.Scene();
//1.2 相机
this.camera = new THREE.PerspectiveCamera(
    50,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);


//1.3 渲染器
this.renderer = new THREE.WebGLRenderer({ antialias: true });

3 添加球体

场景、相机、渲染器创建之后，就可以创建球体添加到场景中了。在THREEJS中就是通过SphereGeometry创建形状，通过MeshBasicMaterial创建材质，使用Mesh将两者结合起来，就成为一个球体。

//创建球体
let sphereGeometry = new THREE.SphereGeometry(3, 50, 50);
//使用纹理加载器
let sphereTexture = this.textureLoader.load("/static/image/baskteballskin.png");
let sphereMaterial = new THREE.MeshBasicMaterial(
    {
        map:sphereTexture,
        metalness: 0.2,
        roughness: 0.07,
        side: THREE.DoubleSide
    }
);
let sphereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphereMesh.position.set(-40, 5, 5);
this.scene.add(sphereMesh);

4 设置动画

在render函数中修改sphereMesh的坐标，就可以让球动起来。

let _this = this;
let zAng = 0.0;
let flag = 1;
function renderScene(){
    if(sphereMesh.position.x >=50){
        flag = -1;
    }
    if(sphereMesh.position.x <=-40){
        flag = 1;
    }
    sphereMesh.position.x += flag * 0.2;
    zAng += 1;
    let y = 20 * Math.sin(zAng * Math.PI / 180.0);
    sphereMesh.position.y = y;
    requestAnimationFrame(renderScene);
    _this.renderer.render(_this.scene, _this.camera);
}
renderScene();

5 效果

6 完整代码

import * as THREE from 'three';
import OrbitControls from 'three-orbitcontrols';
let scene = null;
let camera = null;
let renderer = null;
let textureLoader = null;

function initThree(containerId){
    console.log(THREE.REVISION);
    //创建三大件
    //1.1 场景
    this.scene = new THREE.Scene();
    //1.2 相机
    this.camera = new THREE.PerspectiveCamera(
        50,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
    );
    //1.3 渲染器
    this.renderer = new THREE.WebGLRenderer({ antialias: true });

    //创建纹理加载器
    this.textureLoader = new THREE.TextureLoader();

    //设置相机
    //设置摄像机位置,相机方向逆X轴方向，倾斜向下看
    this.camera.position.set(360, 360, 0);
    //指向场景中心
    this.camera.lookAt(this.scene.position);
    //添加坐标轴，辅助判断位置
    let axes = new THREE.AxesHelper(1000);
    axes.position.set(-30, 0, 0);
    this.scene.add(axes);

    //设置环境
    this.renderer.setClearColor(new THREE.Color(0x282A36));
    //设置场景大小
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    console.log(document.getElementById("containerId").clientWidth);
    console.log(document.getElementById("containerId").clientHeight);
    //渲染器开启阴影效果
    this.renderer.shadowMap.enabled = true;
    //渲染div到canvas
    document
        .getElementById("containerId")
        .appendChild(this.renderer.domElement);

    //鼠标键盘控制
    this.controls = new OrbitControls(
        this.camera,
        this.renderer.domElement
    );

    //创建纹理加载器
    this.textureLoader = new THREE.TextureLoader();

    //点光源
    let point = new THREE.PointLight(0xffffff);
    point.position.set(0, 0, 0); //点光源位置
    this.scene.add(point); //点光源添加到场景中
    // 环境光
    let ambient = new THREE.AmbientLight(0x999999);
    this.scene.add(ambient);

    this.camera.position.set(-40, 40, 30);
    this.camera.lookAt(this.scene.position);

    //创建球体
    let sphereGeometry = new THREE.SphereGeometry(3, 50, 50);
    let sphereTexture = this.textureLoader.load("/static/image/baskteballskin.png");
    let sphereMaterial = new THREE.MeshBasicMaterial(
        {
            map:sphereTexture,
            metalness: 0.2,
            roughness: 0.07,
            side: THREE.DoubleSide
        }
    );
    let sphereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial);
    sphereMesh.position.set(-40, 5, 5);
    this.scene.add(sphereMesh);

    let _this = this;
    let zAng = 0.0;
    let flag = 1;
    function renderScene(){
        if(sphereMesh.position.x >=50){
            flag = -1;
        }
        if(sphereMesh.position.x <=-40){
            flag = 1;
        }
        sphereMesh.position.x += flag * 0.2;
        zAng += 1;
        let y = 20 * Math.sin(zAng * Math.PI / 180.0);
        sphereMesh.position.y = y;
        requestAnimationFrame(renderScene);
        _this.renderer.render(_this.scene, _this.camera);
    }
    renderScene();
}