three.js学习笔记（一）解决无法访问本地图片问题-一一网

写在前面，参考链接：
官网文档链接： www.webgl3d.cn/threejs/doc… （如下，最好能跟做一遍，会对基础API有所熟悉）

1.1.png
一个场景的基本构成（主要元素）

来个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="https://juejin.cn/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="https://juejin.cn/post/three.min.js"></script><!-- 核心 -->
<script src="https://juejin.cn/post/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:参考www.webgl3d.cn/threejs/doc…
从本地的服务器运行文件，访问运行在本地服务器上的文件。
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…