利用HTML5的WebGL制作的3D图形

最新推荐文章于 2022-11-11 18:08:54 发布

RaylnGuan

最新推荐文章于 2022-11-11 18:08:54 发布

阅读量635

点赞数

分类专栏： Html5&Css3 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/rayln/article/details/84240514

版权

Html5&Css3 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

这里介绍一篇翻译的文章，写的非常好，大家可以去看看WebGL的用法.
[url]http://www.hiwebgl.com/?p=1058[/url]

这里写个小例子让大家对Three.js的WebGL用法的初步了解。
Three.js中最重要是[color=red]Camera（镜头）[/color]，[color=red]Scene（场景）[/color]，[color=red]Mesh（网格元素）[/color]。说白了镜头就是人的眼睛。把镜头和元素添加到场景进行渲染制作一个3D场景，入门非常简单。

大家可以到我的博客看下3D地球的制作。
[url]http://www.guanrl.com/article?id=267[/url]

例子：

<!doctype html>
<html style="margin:0px;padding:0px;" lang="en">
	<head>
		<title>three.js</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	</head>
	<body style="margin:0px;padding:0px;">

		<div id="container" ></div>
		<script src="http://www.natural-science.or.jp/javascript/Three/Three.js"></script>

		<script>
			(function(){
				var container;
				var camera, scene, renderer;
				var mesh;

				(function(){
					var w=700,h=700;
					container = document.getElementById( 'container' );
					scene = new THREE.Scene();
					camera = new THREE.PerspectiveCamera( 60, w / h, 1, 10000 );
					camera.position.z = 200;
					//renderer = new THREE.CanvasRenderer();
					renderer = new THREE.WebGLRenderer({antialias: true});
					renderer.setSize( w, h );
					container.appendChild( renderer.domElement );
				})();

				//球形
				(function initPlane(){
					//var texture1  = new THREE.ImageUtils.loadTexture('textures/land_ocean_ice_cloud_2048.jpg');
					mesh = new THREE.Mesh(
						new THREE.SphereGeometry(20,20,20),
						new THREE.MeshLambertMaterial({color: 0xff0000})
					);
					scene.add(mesh);
				})();

				var moon;
				//月球
				(function initMoon(){
					//var texture1  = new THREE.ImageUtils.loadTexture('textures/moon_1024.jpg');
					moon = new THREE.Mesh(
						new THREE.SphereGeometry(10,20,20),
						new THREE.MeshLambertMaterial({color: 0xff0000})
					);
					moon.position.set(-50,0,0);
					scene.add(moon);
				})();

				//方盒
				(function initCube(){
					var plane = new THREE.Mesh(new THREE.CubeGeometry(30, 30, 30), new THREE.MeshLambertMaterial({
			            color: 0xff0000
			        }));
					plane.position.x = 50;
					plane.position.z = 0;
					scene.add(plane);
				})();


				//灯光
				(function initLight(){
					var light = new THREE.DirectionalLight(0xFFFFFF, 1.0, 0);
					light.position.set( -100, 0, 500 );
					scene.add(light);
				})();

				function animate() {
					requestAnimationFrame( animate );
					render();
				}
				function render() {
					renderer.clear();
					/* mesh.rotation.y -= 0.001;
					moon.position.set( 70*Math.sin(t/200) , 0 ,70*Math.cos(t/200)); */
					renderer.render( scene, camera );
				}
				animate();
			})();

		</script>

	</body>
</html>

RaylnGuan

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
利用HTML5的WebGL制作的3D图形

这里介绍一篇翻译的文章，写的非常好，大家可以去看看WebGL的用法.[url]http://www.hiwebgl.com/?p=1058[/url]这里写个小例子让大家对Three.js的WebGL用法的初步了解。Three.js中最重要是[color=red]Camera（镜头）[/color]，[color=red]Scene（场景）[/color]，[color=red...
复制链接

扫一扫