Skip to content

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 );