一、核心代码讲解

1. 修改物体的为位置，主要用到Mesh中的postition属性（继承自Object3D）

.position : Vector3

表示对象局部位置的Vector3。默认值为(0, 0, 0)。

Vector3（三维向量）

该类表示的是一个三维向量（3D vector）。 一个三维向量表示的是一个有顺序的、三个为一组的数字组合（标记为x、y和z）， 可被用来表示很多事物，例如：
1. 一个位于三维空间中的点。
2. 一个在三维空间中的方向与长度的定义。在three.js中，长度总是从(0, 0, 0)到(x, y, z)的 Euclidean distance（欧几里德距离，即直线距离）， 方向也是从(0, 0, 0)到(x, y, z)的方向。
3. 任意的、有顺序的、三个为一组的数字组合。
4. 其他的一些事物也可以使用二维向量进行表示，比如说动量矢量等等； 但以上这些是它在three.js中的常用用途。
对 Vector3 实例进行遍历将按相应的顺序生成它的分量 (x, y, z)。

cube.position.set(5, 0, 0);

或

cube.position.x = 5;

2. 实现让物体一直移动，移到某一个距离时回到原点，如此往复

const render = () => {
    cube.position.x += 0.01;
    if(cube.position.x > 5) {
        cube.position.x = 0;
    }
    renderer.render(scene, camera);
    // 渲染下一帧的时候就会调用render函数
    requestAnimationFrame(render);
}

二、完整代码

/** 
 * Learning3
 * threejs控制3d物体移动
 * Author: Li Jincheng
 * Time: 2023/01/31
*/

<template>
    <div></div>
</template>


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



export default {
    name: 'Learning3',
    methods: {
        init() {
            // 创建场景
            const scene = new THREE.Scene();

            // 创建（透视投影）相机
            const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

            // 设置相机位置
            camera.position.set(0, 0, 10);
            scene.add(camera);

            // 添加物体
            // 创建几何体
            const cubeGeometry = new THREE.BoxGeometry();
            const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });

            // 根据几何体和材质创建物体
            const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

            //修改物体的为位置
            // cube.position.set(5, 0, 0);
            cube.position.x = 3;

            // 将几何体添加到场景中
            scene.add(cube);

            // 初始化渲染器
            const renderer = new THREE.WebGLRenderer();

            // 设置渲染的尺寸大小
            renderer.setSize(window.innerWidth, window.innerHeight);
            // console.log(renderer)

            // 将webgl渲染的canvas内容添加到body
            document.body.appendChild(renderer.domElement);

            // // 使用渲染器，通过相机将场景渲染进来
            // renderer.render(scene, camera);

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

            // 添加坐标轴辅助器
            const axesHelper = new THREE.AxesHelper(5);
            scene.add(axesHelper);

            const render = () => {
                cube.position.x += 0.01;
                if(cube.position.x > 5) {
                    cube.position.x = 0;
                }
                renderer.render(scene, camera);
                // 渲染下一帧的时候就会调用render函数
                requestAnimationFrame(render);
            }

            render();
        }
    },
    mounted() {
        this.init()
    }

}
</script>