第一个vue+three.js实例

<script setup>
//导入Three.js
import * as Three from 'three'
//导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

import { onMounted, reactive, toRefs } from 'vue';
let scene = null,
    camera = null,
    renderer = null,
    cube = null

const init = () => {
    //创建场景
    let container = document.getElementById('container');
    scene = new Three.Scene()
    //创建相机（角度，容器的宽高比，视锥体近端，视锥体远端）
    camera = new Three.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.01, 1000)
    //设置相机位置(x,y,z)
    camera.position.set(0, 0, 10)
    //将相机添加到场景中
    scene.add(camera)
    //添加物体
    //创建几何体
    const cubeGeometry = new Three.BoxGeometry(1, 1, 1)
    //材质
    // const cubeMaterial = new Three.MeshBasicMaterial({ color: 0xffff00 })
    const cubeMaterial = new Three.MeshNormalMaterial()
    //根据几何材质创建物体
    cube = new Three.Mesh(cubeGeometry, cubeMaterial)
    //将几何体添加到场景中
    scene.add(cube)
    //初始化渲染器
    renderer = new Three.WebGLRenderer()
    //设置渲染的尺寸大小
    renderer.setSize(container.clientWidth, container.clientHeight)
    // console.log(renderer);
    //将webgl渲染的canvas内容添加到id为container的div上
    container.appendChild(renderer.domElement);
    //使用渲染器，通过相机将场景渲染进来
    // renderer.render(scene, camera);
    //创建轨道控制器
    const controls = new OrbitControls(camera, renderer.domElement)
    // //添加坐标轴辅助器
    const axesHelper = new Three.AxesHelper(5)
    scene.add(axesHelper)
    //实现三维物体移动
    //修改物体的位置(x,y,z)
    // cube.position.set(0, 0, 5)
    // cube.position.x = 3
    //设置缩放
    // cube.scale.set(3, 2, 1)
    // cube.scale.x = 5
    //旋转,xzy旋转轴的顺序，可不传
    cube.rotation.set(Math.PI / 4, 0, 0, 'XZY')
}
let flag = true
const animate1 = (time) => {
    requestAnimationFrame(animate1);//每一帧重新渲染（渲染下一帧的时候调用animate1函数）
    //自动旋转
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    let t = time / 1000 % 5
    cube.position.x = t * 1
    renderer.render(scene, camera);
}
onMounted(() => {
    init()
    animate1()
})

</script>

<template>
    <div id="container"></div>
</template>

<style scoped>
#container {
    height: 100%;
}
</style>