<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ceshi</title>
<script type="text/javascript" src=".\build\three.js"></script>
<script src=".\examples\js\controls\TrackballControls.js"></script>
<script src=".\examples\js\controls\DragControls.js"></script>
<style>
body
{
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<!-- 作为Three.js渲染器输出元素 -->
<div id="WebGL-output">
</div>
<!-- 第一个 Three.js 样例代码 -->
<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, 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 = 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); </script>
</body>
</html>
不知道为什么，我再IE下能显示地球，在chrome下显示不了。
地球贴图下载地址：https://pan.baidu.com/s/1kVflpNh