ThreeJS学习笔记（5）-绘制网格

最新推荐文章于 2024-08-15 10:16:09 发布

hbliu_ren

最新推荐文章于 2024-08-15 10:16:09 发布

阅读量2.1k

点赞数

分类专栏： ThreeJS

本文链接：https://blog.csdn.net/hbliu_ren/article/details/78226196

版权

这篇博客详细介绍了如何使用ThreeJS库在3D场景中绘制网格，提供了具体的代码示例，帮助读者理解ThreeJS的基本操作。

摘要由CSDN通过智能技术生成

绘制一个网格的代码，如下所示：

<!DOCTYPE html>

<html>
<head>
	<title>
	</title>
	<style type="text/css">
		body{
			margin:0;
		}
		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,100,500);
			camera.lookAt(new THREE.Vector3(0,0,0));
		}
		
		//定义渲染器并初始化
		var renderer;
		function initRenderer(){
			renderer= new THREE.WebGLRenderer();
			renderer.setSize(window.innerWidth,window.innerHeight);
			$("#canvas