three.js 学习感悟
1.场景
在Three.js中添加的物体都是添加到场景中的，因此它相当于一个大容器。一般说，场景来没有很复杂的操作，在程序最开始的时候进行实例化，然后将物体添加到场景中即可。
2.照相机
我们使用Three.js创建的场景是三维的，而通常情况下显示屏是二维的，那么三维的场景如何显示到二维的显示屏上呢？照相机就是这样一个抽象，它定义了三维空间到二维屏幕的投影方式，用“照相机”这样一个类比，可以使我们直观地理解这一投影方式。
3.渲染器
渲染器将和Canvas元素进行绑定，用于渲染三维场景。用通俗的话来说，渲染就是将模型数据在屏幕上显示出来的过程。
静止的立方体的例子
(function () {
//声明一个渲染器（用于展示）
var renderer2 = new THREE.WebGLRenderer();
renderer2.setSize(400,300);
document.getElementsByTagName('body')[0].appendChild(renderer2.domElement);
renderer2.setClearColor(0x000000);
//声明一个场景（添加的物体都在这个场景中）
var scene2 = new THREE.Scene();
//设置照相机（相当于眼睛）
var camera2 = new THREE.PerspectiveCamera(60, 400/300, 1, 1000);//透视投影照相机
camera2.position.set(1,1,5);
scene2.add(camera2);
//声明物体
var cube22 = new THREE.Mesh(new THREE.CubeGeometry(2,2,2),
new THREE.MeshBasicMaterial({
color: 0xff0000,
map: THREE.ImageUtils.loadTexture('img/11.png',{},function () {
renderer2.render(scene2,camera2);
})
})
);
cube22.position.set(1,1,1);
cube22.lookAt(new THREE.Vector3(0,0,0));
scene2.add(cube22);
//设置光源
var light2 = new THREE.PointLight(0xffffff,2,100);
light2.position.set(0,0,5);
scene2.add(light2);
//场景，照相机，物体都声明好了，现在要用渲染器渲染出结果了
renderer2.render(scene2,camera2);
})()能动的正方体例子
(function () {
//声明渲染器
var renderer3 = new THREE.WebGLRenderer();
renderer3.setSize(400,300);
document.getElementsByTagName('body')[0].appendChild(renderer3.domElement);
renderer3.setClearColor(0x000000);
//声明一个场景（添加的物体都在这个场景中）
var scene3 = new THREE.Scene();
//设置照相机（相当于眼睛）
var camera3 = new THREE.PerspectiveCamera(60, 400/300, 1, 1000);//透视投影照相机
camera3.position.set(0,0,5);
scene3.add(camera3);
//声明物体
var cube32 = new THREE.Mesh(new THREE.CubeGeometry(2,2,2),
new THREE.MeshBasicMaterial({
color: 0xff0000,
map: THREE.ImageUtils.loadTexture('img/11.png',{},function () {
renderer3.render(scene3,camera3);
})
})
);
cube32.lookAt(new THREE.Vector3(0,0,0));
scene3.add(cube32);
//设置光源
var light3 = new THREE.PointLight(0xffffff,2,100);
light3.position.set(0,0,5);
scene3.add(light3);
//场景，照相机，物体都声明好了，现在要用渲染器渲染出结果了
renderer3.render(scene3,camera3);
//动画
function draw() {
cube32.rotation.x += Math.sin(Math.random()*0.05);
cube32.rotation.y += Math.sin(Math.random()*0.05);
renderer3.render(scene3,camera3);
requestAnimationFrame(draw);
}
requestAnimationFrame(draw);
})()本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017/03/23 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读