HTML5画布阅读Three js Phong材料

最新推荐文章于 2021-05-08 14:59:25 发布

chenliyans

最新推荐文章于 2021-05-08 14:59:25 发布

阅读量901

点赞数

分类专栏：个人学习html5的材料文章标签： Three js Phong材料

个人学习html5的材料专栏收录该内容

1 篇文章 0 订阅

订阅专栏

创建阅读Three js发光的材料，我们可以用meshphongmaterial材料可配置的镜面，颜色，发光，和光亮。镜面反射属性定义光应用于材料的最轻的颜色，颜色的属性定义的物质基础颜色和发光性能，确定材料颜色的阴影。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://www.html5canvastutorials.com/libraries/three.min.js"></script>
    <script defer="defer">
      // revolutions per second
      var angularSpeed = 0.2; 
      var lastTime = 0;
 
      // this function is executed on each animation frame
      function animate(){
        // update
        var time = (new Date()).getTime();
        var timeDiff = time - lastTime;
        var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
        cylinder.rotation.x += angleChange;
        cylinder.rotation.z += angleChange;
        lastTime = time;
 
        // render
        renderer.render(scene, camera);
 
        // request new frame
        requestAnimationFrame(function(){
            animate();
        });
      }
 
      // renderer
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);
 
      // camera
      var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
      camera.position.z = 700;
 
      // scene
      var scene = new THREE.Scene();
                
      // cylinder
      // API: THREE.CylinderGeometry(bottomRadius, topRadius, height, segmentsRadius, segmentsHeight)
      var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(100, 100, 400, 50, 50, false), new THREE.MeshPhongMaterial({
        // light
        specular: '#a9fcff',
        // intermediate
        color: '#00abb1',
        // dark
        emissive: '#006063',
        shininess: 100 
      }));
      cylinder.overdraw = true;
      scene.add(cylinder);

      // add subtle ambient lighting
      var ambientLight = new THREE.AmbientLight(0x222222);
      scene.add(ambientLight);
      
      // directional lighting
      var directionalLight = new THREE.DirectionalLight(0xffffff);
      directionalLight.position.set(1, 1, 1).normalize();
      scene.add(directionalLight);
      
      // start animation
      animate();
    </script>
  </body>
</html>

chenliyans

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5画布阅读Three js Phong材料

创建阅读Three js发光的材料，我们可以用meshphongmaterial材料可配置的镜面，颜色，发光，和光亮。镜面反射属性定义光应用于材料的最轻的颜色，颜色的属性定义的物质基础颜色和发光性能，确定材料颜色的阴影。 body { margin: 0px; padding: 0px; }
复制链接

扫一扫

专栏目录