技术选型，使用three.js
首先是要把three.js集成到vue项目中。将项目中用到的第三方库引入 我选择的是将其放在public目录下的index.html中，使用相对路径引入！（一定要把这几个js放在public目录下，不要放在src下，不然会报错。）
话不多说了，上码。
<template>
<div class="cloud-box" >
<div id="container">
</div>
</div>
</template>
<script>
export default {
data() {
return {
loading:false,
camera: null,
scene: null,
renderer: null,
mesh: null,
renderer: null,
light: null,
cloud: null,
stats: null,
controls: null,
gui: null,
cloudList:[
[8.937623e+00, 8.046770e-01, 8.718993e+00],
[3.870542e+00, 2.344582e+00, 5.528058e+00],
[4.973743e+00, 6.251506e+00, 4.769484e+00],
[3.574076e+00, 5.613001e+00, 8.145231e+00],
[4.817720e-01, 8.920369e+00, 6.994899e+00],
[3.915466e+00, 8.523287e+00, 5.093424e+00],
[9.598087e+00, 6.219120e-01, 7.165774e+00],
[7.949342e+00, 1.969374e+00, 8.824837e+00],
[8.131774e+00, 1.977010e-01, 2.584920e+00],
[4.576293e+00, 3.846148e+00, 1.373490e+00],
[3.216000e-03, 8.763286e+00, 2.507579e+00],
[9.481077e+00, 2.650002e+00, 5.001554e+00],
[6.595684e+00, 1.050923e+00, 8.120172e+00],
[5.142327e+00, 5.336006e+00, 8.620918e+00],
[5.375882e+00, 6.651497e+00, 9.542640e+00],
[5.682150e-01, 8.144860e-01, 8.846073e+00],
[2.403259e+00, 6.137850e+00, 7.686553e+00],
[7.525500e-01, 8.769059e+00, 5.274292e+00],
[9.997763e+00, 1.192040e+00, 5.470743e+00],
[8.675432e+00, 4.583000e-01, 9.948437e+00],
[8.758368e+00, 3.455375e+00, 6.321480e+00],
[2.695132e+00, 1.225212e+00, 5.009805e+00],
[8.208597e+00, 2.368711e+00, 7.013064e+00],
[8.094555e+00, 1.898424e+00, 4.206342e+00],
[7.530836e+00, 2.277964e+00, 3.610314e+00],
[5.015699e+00, 5.373408e+00, 4.440926e+00],
[8.095015e+00, 9.589836e+00, 1.021775e+00],
[7.829163e+00, 5.221661e+00, 4.828796e+00],
[4.642702e+00, 7.778930e+00, 1.704286e+00],
[4.976676e+00, 2.103161e+00, 3.146690e-01],
[6.353577e+00, 7.029209e+00, 9.573775e+00],
[1.446574e+00, 6.711126e+00, 5.101162e+00],
[4.914391e+00, 5.947490e-01, 3.027910e+00],
[7.147770e-01, 8.060196e+00, 1.617560e+00],
[2.866511e+00, 9.455430e-01, 4.517860e+00],
[7.181262e+00, 1.819698e+00, 9.094122e+00],
[3.371798e+00, 2.408947e+00, 9.967757e+00],
[3.223171e+00, 9.709138e+00, 6.304293e+00],
[2.841408e+00, 8.599998e+00, 9.948230e+00],
[9.092040e+00, 5.424149e+00, 8.019422e+00],
[4.632349e+00, 8.315080e-01, 2.125520e-01],
[2.612282e+00, 2.446450e-01, 6.177096e+00],
[6.292571e+00, 7.230723e+00, 1.621264e+00],
[1.723380e+00, 2.313165e+00, 4.111129e+00],
[1.394039e+00, 2.279076e+00, 2.823773e+00],
[5.612747e+00, 8.566734e+00, 9.748038e+00],
[4.865773e+00, 7.301950e-01, 4.409020e-01],
[6.588122e+00, 8.662491e+00, 6.239435e+00],
[3.962326e+00, 4.554531e+00, 2.178757e+00],
[5.615592e+00, 5.354481e+00, 3.132585e+00],
[8.878875e+00, 5.315342e+00, 7.394840e+00],
[3.728078e+00, 5.254661e+00, 6.660611e+00],
[4.003135e+00, 8.523586e+00, 5.961165e+00],
[8.896950e-01, 1.654930e+00, 9.242040e-01],
[5.208152e+00, 9.540407e+00, 9.850191e+00],
[9.837534e+00, 4.579998e+00, 6.662892e+00],
[6.218625e+00, 3.070169e+00, 5.249364e+00],
[3.816914e+00, 9.044073e+00, 1.508310e-01],
[8.174381e+00, 7.564415e+00, 9.804860e-01],
[4.347800e+00, 8.157415e+00, 3.957854e+00],
[8.125823e+00, 9.671902e+00, 3.093795e+00],
[7.454931e+00, 4.254792e+00, 6.061724e+00],
[1.086816e+00, 8.997506e+00, 5.457259e+00],
[8.844430e-01, 9.860342e+00, 9.017020e-01],
[7.428308e+00, 8.982710e-01, 5.618361e+00],
[8.665882e+00, 6.185970e-01, 8.583546e+00],
[9.159264e+00, 5.417113e+00, 3.027484e+00],
[5.518218e+00, 4.497750e+00, 4.990699e+00],
[4.026341e+00, 4.425970e+00, 7.347162e+00],
[9.201311e+00, 6.246129e+00, 5.908720e+00],
[2.962370e-01, 8.154703e+00, 4.836615e+00],
[1.218188e+00, 4.988106e+00, 9.068979e+00],
[6.656234e+00, 9.705330e+00, 8.927538e+00],
[4.019670e+00, 5.447955e+00, 9.841839e+00],
[5.863128e+00, 7.451625e+00, 9.587220e-01],
[4.890589e+00, 1.422080e-01, 3.292652e+00],
[9.182260e+00, 6.476260e+00, 2.392570e+00],
[5.431740e+00, 7.841649e+00, 1.839691e+00],
[8.870447e+00, 1.784597e+00, 2.376711e+00],
[2.545852e+00, 9.057905e+00, 3.145445e+00],
[6.488495e+00, 3.785716e+00, 9.147642e+00],
[7.045518e+00, 9.376729e+00, 6.932512e+00],
[6.344158e+00, 2.709681e+00, 5.874283e+00],
[1.689481e+00, 1.349439e+00, 5.436871e+00],
[3.267080e-01, 3.421456e+00, 6.941896e+00],
[4.177236e+00, 8.307860e+00, 7.182713e+00],
[5.203497e+00, 9.630248e+00, 1.800388e+00],
[8.309053e+00, 5.535076e+00, 4.872594e+00],
[5.549603e+00, 1.188293e+00, 1.904373e+00],
[6.854564e+00, 4.693081e+00, 2.509125e+00],
[1.653228e+00, 8.161664e+00, 6.131900e+00],
[3.304351e+00, 8.722766e+00, 8.832926e+00],
[4.677735e+00, 7.787949e+00, 6.558549e+00],
[6.867583e+00, 5.399194e+00, 3.750432e+00],
[3.444577e+00, 3.626681e+00, 7.499466e+00],
[7.022722e+00, 4.672923e+00, 9.961766e+00],
[4.721056e+00, 1.721160e+00, 1.216993e+00],
[3.246858e+00, 3.774722e+00, 7.201654e+00],
[8.510020e-01, 6.797768e+00, 4.018755e+00],
[2.350690e+00, 5.714195e+00, 5.814256e+00],
[7.418179e+00, 3.498039e+00, 3.688610e+00],
[8.621971e+00, 8.603200e+00, 6.470653e+00],
[3.924556e+00, 4.928140e-01, 1.611921e+00],
[9.825290e-01, 6.504678e+00, 5.127274e+00],
[4.153364e+00, 4.408760e-01, 8.270636e+00],
[4.029416e+00, 2.956976e+00, 3.349510e-01],
[3.111522e+00, 2.370963e+00, 9.000900e-01],
[6.399424e+00, 2.366151e+00, 1.493200e-02],
[1.727438e+00, 3.643660e-01, 8.289504e+00],
[6.643050e+00, 1.605077e+00, 2.755887e+00],
[6.389639e+00, 1.808871e+00, 3.062718e+00],
[2.285887e+00, 4.571658e+00, 6.692474e+00],
[9.771278e+00, 3.311000e-01, 8.182852e+00],
[8.282721e+00, 7.946050e+00, 9.986610e+00],
[3.947341e+00, 6.172961e+00, 9.362555e+00],
[1.247060e-01, 8.779290e-01, 4.495341e+00],
[6.269551e+00, 4.693211e+00, 9.004411e+00],
[6.876749e+00, 8.530733e+00, 1.492005e+00],
[5.996056e+00, 3.933842e+00, 9.571101e+00],
[6.456032e+00, 7.080350e+00, 5.537285e+00],
[6.830991e+00, 2.146173e+00, 9.973992e+00],
[7.144802e+00, 6.242664e+00, 4.185474e+00],
[6.399177e+00, 6.761693e+00, 4.287102e+00],
[1.292227e+00, 6.373855e+00, 3.785510e-01],
[4.319137e+00, 5.535165e+00, 9.198694e+00],
[8.636819e+00, 2.095370e-01, 1.987159e+00],
[5.857169e+00, 7.353779e+00, 2.825994e+00],
[1.801758e+00, 7.406671e+00, 6.728353e+00],
[6.832801e+00, 7.091379e+00, 2.540438e+00],
[9.524925e+00, 8.338713e+00, 9.801981e+00],
[1.883549e+00, 9.689872e+00, 4.088880e+00],
[5.006200e-02, 7.896587e+00, 8.909047e+00],
[7.182117e+00, 1.802944e+00, 1.309554e+00],
[9.925125e+00, 9.007093e+00, 6.706758e+00],
[9.115590e+00, 2.418274e+00, 7.529635e+00],
[7.854713e+00, 7.564001e+00, 5.279525e+00],
[9.546485e+00, 6.421230e-01, 7.520320e+00],
[4.489797e+00, 8.051413e+00, 2.705233e+00],
[9.852256e+00, 1.379570e+00, 4.675340e+00],
[7.792819e+00, 1.991904e+00, 8.561015e+00],
[9.126688e+00, 9.229635e+00, 8.496719e+00],
[2.487246e+00, 2.571825e+00, 2.313804e+00],
[9.446998e+00, 1.339484e+00, 6.857087e+00],
[3.173509e+00, 2.628849e+00, 2.790054e+00],
[1.585040e+00, 7.086720e+00, 5.461052e+00],
[3.809817e+00, 4.625017e+00, 6.422359e+00],
[6.595098e+00, 6.650641e+00, 7.222098e+00],
[5.176677e+00, 4.461930e-01, 7.936982e+00],
[3.806250e+00, 2.613328e+00, 8.816640e+00],
[4.340979e+00, 9.523020e-01, 5.286670e+00],
[7.666535e+00, 3.738099e+00, 9.605948e+00],
[7.546273e+00, 7.870585e+00, 2.607706e+00],
[1.153303e+00, 1.968227e+00, 7.100474e+00],
[5.556105e+00, 4.920864e+00, 4.378215e+00],
[2.391296e+00, 4.865525e+00, 1.741502e+00],
[3.199675e+00, 6.018706e+00, 4.072664e+00],
[4.604673e+00, 6.938012e+00, 6.368285e+00],
[4.193062e+00, 2.724011e+00, 2.177583e+00],
[4.224740e+00, 2.935634e+00, 3.354440e-01],
[3.381392e+00, 7.690265e+00, 5.369294e+00],
[1.319789e+00, 9.171996e+00, 2.056487e+00],
[3.044005e+00, 2.056162e+00, 6.128220e-01],
[6.261903e+00, 5.115340e+00, 3.526011e+00],
[3.942342e+00, 7.337828e+00, 1.274700e-02],
[1.786721e+00, 8.121078e+00, 1.627598e+00],
[5.148219e+00, 9.486275e+00, 2.396740e-01],
[2.273770e+00, 2.870868e+00, 2.112671e+00],
[2.948620e+00, 6.610496e+00, 3.883792e+00],
[6.916928e+00, 5.809792e+00, 2.111218e+00],
[7.931860e-01, 3.956540e+00, 6.774942e+00],
[6.753290e-01, 2.148949e+00, 6.639554e+00],
[2.684885e+00, 8.618510e+00, 3.662181e+00],
[1.258980e+00, 8.078197e+00, 5.856601e+00],
[1.705840e-01, 1.152324e+00, 3.005264e+00],
[7.160219e+00, 5.274170e-01, 6.794117e+00],
[4.630248e+00, 4.812730e-01, 9.100556e+00],
[1.461287e+00, 5.292343e+00, 8.444374e+00],
[7.398901e+00, 2.085707e+00, 3.977072e+00],
[9.592857e+00, 9.203092e+00, 4.781422e+00],
[8.978315e+00, 4.529462e+00, 8.623894e+00],
[7.510032e+00, 6.505500e+00, 3.653800e+00],
[2.820106e+00, 9.234193e+00, 3.791453e+00],
[6.592009e+00, 3.689518e+00, 3.811201e+00],
[6.406298e+00, 6.703030e+00, 8.592986e+00],
[9.337920e-01, 4.217886e+00, 3.316665e+00],
[1.048613e+00, 2.468652e+00, 4.694770e-01],
[5.020160e-01, 5.688938e+00, 2.445680e-01],
[1.151549e+00, 4.056827e+00, 6.725670e+00],
[2.717040e+00, 8.275323e+00, 4.434253e+00],
[9.699745e+00, 4.753104e+00, 8.696990e-01],
[4.680016e+00, 9.444547e+00, 7.254464e+00],
[3.947246e+00, 5.152560e-01, 6.759826e+00],
[2.880040e+00, 5.973776e+00, 4.118790e+00],
[1.584310e-01, 3.453137e+00, 9.321323e+00],
[1.436281e+00, 1.921669e+00, 1.871018e+00],
[9.890113e+00, 8.313421e+00, 6.758314e+00],
[2.751703e+00, 5.225926e+00, 9.482317e+00],
[4.185057e+00, 8.990138e+00, 4.863126e+00],
[1.786568e+00, 2.076020e-01, 8.863377e+00],
[4.912850e+00, 6.987334e+00, 9.156465e+00],
[2.332094e+00, 9.584630e+00, 7.379820e-01],
[9.271080e+00, 3.110026e+00, 4.188026e+00],
[9.338156e+00, 7.521602e+00, 8.111019e+00],
[3.458613e+00, 6.172175e+00, 1.880046e+00],
[4.171192e+00, 6.968060e+00, 5.642492e+00],
[4.283277e+00, 7.747693e+00, 6.863443e+00],
[4.269952e+00, 2.761660e+00, 8.578028e+00],
[9.116128e+00, 5.548578e+00, 3.893623e+00],
[1.606736e+00, 4.148018e+00, 4.341892e+00],
[3.528116e+00, 8.961832e+00, 9.022808e+00],
[9.904930e-01, 4.500161e+00, 6.905156e+00],
[8.558426e+00, 9.882167e+00, 8.349841e+00],
[5.269530e+00, 5.944525e+00, 9.144475e+00],
[4.290124e+00, 1.373290e-01, 1.453176e+00],
[1.588639e+00, 7.803918e+00, 4.494874e+00],
[5.970688e+00, 2.966499e+00, 4.682400e-02],
[1.230749e+00, 1.783181e+00, 8.360216e+00],
[6.422578e+00, 8.754053e+00, 7.000626e+00],
[3.672247e+00, 2.432689e+00, 8.455162e+00],
[8.335504e+00, 7.560245e+00, 5.746767e+00],
[1.864351e+00, 3.603537e+00, 2.303008e+00],
[2.455523e+00, 9.885570e+00, 6.452300e-02],
[6.977832e+00, 5.206121e+00, 3.790033e+00],
[9.621830e-01, 3.644330e-01, 2.095048e+00],
[1.285781e+00, 8.789020e-01, 8.334286e+00],
[6.678773e+00, 7.067999e+00, 7.651129e+00],
[4.782913e+00, 7.209907e+00, 9.920318e+00],
[6.872400e-02, 2.758561e+00, 2.215069e+00],
[6.238725e+00, 1.172612e+00, 7.637450e+00],
[1.135713e+00, 6.035576e+00, 5.841146e+00],
[7.710982e+00, 2.497553e+00, 7.874342e+00],
[2.523879e+00, 4.139691e+00, 9.409998e+00],
[5.593621e+00, 3.484980e+00, 3.220026e+00],
[3.918696e+00, 7.259124e+00, 8.376758e+00],
[4.639178e+00, 5.821189e+00, 2.532935e+00],
[9.987194e+00, 4.446093e+00, 8.227385e+00],
[4.728134e+00, 8.851552e+00, 1.039187e+00],
[6.428396e+00, 6.417362e+00, 4.342655e+00],
[5.918782e+00, 5.265705e+00, 9.722771e+00],
[3.266229e+00, 4.327696e+00, 8.068838e+00],
[1.841601e+00, 3.288857e+00, 1.000745e+00],
[7.910850e+00, 9.407298e+00, 3.088427e+00],
[6.457492e+00, 2.676926e+00, 2.158018e+00],
[7.228991e+00, 5.648259e+00, 3.274099e+00],
[2.784607e+00, 8.772675e+00, 6.330128e+00],
[4.514339e+00, 1.563876e+00, 8.926570e+00],
[9.745102e+00, 3.586219e+00, 4.978379e+00],
[7.458375e+00, 9.686521e+00, 2.089874e+00],
[6.821333e+00, 2.845870e-01, 8.308698e+00],
[3.529215e+00, 9.815544e+00, 1.282639e+00],
[7.831127e+00, 4.792766e+00, 3.787969e+00],
[9.928971e+00, 7.285398e+00, 5.960960e-01],
[7.971483e+00, 1.705026e+00, 5.407695e+00],
[6.554788e+00, 9.401537e+00, 5.532065e+00],
[5.783408e+00, 5.710634e+00, 6.889784e+00],
[7.912413e+00, 7.576357e+00, 5.687205e+00],
[8.178494e+00, 9.833452e+00, 6.049759e+00],
[7.763163e+00, 2.283525e+00, 2.425953e+00],
[4.395595e+00, 3.740233e+00, 3.670106e+00],
[1.645465e+00, 5.454685e+00, 9.460601e+00],
[1.299217e+00, 8.272650e-01, 3.098952e+00],
[9.389157e+00, 5.154321e+00, 7.366634e+00],
[7.272356e+00, 9.437896e+00, 4.603324e+00],
[4.305743e+00, 8.079720e-01, 8.399395e+00],
[1.046060e+00, 6.320302e+00, 1.367178e+00],
[2.741534e+00, 4.048675e+00, 6.268790e-01],
[5.326128e+00, 9.619972e+00, 9.845418e+00],
[7.273368e+00, 9.090446e+00, 1.915118e+00],
[6.708002e+00, 1.248164e+00, 7.182165e+00],
[6.845215e+00, 9.293703e+00, 2.042452e+00],
[8.774479e+00, 4.543841e+00, 3.745983e+00],
[5.792873e+00, 7.360192e+00, 9.411006e+00],
[6.078663e+00, 2.655399e+00, 1.090863e+00],
[8.704803e+00, 7.711533e+00, 5.464788e+00],
[9.327181e+00, 7.627738e+00, 2.861713e+00],
[1.206642e+00, 1.440617e+00, 4.564753e+00],
[6.721271e+00, 8.149313e+00, 4.006449e+00],
[9.779108e+00, 4.542412e+00, 1.375111e+00],
[3.012060e+00, 7.764482e+00, 9.791345e+00],
[8.849057e+00, 6.706400e-02, 2.245042e+00],
[4.641676e+00, 1.191287e+00, 5.212297e+00],
[8.215744e+00, 5.037779e+00, 1.893523e+00],
[4.014227e+00, 3.474169e+00, 2.256413e+00],
[7.423327e+00, 5.429181e+00, 1.018503e+00],
[3.270990e+00, 6.220683e+00, 4.793709e+00],
[4.339520e+00, 9.444682e+00, 4.752635e+00],
[8.410100e-02, 1.568799e+00, 8.709587e+00],
[9.903556e+00, 9.207443e+00, 7.253360e+00],
[8.932547e+00, 9.692587e+00, 5.518210e-01],
[7.572236e+00, 5.613715e+00, 5.215671e+00],
[7.391250e-01, 6.827555e+00, 9.957585e+00],
[1.912670e+00, 2.679070e+00, 4.655930e-01],
[4.594620e-01, 2.514142e+00, 7.732078e+00],
[4.282642e+00, 5.006284e+00, 5.422165e+00],
[8.567030e-01, 4.225491e+00, 9.603790e-01],
[7.209654e+00, 4.973755e+00, 6.072495e+00],
[9.355765e+00, 7.281113e+00, 8.972812e+00],
[5.135640e+00, 8.824425e+00, 3.725360e-01],
[2.996820e+00, 3.311730e+00, 4.982395e+00],
[4.344549e+00, 3.458179e+00, 4.036735e+00],
[1.956203e+00, 2.802838e+00, 4.356983e+00],
[2.756790e+00, 3.913305e+00, 7.012813e+00],
[2.957039e+00, 3.759557e+00, 5.146119e+00],
[6.634439e+00, 6.186801e+00, 3.643969e+00],
[6.968970e+00, 4.331380e-01, 7.027446e+00],
[1.024605e+00, 1.991704e+00, 6.625653e+00],
[6.426265e+00, 2.429190e+00, 4.435979e+00],
[3.047740e-01, 9.139531e+00, 4.097801e+00],
[5.336377e+00, 5.817646e+00, 1.183992e+00],
[4.557438e+00, 9.065154e+00, 6.227092e+00],
[2.144116e+00, 2.183258e+00, 4.097053e+00],
[4.999913e+00, 9.996740e+00, 6.994273e+00],
[9.738746e+00, 8.380182e+00, 1.780022e+00],
[8.650741e+00, 1.032535e+00, 5.389427e+00],
[4.824927e+00, 5.616510e+00, 8.130526e+00],
[3.622374e+00, 3.349066e+00, 5.960326e+00],
[8.406801e+00, 2.380557e+00, 5.608124e+00],
[3.631897e+00, 5.442482e+00, 1.403876e+00],
[1.148819e+00, 4.057004e+00, 3.664660e+00],
[7.653468e+00, 7.589400e+00, 6.724528e+00],
[7.724449e+00, 4.527112e+00, 8.309925e+00],
[6.365736e+00, 1.845895e+00, 7.039303e+00],
[1.055770e-01, 8.639706e+00, 4.456155e+00],
[3.067257e+00, 3.847242e+00, 3.331334e+00],
[3.221220e+00, 5.654328e+00, 3.603909e+00],
[9.962524e+00, 1.103346e+00, 4.487771e+00],
[1.694477e+00, 6.514275e+00, 7.963538e+00],
[8.446293e+00, 5.282326e+00, 8.919725e+00]
],
};
},
props:{
showScore: {
type: Boolean,
default: true
},
cloudListItem: {
type: Array
}
},
mounted() {
if(this.cloudListItem && this.cloudListItem.length > 0) {
this.cloudList = this.cloudListItem
}
this.draw()
},
methods: {
//设置背景颜色
initRender() {
this.renderer = new THREE.WebGLRenderer({ antialias: true });
console.log(this.renderer.domElement,'this.renderer.domElement');
// this.renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0)); //设置背景颜色
this.renderer.setSize(window.innerWidth, window.innerHeight);
// this.renderer.setSize(window.clientWidth, window.clientHeight);
// this.renderer.setSize('1100','600');
let con = document.getElementById("container");
con.appendChild(this.renderer.domElement);
},
// 创建相机
initCamera() {
this.camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
1,
10000
);
this.camera.position.set(0, 0, 200);
},
// scene
initScene() {
this.scene = new THREE.Scene();
},
// light
initLight() {
this.scene.add(new THREE.AmbientLight(0x404040));
this.light = new THREE.DirectionalLight(0xffffff);
this.light.position.set(1, 1, 1);
this.scene.add(this.light);
},
initModel() {
//轴辅助 （每一个轴的长度）
// var object = new THREE.AxesHelper(500);
// this.scene.add(object);
//创建THREE.PointCloud粒子的容器
var geometry = new THREE.Geometry();
//创建THREE.PointCloud纹理
var material = new THREE.PointCloudMaterial({size: 0.001, vertexColors: true, color: 0xffffff});
//循环将粒子的颜色和位置添加到网格当中
for (var x = -5; x <= 5; x++) {
for (var y = -5; y <= 5; y++) {
var particle = new THREE.Vector3(x * 10, y * 10, 0);
geometry.vertices.push(particle);
geometry.colors.push(new THREE.Color( +this.randomColor()));
}
}
this.cloud = new THREE.PointCloud(geometry, material);
this.scene.add(this.cloud);
},
//随机生成颜色
/*
此处背景色为黑色 所以点的颜色选择是比较明显的白色，
底下代码打开的话 有惊喜效果
*/
randomColor() {
// var arrHex = [
// "0",
// "1",
// "2",
// "3",
// "4",
// "5",
// "6",
// "7",
// "8",
// "9",
// "a",
// "b",
// "c",
// "d",
// "e",
// "f",
// ],
// strHex = "0x",
// index;
// for (var i = 0; i < 6; i++) {
// index = Math.round(Math.random() * 15);
// strHex += arrHex[index];
// }
// console.log(strHex,'strHex');
let strHex = 0xFFFFFF
return strHex;
},
//初始化性能插件
initStats() {
this.stats = new Stats();
let con = document.getElementById("container");
con.appendChild(this.stats.dom);
},
//用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
initControls() {
this.controls = new THREE.OrbitControls(
this.camera,
this.renderer.domElement
);
// 如果使用animate方法时，将此函数删除
//controls.addEventListener( 'change', render );
// 使动画循环使用时阻尼或自转 意思是否有惯性
this.controls.enableDamping = true;
//动态阻尼系数 就是鼠标拖拽旋转灵敏度
this.controls.dampingFactor = 0.5;
//是否可以缩放
this.controls.enableZoom = true;
//是否自动旋转
this.controls.autoRotate = false;
//设置相机距离原点的最远距离 20
this.controls.minDistance = 10;
//设置相机距离原点的最远距离 80
this.controls.maxDistance = 50;
//是否开启右键拖拽
this.controls.enablePan = true;
},
//生成gui设置配置项
initGui() {
let that = this;
//声明一个保存需求修改的相关数据的对象 0xffffff
let gui = {
'size': 0.2,
'transparent': true,
'opacity': 0.6,
'vertexColors': true,
'color': 0xFFFFFF,
'sizeAttenuation': true,
'rotateSystem': true,
redraw() {
if (that.cloud) {
that.scene.remove(that.cloud);
}
that.createParticles(
gui.size,
gui.transparent,
gui.opacity,
gui.vertexColors,
gui.sizeAttenuation,
gui.color
);
//设置是否自动旋转
// that.controls.autoRotate = gui.rotateSystem;
},
};
var datGui = new dat.GUI();
//将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）gui.add(controls, 'size', 0, 10).onChange(controls.redraw);
datGui.add(gui, "transparent").onChange(gui.redraw);
datGui.add(gui, "opacity", 0, 1).onChange(gui.redraw);
datGui.add(gui, "vertexColors").onChange(gui.redraw);
datGui.addColor(gui, "color").onChange(gui.redraw);
datGui.add(gui, "sizeAttenuation").onChange(gui.redraw);
datGui.add(gui, "rotateSystem").onChange(gui.redraw);
gui.redraw();
},
// 生成粒子的方法
createParticles(size, transparent, opacity, vertexColors, sizeAttenuation, color) {
//存放粒子数据的网格
var geom = new THREE.Geometry();
//样式化粒子的THREE.PointCloudMaterial材质
var material = new THREE.PointCloudMaterial({
size: size,
transparent: transparent,
opacity: opacity,
vertexColors: vertexColors,
sizeAttenuation: sizeAttenuation,
color: color
});
console.log(this.cloudList.length,'this.cloudList.length');
for (let i = 0; i < this.cloudList.length; i++) {
var particle = new THREE.Vector3(
this.cloudList[i][0],
this.cloudList[i][1],
this.cloudList[i][2]
);
geom.vertices.push(particle);
var color = new THREE.Color(+this.randomColor());
//.setHSL ( h, s, l ) h — 色调值在0.0和1.0之间 s — 饱和值在0.0和1.0之间 l — 亮度值在0.0和1.0之间。 使用HSL设置颜色。
//随机当前每个粒子的亮度
color.setHSL(color.getHSL().h, color.getHSL().s, 1.0);
geom.colors.push(color);
}
//生成模型，添加到场景当中
this.cloud = new THREE.PointCloud(geom, material);
this.scene.add(this.cloud);
},
render() {
this.renderer.render(this.scene, this.camera);
},
//窗口变动触发的函数
onWindowResize() {
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
this.render();
this.renderer.setSize(window.innerWidth, window.innerHeight);
},
animate() {
//更新控制器
this.controls.update();
this.render();
//更新性能插件
this.stats.update();
requestAnimationFrame(this.animate);
},
// 调用
draw() {
this.initRender();
this.initScene();
this.initCamera();
this.initLight();
this.initModel();
this.initControls();
this.initStats();
this.initGui();
this.animate();
window.onresize = this.onWindowResize;
},
},
};
</script>
<style lang="scss" scoped>
.cloud-box {
width: 100%;
height: 100%;
background-size: 100% 100%;
.cloud-main {
#container {
text-align: center;
// border:green 1px solid;
}
.cloud-title {
position: relative;
text-align: center;
font-size: 18px;
.cloud-score {
color: rgb(72, 223, 72);
position: absolute;
margin-top: 2%;
left: 3%;
}
}
}
}
</style>
`
## 后续会把项目中用到的库贴上！
