three-物体运动

<script setup>
import { ref, onMounted } from 'vue'
import * as THREE from 'three';
// 导入轨道控制器
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
onMounted(() => {
  // AxesHelper：辅助观察的坐标系
  show()
})
const show = () => {
  // 1. 创建场景
const scene = new THREE.Scene()
// 2. 创建相机
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  1,
  1000
)

camera.position.z = 100

// 5. 创建立方体(几何+材质)
const cubeGeometry = new THREE.BoxGeometry(10, 10, 10)
const cubeMaterial = new THREE.MeshNormalMaterial()
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
// 添加到场景
scene.add(cube)

// 6. 显示坐标轴(x轴: 红色; y轴: 绿色; z轴: 蓝色 rgb)
// x轴水平方向(右正); y轴垂直方向(上正); z轴垂直xy平面即屏幕(外正)
const axesHelper = new THREE.AxesHelper(50)
scene.add(axesHelper)

// 3. 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

// 7. 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)

// 4. 动态渲染
function animation() {
  // cube.position.x = 20; 
  // cube.position.y = 20; 
  // cube.position.z = 20; 
  cube.position.x += 0.1;// 让立方体向右移动0.01个单位  
  if (cube.position.x > 30) { // 当位置大于5时  
    cube.position.x = 0; // 从0开始  
  }  
  controls.update()
  renderer.render(scene, camera)

  requestAnimationFrame(animation)
}
animation()
}
</script>

<template></template>

<style scoped>

</style>