<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>
three-物体运动
最新推荐文章于 2025-06-13 08:24:12 发布