<template>
<div class="earth-container">
<div id="three-earth" ref="three-earth" />
</div>
</template>
<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
export default {
name: 'Earth',
props: {
},
components: {
},
data () {
return {
container: null,
render: null,
camera: null,
scene: null,
raycaster: new THREE.Raycaster(),
mouse: new THREE.Vector2(),
controls: null
}
},
mounted () {
this.initRender()
this.initScene()
this.initCamera()
this.initLight()
this.addCube()
this.initControls()
this.animate()
window.onresize = this.onWindowResize
window.addEventListener('click', this.onMouseClick, false)
},
methods: {
addCube () {
var that = this
// const loader = new GLTFLoader().setPath('static/cube/')
const loader = new GLTFLoader()
loader.load('http://33.33.39.35:8088/3dmodel/red.gltf', function (gltf) {
gltf.scene.traverse(function (child) {
if (child.isMesh) {
/* child.scale.set( 0.1, 0.1, 0.1 ); */
/* child.material.side = THREE.DoubleSide; */
console.log(child)
/* camera.lookAt( child.position ); */
// TOFIX RoughnessMipmapper seems to be broken with WebGL 2.0
// roughnessMipmapper.generateMipmaps( child.material );
}
})
that.scene.add(gltf.scene)
that.animate()
})
},
initRender: function () {
this.render = new THREE.WebGLRenderer({ antialias: true, alpha: true })
this.render.setPixelRatio(window.devicePixelRatio)
this.render.setSize(window.innerWidth, window.innerHeight)
/* this.render.shadowMap.enabled = false
this.render.shadowMap.type = THREE.PCFSoftShadowMap */
this.render.outputEncoding = THREE.sRGBEncoding
this.container = document.getElementById('three-earth')
this.container.appendChild(this.render.domElement)
},
initCamera: function () {
this.camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 100000)
this.camera.position.set(0, 0, 0)
/* this.camera.lookAt(new THREE.Vector3(0, 0, 0)) */
},
initScene: function () {
this.scene = new THREE.Scene()
},
initLight: function () {
/* const ambient = new THREE.AmbientLight(0xffffff)
this.scene.add(ambient) */
const dirLight = new THREE.DirectionalLight(0xffffff)
dirLight.position.set(10, 0, 0)
this.scene.add(dirLight)
},
initStats: function () {
/* this.stats = new Stats()
this.container.appendChild(this.stats) */
},
initControls: function () {
this.controls = new OrbitControls(this.camera, this.render.domElement)
/* this.controls.enableDamping = true
this.controls.dampingFactor = 0.25
this.controls.enableZoom = true */
/* this.controls.autoRotate = true
this.controls.autoRotateSpeed = 3
this.controls.dampingFactor = true */
this.controls.enableDamping = true
this.controls.minDistance = 500
this.controls.maxDistance = 2500
this.controls.enablePan = false
/* this.controls.panSpeed = 200
this.controls.rotateSpeed = 2 */
},
animate: function () {
requestAnimationFrame(this.animate)
this.camera.lookAt(this.scene.position)
this.render.render(this.scene, this.camera)
this.controls.update()
},
randomColor: function () {
var arrHex = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
var strHex = '#'
var index = ''
for (var i = 0; i < 6; i++) {
index = Math.round(Math.random() * 15)
strHex += arrHex[index]
}
return strHex
},
onMouseClick: function (event) {
event.preventDefault()
this.mouse.x = ((event.clientX) / window.innerWidth) * 2 - 1
this.mouse.y = -((event.clientY) / window.innerHeight) * 2 + 1
// 通过鼠标点的位置和当前相机的矩阵计算出raycaster
this.raycaster.setFromCamera(this.mouse, this.camera)
// 获取raycaster直线和所有模型相交的数组集合
var intersects = this.raycaster.intersectObjects(this.scene.children)
// 将所有的相交的模型的颜色设置为红色,如果只需要将第一个触发事件,那就数组的第一个模型改变颜色即可
if (intersects.length > 0) {
intersects[0].object.material.color.set(0xff0000)
}
},
onWindowResize: function () {
this.camera.aspect = window.innerWidth / window.innerHeight
this.camera.updateProjectionMatrix()
this.render.setSize(window.innerWidth, window.innerHeight)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#three-earth{
width: 100%;
height: 100%;
}
.earth-container{
width: 100%;
height: 100%;
}
</style>