先得摆出几个关键词:场景、灯光、模型、材质、贴图与纹理、相机、渲染器。然后我开始装模作样地解释:
上帝说,要有场景!于是就有了场景,场景去纳这万事万物。上帝说,要有光!于是就有了光,灯光去现这大千世界,否则一片漆黑。上帝觉得缺少了些生气,便用泥巴捏了一个小人儿,不叫亚当,她叫小芳。上帝左看右看,上看下看,这小芳果然生得俊俏,五官精致加长腿,此曰模型; 虽然小芳不是水做的,却也在这晨光的照射下显得皮肤吹弹可破,此曰材质;上帝莫名竟害羞了,挥手便给他穿上一件花格子长裙,配上了乌黑的长发,此曰贴图与纹理;上帝嘴角不扬却满心欣喜,他默默注视着自己的作品,上帝视角仿佛定格在了这一瞬间,这上帝之眼就是相机;上帝之所见如何,由世界入眼之后大脑冥想计算所得,这智慧高效的大脑就是渲染器。接下来预先恭喜你,你可以成为这网页 3D 世界的一个小上帝。
【此段转自 https://juejin.im/post/5b0ace…】
相机和轨迹球(trackball)的绑定
导入 obj 和 mtl 文件时 纹理问题,是否可以在 3ds max 时预先进行处理
obj 文件导入 Three.js 中旋转点的设定
dat.GUI
Three.js 中有两种材质可以对光源产生反应:MeshLamberMaterial 和 MeshPhoneMaterial
渲染阴影需要在渲染器、每一个物体以及每一个光源上打开。生成阴影:renderer.shadowMapEnabled=true; 只修改此处不会有区别,还要明确那个物体需要阴影:plane.receiveShadow = true;cube.castShadow = true;sphere.castShadow = true;
一般来说不把环境光(AmbientLight)作为场景中的唯一光源
环境光光源可以附加到场景中的每一个物体上,没有位置的概念,主要用来优化硬生生的 颜色和阴影
点光源(PointLight)照所有方向发射光线且不会产生投影,类似于夜空中的照明弹
聚光灯光源(SpotLight),发射出的光线是一个锥形,可以配置随着距离远近光线强度的衰减且可设置阴影
方向光 / 平行光(DirectinaLight):模拟太阳光源,所有光线相互平行,不会像聚光灯那样离目标越远越暗淡,和聚光灯光源有很多相同属性。
两种特殊光源:半球光光源(HemisphereLight),为室外场景创建更加自然的光照效果;平面光光源(AreaLight),从一个很大的平面发射光线,而不是一个点。对性能要求略高,可以使用 WebGL 延迟渲染器
对光照有影响的材质:MeshPhongMaterial 和 MeshLambertMaterial
鼠标作为 PC 端(移动端中的触摸)的主要交互方式,我们经常会通过它来选择页面上的元素。而对于 Three.js,它没有类似 DOM 的层级关系,并且处于三维环境中,那么我们则需要通过以下方式来判断某对象是否被选中。
* 基于屏幕上的点击位置创建一个 THREE.Vector3 向量。
* 使用 vector.unproject 方法将屏幕上的点击位置转换成 Three.js 场景中的坐标。换句话说,就是将屏幕坐标转换成三维场景中的坐标。
* 创建 THREE.Raycaster。使用 THREE.Raycaster 可以向场景中发射光线。在下述案例中,从摄像机的位置(camera.position)向场景中鼠标的点击位置发射光线。
* 使用 raycaster.intersectObjects 方法来判断指定的对象中哪些被该光线照射到的,返回包含了所有被光线照射到的对象信息的数组(根据距离摄像机距离,由短到长排序)。数组的子项的信息包括有:
distance: 49.90470
face: THREE.Face3
faceIndex: 4
object: THREE.Mesh
point: THREE.Vector3
首先要知道动画的实现原理,其实就是一个循环绘制.你要实现一个鼠标移到绘图区物体停止转动,添加一个鼠标事件监控鼠标位置, 然后停止动画操作即可.
THREE.Line 几何体不可以用普通材质覆盖,只能用 THREE》LineBasicMaterial 或 THREE.LineDashedMaterial
OpenGL、WebGL、JS、H5 联系:https://blog.csdn.net/vanessa…
WebGL:https://webglfundamentals.org…
中文手册:http://techbrood.com/threejs/…
入门详解:https://segmentfault.com/a/11…
捕获点击对象(Raycaster 类):https://blog.csdn.net/darkpro…://www.cnblogs.com/w-wanglei/p/6821036.html
WebGL 绝佳案例:https://segmentfault.com/a/11…
加载模型选中案例:http://127.0.0.1:8080/examples/#webgl_postprocessing_outline
three.js 性能优化:https://chenjy1225.github.io/…
OBJ 文件格式详解:https://blog.csdn.net/szchtx/…
Blender 基本操作:https://blog.csdn.net/superli…://blog.csdn.net/bulademian/article/details/78623900
自适应窗体大小
window.addEventListener(‘resize’, onResize, false)
function onResize () {
// 设置透视摄像机的长宽比
camera.aspect = window.innerWidth / window.innerHeight
// 摄像机的 position 和 target 是自动更新的,而 fov、aspect、near、far 的修改则需要重新计算投影矩阵(projection matrix)
camera.updateProjectionMatrix()
// 设置渲染器输出的 canvas 的大小
renderer.setSize(window.innerWidth, window.innerHeight)
}