当前位置：首页 > news >正文

three.js使用精灵模型Sprite渲染森林

news 2025/9/16 7:41:24

效果：

源码：

<template><div><el-container><el-main><div class="box-card-left"><div id="threejs" style="border: 1px solid red"></div><div class="box-right"></div></div></el-main></el-container></div>
</template>
<script>
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
export default {data() {return {name: "",scene: null,camera: null,renderer: null,mesh: null,geometry: null,group: null,material: null,texture: null,};},created() {},mounted() {this.name = this.$route.query.name;this.init();},methods: {goBack() {this.$router.go(-1);},init() {// 1,创建场景对象this.scene = new this.$three.Scene();this.createGeometry();// 2,创建纹理加载器加载图片  (加载图片时用require)const textLoader = new this.$three.TextureLoader().load(require("../../assets/twelve/tree.png"));const textLoader5 = new this.$three.TextureLoader().load(require("../../assets/twelve/tree5.png"));// 创建组对象const group = new this.$three.Group()for (let index = 0; index < 50; index++) {let flag_1 = Math.trunc((Math.random() * 70)) % 2 == 0 ? -1 : 1;// 创建精灵材质对象const spriteMaterial = new this.$three.SpriteMaterial({transparent: true,// color:0x00ffff,//设置颜色map: flag_1 > 0 ? textLoader : textLoader5,});// Math.trunc 取整；Math.random() 获得0-1的随机数let flag = Math.trunc((Math.random() * 137)) % 2 == 0 ? -1 : 1;let flag2 = Math.trunc((Math.random() * 203)) % 2 == 0 ? -1 : 1;// 创建精灵对象const sprite = new this.$three.Sprite(spriteMaterial);sprite.position.set(Math.random() * 200 * flag, 40, Math.random() * 200 * flag2);sprite.scale.set(80, 80, 1);sprite.name = "我是大树" + index;group.add(sprite);}this.scene.add(group);// 添加辅助坐标轴const axesHelper = new this.$three.AxesHelper(300);// this.scene.add(axesHelper);// 创建环境光对象const light = new this.$three.AmbientLight(0xffffff, 100);this.scene.add(light);// 创建正交投影相机对象// this.camera = new this.$three.OrthographicCamera(-200,200,200,-200,1,1000);this.camera = new this.$three.PerspectiveCamera(60,1,0.01,1000);// 设置相机位置this.camera.position.set(300,300,300);// 设置相机指向this.camera.lookAt(0,0,0);this.renderer = new this.$three.WebGLRenderer();this.renderer.setSize(2200,1400);setTimeout(() => {this.renderer.render(this.scene, this.camera);},500)window.document.getElementById("threejs").appendChild(this.renderer.domElement);// 创建相机空间轨道控制器const controls = new OrbitControls(this.camera, this.renderer.domElement);controls.addEventListener("change", () => {this.renderer.render(this.scene, this.camera);})console.log('this.scene', this.scene);},// 创建平面缓冲几何体createGeometry() {const planeGeometry = new this.$three.PlaneGeometry(500,500);const material = new this.$three.MeshBasicMaterial({color: 0x14A88A,side: this.$three.DoubleSide});const plane = new this.$three.Mesh(planeGeometry, material);plane.rotateX(Math.PI/2);this.scene.add(plane);},},
};
</script>
//
<style lang="less" scoped>
.msg {padding: 20px;text-align: left;display: flex;justify-content: flex-start;flex-wrap: wrap;.span {margin: 0 30px 30px 0;// white-space: nowrap;}.p {text-align: left;}
}
.box-card-left {display: flex;align-items: flex-start;flex-direction: row;width: 100%;.box-right {text-align: left;padding: 10px;.xyz {width: 100px;margin-left: 20px;}.box-btn {margin-left: 20px;}}
}
</style>