zoukankan      html  css  js  c++  java
  • three.js

    好久没更新three.js 了,前三章了解了部分基础知识。这一章我们来搞点事情,做点有意思的东西。

    效果如下图:

    因为截图是静止的,实际效果是地球在自转。

    废话不多说,上代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>erath - three.js</title>
        <script src="js/three.js"></script>
        <script src="js/jquery.min.js"></script>
    </head>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
            html,body,.main {
                 100%;
                height: 100%;
                overflow: hidden;
            }
    </style>
    <body>
        <div class="main"></div>
    </body>
    </html>
    <script>
        function Three(className) {
            this.width = $(className).width();
            this.height = $(className).height();
            this.renderer =  new THREE.WebGLRenderer({
                antialias : true   //开启锯齿,默认是false
            });
            this.renderer.setSize(this.width, this.height); // 给渲染区域设置宽高
            this.renderer.setClearColor("white"); // 设置背景色
            $(className).append(this.renderer.domElement); 
        }
        Three.prototype = {
            init:function() {
                this.scence = new THREE.Scene();  // 创建舞台
                
                // 设置视角及参数
                this.camera = new THREE.PerspectiveCamera(45, this.width / this.height, 1, 10000);
                this.camera.position.set(0,0,10);
                this.camera.lookAt(new THREE.Vector3(0, 0, 0));
    
            // 设置灯光及参数
                this.light = new THREE.AmbientLight(0xDDDDDD);
                this.light.position.set(100, 100, 200);
                this.scence.add(this.light);
    
                // 创建角色
                var circle =  new THREE.SphereGeometry(755,50,50);
                var texture = new THREE.TextureLoader();
                
                var material = new THREE.MeshBasicMaterial();
                // 给circle添加背景图片
                material.map = texture.load("images/earth_atmos_4096.jpg",function(){
                    three.renderer.render(three.scence, three.camera);
                });
                three.mesh = new THREE.Mesh(circle,material);
                three.mesh.position.set(0,0,-5000);
                three.scence.add(three.mesh);
            },
            animate:function() {
                requestAnimationFrame(three.animate);
                three.mesh.rotation.y += 0.01;
                three.renderer.render(three.scence, three.camera);
            },
            start:function() {
                this.init();
                this.animate();
            }
        }
        var three = new Three(".main");
        three.start();
    </script>

    这里我把地球图片上传上来,不然没有图片也无法加载。

    最后提醒大家一点,当有图片加载到three.js 时,需要在服务器端运行。不然也会报错。

    今天的three.js 就讲到这里了,下次再会。

  • 相关阅读:
    ural(Timus) 1019 Line Painting
    ACMICPC Live Archive 2031 Dance Dance Revolution
    poj 3321 Apple Tree
    其他OJ 树型DP 选课
    poj 3548 Restoring the digits
    ACMICPC Live Archive 3031 Cable TV Network
    递归循环获取指定节点下面的所有子节点
    手动触发asp.net页面验证控件事件
    子级Repeater获取父级Repeater绑定项的值
    没有列名的数据绑定
  • 原文地址:https://www.cnblogs.com/lafitewu/p/8241987.html
Copyright © 2011-2022 走看看