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})//网格模型对象Meshvar 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>

vue用Three.js点精灵绘制森林相关推荐

vue.js 利用canvas绘制仪表盘圆环进度条-带动画
vue.js 利用canvas绘制简易仪表盘进度条 html代码因为动画效果比较消耗性能,所以进度条单独canvas绘制 <template><div class="ci ...
vue整合bpmn.js并汉化
文章目录展示最终效果壹.准备工作贰.目录结构和所有文件 1.main.js 文件引入样式文件 2.BpmnModeler.vue 3.defaultXmlStr.js 4.customTrans ...
vue 给圆遮盖物添加文字高德地图_通过 Vue + 高德地图 JS API 在地图上标记咖啡店...
通过 Vue + 高德地图 JS API 在地图上标记咖啡店由学院君创建于2年前, 最后更新于 2年前版本号 #1 在上一篇教程中我们为咖啡店地址进行了地理编码,这样,就可以调用高德地图支持的 ...
Vue项目中使用AntV X6绘制流程图
Vue项目中使用AntV X6绘制流程图一.需求在Vue2.x(Vue3.x项目同理)项目中使用AntV X6组件库绘制流程图,需要实现以下需求: 需求1:左侧菜单中的模块可以拖拽进入画布中生成对 ...
【项目技术点总结之一】vue集成d3.js利用svg加载图片实现缩放拖拽功能
[项目技术点总结之一]vue集成d3.js利用svg加载图片实现缩放拖拽功能前言概述技术介绍实现过程插件安装引用组件初始化组件实现效果简单理解使用d3创建一个svg 在svg中提添 ...
R语言使用forestplot包绘制森林图：编码创建森林图仿真数据、汇总线修改、元素位置调整、垂直线、字体、风格、置信区间、线型、图例、刻度、标签等
R语言使用forestplot包绘制森林图:编码创建森林图仿真数据.汇总线修改.元素位置调整.垂直线.字体.风格.置信区间.线型.图例.刻度.标签等目录
ML之RF：利用Js语言设计随机森林算法【DT之CART算法(gain index)】并应用随机森林算法
ML之RF:利用Js语言设计随机森林算法[DT之CART算法(gain index)]&并应用随机森林算法目录输出结果设计思路代码实现(部分代码) 输出结果设计思路代码实现(部分代 ...
Vue+Openlayer使用Draw实现交互式绘制多边形并获取面积
场景 Vue+Openlayer使用Draw实现交互式绘制线段: Vue+Openlayer使用Draw实现交互式绘制线段_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上实 ...
SVG.js 基础图形绘制整理（二）
一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...

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

vue用Three.js点精灵绘制森林相关推荐

最新文章

热门文章