three Curve 使用小结

Curve 是什么有什么用

• 是线条的基类，所有的线条类都是由这个基类扩展而来的
• 这个方法只能通过 getPoints 方法与 扩展 getPoint 来实现定义曲线点

使用示例

<template>
    <div id="parkingLot" ref="parkingLot">
    </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import * as THREE from 'three';
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 );

    
    // 创建一个直接使用 Curve 基类的实例
    const curve = new THREE.Curve();

    // 直接重写 getPoint 方法 默认的方法没有生成点
    curve.getPoint = function(t) {
        const tx = t * 150 - 1.5;
        const ty = Math.sin(2 * Math.PI * t);
        const tz = 0;

        return new THREE.Vector3(tx, ty, tz);
    };

    // 使用曲线生成点 在getPoints 会默认循环 getPoint并添加到数组
    const points = curve.getPoints(150); // 生成曲线上 50 个点
    // 使用这些点创建几何体
    const geometry = new THREE.BufferGeometry().setFromPoints(points);
    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>