0
点赞
收藏
分享

微信扫一扫

Three.JS学习 2:Threejs定义点和面

运行Three.js开发指南demo

通常运行three.js需要有web服务器,可以使用node或python的简单http server。

git clone https://github.com/josdirksen/learning-threejs
ce learning-threejs
npm install -g http-server
http-server

其中npm需要预告安装node,并在项目文件夹下启动http-server

在没有WEB服务器的情况下,使用Chrome浏览器查看three.js项目:

chrome --disable-web-security

搭建HTML框架

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="../libs/three.js"></script>
<style>
body{margin:0;overflow:hidden;}
</style>
</head>
<body>
<div id="WebGL-output"></div>
<script>
function init(){

}
window.onload=init;
</script>
</body>
</html>

3D 组成

2点组成直接
不在一条线上三点组成一个三角形面
许多三角形面组成各种形状的物体。

Three.JS学习 2:Threejs定义点和面_html

这种网格模型叫做Mesh模型。
物体需要贴上纹理,组合展示成3D世界。

在Three.js定义一个点

先看点的定义:

THREE.Vector3 = function (x, y, z) {

this.x = x || 0;
this.y = y || 0;
this.z = z || 0;

};

定义一个点:

var point1=new THREE.Vector3(10,20,30);

或者:

var point2=new THREE.Vector3();
point2.set(10,20,30);

直线

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three框架</title>
<script src="js/three.min.js"></script>
<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
}

</style>
<script>
var renderer,width,height;
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: true }); //定义材质外观
var color1 = new THREE.Color(0x444444), color2 = new THREE.Color(0xFF0000); //定义两种颜色

// 线的材质可以由2点的颜色决定
var p1 = new THREE.Vector3(-100, 0, 100);
var p2 = new THREE.Vector3(100, 0, -100);
geometry.vertices.push(p1); //vertices属性里可以存放点对象
geometry.vertices.push(p2);
geometry.colors.push(color1, color2); //为两个点设置两种颜色

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>
</head>

<body onload="threeStart();">
<div id="canvas-frame"></div>
</body>
</html>

LineBasicMaterial(parameters)定义材质外观,包含的属性

  • Color:线条的颜色,用16进制来表示,默认的颜色是白色。
  • Linewidth:线条的宽度,默认时候1个单位宽度。
  • Linecap:线条两端的外观,默认是圆角端点,当线条较粗的时候才看得出效果,如果线条很细,那么你几乎看不出效果了。
  • Linejoin:两个线条的连接点处的外观,默认是“round”,表示圆角。
  • VertexColors:定义线条材质是否使用顶点颜色,这是一个boolean值。意思是,线条各部分的颜色会根据顶点的颜色来进行插值。
  • Fog:定义材质的颜色是否受全局雾效的影响。

显示结果:
Three.JS学习 2:Threejs定义点和面_函数_02

学习原文地址:
​​​http://www.hewebgl.com/​​


另一具比较好的学习网址:
​​​https://read.douban.com/reader/ebook/7412854/​​


举报

相关推荐

0 条评论