新建文件夹选择Vanilla (就是不用vue框架的意思)报错node版本展示代码中使用index.html引入three.js删除main.js:创建style.css:index.html引入安装three.js:当前版本切换另外一个版本之后main.js的代码// 导入 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()最终展示