标签：document arc 自己 icm 学习 asi basic ffffff tcl
基本结构
这两天开始学习Three.js，首先为其顺了一个基本的结构（首先需要引用three.js）：
1、创建WebGL画布（与canvas画布是联系在一起的）、（即渲染）；
2、创建场景；
3、创建照相机并添加至场景；
4、创建灯光并添加至场景（可选，当物体材质为需要光时，则必须添加）；
5、创建物体及其材质，两者合在一起创建网络并添加至场景；
6、渲染。
1、创建WebGL画布（与canvas画布是联系在一起的）、（即渲染）
有两种方式，一种是已经有canvas画布，另一种是未创建canvas，需要自己创建。
// renderer let renderer = new THREE.WebGLRenderer({ canvas: document.getElementById(‘mainCanvas‘) }); //设置颜色 renderer.setClearColor(0x000000); // black
//当未创建canvas时 let renderer = new THREE.WebGLRenderer(); renderer.setSize(400, 300); document.getElementsByTagName(‘body‘)[0].appendChild(renderer.domElement);
2、创建场景
这里说的场景，概念和画布很类似，场景内放物体，场景放到画布上。
// scene let scene = new THREE.Scene();
3、创建照相机并添加至场景
照相机就相当于人眼睛一样，只有在照相机视野里的物体才会被看到。
// camera let camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000); camera.position.set(0, 0, 5); scene.add(camera);
4、创建灯光并添加至场景（可选，当物体材质为需要光时，则必须添加）
图像渲染的丰富效果很大程度上也要归功于光与影的利用，通过计算机模拟真实世界的光，可以模拟真实情景。
//如设置点光源 let light = new THREE.PointLight(0xffffff, 1, 100); light.position.set(10, 15, 5); scene.add(light);
5、创建物体及其材质，两者合在一起创建网络并添加至场景
在场景中创建物体，并为物体选择一种材质，初始化为网络。
let cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3), new THREE.MeshBasicMaterial({ color: 0xff0000 }) ); scene.add(cube);
6、渲染
// render renderer.render(scene, camera);
实例
另附一些简单正在更新学习中的例子：
github地址：https://github.com/zhangxiaoshuang32/WebVR
在线演示：https://zhangxiaoshuang32.github.io/WebVR/index.html
标签：document arc 自己 icm 学习 asi basic ffffff tcl
原文地址：http://www.cnblogs.com/zhangxiaoshuang/p/6556030.html
