<!DOCTYPE html
[/span>html
[/span>head
[/span>meta charset="utf-8"
[/span>title
[/span>script type="text/javascript" src=".\build\three.js"
[/span>script src=".\examples\js\controls\TrackballControls.js"
[/span>script src=".\examples\js\controls\DragControls.js"
[/span>style
body
{
margin: 0;
overflow: hidden;
}
[/span>body
[/span>div id="WebGL-output"
[/span>script type="text/javascript"
var camera, scene, renderer;
var sphere;
var controls;
var objects = 【】;
var fov = 45;
var near = 0.1;
var far = 1000;
init();
render();
function init() {
scene = new THREE.Scene(); //创建场景
camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, //代码效果参考：http://www.zidongmutanji.com/zsjx/551375.html
near, far); //创建摄像机camera.position.x = 100;
camera.position.y = 100;
camera.position.z = 100;
camera.lookAt(scene.position);
renderer = new THREE.WebGLRenderer(); //创建一个WebGL渲染器并设置其大小
renderer.setClearColor(new THREE.Color("#000000"));
renderer.shadowMapEnabled = true;
renderer.setSize(window.innerWidth, window.innerHeight);
var ambientLight = new THREE.AmbientLight("#ffffff"); //加入场景光
scene.add(ambientLight);
// var pointLight = new THREE.PointLight("#ffffff"); //加入点光源
// pointLight.position.set(110, 110, 110);
// pointLight.castShadow = //代码效果参考：http://www.zidongmutanji.com/zsjx/141091.html
true;//scene.add(pointLight);
var axes = new THREE.AxisHelper(200); //创建三轴表示
scene.add(axes);
controls = new THREE.TrackballControls(camera); //创建场景旋转缩放事件
controls.rotateSpeed = 2.5;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
sphere = createMesh(new THREE.SphereGeometry(100, 100, 100), "./earth.jpg");
scene.add(sphere);
window.addEventListener('resize', onWindowResize, false);
}
function createMesh(geom, imageFile) {
var texture = THREE.ImageUtils.loadTexture(imageFile);
var mat = new THREE.MeshPhongMaterial({ map: texture });
var mesh = new THREE.Mesh(geom, mat);
return mesh;
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function render() {
requestAnimationFrame(render);
controls.update();
sphere.material.map.needsUpdate = true;
renderer.render(scene, camera);
}
document.getElementById("WebGL-output").appendChild(renderer.domElement);
不知道为什么，我再IE下能显示地球，在chrome下显示不了。
地球贴图下载地址：
