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

ThreeJS系列教程-Lesson7

阅读更多

效果:

 

代码:

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

 

  • 大小: 44.6 KB
分享到:
评论

相关推荐

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

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

    opengl简单教程Lesson1-Lesson5

    opengl简单教程前五课pdf,

    opengl简单视频教程Lesson10-Lesson11

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

    opengl简单视频教程Lesson1-Lesson5

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

    opengl简单视频教程Lesson6-Lesson9

    这个简单的视频教程“Lesson6-Lesson9”旨在帮助初学者理解并掌握OpenGL的基础概念和核心功能。通过观看这些课程,学习者将能够逐步建立起对OpenGL的理解,并能够创建自己的基本图形应用程序。 在Lesson6中,主要...

    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简单视频教程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

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

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

    NeHe lesson08.

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

    plots-lesson16

    plots-lesson16

    [2.1.1]--Lesson1Four-StepTranslationProce.srt

    [2.1.1]--Lesson1Four-StepTranslationProce.srt

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

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

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

    js-fifth-lesson

    在"js-fifth-lesson"这个主题中,我们可以深入探讨JavaScript的一些核心概念和关键知识点。 1. 变量与数据类型: JavaScript支持变量的动态类型,使用`var`, `let`, 或 `const` 关键字声明。基本数据类型包括字符...

    ct-算法重建-马建-lesson01-ct-recon.ppt

    ct-算法重建-马建-lesson01-ct-recon.ppt

    How do you come to school--Lesson 112 .docx

    How do you come to school--Lesson 112 .docx

    NeHe lesson07

    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

    ML-lesson3-Scikit-learn.mhtml

    opengl简单教程Lesson1-Lesson5(src)

    本教程“OpenGL简单教程Lesson1-Lesson5(src)”提供了前五课的源代码,帮助初学者深入理解并实践OpenGL编程。在这个教程中,我们将探讨以下几个关键知识点: 1. **OpenGL基本概念**:OpenGL是一个跨语言、跨平台的...

Global site tag (gtag.js) - Google Analytics