three.js 学习感悟

2019独角兽企业重金招聘Python工程师标准>>>

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);
})()

 

转载于:https://my.oschina.net/u/2306318/blog/865558