使用Three.js 基本组件以及流程
1. 创建场景
var scene = new THREE.Scene();
2. 创建相机,设置可视范围
var camera = new THREE.PerspectiveCamera(45, windows.innerWidth / windows.innerHeight, 0.1, 100) ;
3. 创建渲染器, 设置渲染范围, 并加载到页面中去
var renderer = new THREE.WebGLRenderer();
renderer.setsize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
4. 设置灯光, 并添加到场景中
var light = new THREE.DirectionalLight(oxFF0000, 1.0) // 方向光
light.position.set(100, 100, 200);
secen.add(light);
3.创建几何体,添加材料(或纹理),创建 网格对象, 将 网格对象 添加到 场景 中
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial{collor : 0x00ff00}) // 或 {map : something}
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
5.渲染(结合相机与场景)
renderer.add(scene, camera);
实时渲染:
function render () {
cube.rotation.x += 0.1; // 物体绕 x 轴旋转
renderer.add(scene, camera);
requestAnimationFrame(render); // 循环执行
}
最新文章
- 《JavaScript 代码优化指南》
- iOS -Swift 3.0 -for(循环语句用法)
- linux服务器TCP并发连接数优化
- 一个按比特位拷贝数据的函数copybits
- 不要告诉我你懂margin
- Content Template &; DataTemplate 区别
- IOS之【属性列表】
- PDO进行sql报表编制结果集介绍及操作(两)
- Windows Azure Virtual Machine (34) 保护Azure虚拟机
- Linux-hexdump命令调试event驱动—详解(13)
- Forethought Future Cup - Elimination Round
- Scanner输入数字时个位十位百位千位单独取出。
- mysql使用自增Id为什么存储比较快
- [Android Pro] 关于Android 7.0无法进行https抓包的问题
- 获取URL某个参数
- winform窗体 控件 【ListView】
- python的变量以及常量介绍
- MySQL binlog日志操作详解
- Service 的 onStartCommand(Intent, int, int) 返回值
- win7/win8/win10 php5.6 redis扩展(适用于iis/nginx/apache),亲测
热门文章
- Leetcode 高精度 Plus One
- 基于Office 365的随需应变业务应用平台
- 关于一些常用的linux命令
- 基于Metronic的Bootstrap开发框架经验总结(18)-- 在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持
- 存储与索引------《Designing Data-Intensive Applications》读书笔记3
- 使用MVC创建API
- 实现一个 myshell
- android 串口开发第二篇:利用jni实现android和串口通信
- TensorFlow文档翻译-01-TensorFlow入门
- bzoj 3207: 花神的嘲讽计划Ⅰ