threejs之常见几何形状使用

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>threejs之常见几何形状使用</title>
		<script src="../js/three.js"></script>
	</head>

	<body>
		<!--	
			常见的几何形状有
			BoxGeometry、CircleGeometry、ConeGeometry、CylinderGeometry、DodecahedronGeometry、EdgesGeometry、ExtrudeGeometry、IcosahedronGeometry、LatheGeometry、OctahedronGeometry、
			
			【Geometry。。。换为。。。BufferGeometry（如BoxGeometry——BoxBufferGeometry）。性能更优，渲染更快。
			BufferGeometry 会缓存网格模型，性能要高效点。网格模型生成原理
			
			区别如下
			1、Geometry 生成的模型是这样的 （代码）-> (CUP 进行数据处理，转化成虚拟3D数据) -> (GPU 进行数据组装，转化成像素点，准备渲染) -> 显示器
			第二次操作时重复走这些流程。
			
			2、BufferGeometry 生成模型流程 (代码) -> (CUP 进行数据处理，转化成虚拟3D数据) -> (GPU 进行数据组装，转化成像素点，准备渲染) -> (丢入缓存区) -> 显示器
			第二次修改时，通过API直接修改缓存区数据，流程就变成了这样
			(代码) -> (CUP 进行数据处理，转化成虚拟3D数据) -> (修改缓存区数据) -> 显示器
		-->

		<!--
		
	
	
	-->

		<canvas id="cc"></canvas>

		<script type="text/javascript">
			// 创建一个场景，它将保存我们所有的元素，如物体、照相机和灯光。
			var scene = new THREE.Scene();

			// 创建一个摄像机，它定义了我们所处的位置.
			var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

			// 创建渲染并设置大小 指定渲染canvas对象
			var renderer = new THREE.WebGLRenderer({
				canvas: document.querySelector("#cc")
				
			});

			renderer.setClearColor(0xEEEEEE);
			renderer.setSize(window.innerWidth, window.innerHeight);

			//创建一个xyz坐标轴，方便初学者理解三维坐标
			var axes = new THREE.AxesHelper(20);
			scene.add(axes);

			//创建网格模型
			
			var ConeGeometry = new THREE.DodecahedronBufferGeometry(10, 2);//我们就创建个立方体。
			var material = new THREE.MeshBasicMaterial  ({color:Math.random()*0xffffff})//基础材质
			var Cone = new THREE.Mesh(ConeGeometry,material)
			
			
			var wire = Cone.clone()
			wire.material = new THREE.MeshPhongMaterial({wireframe :true,depthTest:false})//depthTest解决共面冲突，不妨试试为true看看是什么效果呢
			scene.add(Cone)
			scene.add(wire)
			
			
			//我们的网格模型就搞成了。

		
			//设置相机位置
			camera.position.x = -30;
			camera.position.y = 40;
			camera.position.z = 30;
			camera.lookAt(scene.position);

			// 执行一次渲染器，GPU渲染成图像，绘制到canvas里面呈现
			
			const draw = function(){
				requestAnimationFrame(draw)//不断绘制
				renderer.render(scene, camera);//渲染
				
				Cone.rotation.y+=0.01//网格模型旋转
				wire.rotation.y+=0.01//线框模型旋转
			}
			draw()
		</script>
	</body>

</html>
threejs之常见几何形状使用

猜你喜欢
