美文网首页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