Threejs入门4-line(画线)
最编程
2024-01-17 14:49:01
...
1.简介
在3D世界中：归根结底是点，两点一线，三点一面(不在一条线)，不同的面组成各种各样的物体
2. Threejs中定义点
var point = new THREE.Vecotr3(x,y,z);
这个函数有3个参数，分别代表x坐标，y坐标和z坐标的分量.
3.画线
效果图：
(1).新建line.html
<!DOCTYPE html>
<html>
<head>
<title>three.js</title>
<script src="../libs/three.min.js"></script>
<script src="../js/line.js"></script>
<style>
</style>
</head>
<script>
</script>
<body>
</body>
</html>
(2).新建line.js
var camera, scene, renderer;
var geometry, material, light;
/**
* @description 初始化渲染场景
*/
function initRenderer () {
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// renderer.setClearColor(0xFFFFFF, 1.0);
}
/**
* @description 初始化相机
*/
function initCamera () {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
// camera.position.x = 0;
// camera.position.y = 1000;
// camera.position.z = 0;
camera.position.set(0, 1000, 0);
// camera.up.x = 0;
// camera.up.y = 1;
// camera.up.z = 0;
camera.up.set(0, 1, 0)
camera.lookAt(0, 0, 0)
}
/**
* @description 初始化场景
*/
function initScene () {
scene = new THREE.Scene();
}
/**
* @description 初始化光
*/
function initLight() {
light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);
light.position.set(100, 100, 200);
scene.add(light);
}
/**
* @description 初始化添加物体
*/
function initObject () {
geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3(-100, 0, 100),
new THREE.Vector3(100, 0, -100)
);
geometry.colors.push(
new THREE.Color( 0x444444 ),
new THREE.Color( 0xFF0000 )
)
material = new THREE.LineBasicMaterial({ vertexColors: true });
var line = new THREE.Line(geometry, material);
scene.add(line);
}
/**
* @description 渲染
*/
function render () {
renderer.clear();
renderer.render( scene, camera );
}
function init() {
initRenderer()
initCamera ();
initScene();
initLight();
initObject();
render();
}
window.onload = init;
(3).代码解析
a.首先声明一个物体geometry
b.定义两个顶点的位置，放入物体geometry中
c.定义两种颜色，表示两端的颜色
d.定义线性材质LineBasicMaterial
e.定义线条
function initObject () {
geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3(-100, 0, 100),
new THREE.Vector3(100, 0, -100)
);
geometry.colors.push(
new THREE.Color( 0x444444 ),
new THREE.Color( 0xFF0000 )
)
material = new THREE.LineBasicMaterial({ vertexColors: true });
var line = new THREE.Line(geometry, material);
scene.add(line);
}
上一篇： JavaScript 判断优雅写法
下一篇： JS求解三元一次方程组值的方法