<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Three框架</title>

        <script src="libs/Three.js" data-ke-src="js/Three.js"></script>

        <style type="text/css">

            div#canvas-frame {

                border: none;

                cursor: pointer;

                width: 100%;

                height: 600px;

                background-color: #EEEEEE;

            }

        </style>

        <script>

            var renderer;

            function initThree() {

                width = document.getElementById('canvas-frame').clientWidth;

                height = document.getElementById('canvas-frame').clientHeight;

                renderer = new THREE.WebGLRenderer({

                    antialias : true

                });

                renderer.setSize(width, height);

                document.getElementById('canvas-frame').appendChild(renderer.domElement);

                renderer.setClearColor(0xFFFFFF, 1.0);

            }

            var camera;

            function initCamera() {

                camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);

                camera.position.x = 0;

                camera.position.y = 1000;

                camera.position.z = 0;

                camera.up.x = 0;

                camera.up.y = 0;

                camera.up.z = 1;

                camera.lookAt({

                    x : 0,

                    y : 0,

                    z : 0

                });

            }

            var scene;

            function initScene() {

                scene = new THREE.Scene();

            }

            var light;

            function initLight() {

                light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);

                light.position.set(100, 100, 200);

                scene.add(light);

            }

            var cube;

            function initObject() {

                var geometry = new THREE.Geometry();//声明一个几何体

                var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors} );

            //定义一种线条的材质，使用THREE.LineBasicMaterial类型来定义

            //使用了顶点颜色vertexColors: THREE.VertexColors，就是线条的颜色会根据顶点来计算

                var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 );

            //线的材质可以由2点的颜色决定  定义两种颜色，分别表示线条两个端点的颜色

                var p1 = new THREE.Vector3( -100, 0, 100 );//定义2个顶点的位置，并放到geometry中

                var p2 = new THREE.Vector3(  100, 0, -100 );

                geometry.vertices.push(p1);

                geometry.vertices.push(p2);

                geometry.colors.push( color1, color2 );//为2个顶点设置不同的颜色

                var line = new THREE.Line( geometry, material, THREE.LinePieces );//定义线条，使用THREE.Line类,几何体，线条材质，点的连接方式

                scene.add(line);//将这条线加入到场景中

            }

            function render()

            {

                renderer.clear();

                renderer.render(scene, camera);

                requestAnimationFrame(render);

            }

            function threeStart() {

                initThree();

                initCamera();

                initScene();

                initLight();

                initObject();

                render();

            }

        </script>

    </head>

    <body onload="threeStart();">

        <div id="canvas-frame"></div>

    </body>

</html>




												


											
three.js 显示一条线的更多相关文章
	

    
								
  1. Highcharts tooltip显示多条线的信息
		
    直接上代码吧,简单粗暴点: tooltip: { shared: true, valueSuffix: '分', formatter: function () { let s = "&quo ...
    
		
    2. 
						
  2. JS原生上传大文件显示进度条-php上传文件
		
    JS原生上传大文件显示进度条-php上传文件 在php.ini修改需要的大小: upload_max_filesize = 8M    post_max_size = 10M    memory_li ...
    
		
    3. 
						
  3. JS实现根据密码长度 显示安全条
		
    原文:http://www.open-open.com/code/view/1431324883763 //根据密码长度显示安全条 <ul class="clear"> ...
    
		
    4. 
						
  4. Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)
		
    Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...
    
		
    5. 
						
  5. 原生js显示分页效果
		
    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
    
		
    6. 
						
  6. html+js+node实现五子棋线上对战，五子棋最简易算法
		
    首先附上我的github地址,https://github.com/jiangzhenfei/five,线上实例:http://47.93.103.19:5900/client/ 线上实例,你可以随意 ...
    
		
    7. 
						
  7. 基于Jquery插件Uploadify实现实时显示进度条上传图片
		
    网址:http://www.jb51.net/article/83811.htm     这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们 ...
    
		
    8. 
						
  8. CAD隐藏或显示工具条上的按钮（com接口VB语言）
		
    主要用到函数说明: MxDrawXCustomFunction::Mx_HideToolBarControl 隐藏或显示工具条上的按钮.详细说明如下: 参数 说明 IN LPCTSTR pszTool ...
    
		
    9. 
						
  9. 安卓中经常使用控件遇到问题解决方法(持续更新和发现篇幅)(在textview上加一条线、待续)
		
    TextView设置最多显示30个字符.超过部分显示...(省略号),有人说分别设置TextView的android:signature="true",而且设置android:el ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 第三章 C#循环与方法
			
    第一节1-For循环入门 语法: for(条件表达式) { 执行语句 } 练习: 第三章作业1.写一个程序打印100到200的值;2.写一个程序从10打印到1:3.写一个程序打印10到30之间的所有偶 ...
    
			
    2. 
						
  2. cf378C(模拟)
			
    题目链接:http://codeforces.com/contest/733/problem/C 思路:模拟 因为数组b里的元素是顺序对应a数组元素的和,可以开个c数组储存b数组元素对应的a数组元素区 ...
    
			
    3. 
						
  3. Javaweb---Servlet过滤器
			
    Servlet过滤器从字面上的字意理解为景观一层次的过滤处理才达到使用的要求,而其实Servlet过滤器就是服务器与客户端请求与响应的中间层组件,在实际项目开发中Servlet过滤器主要用于对浏览器的 ...
    
			
    4. 
						
  4. Swift - 让程序挂起后，能在后台继续运行任务
			
    1,程序的挂起和退出 由于iOS设备资源有限.当用户点击了home键,或者另一个应用程序启动了.那么原先那个程序便进入后台被挂起,不是退出,只是停止执行代码,同时它的内存被锁定.当应用程序恢复时,它会 ...
    
			
    5. 
						
  5. 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果
			
    利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居     200万内购五环三居 140万安家东三环     北京首现零首付楼 ...
    
			
    6. 
						
  6. Delphi函数的返回值（注意这里与C/C++等语言有差异）
			
    在C/C++等语言中,函数执行到 return 部分之后,将立即停止函数的执行,并返回值 但是在Delphi中不同 函数中,执行到result时,并不同于比如 C/C++ 中的 return,跳出函数 ...
    
			
    7. 
						
  7. Snowflake Snow Snowflakes（哈希表的应用）
			
    Snowflake Snow Snowflakes Time Limit: 4000MS   Memory Limit: 65536K Total Submissions: 27312   Accep ...
    
			
    8. 
						
  8. 在MAVEN仓库中添加ORACLE JDBC驱动
			
    本文转载自 http://www.cnblogs.com/leiOOlei/archive/2013/10/21/3380568.html 因为已经是第二次遇到,所以COPY过来,怕以后别人的BLOG ...
    
			
    9. 
						
  9. AOP常用术语
			
    1.连接点(Joinpoint) 程序执行的某个特定位置:如类开始初始化前,类初始化后,类某个方法调用前,调用后,方法跑出异常后.一个类或一段程序代码拥有一些具有边界性质的特定点.这些代码中的特定点就 ...
    
			
    10. 
						
  10. 获取当前IP地址，跳转到对应城市网站。
			
    index.php文件 1,通过获取当前IP地址, 2,调用新浪AIP,获取到当前城市. 3,将中文转换为拼音后跳转. <?php include './pinyin.php'; //获取当前i ...
    
			
    11.