three.js

简介:

Three.js是一个伟大的webGL开源库,它简化了浏览器3D编程,对webGL进行了封装,使得开发者可以直接使用JavaScript在浏览器中创建复杂多变的全景3D场景.

Three.js官网:https://threejs.org/;

Three.js文档:https://threejs.org/docs/index.html#Manual/Introduction/Creating_a_scene官方文档写的很糙,建议大家多练习,只有coding才能让你真正的了解和掌握Threejs;

Three.js例子:通过观看Threejs的官方实例,我想你一定会疯狂爱上这个复杂可爱的大家伙.

Three.js代码托管在github上:https://github.com/mrdoob/three.js/;

第一个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;1. 1. 1. 1. 
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.执行渲染操作.

---

---