ThreeJS学习笔记（3）-简单画线_three 攻击线-CSDN博客

本文介绍如何利用Three.js库在网页上绘制简单的3D线条，并提供了完整的代码示例。从创建场景、相机和渲染器开始，到定义几何体、材质及光线，最后完成线条的绘制。

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

画线具体代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="js/three.js" type="text/javascript"></script>
        
    </head>
    <body>
    <script  type="text/javascript" >
        // 老三样 场景scene，相机camera，渲染器render
        var scene=new THREE.Scene();
        // 相机
        var camera = new THREE.PerspectiveCamera(45,1,1,1000);
        camera.position.set(0,0,100);
        camera.lookAt(new THREE.Vector3(0,0,0)); 
        // 渲染器
        var renderer=new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth,window.innerHeight);


        //显示在窗体
        document.body.appendChild(renderer.domElement);       


        //定义材质THREE.LineBasicMaterial . MeshBasicMaterial...都可以
        var material = new THREE.LineBasicMaterial({color:0x0000ff});
        // 空几何体，里面没有点的信息,不想BoxGeometry已经有一系列点，组成方形了。
        var geometry = new THREE.Geometry();
        // 给空白几何体添加点信息，这里写3个点，geometry会把这些点自动组合成线，面。
        geometry.vertices.push(new THREE.Vector3(-10,0,0));
        geometry.vertices.push(new THREE.Vector3(0,10,0));
        geometry.vertices.push(new THREE.Vector3(0,5,0));
        //线构造
        var line=new THREE.Line(geometry,material);
        // 加入到场景中
        scene.add(line);                  
        // 渲染
        renderer.render(scene,camera);        
        
    </script>
    </body>
</html>

通过修改，编写了一个比较规范的架构：

<!DOCTYPE html>

<html>
<head>
	<title>
	</title>
	<style type="text/css">
		div#canvas-frame {
			border: none;
			cursor: pointer;
			width: 100%;
			height: 600px;
			background-color: #EEEEEE;
		}
	</style>
	<script src="js/three.js"></script>
	<script src="js/jquery.js"></script>
	<script>
		//定义场景并初始化
		var scene;
		function initScene(){
			scene = new THREE.Scene();
		}
		
		//定义相机并初始化
		var camera;
		function initCamera(){
			camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,10000);
			camera.position.set(0,1000,0);
			camera.lookAt(new THREE.Vector3(0,0,0));
		}
		
		//定义渲染器并初始化
		var renderer;
		function initRenderer(){
			renderer= new THREE.WebGLRenderer();
			width=$("#canvas-frame").width();
			height=$("#canvas-frame").height();
			renderer.setSize(width,height);
			$("#canvas-frame").append(renderer.domElement);
			renderer.setClearColor(0x39609b,1);
		}
		
		//定义灯光并初始化
		var light;
		function initLight(){
			light=new THREE.DirectionalLight(0xFF0000,1.0,0);
			light.position.set(100,100,200);
			scene.add(light);
		}
		
		function initObject(){
			var geometry = new THREE.Geometry();
			var material = new THREE.MeshBasicMaterial({ vertexColors: true });
			var color1=new THREE.Color(0x444444);
			var color2=new THREE.Color(0xFF0000);
			
			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);
			
			
			scene.add(line);
			
		}
	
		function threeStart(){
			initScene();
			initCamera();
			initRenderer();
			initLight();
			initObject();
			// 渲染
			renderer.render(scene,camera); 
		}
	</script>
</head>
<body onload="threeStart();">
	<div id="canvas-frame"></div>
</body>
</html>