效果:
代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Three.js tutorial - Lesson 06</title> <style>body {background: #ffffff;overflow: hidden;color: #999999}</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="overlaytext" style="position: absolute; top: 10px; left: 10px"> 'F'键: 切换纹理滤镜(仅对WebGLRenderer有效)<br> 'L'键: 切换灯光(仅对WebGLRenderer有效)<br> 'Z': 绕z轴旋转<br> '←': 左旋转<br> '→': 右旋转<br> '↑': 上翻转<br> '↓': 下翻转<br> Renderer: </div> <div id="WebGLCanvas"></div> <script> var scene = new THREE.Scene(); var renderer,WebGLAvailable; if(Detector.webgl){ renderer = new THREE.WebGLRenderer({antialias:true}); document.getElementById("overlaytext").innerHTML += "WebGLRenderer"; WebGLAvailable = true; }else{ renderer = new THREE.CanvasRenderer(); document.getElementById("overlaytext").innerHTML += "CanvasRenderer"; WebGLAvailable = false; } renderer.setSize(window.innerWidth-15, window.innerHeight-15); // Set the background color of the renderer, with full opacity renderer.setClearColor(0xeeeeee, 1); document.getElementById("WebGLCanvas").appendChild(renderer.domElement); var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 100); camera.position.set(0, 0, 6); camera.lookAt(scene.position); scene.add(camera); var box = new THREE.BoxGeometry(2, 2, 2); var texture = new THREE.ImageUtils.loadTexture("images/Crate.jpg"); var material = WebGLAvailable ? new THREE.MeshLambertMaterial({map:texture, side:THREE.DoubleSide}) : new THREE.MeshBasicMaterial({map:texture, side:THREE.DoubleSide}); var mesh = new THREE.Mesh(box, material); //mesh.position.set(camera.position.x, camera.position.y, camera.position.z); scene.add(mesh); var ambientLight = new THREE.AmbientLight({color: 0xaaaaaa}); scene.add(ambientLight); var directionalLight = new THREE.DirectionalLight({color: 0xffffff}); directionalLight.position.set(0, 0, 1); scene.add(directionalLight); function render(){ //mesh.rotation.x += 0.01; //mesh.rotation.y += 0.01; renderer.render(scene, camera); requestAnimationFrame(render); } render(); var textureFilter = 0; var lightIsOn = true; document.addEventListener("keydown", function(event){ var keyCode = event.which; console.log(keyCode); /*切换滤镜*/ if(keyCode == 70){ //"F" switch(textureFilter){ case 0: texture.minFilter = THREE.NearestFilter; //在纹理基层上执行最邻近过滤, texture.magFilter = THREE.NearestFilter; textureFilter = 1; break; case 1: texture.minFilter = THREE.LinearFilter; //在纹理基层上执行线性过滤 texture.magFilter = THREE.LinearFilter; textureFilter = 0; break; } texture.needsUpdate = true; //告诉WebGL纹理需要更新 /*切换灯光*/ }else if(keyCode == 76){ //"L" if(lightIsOn){ mesh.material = new THREE.MeshBasicMaterial({map:texture}); lightIsOn = false; }else{ if(WebGLAvailable){ mesh.material = new THREE.MeshLambertMaterial({map:texture}); }else{ mesh.material = new THREE.MeshBasicMaterial({map:texture}); } lightIsOn = true; } mesh.material.needsUpdate = true; //告诉WebGL材质需要更新 /*左旋转*/ }else if(keyCode == 37){ //"←" mesh.rotation.y -= 0.01; /*上翻转*/ }else if(keyCode == 38){ //"↑" mesh.rotation.x -= 0.01; /*右旋转*/ }else if(keyCode == 39){ //"→ mesh.rotation.y += 0.01; /*下翻转*/ }else if(keyCode == 40){ //"↓" mesh.rotation.x += 0.01; /*绕z轴旋转*/ }else if(keyCode == 90){ //"Z" mesh.rotation.z += 0.01; } }, false); </script> </body> </html>
附注:当前笔者使用的three.js版本是r69
相关推荐
【二年级英语上册 unit1 Lesson6-Lesson7教案】主要涵盖了小学阶段英语教学的一些核心知识点,包括情感目标、知识目标、能力目标、教学重点和难点,以及教学过程中的具体活动设计。以下是对这些内容的详细说明: 1....
opengl简单教程前五课pdf,
这个简单的视频教程“Lesson6-Lesson9”旨在帮助初学者理解并掌握OpenGL的基础概念和核心功能。通过观看这些课程,学习者将能够逐步建立起对OpenGL的理解,并能够创建自己的基本图形应用程序。 在Lesson6中,主要...
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 添加颜色 旋转 ...
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
四年级英语上册素材-Lesson 6 Revision课文翻译 科普版.docx
新概念青少版a---lesson5.ppt
NeHe OpenGL教程(中英文版附带VC++源码)中英文系列 Lesson 01-lesson 02 创建一个OpenGL窗口: 如何创建三角形和四边形 http://ieee.org.cn/dispbbs.asp?boardID=61&ID=53679 Lesson 03-lesson 04 添加颜色 旋转 ...
plots-lesson16
[2.1.1]--Lesson1Four-StepTranslationProce.srt
中国民航飞行人员英语--lesson-4.doc
Lesson 6: CORRECTIVE WAVES - 28 - 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: ...
新概念英语第二册课文和笔记-Lesson-6.doc
在"js-fifth-lesson"这个主题中,我们可以深入探讨JavaScript的一些核心概念和关键知识点。 1. 变量与数据类型: JavaScript支持变量的动态类型,使用`var`, `let`, 或 `const` 关键字声明。基本数据类型包括字符...
ct-算法重建-马建-lesson01-ct-recon.ppt
How do you come to school--Lesson 112 .docx
NeHe OpenGL教程(中英文版附带VC++源码)中英文系列 Lesson 01-lesson 02 创建一个OpenGL窗口: 如何创建三角形和四边形 http://ieee.org.cn/dispbbs.asp?boardID=61&ID=53679 Lesson 03-lesson 04 添加颜色 旋转 ...