ThreeJs的学习：Face的理解

最新推荐文章于 2024-05-30 17:57:45 发布

太古时代

最新推荐文章于 2024-05-30 17:57:45 发布

阅读量4.1k

点赞数 1

分类专栏： Canvas与WebGL

本文链接：https://blog.csdn.net/jinold/article/details/97873523

版权

Canvas与WebGL 专栏收录该内容

20 篇文章 7 订阅

订阅专栏

创建立方体的代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<title>three.js webgl - indexed instancing (single box), dynamic updates</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<style>
		a {color: #08f;}

	</style>
</head>
<body>

	<div id="container"></div>
	<script src="js/three.js"></script>
	<script src="js/WebGL.js"></script>
	<script src="js/controls/MapControls.js"></script>
	
	<script>

		if ( WEBGL.isWebGLAvailable() === false ) {

			document.body.appendChild( WEBGL.getWebGLErrorMessage() );

		}

		var container;
		var camera, scene, renderer, mesh;
		var offsetAttribute, orientationAttribute;


		init();
		animate();

		function init() {

			container = document.getElementById( 'container' );

			camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
			camera.position.z = 100;
			scene = new THREE.Scene();
			scene.background = new THREE.Color( 0xf0f0f0 );
			
			controls = new THREE.MapControls( camera,container );
			controls.rotateSpeed = 1.0;
			controls.zoomSpeed = 1.2;
			controls.panSpeed = 0.8;
			controls.noZoom = false;
			controls.noPan = false;
			controls.staticMoving = true;
			controls.dynamicDampingFactor = 0.3;
			
			var pointLight = new THREE.PointLight( 0xff4444, 1 );
			pointLight.position.set(50, 60, 100);
			pointLight.castShadow = true;
			scene.add( pointLight );
			
			// 立方体
			var cubeGeometry = new THREE.Geometry();
			// 立方体的顶点
			var vertices = [
				new THREE.Vector3(10, 10, 10),   //v0
				new THREE.Vector3(-10, 10, 10),  //v1
				new THREE.Vector3(-10, -10, 10), //v2
				new THREE.Vector3(10, -10, 10),  //v3
				new THREE.Vector3(10, -10, -10), //v4
				new THREE.Vector3(10, 10, -10),  //v5
				new THREE.Vector3(-10, 10, -10), //v6
				new THREE.Vector3(-10, -10, -10) //v7
			];
			cubeGeometry.vertices = vertices;  //设置立方体的各个坐标点
			// 立方的面，各个面的排列顺序
			// 一个Face是一个三角形，两个Face才形成一个正方形，参照BufferGeometry的例子
			var faces=[
				new THREE.Face3(0,1,2), // Face 1-1
				new THREE.Face3(0,2,3), // Face 1-2
				new THREE.Face3(0,3,4), // Face 2-1
				new THREE.Face3(0,4,5), // Face 2-2
				new THREE.Face3(1,6,7), // Face 3
				new THREE.Face3(1,7,2),
				new THREE.Face3(6,5,4), // Face 4
				new THREE.Face3(6,4,7),
				new THREE.Face3(5,6,1), // Face 5
				new THREE.Face3(5,1,0),
				new THREE.Face3(3,2,7), // Face 6
				new THREE.Face3(3,7,4)
			];
			cubeGeometry.faces = faces;
			
			cube = new THREE.Mesh(cubeGeometry,new THREE.MeshBasicMaterial( { color: 0xff0000 } ));
			scene.add(cube);

			renderer = new THREE.WebGLRenderer();
			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( window.innerWidth, window.innerHeight );
			container.appendChild( renderer.domElement );

			window.addEventListener( 'resize', onWindowResize, false );

		}
		
		function onWindowResize( event ) {

			camera.aspect = window.innerWidth / window.innerHeight;
			// 更新相机投影矩阵，必须在参数发生变化后调用。
			camera.updateProjectionMatrix();

			renderer.setSize( window.innerWidth, window.innerHeight );

		}
		
		function animate() {
			requestAnimationFrame( animate );
			render();
		}

		function render() {
			renderer.render( scene, camera );
		}

	</script>

</body>
</html>

各个顶点的表示

直接用BufferGeometry创建Face
尝试着用BufferGeometry创建cubeGeometry。
// var cubeGeometry = new THREE.Geometry();
var cubeGeometry = new THREE.BufferGeometry();
但是执行后报以下错误

问题所在：gl.drawArrays是WebGl的Api,，BufferGeometry还缺少什么东西。

Geometry最后转换成BufferGeometry

在查找原因的过程中发现Geometry最后也会转换成BufferGeometry，所以上面的报错，还是在某个设置上出了问题。

分析threejs.js的代码
function projectObject( object, camera, groupOrder, sortObjects ) 方法
var geometry = objects.update( object ); // 这个处理把Geometry转换成BufferGeometry，attributes、drawRange、groups等信息补上

太古时代

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
ThreeJs的学习：Face的理解

先上代码：<!DOCTYPE html><html lang="en"><head> <title>three.js webgl - indexed instancing (single box), dynamic updates</title> <meta charset="utf-8"> <meta...
复制链接

扫一扫