requestAnimationFrame(this.render); 停止旋转

`requestAnimationFrame(this.render)` 是JavaScript中用于动画循环的一种方法，通常在游戏或动画场景中使用，它告诉浏览器在下一个重绘之前调用 `render` 函数。当你在 `render` 函数里设置了某个元素或对象的旋转动画时，它会按照指定频率持续旋转。

如果你想停止这个旋转，你需要在 `render` 函数内部添加相应的逻辑来关闭旋转。例如，你可以添加一个布尔变量来控制是否继续旋转，并在需要的时候将其设为 `false`。假设你的 `render` 函数是这样的：

let isRotating = true; // 初始化为true

function render() {
  if (isRotating) { // 如果正在旋转
    // 旋转代码...
    // 例如，如果使用setInterval
    // clearInterval(rotateId);
    // 或者使用requestAnimationFrame替换当前帧
    // cancelAnimationFrame(animationFrameId);
    isRotating = false; // 停止旋转
  }
  // 其他渲染操作...
  
  requestAnimationFrame(this.render); // 下一帧请求
}

当 `isRotating` 设为 `false` 后，旋转就不会再被执行，除非你在后续代码中再次激活它。

相关问题

nuxt.js引入旋转地球

要在Nuxt.js中引入旋转地球，可以使用Three.js来创建3D场景并在场景中添加旋转地球模型。以下是一个简单的示例代码：

1. 安装Three.js

在终端中运行以下命令：

npm install three

2. 创建地球模型

创建一个Vue组件，可以在组件的mounted钩子中创建地球模型。首先，我们需要导入Three.js的必要组件：

import * as THREE from 'three'

然后，在mounted钩子中创建场景、相机和地球模型：

mounted() {
  // 创建场景
  const scene = new THREE.Scene()

  // 创建相机
  const camera = new THREE.PerspectiveCamera(
    75,
    this.$refs.container.clientWidth / this.$refs.container.clientHeight,
    0.1,
    1000
  )
  camera.position.z = 5

  // 创建地球模型
  const geometry = new THREE.SphereGeometry(1, 32, 32)
  const texture = new THREE.TextureLoader().load('earth.jpg')
  const material = new THREE.MeshBasicMaterial({ map: texture })
  const earth = new THREE.Mesh(geometry, material)
  scene.add(earth)

  // 创建渲染器
  const renderer = new THREE.WebGLRenderer()
  renderer.setSize(
    this.$refs.container.clientWidth,
    this.$refs.container.clientHeight
  )
  this.$refs.container.appendChild(renderer.domElement)

  // 渲染场景
  const animate = function () {
    requestAnimationFrame(animate)
    earth.rotation.y += 0.01
    renderer.render(scene, camera)
  }
  animate()
}

注意，我们在场景中添加了地球模型，并使用requestAnimationFrame函数实现了动画效果。在每一帧中，我们将地球模型绕y轴旋转0.01弧度。

3. 添加样式

最后，我们需要在组件的template中添加一个包含渲染器的容器，并为容器添加样式：

<template>
  <div class="container" ref="container"></div>
</template>

<style>
.container {
  width: 100%;
  height: 400px;
}
</style>

现在，我们就可以在Nuxt.js应用程序中引入旋转地球了。

vue2项目中使用three.js创建一个旋转的正方体

1. 安装three.js

npm install three

2. 创建一个Vue组件

<template>
  <div ref="container"></div>
</template>

<script>
import * as THREE from 'three'

export default {
  name: 'ThreeCube',
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 创建场景
      const scene = new THREE.Scene()

      // 创建摄像机
      const camera = new THREE.PerspectiveCamera(75, this.$refs.container.clientWidth / this.$refs.container.clientHeight, 0.1, 1000)
      camera.position.z = 5

      // 创建渲染器
      const renderer = new THREE.WebGLRenderer()
      renderer.setSize(this.$refs.container.clientWidth, this.$refs.container.clientHeight)
      this.$refs.container.appendChild(renderer.domElement)

      // 创建正方体
      const geometry = new THREE.BoxGeometry(1, 1, 1)
      const material = new THREE.MeshBasicMaterial({ color: 0xcccccc })
      const 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()
    }
  }
}
</script>

<style scoped>
  div {
    height: 100%;
    width: 100%;
  }
</style>

3. 在Vue页面中引入该组件并使用

<template>
  <div>
    <three-cube />
  </div>
</template>

<script>
import ThreeCube from './components/ThreeCube.vue'

export default {
  name: 'App',
  components: {
    ThreeCube
  }
}
</script>

4. 运行项目，可以看到旋转的正方体。