最简单的three.js demo

 文件目录:


代码:

main.html ↓

<!DOCTYPE html>
<html>
	<head>
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
		<script src="js/three.js"></script>
		<script>
      /***************************start 1.创建场景,相机和渲染器 start************************/
      // 场景
      var scene = new THREE.Scene();
      // PerspectiveCamera:相机 默认位置是坐标(0, 0, 0)
      // param1:视野。在任何给定时刻在显示器上看到的场景的范围。该值以度为单位
      // param2:宽高比。
      // param3:相机能拍摄到的最近距离。
      // param4:相机能拍摄到的最远距离。
			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

      // 渲染器
      var renderer = new THREE.WebGLRenderer();
      // 设置渲染器渲染app的大小 3个参数
      // param3:false 保持app大小但以较低的分辨率呈现 默认为true
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );
      /*****************************end 创建场景,相机和渲染器 end**************************/

      /***************************start 2.创建立方体 start************************/
			var geometry = new THREE.BoxGeometry( 1, 1, 1 );
      var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
      // 传入几何对象和材质
      var cube = new THREE.Mesh( geometry, material );
      // 插入到场景中,默认添加到坐标(0, 0, 0)
			scene.add( cube );

      // 或camera.position.set(0, 0, 5) 
			camera.position.z = 5;
      /***************************end 创建立方体 end************************/

			var animate = function () {
        // https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame
				requestAnimationFrame( animate );

				cube.rotation.x += 0.01;
				cube.rotation.y += 0.01;
        
				renderer.render( scene, camera );
			};

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

three.js ↓

https://threejs.org/build/three.js


效果:

↑ 一直不停旋转着的骚气荧光绿立方体

 

 

参考:

https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
three.js是一个开源的JavaScript 3D渲染库,它使得在浏览器中创建和呈现交互式3D图形成为可能。three.js可与WebGL配合使用,因此在创建复杂的3D场景时具有高效性和良好的画面效果。本文的主题是介绍three.js demo,下文将重点阐述三个三.js demo的应用场景。 第一个demo是Forest。Forest是一个3D场景,包括树木、草地、湖泊等元素。这个demo可以直观地显示three.js如何在网页中呈现复杂的3D场景。这个demo的应用场景可以是在线游戏或者虚拟现实等领域。在这些领域中,复杂的3D场景是必不可少的,而three.js可以提供高效而优秀的渲染效果。 第二个demo是Earth。Earth是一个以地球为主题的3D场景,包含了地球表面的地形、云层、海洋等元素。这个demo可以直观地表现人们对地球的认识,同时可以提供更为直观的天气和地形图。这个demo可以应用于气象、地理等领域,在这些领域,研究人员需要对地球表面进行探索和分析,而three.js可以为他们提供更为高效而有效的表现和呈现方式。 第三个demo是Digital Art. Digital Art是一个3D场景,展示了一些数字艺术作品。这个demo可以提供一种更为立体而生动的数字艺术展示方式。数字艺术是一个新兴的领域,而three.js提供了一种全新的数字艺术展示方式,让人们对数字艺术有了更为直观和深入的认识。该demo可以应用于艺术展览等领域,为大众呈现更加多样和丰富的艺术作品。 综上所述,three.js是一个强大而灵活的3D渲染库,提供了丰富的各类demo,可以广泛应用于在线游戏、虚拟现实、气象、地理、数字艺术等领域,为人们提供更为优秀和直观的渲染效果。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值