vue+threeJS示例（001）: 不断翻转的立体箱体

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内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: [email protected]
* @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>