<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three框架</title>
<script src="../js/Three.js"></script>
<style type="text/css">
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);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColorHex(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;
//UP向量
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();
//定义线条材质,vertexColors:true 线条各部分的值用顶点颜色来插值
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);
//vertices变量用于存放点
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 threeStart() {
initThree();
initCamera();
initScene()
initLight();
initObject();
renderer.clear();
renderer.render(scene,camera);
}
</script>
</head>
<body onload="threeStart();">
<div id="canvas-frame"></div>
</body>
</html>
three.js画线
猜你喜欢
转载自blog.csdn.net/hb707934728/article/details/78728549
今日推荐
周排行