直接贴进去就可以用。
<template>
<div id="container"></div>
</template>
<script>
//引入three
import * as THREE from 'three'
//引入控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
let scene = new THREE.Scene()
// 相机
let camera = new THREE.PerspectiveCamera();
// 远，高，横向
camera.position.set(500, 1000, 500);
camera.lookAt(0, 0, 0);
scene.add(camera)
// 光
const ambientLight = new THREE.AmbientLight(0xffffff, 0) // 创建环境光
scene.add(ambientLight) // 将环境光添加到场景
// 渲染器变量
let renderer;
export default {
data() {
return {
}
},
mounted() {
this.init()
},
methods: {
// 初始化
init() {
// 创建粒子
this.createSprites()
// 创建渲染器
this.createRender()
// 渲染
this.render()
},
// 创建粒子
createSprites() {
// 创建粒子材质
const material = new THREE.SpriteMaterial()
// 粒子数量
let size = 2000;
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)
//加入场景
scene.add(particle)
}
},
// 创建渲染器
createRender() {
const container = document.getElementById('container')
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
// 设置渲染区域尺寸
renderer.setSize(window.innerWidth, window.innerHeight)
// 显示阴影;
renderer.shadowMap.enabled = true
renderer.shadowMap.type = THREE.PCFSoftShadowMap
// 设置背景颜色
renderer.setClearColor(0x000000, 1)
new OrbitControls(camera, renderer.domElement)
container.appendChild(renderer.domElement)
},
render() {
renderer.render(scene, camera)
requestAnimationFrame(this.render)
},
}
}
</script>
<style></style>