Threejs开发笔记之一
2017-09-02 20:13
591 查看
开始
下载并引入一下类库1.threejs库
2.JQuery库
3.代码资源
基础概念
坐标
scene(场景)
var scene = new THREE.Scene(); //实例化
camera(相机)
var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000); camera.position.x = -30; camera.position.y = 40; camera.position.z = 30;//位置 camera.lookAt(scene.position);//望向场景中央
rederer(渲染器)
var renderer = new THREE.WebGLRenderer(); //上面是实例化,渲染器有三种实现WebGL(推荐用的是GPU)Canvas,SVG renderer.setClearColor(new THREE.Color(0xEEEEEE));//设置背景颜色 renderer.setSize(window.innerWidth, window.innerHeight);//渲染的尺寸、 //如果场景中有动画就需要持续渲染 requestAnimationFrame(renderScene); //renderScene为需要重复渲染的方法,也是写动画逻辑的地方 renderer.render(scene, camera);
几何体
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4); var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});//直接会渲染颜色上去,光源对其无效 //以下两种材质对光源才有反应(无阴影) //MeshLambertMaterial //MeshPhongMaterial //如果需要添加阴影需要给光源加以下这句(光源产生阴影) //spotLight.castShadow = true; //几何体接收阴影(两个都得设,不光发出也得接收) //cube.castShadow = true; var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); //设置位置 cube.position.x = -4; cube.position.y = 3; cube.position.z = 0; //加入场景 scene.add(cube);
光源
var spotLight = new THREE.SpotLight(0xffffff); spotLight.position.set(-40, 60, -10); spotLight.castShadow = true; scene.add(spotLight);
辅助工具
//坐标工具(无需依赖其他类库) var axes = new THREE.AxisHelper(20); scene.add(axes); //帧率工具 <script src="/libs/stats.js"></script> function initStats() {//初始化 var stats = new Stats(); stats.setMode(0); //参数说明 0: fps, 1: ms // 位置 stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; //挂载 document.getElementById("Stats-output").appendChild(stats.domElement); return stats; } //简化实验GUI工具(通过gui工具调整参数) <script src="/libs/dat.gui.js"></script> //参数 var controls = new function () { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }; //实例化 var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed', 0, 0.5); gui.add(controls, 'bouncingSpeed', 0, 0.5); //使用 cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed;
总实例化
document.getElementById("WebGL-output").appendChild(renderer.domElement); renderer.render(scene, camera);
奇葩ascii效果
document.getElementById("Stats-output").appendChild(stats.domElement); 改为 var effect = new THREE.AsciiEffect(renderer); effect.setSize(window.innerWidth,window.innerHeight); document.getElementById("WebGL-output").appendChild(effect.domElement); renderer.render(scene, camera); 改为 effect.render(scene,camera);
相关文章推荐
- Threejs开发笔记之四材质
- Threejs开发笔记之十纹理
- Threejs开发笔记之三光源
- Threejs开发笔记之九移动相机和动画
- 【Android】【笔记】《Android 入门经典》part 3 安卓开发组件
- 【转】Android开发学习笔记:5大布局方式详解
- Android开发笔记(一百零六)支付缴费SDK
- 笔记:MAC OS X下配置PHP开发、调试环境
- 笔记:RIA领域的设计开发流程
- hybird app开发学习笔记
- 前端开发——HTML学习笔记
- 嵌入式软件开发培训笔记——C高级 开发环境
- android应用开发笔记---Activity
- SilverLight商业应用程序开发---学习笔记(9)从摘要信息跳转到详细信息 导航到细节视图 在弹出窗体打开细节视图 使用DataGrid控件的行细节显示特性显示细节内容 主/从视图的实现
- 用c++开发sockets学习笔记
- Android 应用开发笔记 - 单项选择(RadioGroup, RadioButton)
- Android开发笔记之SeekBar 时间的显示 快进快退 Mediaplayer
- android开发笔记
- 老邓的andorid学习笔记-Android 4.0 开发环境搭建