引入three.js
<script src="https://johnson2heng.github.io/three.js-demo/lib/three.js"></script>
<script src="https://johnson2heng.github.io/three.js-demo/lib/js/controls/OrbitControls.js"></script>
<style lang="less" scoped>
#ltz{
width: 500px;
height: 300px;
background-color: #fff;
}
</style>
<template>
<div>
<div id="ltz" ref='ltz'></div>
</div>
</template>
<script>
export default {
data(){
return{
renderer:'',
camera:'',
scene:'',
light:'',
stats:'',
controls:'',
gui:'',
mesh:'',
url:'../../../static/img/tencen.jpg'
}
},
methods:{
initRender() {
this.renderer = new THREE.WebGLRenderer({antialias: true});
//this.renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0)); //設置背景顏色
this.renderer.setSize(400, 300);
let ltzdom = document.getElementById('ltz')
console.log( ltzdom,'this.renderer')
ltzdom.appendChild(this.renderer.domElement);
},
initCamera() {
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 5000);
this.camera.position.set(10, 0, 0) //設置相機位置
this.camera.target = new THREE.Vector3( 0, 0, 0 );
},
initScene() {
this.scene = new THREE.Scene();
},
initModel() {
//軸輔助 （每一個軸的長度）
var object = new THREE.AxesHelper(500);
this.scene.add(object); //座標軸確定
//聲明一個球體
var geometry = new THREE.SphereBufferGeometry( 500, 32, 32 );
// 反轉X軸上的幾何圖形，使所有的麪點向內。
geometry.scale( -1, 1, 1 );
//聲明球體紋理
var material = new THREE.MeshBasicMaterial( {
map: new THREE.TextureLoader().load(this.url) //加載一整張紋理圖片
} );
this.mesh = new THREE.Mesh( geometry, material );
this.scene.add( this.mesh );
},
//初始化性能插件
initStats() {
this.stats = new Stats();
let ltzdom = document.getElementById('static/img/tencen.jpg')
// console.log(this.stats,'document.getElementById()')
// ltzdom.appendChild(this.stats.dom);
},
//用戶交互插件 鼠標左鍵按住旋轉，右鍵按住平移，滾輪縮放
initControls() {
this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
// 如果使用animate方法時，將此函數刪除
//this.controls.addEventListener( 'change', render );
// 使動畫循環使用時阻尼或自轉 意思是否有慣性
this.controls.enableDamping = true;
//動態阻尼係數 就是鼠標拖拽旋轉靈敏度
//this.controls.dampingFactor = 0.25;
//是否可以縮放
this.controls.enableZoom = true;
//是否自動旋轉
this.controls.autoRotate = false;
//設置相機距離原點的最遠距離
this.controls.minDistance = 20;
//設置相機距離原點的最遠距離
this.controls.maxDistance = 10000;
//是否開啓右鍵拖拽
this.controls.enablePan = false;
},
//生成gui設置配置項
// initGui() {
// //聲明一個保存需求修改的相關數據的對象
// this.gui = {
// };
// var datGui = new dat.GUI();
// //將設置屬性添加到gui當中，gui.add(對象，屬性，最小值，最大值）
// },
render() {
this.renderer.render(this.scene, this.camera);
},
//窗口變動觸發的函數
onWindowResize() {
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
this.render();
this.renderer.setSize(window.innerWidth, window.innerHeight);
},
animate() {
//更新控制器
this.controls.update();
this.render();
//更新性能插件
// this.stats.update();
requestAnimationFrame(this.animate);
},
init(){
this.initRender();
this.initScene();
this.initCamera();
this.initModel();
this.initControls();
// this.initStats();
// this.initGui();
this.animate();
// window.onresize = onWindowResize;
}
},
created(){
this.$nextTick(()=>{
this.init()
})
}
}
</script>
<style scoped>
</style>
https://blog.csdn.net/qq_30100043/article/details/79069954