threejs实现三维空间线条连线交互效果代码-html代码-BFW代码库

threejs实现三维空间线条连线交互效果代码

代码语言：html

所属分类：三维

代码描述：threejs实现三维空间线条连线交互效果代码

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

<!doctype html>
<html>

<head>
    <meta charset="utf-8">


    <style>
        /* gradient fallbacks taken from csstricks.com */
        body {
          background-color: red;
          
          /* SVG fallback for IE 9 (could be data URI, or could use filter) */
          background-image: url(fallback-gradient.svg);
          
          /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
          background-image: -webkit-gradient(linear, left top, right top, from(red), to(#f06d06));
          
          /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
          background-image: -webkit-linear-gradient(left, red, #f06d06);
          
          /* Firefox 3.6 - 15 */
          background-image: -moz-linear-gradient(left, red, #f06d06);
          
          /* Opera 11.1 - 12 */
          background-image: -o-linear-gradient(left, red, #f06d06);
          
          /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
          background-image: linear-gradient(to right, red, #f06d06);
          margin: 0px;
          overflow: hidden;
        }
    </style>

</head>

<body>

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

    <div></div>


    <script>
        var mouseX = 0,
              mouseY = 0,
              windowHalfX = window.innerWidth / 2,
              windowHalfY = window.innerHeight / 2,
              SEPARATION = 200,
              AMOUNTX = 10,
              AMOUNTY = 10,
              camera,
              scene,
              renderer;
          
          init();
          animate();
        
        	function init() {
        
          	var container,
                separation = 100,
                amountX = 50,
                amountY = 50,
                particle;
            
            container = document.createElement( 'div' );
            document.body.appendChild( container );
        
            scene = new THREE.Scene();
        
            renderer = new THREE.CanvasRenderer({ alpha: true }); // gradient; this can be swapped for WebGLRenderer
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );
            
            camera = new THREE.PerspectiveCamera(
            	75,
              window.innerWidth / window.innerHeight,
              1,
              10000
            );
            camera.position.z = 100;
        
        		// particles
            var PI2 = Math.PI * 2;
            var material = new THREE.SpriteCanvasMaterial({
            	color: 0xffffff,
            	program: function ( context ) {
        				context.beginPath();
                context.arc( 0, 0, 0.5, 0, PI2, true );
                context.fill();
              }
            });
            
     .........完整代码请登录后点击上方下载按钮下载查看