vue用Three.js点精灵绘制森林

我们在vue项目中，如果要对模型进行描绘，或者想做一个3d的网页游戏，首先需要一个场景，怎么安装Three.js这里就不教了，我们直接从代码上手。
首先需要一个页面：

<template>
    <div></div>
</template>
<script>
import * as THREE from 'three';
import * as OrbitControls  from 'three-orbitcontrols';
import { TextureLoader } from 'three';

首先，我们需要创建一个场景，有了场景我们需要光源，照相机等对象，我们先创建好这些，这样就可以得到一个空的scene：

    /**
     * 光源设置
     */
    //点光源
    var point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300); //点光源位置
    scene.add(point); //点光源添加到场景中
    //环境光
    var ambient = new THREE.AmbientLight(0x888888);
    scene.add(ambient);
    /**
     * 透视投影相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    /**透视投影相机对象*/
    var camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
    camera.position.set(200, 300, 200); //树上面观察
    // camera.position.set(200, 30, 200); //树下面观察
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height); //设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

接下来，我们需要一块平面场地，当然这需要加载草地，这样才像森林嘛，草地的图片我们放在项目static目路下

    this.scene = new THREE.Scene();
            //创建场景对象Scene
            // 创建一个草地地面
			//矩形平面
            var gem = new THREE.PlaneGeometry(10000, 10000)
            // 加载草地纹理贴图
            var texture = new THREE.TextureLoader().load('../static/example/grass.jpg')
            // 设置纹理的重复模式
            texture.wrapS = THREE.RepeatWrapping;
            texture.wrapT = THREE.RepeatWrapping;
            // uv两个方向纹理重复数量
            texture.repeat.set(10, 10)

            var material = new THREE.MeshLambertMaterial({
                color: 0x777700,
                map: texture
            })
            //网格模型对象Mesh
            var mesh = new THREE.Mesh(gem, material)
			//网格模型添加到场景中
            this.scene.add(mesh)
            mesh.rotateX(-Math.PI/2)

我们在浏览器上运行一下看看，可以看到有一片草地：

我们再在草地上放一些树：

    var textureTree = new THREE.TextureLoader().load("tree.png");
    // 批量创建表示一个树的精灵模型
    for (let i = 0; i < 100; i++) {
      var spriteMaterial = new THREE.SpriteMaterial({
        map:textureTree,//设置精灵纹理贴图
      });
      // 创建精灵模型对象
      var sprite = new THREE.Sprite(spriteMaterial);
      scene.add(sprite);
      // 控制精灵大小,
      sprite.scale.set(100, 100, 1);  只需要设置x、y两个分量就可以
      var k1 = Math.random() - 0.5;
      var k2 = Math.random() - 0.5;
      // 设置精灵模型位置，在xoz平面上随机分布
      sprite.position.set(1000 * k1, 50, 1000 * k2)
    }
    // 坐标系辅助显示
    var axesHelper = new THREE.AxesHelper(200);
    scene.add(axesHelper);

这样我们就得到了一个游戏场景。
下列是完整的代码：

<template>
    <div></div>
</template>
<script>
import * as THREE from 'three';
import * as OrbitControls  from 'three-orbitcontrols';
import { TextureLoader } from 'three';

export default {
    data() {
        return {
            scene: null,
            camera: null,
            mesh: null
        }
    },
    mounted() {
        this.init(),
        this.render()
        var controls = new OrbitControls(this.camera, this.renderer.domElement)
    },
    methods: {
        init() {
            this.scene = new THREE.Scene();

            var gem = new THREE.PlaneGeometry(10000, 10000)

            var texture = new THREE.TextureLoader().load('../static/example/grass.jpg')
            texture.wrapS = THREE.RepeatWrapping;
            texture.wrapT = THREE.RepeatWrapping;
            texture.repeat.set(10, 10)

            var material = new THREE.MeshLambertMaterial({
                color: 0x777700,
                map: texture
            })
            var mesh = new THREE.Mesh(gem, material)

            this.scene.add(mesh)
            mesh.rotateX(-Math.PI/2)

            var textureTree = new THREE.TextureLoader().load('../static/example/tree.png')
            for (let i=0;i < 1000; i+=1) {
                var spriteMetrial = new THREE.SpriteMaterial({
                    map: textureTree
                })
                var sprite = new THREE.Sprite(spriteMetrial)
                this.scene.add(sprite)
                sprite.scale.set(100, 100, 1);  只需要设置x、y两个分量就可以
                var k1 = Math.random() - 0.5;
                var k2 = Math.random() - 0.5;
                // 设置精灵模型位置，在xoz平面上随机分布
                sprite.position.set(10000 * k1, 50, 10000 * k2)
            }
            var point = new THREE.PointLight(0xffffff);
            point.position.set(400,200,300);
            this.scene.add(point)
            var axesHelper = new THREE.AxesHelper(5000)
            this.scene.add(axesHelper)
            var ambient = new THREE.AmbientLight(0x888888);
            this.scene.add(ambient);

            var width = window.innerWidth; //窗口宽度
            var height = window.innerHeight; //窗口高度
            var k = width / height; //窗口宽高比
            var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
            //创建相机对象
            this.camera = new THREE.PerspectiveCamera(60, k, 1, 10000);
            this.camera.position.set(200, 5, 200); //设置相机位置
            this.camera.lookAt(this.scene.position); //设置相机方向(指向的场景对象)

            this.renderer = new THREE.WebGLRenderer();
            this.renderer.setSize(width, height);//设置渲染区域尺寸
            this.renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
            document.body.appendChild(this.renderer.domElement); //body元素中插入canvas对象

            this.renderer.render(this.scene, this.camera)
        },
        render() {
            this.renderer.render(this.scene, this.camera)
            // this.mesh.rotateY(0.1)
            requestAnimationFrame(this.render)
        }
    }
}
</script>