Three.js
yyyzhhhhh
123
展开
-
学习Three.js——场景(Scene)
构造函数var scene = new THREE.Scene()方法add(object):向场景中添加对象remove(object):向场景中删除对象getObjectByName(name,recursive):根据name查找指定的对象,recursive为false时,向子元素查找,recursive为true时,向所有后代元素查找traverse(function):使用...原创 2018-12-11 22:15:01 · 2753 阅读 · 0 评论 -
学习Three.js——添加物理效果(Physijs)
一般使用Physijs创建物理效果配置Physijs,需要设置这两个属性Physijs.scripts.worker = '../libs/physijs_worker.js';Physijs.scripts.ammo = '../libs/ammo.js';一般用法:var scene = new Physijs.Scene();//创建场景scene.setGravity(new...原创 2018-12-24 14:37:48 · 1440 阅读 · 0 评论 -
学习Three.js——后期处理(EffectComposer)
后期处理的步骤:创建THREE.EffectComposer(效果组合器)对象配置EffectComposer对象在render循环中,使用EffectComposer来渲染场景一般用法:var composer = new THREE.EffectComposer(webGLRenderer)//配置composervar renderPass = new THREE.Rende...原创 2018-12-23 15:13:50 · 9435 阅读 · 0 评论 -
学习Three.js——动画(Animation)
Tween用法:var tween = new TWEEN.Tween({x:10}).to({x:3},10000).easing(TWEEN.Easing.Elastic.InOut).OnUpdate(function(){ })Tween(…).to(…,time)是从一个状态变化到另一个状态,time是变化需要的时间(毫秒)easing是变化的方式,OnUpdate是...原创 2018-12-23 15:12:59 · 3120 阅读 · 0 评论 -
学习Three.js——光源(Light)
光源的种类:AmbientLight:环境光,场景所有物体都会叠加此光源PointLight:点光源,从空间某一点发散光线SpotLight:聚光灯,类似于手电筒的效果DirectionalLight:方向(平行)光,类似于太阳光HemisphereLight:半球光,类似于天空,可以创造一个比较自然的户外环境AreaLight:区域光,光从一个评估按发散出来LensFlare:添加...原创 2018-12-23 15:11:27 · 685 阅读 · 0 评论 -
学习Three.js——粒子、点云(Sprite,PointCloud)
粒子使用THREE.SpriteMaterial()和THREE.Sprite()即可创建单个粒子创建过程function createSprites() { var material = new THREE.SpriteMaterial(); for (var x = -5; x < 5; x++) { ...原创 2018-12-23 15:10:33 · 6802 阅读 · 1 评论 -
学习Three.js——纹理(Texture)
一般使用THREE.ImageUtils.loadTexture(img_path)将图像加载为纹理,然后将纹理赋给材质的map属性,其中我们可以选择纹理放大和缩小使用的插值算法。THREE.NearestFilter、THREE.LinearFilter、THREE.NearestMipMapNearestFilter、THREE.NearestMipMapLinearFilter、THRE...原创 2018-12-23 15:05:40 · 3540 阅读 · 0 评论 -
学习Three.js——网格(Mesh)
网格几何体是不能被渲染的,只有几何体和材质结合成网格才能被渲染到屏幕上常见属性和方法position:表示网格的绝对位置设置position的方法有3个:mesh.position.x = x;mesh.position.y=y;mesh.position.z=zmesh.position.set(x,y,z)mesh.position = new THREE.Vector3(x,...原创 2018-12-23 15:04:55 · 12038 阅读 · 1 评论 -
学习Three.js——几何体(Geometry)
几何体定义顶点:点由THREE.Vector(x,y,z)定义var vertices = [ new THREE.Vector3(1,3,1), new THREE.Vector3(1,3,-1), new THREE.Vector3(1,-1,1), new THREE.Vector3(1,-1,-1), new THREE.Vector3(-1,...原创 2018-12-23 15:02:04 · 4757 阅读 · 0 评论 -
学习Three.js——移动摄像机(control)
一般使用控制器来控制移动的摄像机,控制器一般有几类。轨迹球控制器 //将camera放入控制器的构造函数中 var trackballControls = new THREE.TrackballControls(camera); trackballControls.rotateSpeed = 1.0; trackballControls.zoomSpee...原创 2018-12-23 14:56:20 · 5079 阅读 · 1 评论 -
学习Three.js——摄像机(camera)
摄像机包括透视投影摄像机和正交投影摄像机。透视投影摄像机构造函数var camera = new THREE.PerspectiveCamera(fov,aspect,near,far,zoom)fov:视场,摄像机左右两侧睁开的角度,fov越大看到的东西越多,默认值为50aspect:长宽比,渲染结果横向尺寸和纵向尺寸的比值,默认值为window.innerWidth/window.i...原创 2018-12-23 14:55:19 · 5840 阅读 · 1 评论 -
学习Three.js——声音(Audio)
用法看代码 var listener1 = new THREE.AudioListener();//创建一个收听器并加入到摄像机中,声音的效果会随着摄像机的改变而改变 camera.add(listener); var sound1 = new THREE.Audio(listener1);//创建声音并绑定对应的收听器 sound1.load('../assets/...原创 2018-12-24 14:40:26 · 2357 阅读 · 0 评论