master

分支 (1)

管理

管理

master

threejs_exercise
/
14-earth.html

<!DOCTYPE html>
<html>

<head>
  <title>My first three.js app</title>
  <style>
    body {
      margin: 0;
    }

    canvas {
      width: 100%;
      height: 100%
    }
  </style>
</head>

<body>
  <script src="js/three.js"></script>
  <script src="./js/stats.min.js"></script>
  <script src="./js/OrbitControls.js"></script>
  <script>
    // 创建创建
    var scene = new THREE.Scene();
    // 创建透视相机
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    // 创建渲染器
    var renderer = new THREE.WebGLRenderer({
      antialias: true
    });
    // 设置渲染器的尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    scene.background = new THREE.Color(0xccccccc);

    // 雾化效果
    scene.fog = new THREE.Fog(0xffff00, 0.15, 100)

    new THREE.OrbitControls(camera, renderer.domElement);

    // 创建几何体
    var geometry = new THREE.SphereGeometry(2, 30, 30);
    // 创建材质
    // var material = new THREE.MeshBasicMaterial({
    //   color: 0x00ff00,
    //   wireframe: true // 渲染成功线框图
    // });

    // var texture = THREE.ImageUtils.loadTexture('./img/earth.jpg');

    var loader = new THREE.TextureLoader();
    var mesh = null;
    var mesh1 = null;

    // loader.load('img/jx.jpg', function (texture) {
    //   var material = new THREE.MeshBasicMaterial({
    //     map: texture,
    //     overdraw: 0.5
    //   });
    //   mesh = new THREE.Mesh(geometry, material);
    //   scene.add(mesh);
    //   mesh.position.set(-2.5, 0, 0);
    // });

    loader.load('./img/earth.jpg', function (texture) {
      var material = new THREE.MeshPhongMaterial({
        map: texture,
        overdraw: 0.5
      });
      mesh1 = new THREE.Mesh(geometry, material);
      scene.add(mesh1);
      mesh1.position.set(0, 0, 0);
    });


    // var texture = THREE.TextureLoader('./img/earth.jpg');
    // var mat = new THREE.MeshPhongMaterial({
    //   map: texture
    // });
    // var mesh = new THREE.Mesh(geometry, mat);
    // 集合  mesh 网络
    // var cube = new THREE.Mesh(geometry, material);

    // scene.add(mesh);
    // 点光源
    var light = new THREE.PointLight(0xffffff, 1, 1000);
    light.position.set(0, 3, 3);
    light.power = 10 * Math.PI;
    scene.add(light);

    var sphereSize = 1;
    var pointLightHelper = new THREE.PointLightHelper(light, sphereSize);

    scene.add(pointLightHelper);

    // 从正上方照射过来的白色平行光，0.5的光强。

    var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
    directionalLight.position.set(5, 5, 5);
    directionalLight.power = 10 * Math.PI;
    scene.add(directionalLight);

    var pointLightHelper = new THREE.DirectionalLightHelper(directionalLight);
    scene.add(pointLightHelper);

    var light = new THREE.AmbientLight(0xffffff); // soft white light
    scene.add(light);


    camera.position.z = 5;
    // 动画
    var animate = function () {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
      // mesh.rotation.y += 0.01;
      mesh1.rotation.y += 0.01;
    };

    animate();
  </script>
</body>

</html>