three Interpolations 介绍

Interpolations 是什么有什么作用

• 这是一个内部 API 由 CubicBezierCurve3 和 CubicBezierCurve所使用。
• 这个 API 只使用静态方法

使用示例

<template>
    <div id="parkingLot" ref="parkingLot">
    </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import * as THREE from 'three';
import * as Interpolations from 'three/src/extras/core/Interpolations.js';
const parkingLot = ref();

onMounted(() => {
    const DOMEl = parkingLot.value;
    // 获取 DOMEl 的宽度和高度，以设置渲染器的大小。
    const width = DOMEl.clientWidth;
    const height = DOMEl.clientHeight;


    const renderer = new THREE.WebGLRenderer();
    renderer.setSize( width, height );
    DOMEl.appendChild( renderer.domElement );
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera( 45, width / height, 1, 2000 );
    camera.position.set( 0, 300, 800 );
    camera.lookAt( 0, 0, 0 );

    console.log(Interpolations,"Interpolations")

    
        // 定义 Catmull-Rom 曲线的控制点
        const controlPoints = [
            new THREE.Vector3(-10, 0, 0),
            new THREE.Vector3(-5, 10, 0),
            new THREE.Vector3(5, -10, 0),
            new THREE.Vector3(10, 0, 0)
        ];

        // 生成 Catmull-Rom 曲线的点
        const numPoints = 100; // 点的数量
        const curvePoints = [];

        for (let i = 0; i < controlPoints.length - 3; i++) {
            const p0 = controlPoints[i];
            const p1 = controlPoints[i + 1];
            const p2 = controlPoints[i + 2];
            const p3 = controlPoints[i + 3];
            
            for (let t = 0; t <= 1; t += 1 / (numPoints / 4)) {
                const x = Interpolations.CatmullRom(t, p0.x, p1.x, p2.x, p3.x);
                const y = Interpolations.CatmullRom(t, p0.y, p1.y, p2.y, p3.y);
                const z = Interpolations.CatmullRom(t, p0.z, p1.z, p2.z, p3.z);
                curvePoints.push(new THREE.Vector3(x, y, z));
            }
        }

        // 创建几何体并添加到场景中
        const geometry = new THREE.BufferGeometry().setFromPoints(curvePoints);
        const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
        const line = new THREE.Line(geometry, material);
        scene.add(line);
    
    // 创建光源
    const light = new THREE.DirectionalLight(0x0000ff, 10);
    light.position.set(10, 10, 10);
    light.castShadow = true;
    scene.add(light);


    renderer.render(scene, camera);

});
</script>
<style lang="scss" scoped="scoped">

    #parkingLot {
        width: 940px;
        height: 940px;
        border: 1px solid #ccc;
        margin: 30px auto;
    }

</style>