three.js 随机生成多个物体，各自围绕几何中心各自旋转

最新推荐文章于 2024-12-30 17:34:22 发布

zhuoyunluo77

最新推荐文章于 2024-12-30 17:34:22 发布

阅读量1.4k

点赞数

分类专栏： three.js webgl 文章标签： javascript 前端

本文链接：https://blog.csdn.net/w__qwwq/article/details/126733363

版权

本文展示了如何使用three.js创建一个立方体围绕其几何中心旋转，并生成多个带有随机颜色的小圆球，每个小球独立地沿不同方向旋转，构成一个动态的3D场景效果。

摘要由CSDN通过智能技术生成

一、效果图：

随机生成多个物体，改变旋转方向

二、实现过程：

在场景中添加一个立方体，立方体围绕原点中心旋转，而通过随机生成多个随机色彩的小圆球，并改变这些小圆球旋转方向。立方体和小圆球各自旋转。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="js/three.js"></script>
  <script src="js/Stats.js"></script>
  <script src="js/tween.min.js"></script>
  <script src="js/loaders/OBJLoader.js"></script>
  <script src="js/OrbitControls.js"></script>
  <style type="text/css">
    div#canvas-frame{
     
      border: none;
      cursor: pointer;
      width: 100%;
      height: 600px;
      background-color: #EEEEEE;
    }
  </style>
  <script>
    var renderer;
    var stats;
    var radius = 100;
    var camera;
    var scene;
    var light;
    var cube;
    var boxMesh,objMesh=undefined