banner
banner
banner
NEWS LETTER

threeJS-3D官网步骤

Scroll down
  1. 先将官网的整体布局实现,背景使用canvas画布并置于底层
  2. 通过布局留出来的空白位置,等待加载模型
  3. 定义两个变量,将画布和控制页面展示的参数初始化,并在onMounted中赋值
  4. 创建环境,加载环境并渲染到画布上
  5. 加载模型,如想要模型能动起来就在加载的回调函数中监听鼠标的移动事件
  6. 当滚动鼠标滚轮时,想要不同的模型出现在不同的页面,就加载不同模型,但位置要呈一定的倍数关系,并监听滚轮事件
  7. 实例化创建球体,并生成多个,通过for循环和随机函数让xyz的坐标随机,并添加到矩阵中,然后设置实例化球体的每一个与该矩阵相同
  8. 如果想要球体大小不一致,可以设置matrix.makeScale(size,size,size),size也是随机生成
  9. 通过补间动画让球体移动
其他文章
cover
threeJS-Three+React
  • 24/11/01
  • 11:01
  • ThreeJS
请输入关键词进行搜索