【three.js学习笔记】01 场景相机和几何体框架

最新推荐文章于 2023-05-10 15:46:04 发布

towrabbit

最新推荐文章于 2023-05-10 15:46:04 发布

阅读量508

点赞数

分类专栏： three.js 文章标签： three入门 three.js创建框架

本文链接：https://blog.csdn.net/towrabbit/article/details/80170391

版权

three.js 专栏收录该内容

12 篇文章 4 订阅

订阅专栏

three.js有助于方便地利用webgl创建三维场景与动画，这是本人学习笔记的第一章，

引入three.js

远程简化版？：https://threejs.org/build/three.js
three.min.js接近500k其实还是很大的不知道这个为啥这么小
首先要引入three.js
创建一个作为显示窗口的canvas
html:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script src='https://threejs.org/build/three.js'></script>
	<title>场景</title>
	<style>
		body{
			margin:0;padding:0;
			overflow:hidden;
		}
	</style>
</head>
<body>
	<div id="WebGL-output"></div><!--场景的容器-->
	<script>
		//初始化函数。在加载three之后调用，初始化所有的东西
		function init(){
		}
		window.onload = init;
	</script>
</body>
</html>

创建场景与相机与渲染器

	function init(){
		//创建一个新的场景
		var scene = new THREE.Scene();
		//创建透视相机
		var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
		//后面的参数分别是 透视角度，长宽比例，近视锥面，远视锥面 
		
		//小于近视锥面的物体将不渲染，远于远视锥面的物体也不渲染
		//设置相机位置与朝向
		camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);
		
		//创建渲染器
		var renderer = new THREE.WebGLRenderer();
		renderer.setClearColor(new THREE.Color(0xEEEEEE));//渲染器清除颜色 ：淡灰色
		renderer.setSize(window.innerWidth,window.innerHeight);
		//在div内放置canvas
		document.getElementById("WebGL-output").appendChild(renderer.domElement);
		//渲染
		renderer.render(scene, camera);
	}
	window.onload = init;

添加坐标系

完成之后运行一下，我们发现这里面啥都没有除了页面颜色变成了eee这个淡灰色
继续在init函数中添加

	var axes = new THREE.AxesHelper(20);
	scene.add(axes);

该段代码添加在渲染之前，运行之后，在画布的中间会出现一个坐标轴辅助线：
three.js坐标轴辅助线
其中红色线为x正方向，绿色线为y正方向，蓝色线为z方向，而且three.js的更为底层的WebGL默认使用的是右手坐标系，如果改变相机的位置，那么坐标系就会发生相应变化，这个辅助坐标系是便于开发。并确定场景原点的位置。

添加一个平面 (plane)##

	var planeGeometry = new THREE.PlaneGeometry(60, 20);//框架 长60 宽20
	var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});//材质 单纯只有颜色的材质
	var plane = new THREE.Mesh(planeGeometry, planeMaterial);//填充

	//更改平面位置
	plane.rotation.x = -0.5 * Math.PI;//按照x轴旋转90度
	plane.position.x = 15;//向x正方向移动一点点
	plane.position.y = 0;
	plane.position.z = 0;

上面的代码添加了一个灰色的平面，并且和x轴与z轴组成的平面平行
效果如下：

添加几何体框架

立方体：
继续在init函数中加入

//创建立方体
	var cubeGeometry = new THREE.BoxGeometry(4,4,4);//大小
	var cubeMaterial = new THREE.MeshBasicMaterial({color:0xff7777,wireframe: true});
	var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
	
	//立方体位置
	cube.position.x = -4;
	cube.position.y = 3;
	cube.position.z = 0;
	//将立方体添加进入场景
	scene.add(cube);

创建之后的效果，可以看得到一个由线组成的立方体框架：
立方体框架 three.js

立方体默认以中心点作为对象的中心

球体：
在init函数中继续加入

	//添加球体
	var sphereGeometry = new THREE.SphereGeometry(4, 20 ,20);
	var sphereMaterial = new THREE.MeshBasicMaterial({color:0xff77ff, wireframe:true});
	var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
	
	//设定球体位置
	sphere.position.x = 18;
	sphere.position.y = 4;
	sphere.position.z = 2;
	//将球体加入到场景中
	scene.add(sphere);

之后在场景中将会出现球体和立方体的框架结构：
three.js球体立方体框架

柱体
在init函数中添加：

	var cylinderGeometry = new THREE.CylinderGeometry( 4, 4, 5, 5);
	//四个参数分别为。上底面半径，下底面半径，高 和边数，如果很多则就是圆柱体
	var material = new THREE.MeshBasicMaterial({color:0xffff33,wireframe:true});
	var cylinder = new THREE.Mesh(cylinderGeometry,material);
	
	//设定位置
	cylinder.position.x = 2;
	cylinder.position.y = 2.5;
	cylinder.position.z = 6;
	//添加柱体
	scene.add(cylinder);