`
18211103738
  • 浏览: 81152 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

ThreeJS系列教程-Lesson3

webglthree.js 
阅读更多

效果：

 

代码：

<!DOCTYPE html>
<html>
    <head>
		<meta charset="utf-8"/>
        <title>Three.js tutorial - Lesson 03</title>
        <style>body {background: #000000;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>
        <script>
			var scene = new THREE.Scene();
			var canvasWidth = window.innerWidth;
			var canvasHeight = window.innerHeight;
			
			var renderer;
			if(Detector.webgl){ 
				renderer = new THREE.WebGLRenderer({antialias:true});
            } else { 
				renderer = new THREE.CanvasRenderer(); 
			}
			renderer.setClearColor(0x000000, 1);
			renderer.setSize(canvasWidth, canvasHeight);
			document.body.appendChild(renderer.domElement);
			
			var camera = new THREE.PerspectiveCamera(45, canvasWidth / canvasHeight, 1, 100);
			camera.position.set(0, 0, 10);
			camera.lookAt(scene.position);
			scene.add(camera);
			
            // To create a pyramid, we use THREE.CylinderGeometry. By its five parameters, we are 
            // able to create the geometry of the pyramid (subtype of a cylinder). 
            // Parameter 1 'radiusTop': 圆柱顶部半径。如果值设置为0， 顶部将是一个点，我们会得到一个锥体
            // Parameter 2 'radiusBottom': 圆柱底部半径 
            // Parameter 3 'height': 圆柱的高 
            // Parameter 4 'segments': 构成圆柱体壳的段片。为了创建一个金字塔形, 我们把值设为4
            // Parameter 5 'openEnded': 是否允许末端（底部）开口。为了金字塔有一个底面，我们把值设为false
            var pyramidGeometry = new THREE.CylinderGeometry(0, 1.5, 1.5, 4, false);
			
            // Coloring the faces with vertex colors is a bit tricky, but allows us to see how to 
            // loop through the faces and check whether they have three or four vertices. 
            // With a simple 'for'-loop we run through all faces, which are accessed by their index.
            // The 'instanceof' operator gives the possibility to check, whether the current face is 
            // a THREE.Face4 or THREE.Face3. Depending on its object type, we set three or four 
            // vertex colors. For THREE.Face4 we switch the colors of vertex 1 and 2 for every 
            // second face because we want the lower vertices having the same colors as the 
            // neighbour face. Vertex 0 and 3 are the upper vertices, which are always red. 
            // If WebGL isn't supported and the canvas renderer is used, it ignores the vertex 
            // colors. They are only supported by the WebGL renderer (current release of 
            // Three.js: 49). 
            for(i = 0; i < pyramidGeometry.faces.length; i++){ 
                if(pyramidGeometry.faces[i] instanceof THREE.Face4){	//如果是4个顶点的面
					pyramidGeometry.faces[i].vertexColors[0] = new THREE.Color(0xFF0000); 
                    if((i % 2) == 0){
                        pyramidGeometry.faces[i].vertexColors[1] = new THREE.Color(0x00FF00);
                        pyramidGeometry.faces[i].vertexColors[2] = new THREE.Color(0x0000FF);
                    } else {
						pyramidGeometry.faces[i].vertexColors[1] = new THREE.Color(0x0000FF);
                        pyramidGeometry.faces[i].vertexColors[2] = new THREE.Color(0x00FF00);
                    }
					pyramidGeometry.faces[i].vertexColors[3] = new THREE.Color(0xFF0000);
                } else {	//如果是3个顶点的面
                    pyramidGeometry.faces[i].vertexColors[0] = new THREE.Color(0xFF0000);
                    pyramidGeometry.faces[i].vertexColors[1] = new THREE.Color(0x00FF00);
                    pyramidGeometry.faces[i].vertexColors[2] = new THREE.Color(0x0000FF);
                }
            } 
            
			var pyramidMaterial = new THREE.MeshBasicMaterial({ 
                vertexColors:THREE.VertexColors, 
                side:THREE.DoubleSide 
            });
			
            var pyramidMesh = new THREE.Mesh(pyramidGeometry, pyramidMaterial); 
            pyramidMesh.position.set(-1.5, 0.0, 4.0); 
            scene.add(pyramidMesh);
            
			// Create the cube 
            // Parameter 1: 宽 
            // Parameter 2: 高
            // Parameter 3: 深
            var boxGeometry = new THREE.BoxGeometry(1.5, 1.5, 1.5); 
 
            // Applying different materials to the faces is a more difficult than applying one 
            // material to the whole geometry. We start with creating an array of 
            // THREE.MeshBasicMaterial. 

            // Define six colored materials 
            var boxMaterials = [ 
				new THREE.MeshBasicMaterial({color:0xFF0000}), 
				new THREE.MeshBasicMaterial({color:0x00FF00}), 
                new THREE.MeshBasicMaterial({color:0x0000FF}), 
                new THREE.MeshBasicMaterial({color:0xFFFF00}), 
                new THREE.MeshBasicMaterial({color:0x00FFFF}), 
                new THREE.MeshBasicMaterial({color:0xFFFFFF}) 
            ]; 

            //创建一个MeshFaceMaterial，它允许立方体的每个面拥有不同的材质
            var boxMaterial = new THREE.MeshFaceMaterial(boxMaterials);
			
            boxMesh = new THREE.Mesh(boxGeometry, boxMaterial); 
            boxMesh.position.set(1.5, 0.0, 4.0); 
            scene.add(boxMesh);
			
            function render(){
				pyramidMesh.rotation.y += 0.1; 

				// Decrease the rotation of the cube 
				// Parameter 1: 旋转轴矢量 
                // Parameter 2: 旋转速率
				boxMesh.rotateOnAxis(new THREE.Vector3(1, 1, 1).normalize(), 0.075); 
                
				renderer.render(scene, camera);
			   
				requestAnimationFrame(render);
            }
			render();
       </script> 
   </body> 
</html>

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

分享到：
| ThreeJS系列教程-Lesson2
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics