美文网首页Three.js
07three.js太阳系模拟1

07three.js太阳系模拟1

作者: 狂暴机甲 | 来源:发表于2018-04-11 15:53 被阅读6次
image.png

太阳系,嗯,是的,瞎掰的就是9个不同颜色的球球。
外面的8个都绕着中间的红色的太阳做圆周运行。
什么周期、半径、距离都是假的。因为实际的太阳系比例非常丧心病狂。你们感受一下。
本节代码没有什么特别的地方,都是复习前面的内容。代码也是最原始的。
太阳系
打开网页键盘右键不停的按就看到了。

image.png
image.png
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
    camera.position.set(-30,30,40);
    camera.lookAt(scene.position);

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth,window.innerHeight);
    renderer.setClearColor('#363636');

    function drawSphere(x,y,z,r,colorS) {
        var sphereGeometry = new THREE.SphereGeometry(r,20,20);
        var sphereMaterial = new THREE.MeshLambertMaterial({
            color:colorS
        });
        var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
        sphere.position.x = x;
        sphere.position.y = y;
        sphere.position.z = z;
        scene.add(sphere);
        return sphere;
    }

    sphere1 = drawSphere(0,0,0,4,0xFF0000);
    sphere2 = drawSphere(8,0,0,1.5,0xFFFF00*Math.random());
    sphere3 = drawSphere(12,0,0,1,0xFFFF00*Math.random());
    sphere4 = drawSphere(15,0,0,1.2,0xFFFF00*Math.random());
    sphere5 = drawSphere(18,0,0,1.4,0xFFFF00*Math.random());
    sphere6 = drawSphere(22,0,0,1.3,0xFFFF00*Math.random());
    sphere7 = drawSphere(25,0,0,2.3,0xFFFF00*Math.random());
    sphere8 = drawSphere(29,0,0,2.1,0xFFFF00*Math.random());
    sphere9 = drawSphere(33,0,0,1.9,0xFFFF00*Math.random());


    var ambientLight = new THREE.AmbientLight('#222222');
    scene.add(ambientLight);
    var spotLight = new THREE.SpotLight(0xFFFFFF);
    spotLight.position.set(-40,80,-40);
    scene.add(spotLight);

    document.body.appendChild(renderer.domElement);

    renderer.render(scene,camera);

    var speed2 = 2*Math.PI*Math.random();
    var speed3 = 2*Math.PI*Math.random();
    var speed4 = 2*Math.PI*Math.random();
    var speed5 = 2*Math.PI*Math.random();
    var speed6 = 2*Math.PI*Math.random();
    var speed7 = 2*Math.PI*Math.random();
    var speed8 = 2*Math.PI*Math.random();
    var speed9 = 2*Math.PI*Math.random();
    function run() {
        speed2 += 0.014/2;
        speed3 += 0.022/2;
        speed4 += 0.034/2;
        speed5 += 0.031/2;
        speed6 += 0.034/2;
        speed7 += 0.044/2;
        speed8 += 0.047/2;
        speed9 += 0.049/2;
        sphere2.position.x = 8*Math.cos(speed2);
        sphere2.position.z = 8*Math.sin(speed2);
        sphere3.position.x = 12*Math.cos(speed3);
        sphere3.position.z = 12*Math.sin(speed3);
        sphere4.position.x = 15*Math.cos(speed4);
        sphere4.position.z = 15*Math.sin(speed4);
        sphere5.position.x = 18*Math.cos(speed5);
        sphere5.position.z = 18*Math.sin(speed5);
        sphere6.position.x = 22*Math.cos(speed6);
        sphere6.position.z = 22*Math.sin(speed6);
        sphere7.position.x = 25*Math.cos(speed7);
        sphere7.position.z = 25*Math.sin(speed7);
        sphere8.position.x = 29*Math.cos(speed8);
        sphere8.position.z = 29*Math.sin(speed8);
        sphere9.position.x = 33*Math.cos(speed9);
        sphere9.position.z = 33*Math.sin(speed9);
        renderer.render(scene,camera);
        requestAnimationFrame(run);
    }
    run();

相关文章

网友评论

    本文标题:07three.js太阳系模拟1

    本文链接:https://www.haomeiwen.com/subject/brhzhftx.html