首页 > 代码库 > Three.js学习总结(一)
Three.js学习总结(一)
基本结构
这两天开始学习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
Three.js学习总结(一)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。