threejs初探

Posted 2023-03-13

参考技术A scene-主容器
material&texture －贴图
geometry
object
light
renderer&shader
loader

var scene = new THREE.Scene();
var mat = THREE.MeshBasicMaterial(color: 0x60f60f)
var gem = new BoxGeometry()

正交投影：等同平行投影
透视投影

blender 软件，3d建模

点光 pointLight
锥形光 spotLight
环境光 AmbientLight

完全不反射 MeshBasicMaterial
漫反射 Lambert
镜面反射 Phong

光源辅助线:
var spotLightHelper = new THREE.DirectionalLightHelper( light );
scene.add( spotLightHelper );
坐标系:
var axisHelper = new THREE.AxisHelper(15000);
scene.add(axisHelper);
镜头控制:
orbitControl

new THREE.Group();
new THREE.Object3D();

THREE.Vector2
2d vector
new THREE.ExtrudeGeometry()

mesh.clone()

镜头、光源、跑道、建筑，猫门；都循环前进。
设置最远比较基线
参考： http://codepen.io/shelbeniskb/pen/dpYRWN

direcLight.target.position.set( 200, -180, 100 ); 无效
lookAt() 也无效
总是tagert是原点

var gui = new dat.GUI()
gui.add(, name, param1, param2...)
onChange( ... )

加载：var texture = THREE.ImageUtils.loadTexture(data.url)
new THREE.MeshLambertMaterial( map: texture );

threejs - 4 - 物体

参考技术A

在三维空间中的物体是由点、线、面组成的

不管是点 、线还是面，里面的坐标点都叫 顶点 。可以给不同的顶点设置不同的颜色，这个过程叫 着色 （看不懂的话有个概念就行，顶点 + 颜色 = 三维物体）

上面定义了一个平面，THREE.Face3(2,1,0) 这个里面的 2 指的是 vertices 里面下标为2的顶点，1 指的是下标为1的顶点，0 指的是下标为0的顶点。 2，1，0 的顺序也是有说法的（GPU为了提高渲染效率，默认仅仅渲染逆时针方向的平面，如果你写成了 0，1，2 就可能渲染不出来）

threejs - 1 - 介绍&入门
threejs - 2 - 相机
threejs - 3 - 场景刷新
threejs - 4 - 物体
[threejs - 5 - 材质]
[threejs - 6 - 灯光]
[threejs - 7 - 相机进阶]
[threejs - 8 - 物体进阶]
[threejs - 9 - 粒子系统]
[threejs - 10 - 模型加载]
[threejs - 11 - GLSL]
[threejs - 12 - 着色器]