<template>
<div id="container"></div>
</template>
<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
let scene = new THREE.Scene()
// 相机
//let camera = new THREE.PerspectiveCamera();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 远，高，横向
camera.position.set(200, 200, 200);
camera.lookAt(0, 0, 0);
scene.add(camera)
// 光
const ambientLight = new THREE.AmbientLight(0xffffff, 0) // 创建环境光
scene.add(ambientLight) // 将环境光添加到场景
// 渲染器变量,地球
let renderer, sphere;
// 组
let group = new THREE.Group();
export default {
data() {
return {
}
},
mounted() {
this.init()
},
methods: {
// 初始化
init() {
// 创建地球
this.createEarth()
this.createSprites() // 创建粒子
this.createRender() // 创建渲染器
this.render() // 渲染
},
// 创建粒子
createSprites() {
const material = new THREE.SpriteMaterial() // 创建粒子材质
// 粒子数量
let size = 1000;
for (let x = 0; x < size; x++) {
const particle = new THREE.Sprite(material) // 创建粒子
const x = (Math.random() * size + Math.random() * size) / 2 - size / 2
const y = (Math.random() * size + Math.random() * size) / 2 - size / 2
const z = (Math.random() * size + Math.random() * size) / 2 - size / 2
particle.position.set(x, y, z)
group.add(particle)
scene.add(group)
}
},
// 创建渲染器
createRender() {
const container = document.getElementById('container')
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染区域尺寸
renderer.shadowMap.type = THREE.PCFSoftShadowMap
renderer.setClearColor(0x000000, 1) // 设置背景颜色
new OrbitControls(camera, renderer.domElement)
container.appendChild(renderer.domElement)
},
// 地球
createEarth() {
let _this = this
const geometry = new THREE.SphereGeometry(100, 32, 32);
const texture = new THREE.TextureLoader().load(require('../assets/ds.jpg'), function (texture) {
// 纹理加载完成后的回调函数
let material = new THREE.MeshBasicMaterial({
map: texture,
});
sphere = new THREE.Mesh(geometry, material);
sphere.position.set(0, 0, 0);
group.add(sphere);
scene.add(group);
_this.earthAction()
});
},
// 地球自转
earthAction() {
let sj = '';
group.rotation.y = 16.4;
cancelAnimationFrame(sj);
sj = setInterval(() => {
group.rotation.y = group.rotation.y + 0.001
}, 5);
},
render() {
requestAnimationFrame(this.render)
renderer.render(scene, camera); // 渲染场景
},
}
}
</script>
<style></style>