Three.js开发指南（1）：介绍

企业开发 2018-04-23 05:08:37 阅读次数: 3

https://github.com/josdirksen/learning-threejs

本地Web服务器的不同环境：

用Python   > python -m SimpleHTTPServer

用NPM      > npm install -g http-server        > http-server

用Mongoose -- 在Mac/Windows上可以移植

将书本代码放入Web服务根目录

本书使用Three.js r60

HTML框架

<!DOCTYPE html>
<html>
    <head>
	  	<title>Example 01.01 - Basic skeleton </title>
	  	<script type="text/javascript" src="../libs/three.js"></script>
	  	<script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
	  	<style>
	  		body{
	  			margin: 0;
	  			overflow: hidden;
	  		}
	    </style>
	    </head>
    <body>
    	<div id="WebGL-output">
    	</div>
    	<script type="text/javascript">
    		$(function () {
    			// here we'll put the Three.js stuff
    		});
    	</script>
    </body>
</html>

1.4 渲染并展示三维对象

    创建第一个场景，添加几个物体和一个相机

    	<script type="text/javascript">
    		$(function () {
    			// here we'll put the Three.js stuff
    			var scene = new THREE.Scene();  //场景
    			//相机
    			var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
    			//渲染器
    			var renderer = new THREE.WebGLRenderer();
    			renderer.setClearColorHex(0xEEEEEE);
    			renderer.setSize(window.innerWidth, window.innerHeight);
    			//坐标轴
    			var axes = new THREE.AxisHelper(20);
    			scene.add(axes);
    			//平面
    			var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
    			var planeMaterial = new THREE.MeshBasicMaterial( {color: 0xcccccc} ); //材质
    			var plane = new THREE.Mesh(planeGeometry, planeMaterial);  //合并到网格对象
    			plane.rotation.x = -0.5*Math.PI;
    			plane.position.x = 15;
    			plane.position.y = 0;
    			plane.position.z = 0;
    			scene.add(plane);
    			//方块
    			var cubeGeometry = new THREE.CubeGeometry(4, 4, 4);
    			var cubeMaterial = new THREE.MeshBasicMaterial( {color: 0xff0000, wireframe: true} );
    			var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
    			cube.position.x = -4;
    			cube.position.y = 3;
    			cube.position.z = 0;
    			scene.add(cube);
    			//球体
    			var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
    			var sphereMaterial = new THREE.MeshBasicMaterial( {color: 0x7777ff, wireframe: true} );
    			var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
    			sphere.position.x = 20;
    			sphere.position.y = 4;
    			sphere.position.z = 2;
    			scene.add(sphere);
    			//相机
    			camera.position.x = -30;
    			camera.position.y = 40;
    			camera.position.z = 30;
    			camera.lookAt(scene.position);  //指向场景的中心
                //将renderer挂接到<div>元素
    			$("#WebGL-output").append(renderer.domElement);
    			renderer.render(scene, camera);
    		});
    	</script>

1.5 添加材质、灯光和阴影

光源

//光源
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( -40, 60, -10 );
scene.add( spotLight );

1.6 用动画扩展你的首个场景

   setInterval( function, interval ); 并没有跟显示器的重画同步，这可能会导致较高的CPU使用率，降低系统效率，引入requestAnimationFrame()方法

    <script type="text/javascript" src="../libs/stats.js"></script>

1.7 使用dat.GUI库简化试验

     Google创建的dat.GUI的库

// GUI
var controls = new function() {
	this.rotationSpeed = 0.02;
	this.bouncingSpeed = 0.03;
}
var gui = new dat.GUI();
gui.add(controls, 'rotationSpeed', 0, 0.5);
gui.add(controls, 'bouncingSpeed', 0, 0.5);

1.8 使用ASCII效果

    使用ASCII效果，你可以把漂亮的动画场景变成一个复古的、文本画风格的动画，而这只需要几行代码

