最新文章:
- 处理Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.警告
- 什么是原子化CSS
- 一些关键的SEO优化建议和操作步骤
- 如何优化Vue3应用的性能
- Vue3中watch 和 watchEffect有什么区别
Three.js入门——五步构建立体模型
发布时间:2017年11月08日 评论数:抢沙发阅读数: 9122
概述
Three.js是一款webGL框架,webGL可以让我们在canvas上实现3D效果
立体模型构建
Three.js立体模型构建需要五个步骤
设置渲染器renderer
设置相机camera
设置光源light
设置场景scene
设置物体object
第一步 渲染器设置
三维空间里的物体映射到二维平面的过程被称为三维渲染。 一般来说我们都把进行渲染操作的软件叫做渲染器。 具体来说要进行下面这些处理。
声明全局变量(对象);
获取画布容器的宽高;
生成渲染器对象(属性:抗锯齿效果为设置有效;
设定渲染器的高宽(和画布框大小一致;
追加canvas元素到画布容器中;
设置渲染器的清除色(clearColor)。
var myCanvas = document.getElementById("mycanvas"); // 渲染器 var renderer,//声明全局变量(对象) mycanvasW, mycanvasH; function initRender() { mycanvasW = myCanvas.clientWidth;//获取画布容器宽 mycanvasH = myCanvas.clientHeight;//获取画布容器高 renderer = new THREE.WebGLRenderer({ antialias: true });//生成渲染器对象(属性:抗锯齿效果为设置有效) renderer.setSize(mycanvasW, mycanvasH);//设置渲染器的高宽(和画布框大小一致) myCanvas.appendChild(renderer.domElement);追加canvas元素到画布容器mycanvas中; renderer.setClearColor(0xfffffff, 1.0);//设置渲染器的清除色 }
第二步设置相机
Three.js中有透视相机和正投影相机,设置步骤如下:
声明全局变量(对象);
设置透视投影的相机;
设置相机的位置坐标;
设置相机的上为z轴方向;
设置视野的中心坐标。
// 相机 var camera; function initCamera() { camera = new THREE.PerspectiveCamera( 45,mycanvasW/mycanvasH, 1, 100000 ); camera.position.y = 10;//设置相机的位置坐标; camera.position.z = 10; camera.up.z = 1;//设置相机的上为z轴方向; camera.lookAt( {x:0, y:0, z:0 } );//设置视野的中心坐标 }
第三步设置场景scene
场景就是一个三维空间。用 [Scene] 类声明一个叫 [scene] 的对象。
设置场景
var scene; function initScene() { scene = new THREE.Scene(); }
第四步设置光源light
OpenGL(WebGL)的三维空间中,存在点光源和聚光灯两种类型。 而且,作为点光源的一种特例还存在平行光源(无线远光源)。另外,作为光源的参数还可以进行 [环境光] 等设置。 作为对应, Three.js中可以设置 [点光源(Point Light)] [聚光灯(Spot Light)] [平行光源(Direction Light)],和 [环境光(Ambient Light)]。 和OpenGL一样、在一个场景中可以设置多个光源。 基本上,都是环境光和其他几种光源进行组合。 如果不设置环境光,那么光线照射不到的面会变得过于黑暗。 本文中首先按照下面的步骤设置平行光源,在这之后还会追加环境光。
(0) 声明全局变量(对象)
(1) 设置平行光源
(2) 设置光源向量
(3) 追加光源到场景
这里我们用「DirectionalLight」类声明一个叫 [light] 的对象来代表平行光源
设置光源
var light; function initLight() { light = new THREE.DirectionalLight(0xff0000, 1.0, 0);//设置平行光源 light.position.set( 200, 200, 200 );//设置光源向量 scene.add(light);// 追加光源到场景 }
第五步设置物体object
这里声明一个球
var sphere; function initObject(){ sphere = new THREE.Mesh( new THREE.SphereGeometry(20,20), //width,height,depth new THREE.MeshLambertMaterial({color: 0xff0000}) //材质设定 ); scene.add(sphere); sphere.position.set(0,0,0); }
本文地址: https://arbays.com/post-48.html  本文已被百度收录!
版权声明:若无注明,本文皆为“富录-前端开发|web技术博客”原创,转载请保留文章出处。