/* eslint-disable camelcase */
|
<template>
|
<div
|
id="large-three-viewer-container"
|
ref="LargeThreeViewerContainer"
|
style="height: 100%; width: 100%"
|
></div>
|
</template>
|
|
<script>
|
import * as THREE from 'three'
|
// 鼠标控制器
|
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
|
export default {
|
name: 'largeThreeMap',
|
data () {
|
return {
|
// 创建一个场景
|
scene: null,
|
// 创建一个相机
|
camera: null,
|
// 创建一个渲染器
|
renderer: null,
|
// 模型对象
|
mesh: null,
|
// 平面
|
plane: null,
|
// 点光源
|
point: null,
|
// step
|
step: 0,
|
controls: null
|
}
|
},
|
methods: {
|
// 初始化
|
init () {
|
// 初始化容器
|
var content = this.$refs.LargeThreeViewerContainer
|
// 创建一个场景
|
this.scene = new THREE.Scene()
|
this.scene.background = new THREE.Color('#000')
|
// 创建几何体
|
var geometry = new THREE.SphereGeometry(30, 50, 50)
|
// 纹理加载器 （ 此处加载贴图 ）
|
var texture = new THREE.TextureLoader().load('/img/bg/bg.png')
|
// 几何体材质对象
|
var material = new THREE.MeshLambertMaterial({
|
map: texture
|
})
|
|
// 创建网格模型对象
|
this.mesh = new THREE.Mesh(geometry, material)
|
// 设置几何体位置
|
this.mesh.position.x = 0
|
this.mesh.position.y = 10
|
this.mesh.position.z = 0
|
this.scene.add(this.mesh)
|
|
// 创建点光源
|
var point = new THREE.PointLight('#FFF')
|
point.position.set(40, 200, 30)
|
this.point = point
|
this.scene.add(point)
|
|
const positions = []
|
const colors = []
|
const geometryXK = new THREE.BufferGeometry()
|
for (var i = 0; i < 100000; i++) {
|
var vertex = new THREE.Vector3()
|
vertex.x = Math.random() * 2 - 1
|
vertex.y = Math.random() * 2 - 1
|
vertex.z = Math.random() * 2 - 1
|
positions.push(vertex.x, vertex.y, vertex.z)
|
var color = new THREE.Color()
|
color.setHSL(Math.random() * 0.2 + 0.5, 0.55, Math.random() * 0.25 + 0.55)
|
colors.push(color.r, color.g, color.b)
|
}
|
geometryXK.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3))
|
geometryXK.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3))
|
|
var textureXq = new THREE.TextureLoader().load('/img/bg/xq.png')
|
var starsMaterial = new THREE.ParticleBasicMaterial({
|
map: textureXq,
|
size: 1,
|
transparent: true,
|
opacity: 1,
|
vertexColors: true, // true：且该几何体的colors属性有值，则该粒子会舍弃第一个属性--color，而应用该几何体的colors属性的颜色
|
blending: THREE.AdditiveBlending,
|
sizeAttenuation: true
|
})
|
|
const stars = new THREE.ParticleSystem(geometryXK, starsMaterial)
|
stars.scale.set(300, 300, 300)
|
this.scene.add(stars)
|
|
// 创建环境光
|
var ambient = new THREE.AmbientLight(0x444444)
|
this.scene.add(ambient)
|
|
// 创建一个相机
|
this.camera = new THREE.PerspectiveCamera(
|
70,
|
window.innerWidth / window.innerHeight,
|
1,
|
10000
|
)
|
this.camera.position.set(-50, 50, 50)
|
this.camera.lookAt(0, 0, 0)
|
|
// // 坐标轴辅助器，X,Y,Z长度30
|
// var axes = new THREE.AxesHelper(300);
|
// this.scene.add(axes);
|
// // 辅助网格
|
// let gridHelper = new THREE.GridHelper(100, 100);
|
// this.scene.add(gridHelper);
|
|
// 创建渲染器
|
this.renderer = new THREE.WebGLRenderer()
|
this.renderer.setSize(window.innerWidth, window.innerHeight)
|
this.renderer.setClearColor(0xb9d3ff, 1)
|
// 插入 dom 元素
|
content.appendChild(this.renderer.domElement)
|
this.controls = new OrbitControls(this.camera, this.renderer.domElement)
|
|
this.controls.addEventListener('resize', this.render(), false)
|
},
|
render () {
|
this.renderer.render(this.scene, this.camera)
|
// 自动旋转动画
|
this.mesh.rotateY(0.0001)
|
requestAnimationFrame(this.render)
|
}
|
},
|
mounted () {
|
this.init()
|
}
|
}
|
</script>
|
|
<style lang="scss" scope>
|
</style>
|
