引入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