作者: 还是大剑师兰特 ,曾为美国某知名大学计算机专业研究生,现为国内GIS领域高级前端工程师,CSDN知名博主,深耕openlayers、leaflet、mapbox、cesium,canvas,echarts等技术开发,欢迎加微信(gis-dajianshi),一起交流。
001
个示例
一、示例效果图
二、示例简介
本threeJS示例演示不断翻转的立体箱体,通过requestAnimationFrame(animate),来让立方体旋转。
三、配置说明
1)查看基础设置:https://xiaozhuanlan.com/topic/1378924560
2)将示例源代码,粘贴到src/views/Home.vue中,npm run serve 运行即可。
四、示例源代码(共88行)
/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @First published in CSDN
* @Second published in CSDN
* @First published time: 2024-09-05
*/
<template>
<div class="container">
<h3>vue+Three: 不断翻转的立体箱体</h3>
<p>大剑师兰特, 还是大剑师兰特</p>
<div id="vue-three"></div>
</div>
</template>
<script>
import * as THREE from "three";
export default {
data() {
return {
}
},
methods: {
initThree() {
//场景
var scene = new THREE.Scene();
// 相机
var camera = new THREE.PerspectiveCamera(75, 2, 0.5, 1000);
camera.position.z = 5;
// 渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(960, 530);
let dom = document.getElementById('vue-three');
dom.appendChild(renderer.domElement);
// 几何体
var geometry = new THREE.BoxGeometry(2, 2, 2);
// 材质
var material = new THREE.MeshBasicMaterial({
color: 0xffff00
});
// 物体
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
},
},
mounted() {
this.initThree();
}
}
</script>
<style scoped>
.container {
width: 1000px;
height: 660px;
margin: 10px auto;
border: 1px solid #42B983;
}
#vue-three {
width: 960px;
height: 530px;
margin: 0 auto;
border: 1px solid #42B983;
position: relative;
}
</style>