ThreeJS画网格及其它-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_3742/article/details/82612384

本文介绍了如何利用ThreeJS库在WebGL中绘制3D网格。通过展示具体的效果和提供相关代码，展示了在r69版本的Three.js中实现这一功能的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

代码：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Grid</title>
		<style>body{background:#eeeeee;margin:0;padding:0;}</style>
		<script src="js/three.min.js"></script>
	</head>
	<body>
		<script>
		var width = window.innerWidth-3;
		var height = window.innerHeight-3;
		
		var scene = new THREE.Scene();		//创建场景
		
		var camera = new THREE.PerspectiveCamera(45, width/height, 1, 10000);		//创建相机（视角为45度，宽高比为width/height，近平面在1(离原点很近)，远平面在+1000/-1000）
		camera.position.y = 1000;	//设置相机的位置（默认添加到原点）
		camera.up.z = 1;		//设置相机的上为z轴正方向（使与x轴水平沿z轴排列的线，看上去一行一行排列）
		camera.lookAt({x:0, y:0, z:0});		//设置相机的焦点在原点（相机默认添加到空间中的原点，方向向前，位移后物体可能不在视野内）
		
		var geometry = new THREE.Geometry();	//创建geometry
		geometry.vertices.push(new THREE.Vector3(-19*40/2, 0 ,0));	//添加顶点
		geometry.vertices.push(new THREE.Vector3(19*40/2, 0, 0));
		
		for(var i=0;i<20;i++){
			//var mesh = new THREE.Mesh(geometry, material);
			var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({color:0x0000ff}));		//利用geometry和material创建line
			line.position.z = i*40 - 19*40/2;	//设置line的位置
			scene.add(line);	//将line添加到场景中
			
			var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({color:0xff0000}));
			line.position.x = i*40 - 19*40/2;
			line.rotation.y = Math.PI/2;	//绕y轴旋转90度
			scene.add(line);
		}
		
		var renderer = new THREE.WebGLRenderer({antialias : true});		//创建渲染器（并设置抗锯齿属性）
		renderer.setSize(width, height);	//设置渲染器的大小
		renderer.setClearColor(0xeeeeee, 1);	//设置渲染器的背景
		document.body.appendChild(renderer.domElement);		//添加渲染器的DOM元素到body中
		
		function render(){
			//renderer.clear();
			renderer.render(scene, camera);		//进行渲染
		}
		render();
		</script>
	</body>
</html>

附注：笔者当前使用的three.js版本是r69。