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

three实现webgl三维粒子动画效果代码

代码语言：html

所属分类：粒子

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.72.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Stats-16.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script>
    /**
* the more web project can see:https://eveningwater.github.io/my-web-projects/ 
*
 */
// once everything is loaded, we run our Three.js stuff.
$(function () {
    var stats = initStats();
    // create a scene, that will hold all our elements such as objects, cameras and lights.
    var scene = new THREE.Scene();
    // create a camera, which defines where we're looking at.
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
    // create a render and set the size
    var webGLRenderer = new THREE.WebGLRenderer();
    webGLRenderer.setClearColor(new THREE.Color(0x000000, 1.0));
    webGLRenderer.setSize(window.innerWidth, window.innerHeight);
    webGLRenderer.shadowMapEnabled = true;
    // position and point the camera to the center of the scene
    camera.position.x = -30;
    camera.position.y = 40;
    camera.position.z = 50;
    camera.lookAt(new THREE.Vector3(10, 0, 0));
    // add the output of the renderer to the html element
    $("#WebGL-output").append(webGLRenderer.domElement);
    // call the render function
    var step = 0;
    var knot;
    // setup the control gui
    var controls = new function () {
        // we need the first child, since it's a multimaterial
   .........完整代码请登录后点击上方下载按钮下载查看