Three.js

最新推荐文章于 2024-01-03 15:17:56 发布

白鲸ld

最新推荐文章于 2024-01-03 15:17:56 发布

阅读量333

点赞数

分类专栏：个人总结文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_53280805/article/details/126797555

版权

个人总结专栏收录该内容

83 篇文章 0 订阅

订阅专栏

1.thress.js、webGL、canvas区别于关联

canvas是html5新定义的一个标签，用于做图形容器；

webGL要依赖canvas运行；

three.js是以webGl为基础的库，封装了一些3D渲染需求中重要的工具方法和渲染循环。

2.three.js包含3个基本对象：场景（sceen）, 相机（camera）, 以及一个渲染器（renderer）。

<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();
//PerspectiveCamera是远景相机,也就是类似人眼看到的,第一个属性75设置的是视角,第二个属性设置的是相机拍摄面的长宽比（aspect ratio）。
//0.1表示近裁截面，1000表示远裁截面

			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 );

//3D立方体，BoxGeometry是盒子模型，这是包含所有顶点和填充面的对象。

			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>