ThreeJS基本组件

最新推荐文章于 2024-07-08 09:03:17 发布

OceanZ~

最新推荐文章于 2024-07-08 09:03:17 发布

阅读量606

点赞数

分类专栏： ThreeJS 文章标签： webgl js javascript

本文链接：https://blog.csdn.net/weixin_44397261/article/details/105997144

版权

ThreeJS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

创建场景

场景是Three.js里用于显示的容器，想要在场景里显示东西，一个场景需要以下组件：

摄像机：决定屏幕哪些东西要渲染
光源：决定材质如何显示以及阴影显示
几何体：摄像机透视图里的主要渲染对象
渲染器：基于摄像机和场景，调用底层图形API进行场景绘制

场景基本功能

场景创建

var scene = new THREE.Scene()

场景内容添加

scene.add(obj)

场景内容删除

scene.remove(obj)

获取场景内所有对象数组

var children = scene.children

其他

// 获取指定名称对象,recursive查询深度，默认false
scene.name = 'test1'
scene.getObjectByName(name,recursive)
console.log('getObjectByName test1',scene.getObjectByName('test1',false))

// 遍历调用者后代，并加回调
function t(){
	console.log('get traverse')
}
scene.traverse(t)

下面代码创建一个红色的立方体

<html>
	<head>
		<title>Three.js的基本组件</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/three.js/110/three.js"></script>
	</head>
	<body></body>

	<script type="text/javascript">
		
var scene = new THREE.Scene()
// 创建透视相机
var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000)
// 设置相机位置
camera.position.set(-30,40,30)
// 设置相机朝向（不设置会有默认朝向-z）
camera.lookAt(scene.position)

// 创建几何体
var geometry = new THREE.BoxGeometry(5,5,5)
// 创建材质并添加颜色
var meterial = new THREE.MeshBasicMaterial({color:'red'})
// 创建网格包裹材质和几何体
var mesh = new THREE.Mesh(geometry,meterial)
scene.add(mesh)

// 创建渲染器
var renderer = new THREE.WebGLRenderer()
// 设置渲染宽高
renderer.setSize(window.innerWidth,window.innerHeight)
// 获取canvas添加到页面
document.body.appendChild(renderer.domElement)

// 循环渲染
render()
function render(){
	window.requestAnimationFrame(render)
	renderer.render(scene,camera)

}

	</script>
</html>

效果图
红色的
添加一下简单的旋转动画,立方体绕中心点（0，0，0）渲染，中心点center可改

function render(){
	window.requestAnimationFrame(render)
	renderer.render(scene,camera)
	mesh.rotation.x+=0.01
	mesh.rotation.y+=0.01
	mesh.rotation.z+=0.01

	// 位置改变用position
	// mesh.position.x+=0.01
}

给场景添加雾化效果

雾化效果：场景中的物体离摄像机越远变得越模糊

// 添加雾化效果
scene.fog = new THREE.Fog('#fff', 0.1, 1000)//0.1雾化开始距离，1000雾化结束距离。线性
// 另一种雾化效果
// scene.fog = new THREE.FogExp2('#fff',0.01)//0.01雾化浓度，非线性雾化。

overrideMaterial共享材质

给场景设置overrideMaterial，场景中的物体会共享此材质，覆盖自己设置的材质，减少材质管理

scene.overrideMaterial = new THREE.MeshBasicMaterial({color:'yellow'})

颜色变了

几何体和网络

几何体属性和方法

球体 SphereGeometry
立方体 BoxGeometry
平面 PlaneGeometry

立方体：由6个面8个顶点组成的几何体，Three.js/WebGL中面是由三角形组成，即有12个三角形

// 面
geometry.faces
// 顶点
geometry.vertices
// 法向量 --面接触的地方有立体感
geometry.computeFaceNormals()

–未完

OceanZ~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ThreeJS基本组件

1.在Three.js中使用的基本组件2.THREE.Scene的使用3.几何体和网格4.正交投影摄像机和透视投影摄像机
复制链接

扫一扫

专栏目录