安裝依賴 yarn add three
ply文件可從網(wǎng)上查找，加載對應(yīng)的文件地址也可以換成線上地址

<template>
    <div>
        <div id="container"></div>
    </div>
</template>

<script>
var scene, mesh;
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { PLYLoader } from 'three/examples/jsm/loaders/PLYLoader.js'
export default {
    data() {
        return {
            camera: null,
            renderer: null,
            controls: null
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        // 初始化
        init() {
            this.createScene() // 創(chuàng)建場景
            this.loadPLY() // 加載PLY模型
            this.createLight() // 創(chuàng)建光源
            this.createCamera() // 創(chuàng)建相機(jī)
            this.createRender() // 創(chuàng)建渲染器
            this.createControls() // 創(chuàng)建控件對象
            this.render() // 渲染
        },
        // 創(chuàng)建場景
        createScene() {
            scene = new THREE.Scene()
        },
        // 加載PLY模型
        loadPLY() {
            const loader = new PLYLoader()
            loader.load(`/public/model/file.ply`, geometry => {
                console.log(geometry, "加載完成")
                // 創(chuàng)建粒子材質(zhì)
                const material = new THREE.PointsMaterial({
                    color: 0xffffff,
                    size: 0.4,
                    opacity: 0.6,
                    transparent: true,
                    blending: THREE.AdditiveBlending,
                    map: this.generateSprite()
                })
                // 創(chuàng)建粒子系統(tǒng)
                mesh = new THREE.Points(geometry, material)
                // 添加到場景
                scene.add(mesh)
            })
        },
        //生成紋理
        generateSprite() {
            const canvas = document.createElement('canvas')
            canvas.width = 16
            canvas.height = 16

            const context = canvas.getContext('2d')
            const gradient = context.createRadialGradient(
                canvas.width / 2,
                canvas.height / 2,
                0,
                canvas.width / 2,
                canvas.height / 2,
                canvas.width / 2
            )
            gradient.addColorStop(0, 'rgba(255,255,255,1)')
            gradient.addColorStop(0.2, 'rgba(0,255,255,1)')
            gradient.addColorStop(0.4, 'rgba(0,0,64,1)')
            gradient.addColorStop(1, 'rgba(0,0,0,1)')

            context.fillStyle = gradient
            context.fillRect(0, 0, canvas.width, canvas.height)

            const texture = new THREE.Texture(canvas)
            texture.needsUpdate = true
            return texture
        },

        // 創(chuàng)建光源
        createLight() {
            // 環(huán)境光
            const ambientLight = new THREE.AmbientLight(0xffffff, 0.1) // 創(chuàng)建環(huán)境光
            scene.add(ambientLight) // 將環(huán)境光添加到場景
            const spotLight = new THREE.SpotLight(0xffffff) // 創(chuàng)建聚光燈
            spotLight.position.set(50, 50, 50)
            spotLight.castShadow = true
            scene.add(spotLight)

        },
        // 創(chuàng)建相機(jī)
        createCamera() {
            const element = document.getElementById('container')
            const width = element.clientWidth // 窗口寬度
            const height = element.clientHeight // 窗口高度
            const k = width / height // 窗口寬高比
            // PerspectiveCamera( fov, aspect, near, far )
            this.camera = new THREE.PerspectiveCamera(35, k, 0.1, 1000)
            this.camera.position.set(20, 20, 20) // 設(shè)置相機(jī)位置
            this.camera.lookAt(new THREE.Vector3(10, 40, 0)) // 設(shè)置相機(jī)方向
            scene.add(this.camera)
        },
        // 創(chuàng)建渲染器
        createRender() {
            const element = document.getElementById('container')
            this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
            this.renderer.setSize(element.clientWidth, element.clientHeight) // 設(shè)置渲染區(qū)域尺寸
            this.renderer.shadowMap.enabled = true // 顯示陰影
            this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
            this.renderer.setClearColor(0x3f3f3f, 1) // 設(shè)置背景顏色
            element.appendChild(this.renderer.domElement)
        },

        render() {
            if (mesh) {
                mesh.rotation.y += 0.006
            }
            this.renderer.render(scene, this.camera)
            requestAnimationFrame(this.render)
        },
        // 創(chuàng)建控件對象
        createControls() {
            this.controls = new OrbitControls(this.camera, this.renderer.domElement)
        }
    }
}
</script>
<style>
#container {
    position: absolute;
    width: 100%;
    height: 100%;
}
</style>