您的位置：首页 > Web前端 > JavaScript

Three.js入门----简单立方体动画

2017-09-07 09:42 573 查看

设置样式：

*{
margin: 0;
padding: 0;
}

声明并初始化Renderer (渲染器对象)：

//初始化renderer渲染器对象
var renderer = new THREE.WebGLRenderer();
//设置renderer的宽，高(例子为充满屏幕)
renderer.setSize(window.innerWidth,window.innerHeight);
//添加dom元素到页面
document.body.appendChild(renderer.domElement);
//设置renderer的默认颜色和透明度
renderer.setClearColor("gray",1.0);

初始化Scene (场景)：

var scene = new THREE.Scene();

初始化Camera (相机)：

//perspective透视投影相机，(fov,aspect,near,far)四个参数依次为投影角度，近端裁切面宽高比，近端裁切面与相机的距离，远端裁切面与相机的距离
var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
//设置相机的位置
camera.position.x=0;
camera.position.y=2;
camera.position.z=7;
//设置相机聚焦的位置，例子为聚焦场景；也可以设置自定义位置。
camera.lookAt(scene.position);

添加Cube (立方体)：

//创建（长，宽，高）均为1的几何体(立方体)
var geometry = new THREE.CubeGeometry(1,1,1);
//设置立方体材质
var material = new THREE.MeshLambertMaterial({color:"yellow"});
//生成立方体，使用几何体geometry和材质material
var cube = new THREE.Mesh(geometry,material);
//设置立方体的位置
cube.position.x=0;
cube.position.y=2;
cube.position.z=0;

添加光源(例子为点光源)：

//例子以数组的形式添加，也可以单独添加；其他(相机，几何体，平面等等)也同样可以使用数组添加。
var lights = [];
//添加点光源，参数依次为颜色，强度，距离。强度为0-1，1为满光照强度；距离为0时表示光源不衰减。
lights[0] = new THREE.PointLight( "white", 1, 0 );
//设置光源位置
lights[0].position.set( 0, 10, 0 );

添加平面(为了接收立方体投影)：

//设置几何体，材质，生成平面(与立方体类似)
var planeGeometry=new THREE.PlaneGeometry(5,5,10,10);
var planeMaterial=new THREE.MeshLambertMaterial({color:"white"});
var plane=new THREE.Mesh(planeGeometry,planeMaterial);
//平面旋转-90度，并设置平面位置。平面初始为x,y轴所在平面。
plane.rotation.x=-0.5*Math.PI;
plane.position.x=0;
plane.position.y=0;
plane.position.z=0;

将相机，立方体，平面添加到场景中：

scene.add(lights[0]);
scene.add(cube);
scene.add(plane);

开启光源投影：

//Three.js中光源默认不会导致物体投影，开启投影步骤为：
//打开渲染器的地图阴影:
renderer.shadowMapEnabled = true;
//开启光源投影：
lights[0].castShadow = true;
//把模型设置为生成投影：例子需要将立方体投影到平面上
cube.castShadow=true;
//把模型设置为接收阴影:
plane.receiveShadow=true;

设置动画：

var p=0.05;
function render() {
//动画自循环
requestAnimationFrame(render);
//沿X轴旋转
cube.rotation.x+=0.05;
//cube.rotation.y+=0.1;
//设定位移边界，并开始位移
if(cube.position.x>=3||cube.position.x<=-3) {
p = -p;
}
cube.translateX(p);
//渲染器渲染场景和相机
renderer.render(scene,camera);
}
render();

完整代码：自行调整three.js引包的位置

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="three.js"></script>
<style>
*{ margin: 0; padding: 0; }
</style>
</head>
<body>

<script>

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.setClearColor("gray");
document.body.appendChild(renderer.domElement);

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
camera.position.set(4,6,6);
camera.up.x = 0;
camera.up.y = 0;
camera.up.z = 0;
camera.lookAt({
x:0,
y:-5,
z:0,
});

var geometry1 = new THREE.CylinderGeometry(0.2,0.2,3,10);
var material1 = new THREE.MeshBasicMaterial({color:"green"});
var cylinders=[];
cylinders[0] = new THREE.Mesh(geometry1,material1);
cylinders[1] = new THREE.Mesh(geometry1,material1);
cylinders[2] = new THREE.Mesh(geometry1,material1);
cylinders[3] = new THREE.Mesh(geometry1,material1);
cylinders[0].position.x=-4;
cylinders[0].position.y=1.5;
cylinders[0].position.z=-4;
cylinders[1].position.x=4;
cylinders[1].position.y=1.5;
cylinders[1].position.z=-4;
cylinders[2].position.x=-4;
cylinders[2].position.y=1.5;
cylinders[2].position.z=4;
cylinders[3].position.x=4;
cylinders[3].position.y=1.5;
cylinders[3].position.z=4;

var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshLambertMaterial({color:"yellow",wireframe: true});
var cube = new THREE.Mesh(geometry,material);
cube.position.x=0;
cube.position.y=2;
cube.position.z=0;

var lights = [];
lights[0] = new THREE.PointLight( "white", 1, 0 );
lights[0].position.set( 0, 4, 0 );
var helper = new THREE.CameraHelper(lights[0].shadow.camera);

var planeGeometry=new THREE.PlaneGeometry(20,15,10,10);
var planeMaterial=new THREE.MeshLambertMaterial({color:"white"});
var plane=new THREE.Mesh(planeGeometry,planeMaterial);
plane.rotation.x=-0.5*Math.PI;
plane.position.x=0;
plane.position.y=0;
plane.position.z=0;

scene.add(lights[0]);
scene.add(plane);
scene.add(cube);
//scene.add(helper);
for(var i=0;i<cylinders.length;i++){
scene.add(cylinders[i]);
}

renderer.shadowMapEnabled = true;
lights[0].castShadow = true;
cube.castShadow=true;
plane.receiveShadow=true;
for(var i=0;i<cylinders.length;i++){
cylinders[i].castShadow=true;
}

var p=0.05;
function render() {
requestAnimationFrame(render);
cube.rotation.x+=0.05;
//cube.rotation.y+=0.1;
if(cube.position.x>=3||cube.position.x<=-3) {
p = -p;
}
cube.translateX(p);
renderer.render(scene,camera);
}
render();
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Three.js javascript webgl opengl es 动画

相关文章推荐

新的分享

章节导航

Three.js入门----简单立方体动画

Three.js入门----简单立方体动画