效果:
代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Three.js tutorial - Lesson 07</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 cubetex = new THREE.ImageUtils.loadTexture("images/Crate.jpg"); var geo = new THREE.BoxGeometry(4, 4, 4); var cube = new THREE.Mesh(geo, new THREE.MeshPhongMaterial({map: cubetex})); cube.material.side = THREE.BackSide; //设置该属性可以看到立方体内部 cube.position.set(0, 0, 0); scene.add(cube); var light = new THREE.AmbientLight(0xffffff); light.position.set(10, 10, 10); scene.add(light); var x = 0; var y = 0; var z = 0; function render(){ x += 0.001; y += 0.001; z += 0.001; cube.rotation.set(x, y, z); renderer.render(scene, camera); requestAnimationFrame(render); } render(); </script> </body> </html>
相关推荐
【二年级英语上册 unit1 Lesson6-Lesson7教案】主要涵盖了小学阶段英语教学的一些核心知识点,包括情感目标、知识目标、能力目标、教学重点和难点,以及教学过程中的具体活动设计。以下是对这些内容的详细说明: 1....
opengl简单教程前五课pdf,
opengl简单视频教程Lesson10-Lesson11,网站地址: http://www.videotutorialsrock.com
OpenGL是计算机图形学中的一个强大库,用于在各种...这个系列教程对于任何想要进入游戏开发、科学可视化或图形设计领域的初学者来说,都是一个宝贵的资源。在观看视频的同时,配合实践编程,将能更好地巩固所学知识。
这个简单的视频教程“Lesson6-Lesson9”旨在帮助初学者理解并掌握OpenGL的基础概念和核心功能。通过观看这些课程,学习者将能够逐步建立起对OpenGL的理解,并能够创建自己的基本图形应用程序。 在Lesson6中,主要...
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
新概念青少版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 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` 关键字声明。基本数据类型包括字符...
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 添加颜色 旋转 ...
ML-lesson3-Scikit-learn.mhtml
本教程“OpenGL简单教程Lesson1-Lesson5(src)”提供了前五课的源代码,帮助初学者深入理解并实践OpenGL编程。在这个教程中,我们将探讨以下几个关键知识点: 1. **OpenGL基本概念**:OpenGL是一个跨语言、跨平台的...