threejs实现三维金属钢圈转动动画效果代码-html代码-BFW代码库

threejs实现三维金属钢圈转动动画效果代码

代码语言：html

所属分类：三维

代码描述：使用threej编写的一个三维金属质感的钢圈在一圈一圈地转动产生的动画效果代码，有点类似煤气灶头。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
          margin: 0;
        }
        
        canvas {
          display: block;
        }
    </style>


</head>

<body>


    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.92.js"></script>
    <script>
        /*
          Johan Karlsson (DonKarlssonSan) 2021
        */
        
        let scene;
        let camera;
        let renderer;
        let rings;
        let nrOfCuboids;
        let then;
        
        function setup() {
          nrOfCuboids = 64;
          setupScene();
          setupCamera();
          setupRenderer();
          setupCuboids();
          setupLights();
          setupEventListeners();
        }
        
        function setupScene() {
          scene = new THREE.Scene();
          scene.background = new THREE.Color(0x111111);
        }
        
        function setupCamera() {
          let res = window.innerWidth / window.innerHeight;
          camera = new THREE.PerspectiveCamera(75, res, 0.1, 1000);
          camera.position.z = 19;
          camera.position.y = -45;
          camera.lookAt(0, 0, 0);
        }
        
        function setupRenderer() {
          renderer = new THREE.WebGLRenderer({ antialias: true });
          renderer.setSize(window.innerWidth, window.innerHeight);
          document.body.appendChild(renderer.domElement);
        }
        
        function setupCuboids() {
          rings = [];
          addCuboidRing(5, new THREE.BoxGeometry(3, 0.3, 3));
          addCuboidRing(10, new THREE.BoxGeometry(4, 0.7, 4));
          addCuboidRing(16, new THREE.BoxGeometry(5, 1.05, 5));
          addCuboidRing(24, new THREE.BoxGeometry(6, 1.5, 6));
          addCuboidRing(33, new THREE.BoxGeometry(7, 2.2, 7));
        }
        
        function addCuboidRing(radius, geometry) {
          let cuboids = [];
          for (let i = 0; i < nrOfCuboids; i++) {
            let angle = i / nrOfCuboids * Math.PI * 2;
            let cuboid = createCuboid(i, geometry);
            cuboid.position.x = Math.cos(angle) * radius;
            cuboid.position.y = Math.sin(angle) * radius;
            scene.add(cuboid);.........完整代码请登录后点击上方下载按钮下载查看