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

ThreeJS系列教程-Lesson3

阅读更多

效果:

 

代码:

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

分享到:
评论

相关推荐

    opengl简单教程Lesson1-Lesson5

    opengl简单教程前五课pdf,

    ML-lesson3-Scikit-learn.mhtml

    ML-lesson3-Scikit-learn.mhtml

    二年级英语上册 unit1 Lesson6-Lesson7教案 人教新起点.doc

    【二年级英语上册 unit1 Lesson6-Lesson7教案】主要涵盖了小学阶段英语教学的一些核心知识点,包括情感目标、知识目标、能力目标、教学重点和难点,以及教学过程中的具体活动设计。以下是对这些内容的详细说明: 1....

    opengl简单视频教程Lesson10-Lesson11

    opengl简单视频教程Lesson10-Lesson11,网站地址: http://www.videotutorialsrock.com

    opengl简单视频教程Lesson1-Lesson5

    OpenGL是计算机图形学中的一个强大库,用于在各种...这个系列教程对于任何想要进入游戏开发、科学可视化或图形设计领域的初学者来说,都是一个宝贵的资源。在观看视频的同时,配合实践编程,将能更好地巩固所学知识。

    NeHe lesson10

    NeHe OpenGL教程(中英文版附带VC++源码)中英文系列 Lesson 01-lesson 02 创建一个OpenGL窗口: 如何创建三角形和四边形 http://ieee.org.cn/dispbbs.asp?boardID=61&ID=53679 Lesson 03-lesson 04 添加颜色 旋转 ...

    opengl简单视频教程Lesson6-Lesson9

    3. **绘制基本图形**:OpenGL提供了一系列函数来绘制基本形状,如线条、三角形、四边形等。你将学会如何利用`glBegin`和`glEnd`之间的命令来创建这些图形。 4. **坐标系统和投影**:了解OpenGL的坐标系统及其与屏幕...

    软件测试-Lesson3 黑盒测试工具.pptx

    软件测试-Lesson3 黑盒测试工具.pptx

    opengl简单视频教程Lesson12-Lesson20

    OpenGL是计算机图形学中的一种广泛应用的编程接口...通过这个系列的教程,学习者将获得足够的技能来开发自己的OpenGL应用程序,并能够理解和应用许多现代图形编程技术。建议结合实际编程实践,逐步掌握并巩固所学知识。

    next.js-ssr-lesson:在egghead.io上回购课程

    next.js-ssr课程 在egghead.io上回购课程 指示 git clone https://github.com/tgrecojs/next.js-ssr-lesson && cd next.js-ssr-lesson npm install npm run dev

    evs -lesson 3_matlab_

    在本课程"evs -lesson 3_matlab_"中,我们专注于使用MATLAB这一强大的编程环境来解决环境科学中的问题。MATLAB(矩阵实验室)是一款广泛应用于工程、数学和科学领域的高级编程语言,以其易读性强、计算效率高以及...

    NeHe lesson08.

    NeHe OpenGL教程(中英文版附带VC++源码)中英文系列 Lesson 01-lesson 02 创建一个OpenGL窗口: 如何创建三角形和四边形 http://ieee.org.cn/dispbbs.asp?boardID=61&ID=53679 Lesson 03-lesson 04 添加颜色 旋转 ...

    新概念青少版a---lesson5.ppt

    新概念青少版a---lesson5.ppt

    plots-lesson16

    plots-lesson16

    [2.1.1]--Lesson1Four-StepTranslationProce.srt

    [2.1.1]--Lesson1Four-StepTranslationProce.srt

    中国民航飞行人员英语--lesson-4.doc

    中国民航飞行人员英语--lesson-4.doc

    数学建模-lesson3(初等模型).zip

    《数学建模-lesson3(初等模型)》是一份重要的学习资料,主要涵盖了数学建模的基本概念和初等模型的应用。在这个阶段的学习中,我们将深入理解如何利用数学工具来解决实际问题,以及如何构建简单但有效的数学模型。...

    NeHe lesson07

    NeHe OpenGL教程(中英文版附带VC++源码)中英文系列 Lesson 01-lesson 02 创建一个OpenGL窗口: 如何创建三角形和四边形 http://ieee.org.cn/dispbbs.asp?boardID=61&ID=53679 Lesson 03-lesson 04 添加颜色 旋转 ...

    ELLIOTT WAVE PRINCIPLE

    Lesson 7: Flats (3-3-5) - 32 - Lesson 8: Triangles - 36 - Lesson 9: Corrective Combinations - 39 - Lesson 10: The guideline of alternation - 43 - Lesson 11: Forecasting corrective waves - 46 - Lesson ...

Global site tag (gtag.js) - Google Analytics