Threejs入门4-line(画线)

时间：2024-03-30 22:19:58

1.简介

在3D世界中：归根结底是点，两点一线，三点一面(不在一条线)，不同的面组成各种各样的物体

2. Threejs中定义点

var point = new THREE.Vecotr3(x,y,z);

这个函数有3个参数，分别代表x坐标，y坐标和z坐标的分量.

3.画线

效果图：

Threejs入门4-line(画线)

(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);
}

 

相关文章