three.js 3D动画效果
2017-10-31 本文已影响0人
charmingcheng
three.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>地球自转</title>
<style>
#canvas-frame {
width: 100%;
height: 600px;
}
</style>
</head>
<body onload="render()">
<div id="canvas-frame" ></div>
</body>
<script type="text/javascript" src="three.min.js"></script>
<script type="text/javascript">
var width = document.getElementById('canvas-frame').clientWidth; //画布宽
var height = document.getElementById('canvas-frame').clientHeight; //画布高
var renderer = new THREE.WebGLRenderer({
antialias : true
//canvas: document.getElementById('canvas-frame')
});
renderer.setSize(width, height);
renderer.setClearColor(0xFFFFFF, 1.0);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
//初始化场景
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, width/height , 1, 10000);
camera.position.set(300,300,500);
camera.up.x = 0;
camera.up.y = 1; //相机朝向--相机上方为y轴
camera.up.z = 0;
camera.lookAt({ x : 0,y : 0,z : 0 });//相机的中心点
scene.add(camera);
var light = new THREE.AmbientLight(0xffffff); //模拟漫反射光源
light.position.set(600, 1000, 800); //使用Ambient Light时可以忽略方向和角度，只考虑光源的位置
scene.add(light);
//导入材质
var texture = THREE.ImageUtils.loadTexture('images/box.jpg', {}, function() {
renderer.render(scene, camera);
});
var texture1 = THREE.ImageUtils.loadTexture('images/bg.jpg', {}, function() {
renderer.render(scene, camera);
});
/**
* 关于material材料注意点说明
* MeshBasicMaterial：对光照无感，给几何体一种简单的颜色或显示线框。
* MeshLambertMaterial：这种材质对光照有反应，用于创建暗淡的不发光的物体。
* MeshPhongMaterial：这种材质对光照也有反应，用于创建金属类明亮的物体。
*/
var material = new THREE.MeshLambertMaterial({
map: texture
});
var material1 = new THREE.MeshLambertMaterial({
map: texture1
});
//创建一个立方体
var geometry = new THREE.BoxGeometry(100, 100, 100);
//将material材料添加到几何体geometry
var geom1 = new THREE.SphereGeometry(100,100,100);//第一个参数是半径，第二个是经度分段数，第三个是纬度分段数，第二第三个参数越大，物体越接近球体
var mesh1 = new THREE.Mesh(geom1,material1);
mesh1.position.set(0,100,0);
var mesh = new THREE.Mesh(geometry, material);
var mesh2 = new THREE.Mesh(geometry, material);
var mesh3 = new THREE.Mesh(geometry, material);
mesh.position.set(-400,100,0)
mesh2.position.set(-200,0,200)
mesh3.position.set(300,100,0)
scene.add(mesh);
scene.add(mesh1);
scene.add(mesh2);
scene.add(mesh3);
var helper = new THREE.GridHelper( 1000, 50 );
helper.setColors( 0x0000ff, 0x808080 );
//scene.add( helper );
function render(){
requestAnimationFrame(render);
//mesh1.rotation.x += 0.02;
mesh1.rotation.y += 0.02;
mesh2.rotation.x += 0.02;
mesh3.rotation.z += 0.02;
mesh.rotation.y += 0.03;
//mesh1.rotation.z += 0.03;
renderer.render(scene, camera);
}
</script>
</html>
