固定three.js在屏幕中的位置

固定three.js在屏幕中的位置可以通过CSS样式来实现。首先，将three.js渲染器的canvas元素放置在一个父容器中，然后使用CSS样式来设置父容器的位置、宽度和高度。以下是一个简单的示例代码：

<template>
  <div class="scene-container">
    <canvas ref="canvas"></canvas>
  </div>
</template>

<script>
import * as THREE from 'three';

export default {
  name: 'FixedThreeScene',
  data() {
    return {
      scene: null,
      camera: null,
      renderer: null,
      cube: null,
    };
  },
  mounted() {
    this.init();
    this.animate();
  },
  methods: {
    init() {
      // 创建场景
      this.scene = new THREE.Scene();

      // 创建相机
      this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      this.camera.position.z = 5;

      // 创建渲染器
      this.renderer = new THREE.WebGLRenderer({ canvas: this.$refs.canvas });
      this.renderer.setSize(this.$refs.canvas.clientWidth, this.$refs.canvas.clientHeight);

      // 创建立方体
      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      this.cube = new THREE.Mesh(geometry, material);
      this.scene.add(this.cube);
    },
    animate() {
      requestAnimationFrame(this.animate);
      this.cube.rotation.x += 0.01;
      this.cube.rotation.y += 0.01;
      this.renderer.render(this.scene, this.camera);
    },
  },
};
</script>

<style>
.scene-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

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

以上代码创建了一个Vue组件，包含了一个ref为canvas的canvas元素。在init方法中，使用WebGLRenderer的canvas选项将渲染器的canvas元素设置为组件中的canvas元素。在animate方法中，使用requestAnimationFrame函数来更新立方体的旋转并渲染场景。在样式中，将父容器设置为position: fixed，top: 0，left: 0，width: 100%，height: 100%，并将z-index设置为-1，将其固定在屏幕中间。然后将canvas元素的宽度和高度设置为100%。