ThreeJS系列教程-Lesson2

程序员文章站 2022-05-23 14:04:07

...

效果：

代码：

<!DOCTYPE html>
<html>
     <head>
		<meta charset="utf-8"/>
        <title>Three.js tutorial - Lesson 02</title>
        <style>body{background: #eeeeee;overflow: hidden;}</style>
        <script src="js/r69/three.js"></script>
        <script src="js/r69/Detector.js"></script> 
        <script src="js/r69/CanvasRenderer.js"></script>
        <script src="js/r69/Projector.js"></script>
     </head> 
     <body>
         <div id="WebGLCanvas"></div>
         <script>
		    var scene = new THREE.Scene();
			
			var canvasWidth = window.innerWidth; 
            var canvasHeight = window.innerHeight;
			
            var camera = new THREE.PerspectiveCamera(45, canvasWidth / canvasHeight, 1, 100); 
            camera.position.set(0, 0, 10); 
            camera.lookAt(scene.position);
            scene.add(camera);
			
			var renderer;
            if(Detector.webgl){ 
                renderer = new THREE.WebGLRenderer({antialias:true});	//创建一个抗锯齿效果的渲染器
            } else { 
                renderer = new THREE.CanvasRenderer(); 
            }
            renderer.setClearColor(0xeeeeee, 1);
			
            renderer.setSize(canvasWidth, canvasHeight);
            
            document.getElementById("WebGLCanvas").appendChild(renderer.domElement);
				 
            var triangleGeometry = new THREE.Geometry(); 
            triangleGeometry.vertices.push(new THREE.Vector3( 0.0,  1.0, 0.0)); 
            triangleGeometry.vertices.push(new THREE.Vector3(-1.0, -1.0, 0.0)); 
            triangleGeometry.vertices.push(new THREE.Vector3( 1.0, -1.0, 0.0)); 
            triangleGeometry.faces.push(new THREE.Face3(0, 1, 2));
			
            // To color the surface, a material has to be created. If all vertices shall have
			// different colors, we need to set the vertex colors of each face. The colors in
			// between will be interpolated as color gradients.
			// Unfortunately, the canvas renderer doesn't support vertex colors (yet [Three.js, 
			// release 69]). Either you accept a white face color, or set another face color.	 
			/*给顶点赋予颜色*/
			triangleGeometry.faces[0].vertexColors[0] = new THREE.Color(0xFF0000); 
            triangleGeometry.faces[0].vertexColors[1] = new THREE.Color(0x00FF00); 
            triangleGeometry.faces[0].vertexColors[2] = new THREE.Color(0x0000FF);
            
			// To activate the vertex color, we have to set 'vertexColors' attribute to 
			// 'THREE.VertexColors'. Otherwise they won't be displayed.
			
			// Create a basic material, supporting vertex colors. Activate the 'doubleSided' 
			// attribute to force the rendering of both sides of each face (front and back). 
			// This prevents the so called 'backface culling'. Usually, only the side is 
			// rendered, whose normal vector points towards the camera. The other side is not 
			// rendered (backface culling). But this performance optimization sometimes leads 
			// to wholes in the surface. When this happens in your surface, simply set 
			// 'doubleSided' to 'true'. 
            var triangleMaterial = new THREE.MeshBasicMaterial({ 
				//color:0xFFFFFF, 
				vertexColors:THREE.VertexColors,	//将顶点颜色放入材质中
				side:THREE.DoubleSide 
            });
			
            var triangleMesh = new THREE.Mesh(triangleGeometry, triangleMaterial); 
            triangleMesh.position.set(-1.5, 0.0, 4.0); 
            scene.add(triangleMesh);
				 
            var squareGeometry = new THREE.Geometry(); 
            squareGeometry.vertices.push(new THREE.Vector3(-1.0,  1.0, 0.0)); 
            squareGeometry.vertices.push(new THREE.Vector3( 1.0,  1.0, 0.0)); 
            squareGeometry.vertices.push(new THREE.Vector3( 1.0, -1.0, 0.0)); 
            squareGeometry.vertices.push(new THREE.Vector3(-1.0, -1.0, 0.0)); 
            squareGeometry.faces.push(new THREE.Face3(0, 1, 2)); 
            squareGeometry.faces.push(new THREE.Face3(0, 2, 3));
			
            var squareMaterial = new THREE.MeshBasicMaterial({
				color:0x8080FF/*, 
				side:THREE.DoubleSide */	//不设置side属性为DoubleSide，当正方形旋转到背面就看不到了
            });
			
            var squareMesh = new THREE.Mesh(squareGeometry, squareMaterial); 
            squareMesh.position.set(1.5, 0.0, 4.0);
            scene.add(squareMesh);
			
            function render(){ 
				triangleMesh.rotation.y += 0.1; 	//绕y轴旋转，旋转速率为0.1
				squareMesh.rotation.x -= 0.075;		//绕x轴旋转，旋转速率为0.075
				renderer.render(scene, camera);
				requestAnimationFrame(render);		//帧动画
            }
			render();
         </script> 
     </body> 
</html>

附注：当前笔者使用的three.js版本是r69

ThreeJS系列教程-Lesson2

索尼E系列笔记本拆机清灰图文教程

ASP.NET Core依赖注入系列教程之服务的注册与提供

实战SpringCloud响应式微服务系列教程（第六章）

Spring Boot2 系列教程(一) | 如何使用 IDEA 构建 Spring Boot 工程

Express全系列教程之(十)：jade模板引擎

微信小程序教程系列之页面跳转和参数传递（6）

微信小程序教程系列之设置标题栏和导航栏（7）

Spring Boot2 系列教程 (二) | 第一个 SpringBoot 工程详解

实战SpringCloud响应式微服务系列教程（第九章）使用Spring WebFlux构建响应式RESTful服务

微信小程序教程系列之新建页面（4）