话不多说，先上效果图~

首先引入

import * as THREE from "three";

给个容器

<template>
    <div ref="threeJSContainer" class="threejs-container">div>
template>

创建变量

const threeJSContainer = ref(null);
const renderer = ref(null); //渲染器实例
const scene = new THREE.Scene();
const camera = ref(null);

初始化Threejs


    //场景
	// scene.position.y = 10;

	//辅助观察的坐标系
	// const axesHelper = new THREE.AxesHelper(100);
	// scene.add(axesHelper);car

	//获取容器宽高
	const dom = document.querySelector(".threejs-container");
	const w = dom.offsetWidth;
	const h = dom.offsetHeight;

	//创建相机：透视相机
	camera.value = new THREE.PerspectiveCamera(5.6, w / h, 0.1, 1100);
	camera.value.position.set(0, 0, 550);

	//创建渲染器
	renderer.value = new THREE.WebGLRenderer({
		antialias: true, //开启抗锯齿
		alpha: true,
	});
	orbitControls.value = new OrbitControls(
		camera.value,
		renderer.value.domElement
	);
	orbitControls.value.enableZoom = true;

	orbitControls.value.minDistance = 500;
	orbitControls.value.maxDistance = 800;
	orbitControls.value.minPolarAngle =  0;
	orbitControls.value.maxPolarAngle = Math.PI / 1.7; 
	orbitControls.value.minAzimuthAngle = -Math.PI / 6;
	orbitControls.value.maxAzimuthAngle = Math.PI / 6;

	//设置渲染区域大小
	renderer.value.setSize(w, h);
	renderer.value.setClearColor(0xdde7f3);
	renderer.value.shadowMap.enabled = true; // 启用阴影映射
	//添加到页面中，不然还是啥都没有
	dom.appendChild(renderer.value.domElement);

	//添加光源
	const ambientLight = new THREE.AmbientLight(0xffffff, 1); //环境光
	const directionalLight = new THREE.DirectionalLight(0xffffff, 1); //平行光
	directionalLight.position.set(0, 1, 40).normalize();
	directionalLight.castShadow = true; // 启用阴影

	// 设置平行光的阴影属性
	directionalLight.shadow.mapSize.width = 1024; // 阴影映射的宽度
	directionalLight.shadow.mapSize.height = 1024; // 阴影映射的高度
	directionalLight.shadow.camera.near = 0.5; // 阴影相机的近裁剪面
	directionalLight.shadow.camera.far = 50; // 阴影相机的远裁剪面
	directionalLight.shadow.camera.left = -5; // 阴影相机的左边界
	directionalLight.shadow.camera.right = 5; // 阴影相机的右边界
	directionalLight.shadow.camera.top = 5; // 阴影相机的上边界
	directionalLight.shadow.camera.bottom = -5; // 阴影相机的下边界

	const light = new THREE.PointLight(0xffffff, 1); //点光源
	light.position.set(0, 10, 10);

	scene.add(ambientLight, directionalLight, light, groundGroup);

	animation();
	window.addEventListener("resize", onWindowResize);

实时更新幕布

const animationId = ref(null);
const animation = () => {
    animationId.value = requestAnimationFrame(animation);
    renderer.value.render(scene, camera.value);
};

至此幕布已经准备好了，可以画物体了。物体对象有很多就不在此处赘述了，后面有机会再给大家详细介绍。。。

组件销毁了不要忘了注销实例哦！！

onBeforeUnmount(() => {
	cancelAnimationFrame(animationId.value);
	if (renderer.value) {
		renderer.value.dispose();
	}
});

画布跟随窗口大小变化

const onWindowResize = () => {
    const container = threeJSContainer.value;
    if (!container) return;

    const clientWidth = container.clientWidth;
    const clientHeight = container.clientHeight;

    if (clientHeight === 0) return;

    if (camera.value) {
        camera.value.aspect = clientWidth / clientHeight;
    }

    if (renderer.value) {
        renderer.value.setSize(clientWidth, clientHeight);
    }
 };

onMounted(() => {
    window.addEventListener("resize", onWindowResize);
});
onBeforeUnmount(() => {
	window.removeEventListener("resize", onWindowResize);
});

如果想让物体动起来还需要以下步骤

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

const orbitControls = ref(null);

const animation = () => {
	camera.value.updateProjectionMatrix();
	orbitControls.value.update();
};

onMounted(() => {
	orbitControls.value = new OrbitControls(
		camera.value,
		renderer.value.domElement
	);
});