three实现三维空间粒子拖拽旋转动画效果代码-html代码-BFW代码库

three实现三维空间粒子拖拽旋转动画效果代码

代码语言：html

所属分类：粒子

代码描述：three实现三维空间粒子拖拽旋转动画效果代码

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

<html>
<head>
    <style>
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.72.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Stats-16.js"></script>

</head>
<body>
    <div></div>
    <script>
  

        (function() {
            'use strict';
            // 'To actually be able to display anything with Three.js, we need three things:
            // A scene, a camera, and a renderer so we can render the scene with the camera.'
            // - https://threejs.org/docs/#Manual/Introduction/Creating_a_scene

            var scene, camera, renderer;

            // I guess we need this stuff too
            var container, HEIGHT,
            WIDTH, fieldOfView, aspectRatio,
            nearPlane, farPlane, stats,
            geometry, particleCount,
            i, h, color, size,
            materials = [],
            mouseX = 0,
            mouseY = 0,
            windowHalfX, windowHalfY, cameraZ,
            fogHex, fogDensity, parameters = {},
            parameterCount, particles;

            init();
            animate();

            function init() {

                HEIGHT = window.innerHeight;
                WIDTH = window.innerWidth;
                windowHalfX = WIDTH / 2;
                windowHalfY = HEIGHT / 2;

                fieldOfView = 75;
                aspectRatio = WIDTH / HEIGHT;
                nearPlane = 1;
                farPlane = 300;

                /* 	fieldOfView ? Camera frustum vertical field of view.
	aspectRatio ? Camera frustum aspect ratio.
	nearPlane ? Camera frustum near plane.
	farPlane ? Camera frustum far plane.

	- https://threejs.org/docs/#Reference/Cameras/PerspectiveCamera

	In geometry, a frustum (plural: frusta or frustums)
	is the portion of a solid (normally a cone or pyramid)
	that lies between two parallel planes cutting it. - wikipedia.		*/

                cameraZ = farPlane / 3; /*	So, 1000? Yes! move on!	*/
                fogHex = 0x000000; /* As black as your heart.	*/
                fogDensity = 0.0007; /* So not terribly dense?	*/

                camera = new THREE.PerspectiveCamera(fieldOfView, aspectRatio, nearPlane, farPlane);
                camera.position.z = cameraZ;

                scene = new THREE.Scene();
                scene.fog = new THREE.FogExp2(fogHex, fogDensity);

                container = document.createElement('div');
                document.body.appendChild(container);
                document.body.style.margin = 0;
                document.body.style.overflow = 'hidden';

                geometry = new THREE.Geometry(); /*	NO ONE SAID ANYTHING ABOUT MATH! UGH!	*/

                particleCount = 20000; /* Leagues under the sea */

                /*	Hope you took your motion sickness pills;
	We're about to get loopy.	*/

                for (i = 0; i < particleCount; i++) {

                    var vertex = new THREE.Vector3();
                    vertex.x = Math.random() * 2000 - 1000;
                    vertex.y = Math.random() * 2000 - 1000;
                    vertex.z = Math.random() * 2000 - 1000;

                    geometry.vertices.push(vertex);
                }

                /*	We can't stop here, this is bat country!	*/

                parameters = [
                    [
                        [1,
                            1,
                            0.5],
                        5
                    ],
                    [
                        [0.95,
                            1,
                            0.5],
                        4
                    ],
                    [
                        [0.90,
                            1,
                            0.5],
                        3
                    ],
                    [
                        [0.85,
                            1,
                            0.5],
                        2
                    ],
                    [
                        [0.80,
                            1,
                            0.5],
                        1
                    ]
                ];
                parameterCount = parameters.length;

                /*	I told you to take those m.........完整代码请登录后点击上方下载按钮下载查看