进入根目录：
App.vue:
子组件中加入js:
安装three.js:
代码：
<script setup> // 导入 Three.js 库 import * as THREE from 'three' // 创建场景 - 用于容纳所有3D对象、灯光和相机 const scene = new THREE.Scene() // 创建透视相机 - 参数：视野角度(75度)、宽高比、近裁剪面(0.1)、远裁剪面(1000) const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) // 创建 WebGL 渲染器 const renderer = new THREE.WebGLRenderer() // 设置渲染器大小为浏览器窗口大小 renderer.setSize(window.innerWidth, window.innerHeight) // 将渲染器的 canvas 元素添加到页面中 document.body.appendChild(renderer.domElement) // 创建立方体几何体 - 参数：宽度、高度、深度 const geometry = new THREE.BoxGeometry(1, 1, 1) // 创建基础材质 - 设置颜色为绿色(十六进制颜色值 0x00ff00) const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }) // 创建网格对象 - 将几何体和材质组合在一起 const cube = new THREE.Mesh(geometry, material) // 将立方体添加到场景中 scene.add(cube) // 设置相机位置 - 沿z轴向后移动2个单位，以便能看到立方体 camera.position.z = 2 // 动画函数 - 创建循环动画 function animate() { // 请求下一帧动画，实现循环 requestAnimationFrame(animate) // 每帧旋转立方体 - x轴和y轴各旋转0.01弧度 cube.rotation.x += 0.01 cube.rotation.y += 0.01 // 渲染场景和相机 renderer.render(scene, camera) } // 启动动画循环 animate() </script> <template> <div id="app"></div> </template> <style scoped> </style>
