FR怎么使用three.js

FR是一个用于创建、编辑和预览3D场景的强大工具，它结合了易用性和功能丰富性。在three.js中使用FR需要几个步骤：

1. **安装依赖**：首先确保已经安装了Node.js，并通过npm安装`fr`库：

   npm install fr -g

2. **创建项目**：使用FR初始化一个新的three.js项目：

   fr new my-threejs-app
   cd my-threejs-app

3. **引入three.js**：在项目的`index.html`文件中，添加three.js的CDN链接或本地引用，如：

   <script src="https://cdn.jsdelivr.net/npm/three@0.142.0/build/three.min.js"></script>

4. **创建场景**：在JavaScript中，加载Three.js并创建一个场景、相机和渲染器：

   import * as THREE from 'three';

   const scene = new THREE.Scene();
   const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
   const renderer = new THREE.WebGLRenderer();
   renderer.setSize(window.innerWidth, window.innerHeight);
   document.body.appendChild(renderer.domElement);

5. **创建模型**：使用THREE.Object3D（例如BoxGeometry或Mesh）实例化3D模型：

   const geometry = new THREE.BoxGeometry(1, 1, 1);
   const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
   const cube = new THREE.Mesh(geometry, material);
   scene.add(cube);

6. **动画和渲染循环**：设置动画更新和渲染函数，通常会在浏览器的`requestAnimationFrame`回调中运行：

   function animate() {
     requestAnimationFrame(animate);
     cube.rotation.x += 0.01;
     cube.rotation.y += 0.01;
     renderer.render(scene, camera);
   }
   animate();