three.js三要素
场景(scene),相机(camera),渲染器(renderer)。
1.场景
var scene = new THREE.Scene();
属性
children
数组,所有对象
fog
雾化效果(雾的颜色,近,远)
scene.fog = new THREE.Fog( 0xffffff, 0.015, 100);
overrideMaterial
材质覆盖,所有物质指定成一个材质
scene.overrideMaterial = new THREE.MeshLambertMaterial({color : 0xF39600 });
方法
add()
添加对象
remove()
去除对象
getObjectByName()
获取指定对象的名
tranverse()
遍历场景对象,包括子对象
2.相机
窗口宽度
var width=window.innerWidth;
窗口高度
var height=window.innerHeight;
正投影
(左边,右边,上边,下边,近,远)
var camera=new THREE.OrthographicCamera(width/-2,width/2,height/2,height/-2,1,1000);
scene.add(camera);
透视投影
(视角,纵横比,近,远,)
var camera=new THREE.PerspectiveCamera(45,weight/height,1,1000);
scene.add(camera);
3.渲染器
var renderer=new THREE.WebGLRenderer();
属性
antialias
(true/false)是否开启反锯齿,true为开启
alpha
(true/false)是否设置背景色透明
maxLights
(数值int)最大灯光数
logarithmicDepthBuffer
(true/false)模型重叠不停闪烁,是Z-Fighting的问题,详细看https://www.cnblogs.com/lst619247/p/9098845.html
方法
setSize
渲染器的宽和高
renderer.setSize(width,height);
setClearColor
renderer.setClearColor(0x0000ff,0.5);
设置canvas背景色和透明度
setPixelRatio
renderer.setPixeRatio(window.devicePixekRatio);
和反锯齿一样,抗锯齿的方法
4.threejs中的灯光
环境光(AmbientLight)不能产生阴影
var ambientLight=new THREE.AmbientLight('#0c0c0c',0.1);//颜色与强度
点光源(PointLight)不能产生阴影
pointLight=new THREE.PointLight(0xffffff, 1);//颜色与强度
pointLight.position.set( 15, 40, 35 );//位置
pointLight.distance = 200;//光照的距离
pointLight.visible=true;//是否打开光源
聚光灯(SpotLight)能产生阴影
spotLight = new THREE.SpotLight( 0xffffff, 1 );//颜色与强度
产生阴影4个步骤:
render.shadowMapEnabled=true;//告诉render我们需要阴影
plane.receiveShadow=true;//地面接收阴影
cude.castShadow=true;//cast投射,就是方块投射阴影
spotLight.castShadow=true;//不是所有光源都可以投射阴影,这里使用聚点光源可以产生阴影
属性
spotLight.position.set( 15, 40, 35 )//位置;
spotLight.angle = Math.PI / 4;//光圈的大小
spotLight.penumbra = 0.05;//光的边缘模糊
spotLight.decay = 2;//从近到远的光强度退化
spotLight.distance = 200;//光照距离
spotLight.castShadow = true;//允许投射阴影
平行光(DirectinalLight)能产生阴影
directionLight=new THREE.DirectionalLight(0xffffff, 1);
directionLight.position.set( 15, 40, 35 );//位置;
directionLight.castShadow = true;//允许投射阴影
directionLight.distance = 200;//光照距离
5.几何体
立方几何体
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
圆形几何体
var geometry =new THREE.CircleGeometry( 5, 32 );
圆锥几何体
var geometry = new THREE.ConeGeometry( 5, 20, 32 );
圆柱几何体
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
十二面几何体
var geometry = new THREE.DodecahedronGeometry( 12,0 );
边缘几何 体
var edges = new THREE.EdgesGeometry( geometry );
二十面几何体
var geometry = new THREE.IcosahedronGeometry( 12,0 );
八面几何体
var geometry = new THREE.OctahedronGeometry( 12,0 );
平面几何体
var geometry = new THREE.PlaneGeometry( 5, 20, 32 );
圆环几何体
var geometry = new THREE.RingGeometry( 1, 5, 32 );
球几何体
var geometry = new THREE.SphereGeometry( 5, 32, 32 );
四面几何体
var geometry = new THREE.TetrahedronGeometry( 5, 32, 32 );
文本几何体
圆环几何体
var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
管道缓冲几何体
var geometry =new THREE.TubeGeometry( path, 20, 2, 8, false );
网格几何体
var geometry = new THREE.SphereBufferGeometry( 100, 100, 100 );