vue2使用three.js实现一个旋转球体
vue页面中
<div ref="container"></div>data声明
scene: null, camera: null, renderer: null, controls: null, rotationType: 'sphere', rotationTimer: null,backgroundImageUrl: 'https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/cake/screen-bg.png',sphereGroup: null,defautNum: 200,渲染方法
initThree() {this.clearScene();// 创建场景this.scene = new THREE.Scene();// 设置场景背景为透明this.scene.background = null;// 创建相机this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);this.camera.position.z = 10;// 创建渲染器this.renderer = new THREE.WebGLRenderer({ alpha: true });this.renderer.setSize(window.innerWidth, window.innerHeight);this.renderer.setClearColor(0x000000, 0); // 设置清除颜色为透明const canvas = this.renderer.domElement;canvas.style.zIndex = 1; // 设置画布的 z-indexthis.$refs.container.appendChild(canvas);// 创建控制器this.controls = new OrbitControls(this.camera, canvas);// 创建一个用于存放球体元素的组this.sphereGroup = new THREE.Group();this.scene.add(this.sphereGroup);},animate() {this.isAnimate = true;requestAnimationFrame(this.animate);if (this.rotationType === 'sphere') {if (this.sphereGroup) {this.sphereGroup.rotation.y += 0.01;}}this.controls.update();this.renderer.render(this.scene, this.camera);},createInitialSphere() {const radius = 5;if(this.signList.length > 0){if (this.signList.length >= this.defautNum) {// 超出200个截取组成this.peopleList = this.signList.slice(0, this.defautNum);} else {// 未超出200个随机截取组成for (let i = 0; i < this.defautNum; i++) {const randomIndex = Math.floor(Math.random() * this.signList.length);this.peopleList.push(this.signList[randomIndex]);}}}else{for (let i = 0; i < 200; i++) {this.peopleList.push({uid: null,nickname: '默认用户',avatar: 'https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/liveCardBj.png'});}}for (let i = 0; i < this.defautNum; i++) {const participant = this.peopleList[i];const loader = new THREE.TextureLoader();loader.load(participant.avatar, (texture) => {const material = new THREE.MeshBasicMaterial({ map: texture });const geometry = new THREE.PlaneGeometry(1, 1);const mesh = new THREE.Mesh(geometry, material);const group = new THREE.Group();group.add(mesh);participant.group = group;const phi = Math.acos(-1 + (2 * i) / this.defautNum);const theta = Math.sqrt(this.defautNum * Math.PI) * phi;const x = radius * Math.cos(theta) * Math.sin(phi);const y = radius * Math.sin(theta) * Math.sin(phi);const z = radius * Math.cos(phi);group.position.set(x, y, z);group.lookAt(0, 0, 0);this.sphereGroup.add(group);});}},渲染有一个问题 重新触发会导致球体运动加速；再这里要加个判断如果有触发动画的话；再次渲染不需要加载动画方法
that.initThree();if (!that.isAnimate){that.animate();}that.createInitialSphere();