// 初始化控制器 const controls = new THREE.OrbitControls(camera, renderer.domElement); // 监听控制器变化 controls.addEventListener('change', () => { console.log('相机位置改变了'); });也不生效

可能是因为你没有在渲染循环中调用控制器的 update 方法。你可以在渲染循环中添加如下代码：

function animate() {
  requestAnimationFrame(animate);
  controls.update(); // 更新控制器
  renderer.render(scene, camera);
}
animate();

这样控制器就能够生效了。同时，你也可以在控制器的构造函数中传入一个参数 `autoRotate`，设置为 `true` 就可以自动旋转了。例如：

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.autoRotate = true;

相关问题

<script setup> import HelloWorld from './components/HelloWorld.vue' import TheWelcome from './components/TheWelcome.vue' </script> <template> <div class='container' ref='container'></div> </template> <script> import * as THREE from "three"; import {ref} from "vue"; import {onMounted} from "vue"; import {OrbitControls} from "three/examples/jsm/controls/OrbitControls" const scene=new THREE.Scene() const camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000) camera.position.z=5 const renderer=new THREE.WebGLRenderer() renderer.setSize(window.innerWidth,window.innerHeight) 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) function render(){ renderer.render(scene, camera); requestAnimationFrame(render); } const container=ref(null) function fun(){ const controls=new OrbitControls(camera,container.value) controls.enableDamping=true container.value.appendChild(renderer.domElement); render() } onMounted(fun); </script> <style > *{ margin:0; padding:0; } .container{ height:100vh; width:100vw; bcakground-color:#f0f0f0; } </style>帮我检查以上代码并改正

在代码中，`bcakground-color`应该改为`background-color`，以修正样式错误。此外，需要将组件导入语句放入`<script>`标签中，并且将组件添加到模板中，以便正确地渲染组件。修改后的代码如下：

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

<script>
  import * as THREE from "three";
  import { ref } from "vue";
  import { onMounted } from "vue";
  import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
  import HelloWorld from './components/HelloWorld.vue';
  import TheWelcome from './components/TheWelcome.vue';

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.position.z = 5;
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  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);

  function render() {
    renderer.render(scene, camera);
    requestAnimationFrame(render);
  }

  const container = ref(null);

  function fun() {
    const controls = new OrbitControls(camera, container.value);
    controls.enableDamping = true;
    container.value.appendChild(renderer.domElement);
    render();
  }

  export default {
    components: {
      HelloWorld,
      TheWelcome
    },
    setup() {
      onMounted(fun);
    },
    setup() {
      onMounted(fun);
    },
  };
</script>

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .container {
    height: 100vh;
    width: 100vw;
    background-color: #f0f0f0;
  }
</style>

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)

`const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)` 是使用 Three.js 创建一个透视相机（PerspectiveCamera）的代码。

透视相机是 Three.js 中常用的相机类型之一，它模拟了人眼观察场景时的透视效果。通过设置透视相机的参数，我们可以定义视角、宽高比、近裁剪面和远裁剪面。

在上面的代码中，我们通过 `new THREE.PerspectiveCamera()` 创建了一个透视相机对象。构造函数的参数依次是：

- `fov`（视角）：指定相机垂直方向的可见角度，单位为度数。较小的视角会产生更大的变焦效果，较大的视角则会产生更大的景深范围。
- `aspect`（宽高比）：指定渲染输出的宽高比，即场景在渲染目标上的横向比例。通常使用 `window.innerWidth / window.innerHeight` 来保持与当前窗口的宽高比一致。
- `near`（近裁剪面）：指定相机到达这个距离之前的物体将不可见。常用一个正数（例如 `0.1`）来确保离相机近的物体不会被裁剪掉。
- `far`（远裁剪面）：指定相机到达这个距离之后的物体将不可见。需要根据场景的大小和需求来调整这个值。

通过创建透视相机对象，我们可以将其用于场景的渲染和相机的控制，例如：

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

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 将相机添加到场景中
scene.add(camera);

// 设置相机位置和朝向
camera.position.z = 5;
camera.lookAt(scene.position);

// 渲染场景
renderer.render(scene, camera);

希望这可以帮助你理解如何使用 `THREE.PerspectiveCamera` 创建透视相机对象，并将其应用于 Three.js 场景中。