Three.js入门系列之 —— 画线

最新推荐文章于 2024-01-04 16:41:17 发布

基因改造者

最新推荐文章于 2024-01-04 16:41:17 发布

阅读量1.8k

点赞数

分类专栏： Three 文章标签： three line

本文链接：https://blog.csdn.net/z1324402468/article/details/92685980

版权

Three 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

怎么画一个圆或者画一条线，而不是一个线框模型，或者说不是一个Mesh（网格）呢？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Drawing Lines</title>
  <style>
    body { margin: 0; }
    canvas { width: 100%; height: 100% }
  </style>
</head>
<body>
<script src="../../build/three.js"></script>
<script>
	//创建一个场景
	var scene = new THREE.Scene();
	//创建摄影机
	//第一个属性是视野角度（FOV），第二个属性是长宽比，第三个是近剪界面，第四个是远剪界面
	var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
	//创建渲染器
	var renderer = new THREE.WebGLRenderer();
	//设置渲染器的宽高
	renderer.setSize( window.innerWidth/2, window.innerHeight/2 );
	//将渲染器这个元素添加到文档中
	document.body.appendChild( renderer.domElement );

	//默认情况下，当我们调用scene.add()的时候，物体将会被添加到坐标为(0,0,0)的位置。但这可能会使得摄像机的位置和立方体相互重叠（也就是摄像机位于立方体中）。为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可。
	camera.position.set(0,0,100);
	camera.lookAt(0,0,0);

	//创建一个LineBasicMaterial材质
	//对于线条来说，我们能使用的材质只有LineBasicMaterial 或者 LineDashedMaterial。
	var materials = new THREE.LineBasicMaterial({color:0xff00ff});
	//创建带顶点的几何体
  //线是画在每一对连续的顶点之间的,而不是在第一个顶点和最后一个顶点之间绘制线条（线条并未闭合）。
  var geometry = new THREE.Geometry();
  geometry.vertices.push(new THREE.Vector3(-30,0,0));
  geometry.vertices.push(new THREE.Vector3(0,10,0));
  geometry.vertices.push(new THREE.Vector3(10,0,0));
  geometry.vertices.push(new THREE.Vector3(10,10,0));
  geometry.vertices.push(new THREE.Vector3(10,10,10));
  geometry.vertices.push(new THREE.Vector3(10,50,10));

  //实例化一条线
  var line = new THREE.Line(geometry,materials);

  //把线添加到场景
  scene.add(line);

	function animate() {
		requestAnimationFrame( animate );
		//每次刷新改变一下rotation的值，可以让box动起来
		line.rotation.x += 0.01;
		line.rotation.y += 0.01;
		//渲染场景
		renderer.render( scene, camera );
	}
	animate();
</script>
</body>
</html>

Line

基因改造者

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Three.js入门系列之 —— 画线

怎么画一个圆或者画一条线，而不是一个线框模型，或者说不是一个Mesh（网格）呢？<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Drawing Lines</title> <style> body ...
复制链接

扫一扫