效果：
代码：
<!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简单教程前五课pdf，
【二年级英语上册 unit1 Lesson6-Lesson7教案】主要涵盖了小学阶段英语教学的一些核心知识点，包括情感目标、知识目标、能力目标、教学重点和难点，以及教学过程中的具体活动设计。以下是对这些内容的详细说明： 1....
opengl简单视频教程Lesson10-Lesson11,网站地址： http://www.videotutorialsrock.com
OpenGL是计算机图形学中的一个强大库，用于在各种...这个系列教程对于任何想要进入游戏开发、科学可视化或图形设计领域的初学者来说，都是一个宝贵的资源。在观看视频的同时，配合实践编程，将能更好地巩固所学知识。
NeHe OpenGL教程（中英文版附带VC++源码）中英文系列 Lesson 01-lesson 02 创建一个OpenGL窗口: 如何创建三角形和四边形 http://ieee.org.cn/dispbbs.asp?boardID=61&ID=53679 Lesson 03-lesson 04 添加颜色 旋转 ...
3. **绘制基本图形**：OpenGL提供了一系列函数来绘制基本形状，如线条、三角形、四边形等。你将学会如何利用`glBegin`和`glEnd`之间的命令来创建这些图形。 4. **坐标系统和投影**：了解OpenGL的坐标系统及其与屏幕...
软件测试-Lesson3 黑盒测试工具.pptx
OpenGL是计算机图形学中的一种广泛应用的编程接口...通过这个系列的教程，学习者将获得足够的技能来开发自己的OpenGL应用程序，并能够理解和应用许多现代图形编程技术。建议结合实际编程实践，逐步掌握并巩固所学知识。
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_"中，我们专注于使用MATLAB这一强大的编程环境来解决环境科学中的问题。MATLAB（矩阵实验室）是一款广泛应用于工程、数学和科学领域的高级编程语言，以其易读性强、计算效率高以及...
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
plots-lesson16
[2.1.1]--Lesson1Four-StepTranslationProce.srt
中国民航飞行人员英语--lesson-4.doc
《数学建模-lesson3（初等模型）》是一份重要的学习资料，主要涵盖了数学建模的基本概念和初等模型的应用。在这个阶段的学习中，我们将深入理解如何利用数学工具来解决实际问题，以及如何构建简单但有效的数学模型。...
NeHe OpenGL教程（中英文版附带VC++源码）中英文系列 Lesson 01-lesson 02 创建一个OpenGL窗口: 如何创建三角形和四边形 http://ieee.org.cn/dispbbs.asp?boardID=61&ID=53679 Lesson 03-lesson 04 添加颜色 旋转 ...
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 ...
在"js-fifth-lesson"这个主题中，我们可以深入探讨JavaScript的一些核心概念和关键知识点。 1. 变量与数据类型： JavaScript支持变量的动态类型，使用`var`, `let`, 或 `const` 关键字声明。基本数据类型包括字符...