Blog

<template>
    <!-- 3D 渲染容器 -->
    <div class="three-container" ref="containerRef"></div>
</template>
<script setup lang="ts">
    import { ref, onMounted, onUnmounted } from 'vue';
    import * as THREE from 'three';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
    import { Tween } from '@tweenjs/tween.js';
    // 核心对象引用
    const containerRef = ref<HTMLDivElement | null>(null);
    let scene: THREE.Scene, camera: THREE.PerspectiveCamera, renderer: THREE.WebGLRenderer;
    let cube: THREE.Mesh, controls: OrbitControls;
    // 初始化 3D 场景
    const initThree = () => {
    if (!containerRef.value) return;
    // 1. 创建场景（容器）
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xf0f0f0); // 场景背景色（浅灰）
    // 2. 创建相机（透视相机：模拟人眼视角）
    // 参数：视野角度(75°)、宽高比、近裁切面、远裁切面
    camera = new THREE.PerspectiveCamera(
    75,
    containerRef.value.clientWidth / containerRef.value.clientHeight,
    0.1,
    1000
    );
    // 设置相机位置（x, y, z），默认在原点(0,0,0)，需要拉开距离才能看到物体
    camera.position.z = 5;
    // 3. 创建渲染器（WebGL 渲染器，高性能）
    renderer = new THREE.WebGLRenderer({ antialias: true }); // 开启抗锯齿
    renderer.setSize(containerRef.value.clientWidth, containerRef.value.clientHeight); // 设置渲染尺寸
    containerRef.value.appendChild(renderer.domElement); // 将渲染画布添加到 DOM
    // 4. 创建 3D 物体（立方体）
    // 几何体：BoxGeometry(宽, 高, 深)
    const geometry = new THREE.BoxGeometry(2, 2, 2);
    // 材质：MeshLambertMaterial（漫反射材质，需要光照才能显示）
    const material = new THREE.MeshLambertMaterial({
    color: 0x42b983, // 基础颜色（绿色）
    wireframe: false, // 是否显示线框（true 可看到几何体结构）
});
    // 网格：几何体 + 材质
    cube = new THREE.Mesh(geometry, material);
    scene.add(cube); // 将立方体添加到场景
    // 5. 添加光照（否则物体是纯色块，无明暗）
    // 环境光：均匀照亮所有物体，无阴影
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
    scene.add(ambientLight);
    // 方向光：模拟太阳光，有阴影效果
    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
    directionalLight.position.set(5, 5, 5); // 光源位置
    scene.add(directionalLight);
    // 6. 添加轨道控制器（允许用户交互：拖拽旋转、滚轮缩放）
    controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true; // 开启阻尼效果（旋转更顺滑）
    controls.dampingFactor = 0.05;
    // 7. 添加动画（立方体自动旋转）
    const animateCube = () => {
    // 使用 Tween 实现平滑旋转动画
    new Tween(cube.rotation)
    .to({ x: cube.rotation.x + Math.PI * 2, y: cube.rotation.y + Math.PI * 2 }, 5000)
    .repeat(Infinity) // 无限循环
    .start();
};
    animateCube();
    // 8. 监听窗口大小变化（自适应调整）
    window.addEventListener('resize', onWindowResize);
};
    // 窗口大小自适应
    const onWindowResize = () => {
    if (!containerRef.value) return;
    // 更新相机宽高比
    camera.aspect = containerRef.value.clientWidth / containerRef.value.clientHeight;
    camera.updateProjectionMatrix(); // 更新相机投影矩阵
    // 更新渲染器尺寸
    renderer.setSize(containerRef.value.clientWidth, containerRef.value.clientHeight);
};
    // 渲染循环（Three.js 核心，持续渲染场景）
    const renderLoop = () => {
    requestAnimationFrame(renderLoop); // 浏览器帧循环
    controls.update(); // 阻尼效果需要持续更新控制器
    Tween.update(); // 更新动画
    renderer.render(scene, camera); // 渲染场景和相机
};
    // 生命周期钩子：组件挂载时初始化
    onMounted(() => {
    initThree();
    renderLoop();
});
    // 生命周期钩子：组件卸载时清理（防止内存泄漏）
    onUnmounted(() => {
    window.removeEventListener('resize', onWindowResize);
    controls.dispose(); // 销毁控制器
    renderer.dispose(); // 销毁渲染器
    // 清理场景中所有物体
    scene.traverse((obj) => {
    if (obj instanceof THREE.Mesh) {
    obj.geometry.dispose();
    (obj.material as THREE.Material).dispose();
}
});
});
</script>
<style scoped>
    .three-container {
    width: 100vw;
    height: 80vh;
    margin: 20px 0;
}
</style>

<template>
    <div id="app">
        <h1>Vue3 + Three.js 第一个 3D 项目</h1>
        <ThreeDemo />
    </div>
</template>
<script setup lang="ts">
    import ThreeDemo from './components/ThreeDemo.vue';
</script>
<style scoped>
    #app {
    text-align: center;
    padding: 2rem;
}
</style>

// 加载纹理（Three.js 内置纹理加载器）
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('/texture.jpg'); // 图片路径（public 下直接写文件名）
// 纹理优化（可选）
texture.wrapS = THREE.RepeatWrapping; // 水平重复
texture.wrapT = THREE.RepeatWrapping; // 垂直重复
texture.repeat.set(2, 2); // 重复次数（x 轴 2 次，y 轴 2 次）
texture.anisotropy = renderer.capabilities.getMaxAnisotropy(); // 各向异性过滤（提升纹理清晰度）
// 带纹理的材质
const material = new THREE.MeshLambertMaterial({
    map: texture, // 纹理贴图
});