实现3D 场景——three.js学习篇二之理解基础概念

最新推荐文章于 2023-03-12 18:32:07 发布

hello big_bear

最新推荐文章于 2023-03-12 18:32:07 发布

阅读量346

点赞数

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

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

版权

three.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这篇博客介绍了Three.js的基础知识，包括如何创建3D场景、设置相机和渲染器。通过示例代码展示了如何创建一个旋转的球体，并添加点光源和环境光，同时解释了相机的正交投影和透视投影的区别。最后，提到了物体对象（Mesh）的构成要素——几何形状和材质，并简单概述了控制器在交互中的作用。

摘要由CSDN通过智能技术生成

学习目标：

理解3D 场景前置知识

学习内容：

1、场景(Scene): 场景是[物体,光源等元素]的容器.可以配合 chorme 插件使用,抛出 window.scene 对象,即可实时调整和场景相关的所有对象数据,包括物体,光源等.

2、相机(Camera): 场景中的相机,代替人眼去观察.一个场景中有且只能有一个相机,一般常用的是透视相机(perspectiveCamera),遵循真实的物理场景法则 – 远小近大. 还有一个叫正交相机(一般 2D 平面场景游戏使用的比较多,物体的大小和远近无关)

3、物体对象(Mesh): 包括二维物体(点,线,面),三维物体和模型等.

4、光源(Light): 场景中的光源,如果场景中不添加光源,那么整个世界(Scene)将会一片黑暗. 常见的光源包括: 全局光,平行光,点光源(蜡烛).每种光源的表现形式都是不一样的(联想实际生活场景).

5、渲染器(renderer): 场景渲染器. 在基于浏览器的 Three.js 开发模式中,这里就是指的 WebGL —> Canvas

6、控制器(Control): 通过键盘,鼠标等,可以控制相机的位置,视角等.

“其中场景(Scene)、相机(Camera)、渲染器(renderer)是必须有的的”

代码：

（跑一下代码，看一下注释理解一下）

<!DOCTYPE html>
<html>
<head>
    <title>自动旋转</title>
    <style type="text/css">
        body { margin: 0; }
        canvas { width: 100%; height: 100%; }
    </style>
</head>
<body>
<script src="./three.js-dev/build/three.js"></script>
<!--  module  text/javascript -->
<script type="text/javascript"  >
	/*
	创建场景
	*/
	var scene = new THREE.Scene();
	var geometry = new THREE.SphereGeometry(60,40,40);//创建一个球体几何对象
	//var geometry = new THREE.BoxGeometry( 100, 100, 10 );//创建一个长方体几何对象
	var material = new THREE.MeshLambertMaterial({
		color:0x0000ff
	});//创建材质对象
	var mesh = new THREE.Mesh(geometry,material);//网格模型对象
	scene.add(mesh);//添加到场景中
	/*
	光源设置
	*/
	var point = new THREE.PointLight(0Xffffff);//点光源
	point.position.set(400,100,200)//光源位置
	scene.add(point)//点光源添加到场景中
	var ambient = new THREE.AmbientLight(0x444444);//环境光
	scene.add(ambient);//添加到场景中
	
	/*
	相机设置
	*/
   var width = window.innerWidth;//窗口宽度
   var height = window.innerHeight;//窗口高度
   var k = width/height;
   var s = 100;//三维场景显示范围控制系数，系数越大，显示范围越大
   var camera = new THREE.OrthographicCamera( -s*k, s*k,s,-s,1,1000 );
   camera.position.set(200,300,200);//设置相机位置
   camera.lookAt(scene.position);//设置相机方向
	
	/*
	渲染器对象
	*/
	var renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.setClearColor(0xb9d3ff,0.3);//设置背景颜色
	document.body.appendChild( renderer.domElement );
	renderer.render(scene,camera)
	
	
	var animate = function () {
		requestAnimationFrame( animate );
		
		scene.rotation.y += 0.01;
		scene.rotation.x += 0.01;
		
		renderer.render( scene, camera );
	};//创建一个旋转的方法
		
	animate();//动起来
</script>
</body>
</html>

效果图

在这里插入图片描述
项目展示：点击跳转

总结理解：

1、场景（scene）：你要搞一块地方放东西，场景里面就是放物体的。

2、相机（camera ）：定义一个相机，想象自己拿相机对着场景，来调节角度和距离。

3、渲染器对象（renderer ）：renderer.render(scene,camera)这句就是把场景和相机渲染出来，他们才能显示在页面上。（不然只是定义场景和相机，不渲染出来页面也是什么都没有的）。

4、形状(geometry)：形状的api后面篇章细说。

5、材质（material）：定义颜色这些。

6、物体对象(Mesh)：var mesh = new THREE.Mesh(geometry,material);//网格模型对象，这句是指定义一个物体，物体有参数有形状和材质。

hello big_bear

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现3D 场景——three.js学习篇二之理解基础概念

学习目标：理解3D 场景前置知识学习内容：1、场景(Scene): 场景是[物体,光源等元素]的容器.可以配合 chorme 插件使用,抛出 window.scene 对象,即可实时调整和场景相关的所有对象数据,包括物体,光源等.2、相机(Camera): 场景中的相机,代替人眼去观察.一个场景中有且只能有一个相机,一般常用的是透视相机(perspectiveCamera),遵循真实的物理场景法则 – 远小近大. 还有一个叫正交相机(一般 2D 平面场景游戏使用的比较多,物体的大小和远近无关)
复制链接

扫一扫

专栏目录