3-学习Three.js基础，立方体，平面，球体

最新推荐文章于 2025-02-09 16:11:32 发布

qq_35101027

最新推荐文章于 2025-02-09 16:11:32 发布

阅读量519

点赞数 1

分类专栏： three.js 3D JavaScript

three.js 同时被 3 个专栏收录

3 篇文章

订阅专栏

3 篇文章

订阅专栏

JavaScript

2 篇文章

订阅专栏

本文介绍了Three.js的基本用法，包括如何创建3D物体、设置材质、调整摄像机视角及渲染，同时探讨了自定义形状的方法，适合Three.js初学者快速入门。

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

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>zzz</title>
<script type="text/javascript" src="js/three.js"></script>
<style type="text/css">
canvas {	width: 100%;	height: 100%}
</style>
</head>
<body>
	<script type="text/javascript">
		var scene = new THREE.Scene();
		var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
		var renderer = new THREE.WebGLRenderer();
		renderer.setSize(window.innerWidth,window.innerHeight);
		document.body.appendChild(renderer.domElement);
		var material = new THREE.MeshBasicMaterial({color:0xffff00,wireframe:true});//集合体的线框
		var geometry = new THREE.CubeGeometry(1,2,3);//立方体
		//var geometry = new THREE.PlaneGeometry(2,4);//平面
		//var geometry = new THREE.SphereGeometry(2,12,12);//球体，半径，经度，纬度
		//var geometry = new THREE.CylinderGeometry(2,3,4,18,3);//圆柱
		var cube = new THREE.Mesh(geometry,material);
		scene.add(cube);
		camera.position.z = 6;
		renderer.render(scene,camera);
	
	</script>
</body>
</html>

基本物体

在three.js中，已经定义了很多的物体模型函数，比如立方体（CubeGeometry)，通过设置长宽高，从而得到不同的体形，所以也可以说它是个长方体。

物体的默认位置是原点，对于立方体而言，是其几何中心在原点的位置。以上的代码中的几何体都可以试试，具体的每一个函数的参数，可以参考https://www.cnblogs.com/xulei1992/p/5714429.html。

三大组建之外

让我们再具体熟悉一下代码，还有一些陌生的函数是干什么的。

renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);

上面是设置了渲染器大小为窗口大小，并且将渲染器的内容添加到body中显示出来。

var material = new THREE.MeshBasicMaterial({color:0xffff00,wireframe:true});//集合体的线框
var geometry = new THREE.CubeGeometry(1,2,3);//立方体
var cube = new THREE.Mesh(geometry,material);

这里用了three.js中的一种材质，网格基础材质（MeshBasicMaterial），three.js提供了好几种材质供我们用于不同的场景和物体上。具体哪些材质和详细使用可参看：https://blog.youkuaiyun.com/zhulx_sz/article/details/78624801。最后将材质和几何体通过模型函数生成3D的物体。最后将模型添加到场景中，设置摄像机的视角，通过渲染器的渲染，就得到网页中的3D物体了。

自定义形状

　　对于Three.js没有提供的形状，可以提供自定义形状来创建。由于自定义形状需要手动指定每个顶点位置，以及顶点连接情况，如果该形状非常复杂，程序员的计算量就会比较大。在这种情况下，建议在3ds Max之类的建模软件中创建模型，然后使用Three.js导入到场景中，这样会更高效方便。详情参看：https://www.cnblogs.com/xulei1992/p/5717790.html。