基本三要素
- 场景
THREE.Scene
- 相机,默认朝向z负轴
THREE.PerspectiveCamera(for, aspect, near, far)
- 相机在世界坐标系中的位置position(x,y,z)
- 视点坐标系上方向的世界坐标系向量up.set(x,y,z)
-
相机在世界坐标系的焦点的位置lookAt(x,y,z)
-
渲染器 THREE.WebGLRenderer
Renderer.render(scene, camera)
一张画布(canvas)可以有多个场景,一个场景可以有多个相机,渲染到屏幕上不是由画布决定的,而是相机绑定的元素,单一相机,单一场景默认绑定在canvas元素
渲染一个图形
-
创建一个图形
-
几何信息
-
-
不反射:THREE.MeshBasicMaterial
-
漫反射:THREE.MeshLambertMaterial
-
镜面反射THREE.MeshPhongMaterial, shininess(光滑度)
-
标准材质 THREE.MeshStandardMaterial. roughness(粗糙度), meatless(金属光泽)
-
物理材质 THREE.MeshPhysicalMaterial. clearcoat(透明度)
-
阴影材质 THREE.MEshDepthMaterial
-
法向材质 THREE.MeshNormalMaterial
-
纹理 THREE.TextureLoader(THREE.LoadingManager())
!!内存占用:width*height*4*1.33字节
-
-
构建物体:Bone Line Mesh Points Skeleton sprite
THREE.Mesh(geometry, material)
-
添加到场景中
parent.add(child) child属性被parent的属性覆盖
Scene.add(mesh)
-
添加灯光
-
定义灯光:定义灯光需要设置相应的图元材质模型才有效果
在渲染时,是按光源进行阴影绘制的,每个带有阴影的光源都会对全局渲染一次,大小受光的阴影相机范围控制light.shadow.camera。
另可用阴影贴图代替
- 基本光:THREE.Ligth(color, intensity) color为光颜色,intensity为光强
- 平行光 THREE.DirectionalLight
- 环境光 THREE.AmbientLight
- 半球光 THREE.HemisphereLight
- 点光源 THREE.PointLight
- 平面光光源 THREE.RectAreaLight
- 聚光灯 THREE.SpotLight
-
灯光位置
light.position.set(x,y,z)
-
添加灯光
Scene.add(light)
-
渲染图形
Renderer.render(scene, camera)