three实现三维三角形变形旋转艺术效果代码果代码

代码语言:html

所属分类:三维

代码描述:three实现三维三角形变形旋转艺术效果代码果代码

代码标签: three 三维 三角形 变形 旋转 艺术

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

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

<head>

    <meta charset="UTF-8">






    <style>
        html,
        body {
          margin: 0;
          padding: 0;
          width: 100%;
          height: 100%;
        }
        
        canvas {
          position: fixed;
          width: 100%;
          height: 100%;
          z-index: -1;
        }
    </style>



</head>

<body>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.109.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/randomColor.js"></script>
    <script src='https://klevron.github.io/codepen/three.js/OrbitControls.js'></script>
    <script id="rendered-js">
        var scene, camera, cameraCtrl, renderer;
        
        const nbTrucs = 1;
        const nbObjects = 25,objectMinRadius = 1,objectRadiusCoef = 1.5,objectThickness = 0.5,objectDepth = 0.5;
        const animationDuration = 9,animationDelay = 0.1;
        
        function init() {
          scene = new THREE.Scene();
          camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 1000);
          cameraCtrl = new THREE.OrbitControls(camera);
          // cameraCtrl.autoRotate = true;
          // cameraCtrl.autoRotateSpeed = 5;
        
          renderer = new THREE.WebGLRenderer({ antialias: true });
          renderer.setSize(window.innerWidth, window.innerHeight);
          document.body.appendChild(renderer.domElement);
        
          initScene();
        
          onWindowResize();
          window.addEventListener('resize', onWindowResize, false);
        
          animate();
        };
        
        function initScene() {
          scene = new THREE.Scene();
          scene.background = new THREE.Color(0x000000);
        
          this.initLights();
        
          camera.position.z = 75;
        
          for (var i = 0; i < nbTrucs; i++) {
            var truc = new Truc();
            scene.add(truc.o3d);
          }
        }
        
        function initLights() {
          const lightIntensity = 0.5;
          const lightDistance = 200;
        
          scene.add(new THREE.AmbientLight(0xeeeeee));
        
          var light;
        
          light = new THREE.PointLight(randomColor({ luminosity: 'light' }), lightIntensity, lightDistance);
          light.position.set(0, 100, 0);
          scene.add(light);
          light = new THREE.PointLight(randomColor({ luminosity: 'light' }), lightIntensity, lightDistance);
          light.position.set(0, -100, 0);
          scene.add(light);
        
          light = new THREE.PointLight(randomColor({ luminosity: 'light' }), l.........完整代码请登录后点击上方下载按钮下载查看

网友评论0