ThreeJS入门-1

ThreeJS中文文档

1. 场景
   • new THREE.Scene(); 创建一个场景
   • scene.add(mesh); 将模型添加到场景中
2. 几何体
   • new THREE.BoxGeometry() 创建一个长方体
   • new THREE.CylinderGeometry() 创建一个圆柱体
   • new THREE.SphereGeometry() 创建一个球体
   • new THREE.ConeGeometry() 创建一个圆锥
   • new THREE.PlaneGeometry() 创建一个圆平面
   • 参数为长宽高
3. 材质
   • new THREE.MeshBasicMaterial() 创建一个网格基础材质（不受光源影响）
   • new THREE.MeshLamberMaterial() 创建一个网格漫反射材质（受光源影响）
   • new THREE.MeshPhongMaterial() 创建一个网格高光材质
   • new THREE.MeshStandardMaterial() 创建一个物理标准材质
   • new THREE.MeshPhysicalMaterial() 创建一个物理材质
   • new THREE.PointMaterial() 创建一个点材质
   • new THREE.LineBasicMaterial() 创建一个线材质
   • new THREE.SpriteMaterial() 创建一个精灵材质
4. 物体
   • new THREE.Mesh(Geometry, Material)
5. 光源
   • new THREE.AmbientLight() 环境光
   • new THREE.PointLight() 点光源
   • new THREE.SpotLight() 聚光灯光源
   • new THREE.DirectionalLight() 平行光
   • 参数
     • 光源颜色
     • 光照强度
6. 虚拟相机
   • new THREE.OrthographicCamera() 正投影相机
   • new THREE.PerspectiveCamera() 透视投影相机
     • 透视投影相机视锥体(参数)：
       • fov(视场)
       • aspect(宽高比 width / height)
       • near(近裁截面)
       • far(远裁截面)
       • 视锥体之内的场景才会被渲染
   • camera.lookAt(x, y, z) 相机观察目标
   • new OrbitControls(camera, render.domElement) 相机控件
     • event
       • change
7. 渲染器
   • new THREE.WebGLRenderer() 创建一个渲染器
   • render.setSize(width, height) 设置渲染大小
   • render.render() 执行渲染操作
8. 辅助观察坐标系
   • THREE.AxesHelper() 辅助观察坐标系
   • 参数是长宽高的广度