ThreeJS/WebGL基础教程 - 绘制一根渐变直线

两点（在3D图形中由向量Vector来表示一个点）确定一条直线，顶点颜色不同，VertexColors：定义线条材质是否使用顶点颜色，这是一个布尔值。意思是，线条各部分的颜色会根据顶点的颜色来进行插值，从而形成颜色梯度效果。

three，webgl，line

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 5572
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

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);
    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: THREE.VertexColors} );
    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);
    geometry.vertices.push(p2);
    geometry.colors.push( color1, color2 );

var line = new THREE.Line( geometry, material, THREE.LinePieces );
    scene.add(line);
}
function render()
{
    renderer.clear();
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
function run() {
    initThree();
    initCamera();
    initScene();
    initLight();
    initObject();
    render();
}

$(document).ready(function() {
	run();
});

编译

CSS

HTML

两点（在3D图形中由向量Vector来表示一个点）确定一条直线，顶点颜色不同，VertexColors：定义线条材质是否使用顶点颜色，这是一个布尔值。意思是，线条各部分的颜色会根据顶点的颜色来进行插值，从而形成颜色梯度效果。

three，webgl，line

编辑器支持Emmet

快捷键

两点（在3D图形中由向量Vector来表示一个点）确定一条直线，顶点颜色不同，VertexColors：定义线条材质是否使用顶点颜色，这是一个布尔值。意思是，线条各部分的颜色会根据顶点的颜色来进行插值，从而形成颜色梯度效果。

three，webgl，line

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：