Day01 Threejs介绍

最新推荐文章于 2024-10-10 20:59:20 发布

Royal_V

最新推荐文章于 2024-10-10 20:59:20 发布

阅读量73

点赞数

分类专栏： Three.js 文章标签：前端 javascript

本文链接：https://blog.csdn.net/lyaxuanl/article/details/132084545

版权

Three.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Three.js使用面向对象的方式来构建程序，包含3个基本对象： 场景（scene）, 相机（camera）, 以及一个渲染器（renderer）。拿电影来类比的话，场景对应于整个布景空间，相机是拍摄镜头，渲染器用来把拍摄好的场景转换成胶卷（对于网页来讲，是电脑屏幕）。

//创建场景
var scene = new THREE.Scene();
//创建相机
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
//创建渲染器
var renderer = new THREE.WebGLRenderer();
//渲染范围
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

Three.js的架构支持多种camera，这里使用最常见的远景相机（PerspectiveCamera），也就是类似于人眼观察的方式。第一个属性75设置的是视角（field of view）。第二个属性设置的是相机拍摄面的长宽比（aspect ratio）。使用元素的宽除以高，否则会出现挤压变形。第三个属性是近裁剪面（near clipping plane），第四个属性是 远裁剪面（far clipping plane）。

//几何模型（geometry）
var geometry = new THREE.BoxGeometry( 1, 1, 1 );

//材料（material）
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

//网孔（mesh）是用来承载几何模型的一个对象，可以把材料应用到它上面，然后添加到场景中
var cube = new THREE.Mesh( geometry, material );

//调用 scene.add() ，对象将被添加到原点处，即坐标点(0,0,0)
scene.add( cube );

//相机和立方体发生空间重叠。为了避免重叠，我们把相机（camera）的位置移出来一些
camera.position.z = 5;

渲染场景,创建一个循环，以每秒60次的频率来绘制场景，添加一点动画，让它转动起来。

function render() {
	requestAnimationFrame( render );
    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;
	renderer.render( scene, camera );
}
render();

基本上，如果要改变立方体的运动，都是在render循环中处理。

完整代码：

<html>
	<head>
		<title>My first Three.js app</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
		<script src="//wow.techbrood.com/libs/three.r73.js"></script>
		<script>
			var scene = new THREE.Scene();
			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

			var renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

			var geometry = new THREE.BoxGeometry( 1, 1, 1 );
			var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
			var cube = new THREE.Mesh( geometry, material );
			scene.add( cube );

			camera.position.z = 5;

			var render = function () {
				requestAnimationFrame( render );

				cube.rotation.x += 0.1;
				cube.rotation.y += 0.1;

				renderer.render(scene, camera);
			};

			render();
		</script>
	</body>
</html>