效果:
代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Three.js tutorial - Lesson 05</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> <script> var scene,camera,mesh,renderer; if(Detector.webgl){ renderer = new THREE.WebGLRenderer({antialias:true}); }else{ renderer = new THREE.CanvasRenderer(); } renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0xeeeeee, 0.5); document.body.appendChild(renderer.domElement); scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000); camera.position.set(0, 0, 10); camera.lookAt(scene.position); //相机聚焦于场景中心 //scene.add(camera); var boxGeometry = new THREE.BoxGeometry(2.0, 2.0, 2.0); var rTexture = new THREE.ImageUtils.loadTexture("images/r.png"); //right var lTexture = new THREE.ImageUtils.loadTexture("images/l.png"); //left var tTexture = new THREE.ImageUtils.loadTexture("images/t.png"); //top var dTexture = new THREE.ImageUtils.loadTexture("images/d.png"); //bottom var fTexture = new THREE.ImageUtils.loadTexture("images/f.png"); //front var bTexture = new THREE.ImageUtils.loadTexture("images/b.png"); //bottom var boxMaterials = [ new THREE.MeshBasicMaterial({map:rTexture,transparent:true}), //因为没有设置side为THREE.DoubleSide,所以熊猫从背面是看不到的 new THREE.MeshBasicMaterial({map:lTexture, side:THREE.DoubleSide, transparent:true}), new THREE.MeshBasicMaterial({map:tTexture, side:THREE.DoubleSide, transparent:true}), new THREE.MeshBasicMaterial({map:dTexture, side:THREE.DoubleSide, transparent:true}), new THREE.MeshBasicMaterial({map:fTexture, side:THREE.DoubleSide, transparent:true}), new THREE.MeshBasicMaterial({map:bTexture, side:THREE.DoubleSide, transparent:true}) ]; var boxMaterial = new THREE.MeshFaceMaterial(boxMaterials); var mesh = new THREE.Mesh(boxGeometry, boxMaterial); mesh.position.set(0, 0, 4); scene.add(mesh); var xRotation = 0; var yRotation = 0; var zRotation = 0; function render(){ xRotation += 0.03; yRotation += 0.02; zRotation += 0.04; mesh.rotation.set(xRotation, yRotation, zRotation); renderer.render(scene, camera); requestAnimationFrame(render); } render(); </script> </body> </html>
附注:当前笔者使用的three.js版本是r69
相关推荐
opengl简单教程前五课pdf,
opengl简单视频教程Lesson1-Lesson5,网站地址: http://www.videotutorialsrock.com/
新概念青少版a---lesson5.ppt
js-fifth-lesson
opengl简单视频教程Lesson6-Lesson9 网站地址: http://www.videotutorialsrock.com
opengl简单视频教程Lesson12-Lesson20网站地址: http://www.videotutorialsrock.com
opengl简单视频教程Lesson10-Lesson11,网站地址: http://www.videotutorialsrock.com
科普版-英语-六下--Lesson 5 Revision 素材 罗马古竞技场的简介.docx
六年级英语上册-Lesson5-In-the-livingroom教案.pdf
NeHe OpenGL教程(中英文版附带VC++源码)中英文系列 Lesson 01-lesson 02 创建一个OpenGL窗口: 如何创建三角形和四边形 http://ieee.org.cn/dispbbs.asp?boardID=61&ID=53679 Lesson 03-lesson 04 添加颜色 旋转 ...
数学建模-lesson5(简单优化模型).zip
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
struts2-lesson18
NeHe OpenGL教程(中英文版附带VC++源码)中英文系列 Lesson 01-lesson 02 创建一个OpenGL窗口: 如何创建三角形和四边形 http://ieee.org.cn/dispbbs.asp?boardID=61&ID=53679 Lesson 03-lesson 04 添加颜色 旋转 ...
JS109-Lesson5
plots-lesson16
[2.1.1]--Lesson1Four-StepTranslationProce.srt
中国民航飞行人员英语--lesson-4.doc
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 ...
java从入门到精通学习笔记-Lesson5(多线程).pdf