使用three.js 画渐变的直线

2016-06-05 11:29:29 投稿：hebedich

这篇文章主要介绍了使用three.js 画渐变的直线的相关资料以及具体的实例代码，有需要的小伙伴可以参考下

Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。不过，这款引擎目前还处在比较不成熟的开发阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度（尤其是文档的匮乏）three.js的代码托管在github上面。

http://github.com/mrdoob/three.js/

我们来看实例吧

<!DOCTYPE html> <meta charset="utf-8" /> <title></title> </head> <script type="text/javascript" src="js/three.js" ></script> <style> 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); //domElement表示渲染器中的画布，所有的渲染都画在上边 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(){ //声明的几何体，里边有个vertices参数可以用来存放点 var geometry = new THREE.Geometry(); //LineBasicMaterial(parameters)//basic翻译：基础//Material翻译：原料 //Parameters:是一个定义材质外观的对象，它包含多个属性来定义材质，这些属性是//翻译：参数 //Color:线条的颜色，用16进制来表示，默认的颜色是白色。 //Linewidth //Linecap:线条两端的外观，默认是圆角端点，当线条较粗的时候才看得出效果//cap翻译：帽子 //Linejoin:两个线条的连接点处的外观，默认是round 圆角//join翻译：加入 //VertexColors:定义线条材质是否使用顶点元素，这是一个boolean值。意思是线条各部分的颜色根据顶点的颜色来进行插值。//vertex翻译：顶点 //Fog:定义材质的颜色是否受全局雾效的影响。//翻译：雾 var material = new THREE.LineBasicMaterial({ vertexColors: true //定义两种颜色分别是两个端点的颜色 var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 ); //线的材质可以由两点的颜色决定 var p1 = new THREE.Vector3(); var p2 = new THREE.Vector3(); p1.set(-100,0,100); p2.set(100,0,-100); geometry.vertices.push(p1); geometry.vertices.push(p2); geometry.colors.push(color1, color2); //定义线条这里会传进去三个参数 //第一个是几何体geometry，里面包含两个顶点和顶点颜色 //第二个是线条的材质 //第三个是一组点的连接方式 var line = new THREE.Line(geometry,material, THREE.LinePieces); //将线条添加到场景中 scene.add(line); function threeStart(){ initThree(); initCamera(); initScene(); initLight(); initObject(); renderer.clear(); renderer.render(scene,camera); </script> <body onload="threeStart()"> <div id="canvas-frame"></div> </body> </html>

希望本实例能给大家学习three.js带来些帮助

您可能感兴趣的文章:

工信部称网盘企业免费用户最低速率应满足基本下载需求，天翼云盘回应：坚决支持，始终

电脑版 - 返回首页