<script setup>
// 导入three.js
import * as THREE from 'three'
// 导入控制器
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(
    45, // 视角 设置越大视野就越大
    window.innerWidth / window.innerHeight, // 相机的宽度比  取视口的
    0.1, // 近平面
    1000 // 远平面
)

// 创建渲染器
const renerer = new THREE.WebGLRenderer()
renerer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renerer.domElement)
// 添加轨道控制器
const controls = new OrbitControls( camera, renerer.domElement );
// 可设置带阻尼的惯性
controls.enableDamping = true;
// 阻尼值 默认0.05
controls.dampingFactor = 0.05
// 围绕目标旋转的速度将有多快，默认值为2.0，相当于在60fps时每旋转一周需要30秒。
controls.autoRotate = true

// 创建几何体
const geometry = new THREE.BoxGeometry(1,1,1);
// 创建材质
const material = new THREE.MeshBasicMaterial({ color: '#ff6600' })
// 创建网格
const cube = new THREE.Mesh(geometry, material)
// 父子元素相关
const childMaterial = new THREE.MeshBasicMaterial({ color: '#00ff68' })
const childCube = new THREE.Mesh(geometry, childMaterial)

// 缩放  作用在父元素 如果父元素放大了  子元素也会跟着放大
cube.scale.set(2,2,2)

// 子元素自己的缩放 在父元素放大的基础上再进去2倍的放大
// childCube.scale.set(2,2,2)

// 旋转 绕着x轴旋转 45度
childCube.rotation.x = Math.PI / 4
// 利用实例方法
// cube.position.x = 2
cube.position.set(3,0,0)
childCube.position.set(-3,0,0)

// 将网络添加到场景中
cube.add(childCube) // 把子元素放在父元素上  坐标位置等都相对于父元素了
scene.add(cube)

// 添加坐标辅助器
const axesHelper = new THREE.AxesHelper(5) // 线段的长度
scene.add(axesHelper)

// 设置相机位置
camera.position.z = 5
camera.position.y = 2
camera.position.x = 2
camera.lookAt(0,0,0)

// 渲染
const animate = () => {
    requestAnimationFrame(animate)
    // cube.rotation.x += 0.01
    // cube.rotation.y += 0.01
    controls.update()
    renerer.render(scene, camera)
}
animate()
// 监听窗口的变化 
window.addEventListener('resize', () => {
    // 重置渲染器宽高比
    renerer.setSize(window.innerWidth, window.innerHeight)
    // 重置相机宽高比
    camera.aspect = window.innerWidth / window.innerHeight
    // 更新相机投影矩阵
    camera.updateProjectionMatrix()

})
</script>