<!DOCTYPE html>
<html>
    <head>
	  	<title>Example 01.01 - Basic skeleton </title>
	  	<script type="text/javascript" src="../libs/three.js"></script>
	  	<script type="text/javascript" src="../libs/stats.js"></script>
	  	<script type="text/javascript" src="../libs/dat.gui.js"></script>
	  	<script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
	  	<style>
	  		body{
	  			margin: 0;
	  			overflow: hidden;
	  		}
	    </style>
	    </head>
    <body>
    	<div id="Stats-output"></div>
    	<div id="WebGL-output"></div>
    	<script type="text/javascript">
    		function initStats() {
    			var stats = new Stats();
    			stats.setMode(0);
    			stats.domElement.style.position = 'absolute';
    			stats.domElement.style.left = '0px';
    			stats.domElement.style.top = '0px';
    			$("#Stats-output").append( stats.domElement );
    			return stats;
    		}
    		$(function () {
    			// 统计图
    			var stats = initStats();
    			// here we'll put the Three.js stuff
    			var scene = new THREE.Scene();  //场景
    			//相机
    			var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
    			//渲染器
    			var renderer = new THREE.WebGLRenderer();
    			renderer.setClearColorHex(0xEEEEEE);
    			renderer.setSize(window.innerWidth, window.innerHeight);
    			//坐标轴
    			var axes = new THREE.AxisHelper(20);
    			scene.add(axes);
    			//平面
    			var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
    			//var planeMaterial = new THREE.MeshBasicMaterial( {color: 0xcccccc} ); //材质
    			var planeMaterial = new THREE.MeshLambertMaterial( {color: 0xffffff} ); //材质
    			var plane = new THREE.Mesh(planeGeometry, planeMaterial);  //合并到网格对象
    			plane.rotation.x = -0.5*Math.PI;
    			plane.position.x = 15;
    			plane.position.y = 0;
    			plane.position.z = 0;
    			scene.add(plane);
    			//方块
    			var cubeGeometry = new THREE.CubeGeometry(4, 4, 4);
    			//var cubeMaterial = new THREE.MeshBasicMaterial( {color: 0xff0000, wireframe: true} );
    			var cubeMaterial = new THREE.MeshLambertMaterial( {color: 0xff0000 } );
    			var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
    			cube.position.x = -4;
    			cube.position.y = 3;
    			cube.position.z = 0;
    			scene.add(cube);
    			//球体
    			var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
    			//var sphereMaterial = new THREE.MeshBasicMaterial( {color: 0x7777ff, wireframe: true} );
    			var sphereMaterial = new THREE.MeshBasicMaterial( {color: 0x7777ff} );
    			var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
    			sphere.position.x = 20;
    			sphere.position.y = 4;
    			sphere.position.z = 2;
    			scene.add(sphere);
    			//相机
    			camera.position.x = -30;
    			camera.position.y = 40;
    			camera.position.z = 30;
    			camera.lookAt(scene.position);  //指向场景的中心
    			//光源
    			var spotLight = new THREE.SpotLight( 0xffffff );
    			spotLight.position.set( -40, 60, -10 );
    			scene.add( spotLight );
    			// 渲染
	    		function renderScene() {
	    			stats.update();
	    			requestAnimationFrame(renderScene);
	    			renderer.render(scene, camera);
	    		}
	    		// GUI
	    		var controls = new function() {
	    			this.rotationSpeed = 0.02;
	    			this.bouncingSpeed = 0.03;
	    		}
	    		var gui = new dat.GUI();
	    		gui.add(controls, 'rotationSpeed', 0, 0.5);
	    		gui.add(controls, 'bouncingSpeed', 0, 0.5);
	    		//动画
	    		var step = 0;
	    		function render() {
	    			//转动方块
	    			cube.rotation.x += controls.rotationSpeed;
	    			cube.rotation.y += controls.rotationSpeed;
	    			cube.rotation.z += controls.rotationSpeed;
	    			//弹跳球
	    			step += controls.bouncingSpeed;
	    			sphere.position.x = 20 + (10*(Math.cos(step)));   //创建一条光滑的轨迹
	    			sphere.position.y = 2 + (10*Math.abs(Math.sin(step)));
	    			requestAnimationFrame(render);
	    			renderer.render(scene, camera);
	    		}

                //将renderer挂接到<div>元素
    			$("#WebGL-output").append(renderer.domElement);
    			renderScene();
    			render();
    		});
    		
    	</script>
    </body>
</html>


猜你喜欢

转载自blog.csdn.net/QFire/article/details/80020244
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
周排行
Metasploit文件目录与入侵基本概念
跨域(CORS)请求问题[No 'Access-Control-Allow-Origin' header is present on the requested resource]常见解决方案
CodeIgniter 源码解读之 CodeIgniter.php（二）
SAS入门之（四）改变数据类型
初识元组
[数学建模]数学建模算法和模型（B站视频）（二）
Nginx 服务器源码安装配置流程
C#实现语音视频录制 【基于MCapture + MFile】
开发进度4
下载安装vue的方法网址
每日归档
更多
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022