使用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>
<html>
<head>
<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带来些帮助
相关文章
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充2017-03-03
这篇文章主要为大家介绍了TypeScript 基本数据类型实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了Underscore.js常用方法总结,本文讲解了Underscore.js概述、在node.js下安装、与集合有关的方法、与对象有关的方法、与函数相关的方法等内容,需要的朋友可以参考下2015-02-02
TS中Array.reduce提示没有与此调用匹配的重载解析
这篇文章主要为大家介绍了TS中Array.reduce提示没有与此调用匹配的重载解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
隔了好久才终于又发布了一点东西，SmartJS是最近才开始搞的一个开源js库，目的是做一些比较有特点的事情（smartjs暂时也是依赖于jquery）。2014-06-06
这篇文章主要为大家介绍了鲜为人知的JavaScript中5个JSON秘密功能详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要介绍了使用three.js 画渐变的直线的相关资料以及具体的实例代码，有需要的小伙伴可以参考下2016-06-06
这篇文章主要为大家介绍了数据结构TypeScript之邻接表实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要为大家介绍了TypeScript学习轻松玩转类型操作，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
typescript封装消息提示框插件ew-message使用实战
这篇文章主要为大家介绍了typescript封装消息提示框插件ew-message使用实战,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
最新评论