three.js基础

在three.js中,有两类几何体,基本几何体和buffer(缓存)几何体。

基本几何体的顶点位置,缩放,旋转角,颜色,法线信息都是保存在特定的类里面,比如顶点位置使用Vector3,颜色信息使用Color。

基本集合使用类来管理自身信息,便于操作,用来创建经常变化的物体;

buffer(缓存)类的都是使用数组存储的,并且缓存在了内存缓冲区里,减低了对GPU的消耗。 buffer几何体由于使用数组来管理,如果需要操作,必须去除其原始信息,难操作,而且buffer几何体的信息被缓存在缓冲区中,减低了对GPU的消耗,所以Buffer几何体适用于创建那种一旦创建就不需要修改的物体。

常用:PerspectiveCamera()      //透视相机(远景相机)

OrthographicCamera()    //正交投影相机

CubeCamera    //立方体相机

3d模型常见格式:

gltf ,obj 等


//创建场景(画布)

const scene= new THREE.Scene();

//创建立方体

const geometry = new THREE.BoxGeometry();

const material = new THREE.MeshBasicMaterial({ color : 0x00ff00 })

// 创建网格对象(用来承载几何模型的一个对象)

const cube=new THREE.Mesh(geometry,material);

scene.add( cube ); //对象将被添加到原点处,即坐标(0,0,0)这将导致相机和立方体发生空间重叠,为避免可移动相机位置

//创建相机

const camera=new THREE.PerspectiveCamera(75(视角),window.innerWidth / window.innerHeight,0.1,1000);

camera.position.z=5;  //相机位置

//渲染

const renderer=  new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth,window.innerHeight);

document.body.appendChild(renderer.domElement);

//以上渲染出来几何体是静止的

//渲染循环(动态的)

var render=function(){

requestAnimationFrame( render );

cube.rotation.x +=0.1;

cube.rotation.y +=0.1;

renderer.render(scene,camera);

}

render();

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Threejs 为什么? webGL太难用,太复杂! 但是现代浏览器都支持 WebGL 这样我们就不必使用 Fla...
    强某某阅读 11,387评论 1 21
  • 1、OrthographicCamera 正交投影照相机 2、PerspectiveCamera 透视投影照相机 ...
    小母鸡叽叽叽阅读 3,816评论 1 3
  • Threejs中文文档 郭隆邦技术博客 2018-09-21 20:40:17 关注 Three.js中文文档 今...
    情人波阅读 14,797评论 0 7
  • 我是黑夜里大雨纷飞的人啊 1 “又到一年六月,有人笑有人哭,有人欢乐有人忧愁,有人惊喜有人失落,有的觉得收获满满有...
    陌忘宇阅读 12,721评论 28 53
  • 人工智能是什么?什么是人工智能?人工智能是未来发展的必然趋势吗?以后人工智能技术真的能达到电影里机器人的智能水平吗...
    ZLLZ阅读 9,382评论 0 5