实现3D 场景——three.js学习篇一之运行项目

最新推荐文章于 2024-03-14 16:59:22 发布

hello big_bear

最新推荐文章于 2024-03-14 16:59:22 发布

阅读量757

点赞数 3

分类专栏： three.js 文章标签： javascript three.js 前端前端可视化 3d

本文链接：https://blog.csdn.net/big_beer/article/details/120291518

版权

three.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

学习目标：

首先运行一个three.js的项目

学习内容：

1、下载three.js包导入
2、复制代码
3、修改包的导入路径
4、跑起来

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
		<script src="./three.js-dev/build/three.js"></script>
		<script>
				var scene = new THREE.Scene();//场景
				var camera = new THREE.PerspectiveCamera( 750, window.innerWidth/window.innerHeight, 0.1, 1000 );//相机
				/*
				第一个参数是视野角度（FOV）。视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围，它的值是角度单位。
				
				第二个参数是长宽比（aspect ratio）。 也就是你用一个物体的宽除以它的高的值。比如说，当你在一个宽屏电视上播放老电影时，可以看到图像仿佛是被压扁的。
				
				接下来的两个参数是近截面（near）和远截面（far）。 当物体某些部分比摄像机的远截面远或者比近截面近的时候，该这些部分将不会被渲染到场景中。
				或许现在你不用担心这个值的影响，但未来为了获得更好的渲染性能，你将可以在你的应用程序里去设置它。
				*/
	
				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 animate = function () {//定义一个旋转的动画函数
					requestAnimationFrame( animate );//循环
	
					cube.rotation.x += 0.01;
					cube.rotation.y += 0.01;
	
					renderer.render( scene, camera );//每次循环重新渲染一下
				};
	
				animate();//动起来
		</script>
	</body>
</html>

效果图：

（可以看到一个绿色正方体在旋转）
在这里插入图片描述
项目展示：点击跳转

学习产出：

1、代码什么的先不要去了解，先把项目跑起来，看看效果是什么样子的，跑起来就成功了第一步。
2、下载three.js资源包，可以在GitHub下载或者我上传的资料那里下载，然后修改复制代码的导包路径。
3、如果报错了，可能是资源包文件版本问题、可能是文件路径错误问题，自己排查一下吧。

hello big_bear

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
实现3D 场景——three.js学习篇一之运行项目

学习目标：首先运行一个three.js的项目学习内容：1、下载three.js包导入2、复制代码3、修改包的导入路径4、跑起来代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>My first three.js app</title> <style> body { margin: 0; } c
复制链接

扫一扫