使用THREE.js简单绘制一个地球
生成样式如下
var camera, scene, renderer;
var clock = new THREE.Clock();
var earth;
function init() {
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 100, 300);
camera.lookAt(new THREE.Vector3(0, 0, 0))
scene = new THREE.Scene();
scene.background = new THREE.Color(0xeeeeee);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.querySelector(opt.id).appendChild(renderer.domElement);//把canvas加载到dom元素中
df_canvas = renderer.domElement
if (THREE.OrbitControls) {
new THREE.OrbitControls(camera, renderer.domElement);
}
//生成地球
createEarth()
animate()
}
//创建地球
function createEarth() {
//光源
var light = new THREE.AmbientLight(0xffffff); // 环境光
scene.add(light);
//球体
var _config = {
radius: 100,//半径
map: new THREE.TextureLoader().load('../image/earth.jpg'),//加载需要的地球贴图 地球图为宽高 2:1的图
}
//圆形几何
var geometry = new THREE.SphereBufferGeometry(_config.radius, 64, 64);
//材质 如需要凹凸感 了解 bumpMap
var material = new THREE.MeshPhongMaterial({
color: 0xffffff,//颜色
map: _config.map,
//bumpMap:"",凹凸
});
earth = new THREE.Mesh(geometry, material);
scene.add(earth);
}
function animate() {
requestAnimationFrame(animate);
var delta = clock.getDelta();
renderer.render(scene, camera);
earth.rotation.y += delta / 5;
}
init();
地球纹理,不是高清图;如需要自行搜索
https://download.csdn.net/download/qq_29814417/11865611 资源