Threejs 入门教程

勿忘初心梦于歌
7,079 阅读3分钟

简介:
Three.js是一个伟大的webGL开源库,它简化了浏览器3D编程,对webGL进行了封装,使得开发者可以直接使用JavaScript在浏览器中创建复杂多变的全景3D场景.
Three.js官网:threejs.org/;
Three.js文档:threejs.org/docs/index.…官方文档写的很糙,建议大家多练习,只有coding才能让你真正的了解和掌握Threejs;
Three.js例子:通过观看Threejs的官方实例,我想你一定会疯狂爱上这个复杂可爱的大家伙.
Three.js代码托管在github上:github.com/mrdoob/thre…;

第一个Three.js例子
首先创建Three.js应用必须的:场景,相机,渲染器;

//创建场景
var scene = new THREE.Scene();
//创建相机
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, .1, 1000);
//创建渲染器

var renderer = new THREE.WebGLRenderer();

场景相当于舞台,相机相当于眼睛,渲染器用来把相机拍到的呈现在渲染在浏览器上,我个人是这么理解的.
设置场景的大小,打开渲染器的阴影效果

renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;

创建一个平面体

//着色器

var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
//材质

var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
//生成平面体

var plane = new THREE.Mesh(planeGeometry, planeMaterial);

//打开阴影效果

plane.receiveShadow = true;

//设置平面体的位置
plane.position.x = 16;

plane.position.y = 0;

plane.position.z = 0;
//也可以直接.set进行设置
//plane.position.set(16,0,0);
//设置平面体的旋转
plane.rotation.x = -.5 * Math.PI;
//将平面体加入到场景中
scene.add(plane);

创建一个正方体

//着色器
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
//材质

var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ff00});
//生成立方体

var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

//打开阴影效果

cube.castShadow = true;


//设置立方体的位置

cube.position.x = -4;

cube.position.y = 3;

cube.position.z = 0;

//将立方体加入到场景当中

scene.add(cube);

创建一个球面体

//着色器

var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
//材质

var sphereMaterial = new THREE.MeshBasicMaterial({color: 0xff0000});
//生成球面体

var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
//打开阴影效果
sphere.castShadow = true;

//设置球面体的位置

sphere.position.x = 20;

sphere.position.y = 0;

sphere.position.z = 2;

//将球面体加入到场景中
scene.add(sphere);

设置相机的位置

camera.position.x = -30;

camera.position.y = 40;

camera.position.z = 30;
//将相机快门的位置设置为场景的位置

camera.lookAt(scene.position);

加入光源

var spotLight = new THREE.SpotLight(0xffffff, 1);

spotLight.position.set(-40, 60, -10);

spotLight.castShadow = true;

spotLight.shadow.mapSize.width = 2048;

spotLight.shadow.mapSize.height = 2048;

scene.add(spotLight);

将渲染器添加到页面中


document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);

下面对代码进行封装,并添加动画

创建相机,场景,渲染器,并且声明程序所需的变量

  var scene, camera, renderer, cube, plane, sphere, spotLight;
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, .1, 1000);
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;

    camera.position.x = -30;
    camera.position.y = 40;
    camera.position.z = 30;
    camera.lookAt(scene.position);//将相机快门的位置设置为场景的位置

创建平面体

 function addPlane() {
        //着色器
        var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
        //材质
        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
        //生成平面体
        plane = new THREE.Mesh(planeGeometry, planeMaterial);

        //打开阴影效果
plane.receiveShadow = true;

        //设置平面体的位置
        plane.position.x = 16;
        plane.position.y = 0;
        plane.position.z = 0;
        //也可以直接.set进行设置
        //plane.position.set(16,0,0);
        //设置平面体的旋转
        plane.rotation.x = -.5 * Math.PI;
        //将平面体加入到场景中
        scene.add(plane);
    }

创建正方体

    function addCube() {
        //着色器
        var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
        //材质
        var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ff00});
        //生成立方体
        cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

        //打开阴影效果
cube.castShadow = true;

        //设置立方体的位置
        cube.position.x = -4;
        cube.position.y = 3;
        cube.position.z = 0;
        //将立方体加入到场景当中
        scene.add(cube);
    }

创建球面体

    function addSphere() {
        //着色器

        var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
        //材质

        var sphereMaterial = new THREE.MeshBasicMaterial({color: 0xff0000});
        //生成球面体

        sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
        //打开阴影效果

        sphere.castShadow = true;

        //设置球面体的位置

        sphere.position.x = 20;
        sphere.position.y = 0;
        sphere.position.z = 2;
        //将球面体加入到场景中
        scene.add(sphere);
    }

创建光源

    function addSpotLight() {
        spotLight = new THREE.SpotLight(0xffffff, 1);
        spotLight.position.set(-40, 60, -10);
        spotLight.castShadow = true;
        spotLight.shadow.mapSize.width = 2048;
        spotLight.shadow.mapSize.height = 2048;
        scene.add(spotLight);
    }

动画
通过改变正方体的旋转角度,以及球面体的位置实现动画效果,
利用requestAnimationFrame()实现动画无限循环

   function render() {
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        cube.rotation.z += 0.01;

        sphere.position.x += 0.01;
        sphere.position.y += 0.01;
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }

调用函数,完成程序


    document.body.appendChild(renderer.domElement);
    addSphere();
    addCube();
    addPlane();
    addSpotLight();
    render();

总结:
以上就是three.js的入门内容，我们核心的五步就是：
1.设置渲染器renderer;
2.设置摄像机camera;
3.设置场景scene;
4.设置光源light;
5.设置物体object;
6.执行渲染操作.

后续还会有更多关于Three.js的教程以及阅读分享之类的文章.

1 天前，Mr.jason 补充：

如需转载请著名出处,谢谢

avatar
文章
阅读
粉丝