- 写在前面，参考链接：
- 官网文档链接： web.h3399.cn/WebGL_API.h…
- （如下，最好能跟做一遍，会对基础API有所熟悉）
一个场景的基本构成（主要元素）
- 来个demo：一个不太完美的地球
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../../css/common.css">
<style>
body{
width:100%;
height:100%;
}
#divEarth{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="divEarth"></div>
</body>
</html>
<script src="./three.min.js"></script><!-- 核心 -->
<script src="js/controls/OrbitControls.js"></script> <!-- 控制器 -->
<script>
var handle;
var scene = new THREE.Scene(); // scene
scene.add(new THREE.HemisphereLight('#ffffff', '#ffffff', 1)); //光线
var camera = new THREE.PerspectiveCamera(20, window.innerWidth/window.innerHeight, 1, 10000); //相机
camera.position.set(0,0,200);
var renderer = new THREE.WebGLRenderer({ // 渲染器
alpha: true, //透明
antialias: true //抗锯齿
})
renderer.autoClear = false;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 初始化轨道控制器
orbitcontrols = new THREE.OrbitControls(camera, renderer.domElement);
orbitcontrols.enableDamping = true; //动画循环使用时阻尼或自转 意思是是否有惯性
// 创建地球
var earthTexture = new THREE.TextureLoader().load("images/earth.jpg");
earthBall = new THREE.Mesh(new THREE.SphereGeometry(30,50,50), new THREE.MeshBasicMaterial({
map: earthTexture
}));
earthBall.layers.set(0);
scene.add(earthBall); //添加场景
// 渲染
render();
function render(){
if(handle){
cancelAnimationFrame(handle);
}
renderer.clearDepth();
// 自转 自转速度（正数自西向东）
scene.rotation.y +=0.01;
renderer.render(scene, camera);
orbitcontrols.update();
handle = requestAnimationFrame(render);
}
</script>
效果图：
- 一些问题：
1.Q：地球图片来源？ A：视觉中国搜索地球贴图
2.Q: 图片加载失败，threejs默认不能访问本地纹理图片
var earthTexture = new THREE.TextureLoader().load("images/earth.jpg");A:参考threejs.org/docs/index.… 从本地的服务器运行文件，访问运行在本地服务器上的文件。 node Server: npm install http-server -g 安装node后执行 http-server . -p 8000； python2.x Server: python -m SimpleHTTPServer 启动本地服务后，访问http://localhost:8000 ； python3.x Server: python -m http.server 8000。 我选择python3，在当前demo目录下CMD执行上面的命令，启动本地服务，浏览器访问：http://localhost:8000/， 我的目录结构：点击demoEarth.html文件就可以啦！over...
