three实现canvas三维粒子变形动画效果代码-html代码-BFW代码库

three实现canvas三维粒子变形动画效果代码

代码语言：html

所属分类：粒子

代码描述：three实现canvas三维粒子变形动画效果代码

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

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

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=0" />


</head>

<body>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.75.js"></script>



    <script>
        var mousePos = { x: .5, y: .5 };
        document.addEventListener('mousemove', function (event) {mousePos = { x: event.clientX / window.innerWidth, y: event.clientY / window.innerHeight };});
        var phase = 0;
        
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(95, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 30;
        
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        
        var boxSize = 0.2;
        var geometry = new THREE.BoxGeometry(boxSize, boxSize, boxSize);
        var materialGreen = new THREE.MeshBasicMaterial({ transparent: true, color: 0xff0000, opacity: 0.4, side: THREE.DoubleSide });
        
        var pitchSegments = 60;
        var elevationSegments = pitchSegments / 2;
        var particles = pitchSegments * elevationSegments;
        var side = Math.pow(particles, 1 / 3);
        
        var radius = 16;
        
        var parentContainer = new THREE.Object3D();
        scene.add(parentContainer);
        
        function posInBox(place) {
          return (place / side - 0.5) * radius * 1.2;
        }
        
        //Plant the seeds, grow some trees in a grid!
        for (var p = 0; p < pitchSegments; p++) {
          var pitch = Math.PI * 2 * p / pitchSegments;
          for (var e = 0; e < elevationSegments; e++) {
            var elevation = Math.PI * (e / elevationSegments - 0.5);
            v.........完整代码请登录后点击上方下载按钮下载查看