zoukankan      html  css  js  c++  java
  • 【星辰大海】flytu.net进阶计划(二)3D太阳系立体运动

    【星辰大海】flytu.net进阶计划(一)2D地月系圆周运动

    【星辰大海】flytu.net进阶计划(二)3D太阳系立体运动

    【星辰大海】flytu.net进阶计划(三)注册登陆互动

    设计知识:WebGL、Three.js、太阳系星体参数

    想完全自己实现还有点不现实啊!先借助Three.JS弄个Demo:日-地-月系:在线演示

    <!doctype html>
    
    <html>
    
    <head>
    
    <title> Testing</title>
    <script src = "Three.js"> </script>
    <script>
    
    function solarSys(){
    
    document.getElementById("test").innerHTML = "Testing";
    
    var geo = new THREE.SphereGeometry(0.5,25,25);
    var mater = new THREE.MeshBasicMaterial({color:0xff0000,wireframe:true});
    var sun = new THREE.Mesh(geo,mater);
    //不会改参数,只好笨笨的再来一遍,Three.js没有找到好的文档
    geo = new THREE.SphereGeometry(0.25,25,25);
    mater = new THREE.MeshBasicMaterial({color:0x0000ff,wireframe:true});
    var eath = new THREE.Mesh(geo,mater);
    eath.position.set(3,0,0);
    
    geo = new THREE.SphereGeometry(0.05,25,25);
    mater = new THREE.MeshBasicMaterial({color:0xa9a9a9,wireframe:true});
    var moon = new THREE.Mesh(geo,mater);
    moon.position.set(0.4,0,0);
    eath.add(moon);
    //地球公转轨道
    var sys = new THREE.Object3D()
    sys.add(eath);
    
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(1440,800);
    
    var canvas = document.getElementById("canvas");
    canvas.appendChild(renderer.domElement);
    
    var scene = new THREE.Scene();
    scene.add(sun);
    scene.add(sys);
    
    var camera = new THREE.PerspectiveCamera(45,1440/800,0.1,100);
    camera.position.set(0,1,10);
    //每次刷新都会创建一个animate?总感觉函数这样套着来内存会爆:)
    function animate(){
    //这个是WebGL带的还是Three.js的?不知道支不支持延迟参数 requestAnimationFrame(animate); sun.rotateX(Math.PI
    /180); eath.rotateY(Math.PI/120); eath.rotateZ(Math.PI/120) moon.rotateY(Math.PI/160); sys.rotateY(Math.PI/900); renderer.render(scene,camera); } animate(); } </script> </head> <body onload = "solarSys()"> <h1 id = "test"> test</h1> <span id = "canvas" width = "1440" height = "800"> </span> </body> </html>
  • 相关阅读:
    课程开始的第一次作业
    第四次寒假作业——实现五种语言的选择
    关于改良报告与学习总结(Ⅰ)
    Vue路由守卫之路由独享守卫
    Vue路由守卫之组件内路由守卫
    Vue中如何插入m3u8格式视频,3分钟学会!
    Vue中如何使用less
    第一章 初识爬虫
    【JQuery】注册中实现图片预览
    【Python】多种方式实现生成验证码
  • 原文地址:https://www.cnblogs.com/flytu/p/4330447.html
Copyright © 2011-2022 走看看