ThreeJS系列教程-Lesson2

最新推荐文章于 2021-03-20 06:16:23 发布

iteye_3742

最新推荐文章于 2021-03-20 06:16:23 发布

阅读量116

点赞数

分类专栏： ThreeJS WebGL Html5 文章标签： webgl three.js

本文链接：https://blog.csdn.net/iteye_3742/article/details/82612533

版权

WebGL 同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

ThreeJS

16 篇文章 0 订阅

订阅专栏

Html5

15 篇文章 0 订阅

订阅专栏

效果：

代码：

<!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

iteye_3742

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ThreeJS系列教程-Lesson2

效果：代码：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;title&gt;Three.js tutorial - Lesson 02&lt;/title&gt; &lt;style&gt;bo
复制链接

扫一扫