3d圣诞树

本文主要是介绍3d圣诞树，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

演示地址 ：由于模型有点大，加载出来需要两分钟左右。。

代码地址

思路

一、引用基于three.js封装的开源框架https://github.com/kovacsv/Online3DViewer/wiki/Use-the-Viewer-on-Your-Website

二、加载圣诞树模型

<div class="online_3d_viewer"class="online_3d_viewer"style="height: 100vh;"model="fbxfile.fbx"defaultcolor="200,0,0"backgroundcolor="0,0,0"edgesettings="on,0,0,0,1"><div class="text">圣诞快乐</div>

OV.ExternalLibLocation = './visualization/libs';OV.Init3DViewerElements((rs) => {// 加载模型后的回调处理
})

// 圣诞树基于y轴旋转

scene.traverse((obj) => {if (obj instanceof THREE.Mesh) {obj.rotation.y = obj.rotation.y + 0.01;}})

// 加载雪花粒子 参考ThreejsDemo

https://github.com/mrdoob/three.js/blob/master/examples/webgl_points_sprites.html

// 初始化雪花粒子位置

for ( let i = 0; i < 30000; i ++ ) {const x = Math.random() * 12000 - 6000 ;const y = Math.random() * 12000 - 6000;const z = Math.random() * 12000 - 6000;vertices.push( x, y, z );}

// 旋转雪花粒子

    for ( let i = 0; i < scene.children.length; i ++ ) {const object = scene.children[ i ];if ( object instanceof THREE.Points ) {object.rotation.x = object.rotation.x + 0.0025;}}              

这篇关于3d圣诞树的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---