WebGL Three.js 绘制地月运动

绘制地月运动

THREE进阶-初级

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1882
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var aspect = SCREEN_WIDTH / SCREEN_HEIGHT;

var container, stats;
var camera, scene, renderer, mesh;
var cameraRig, activeCamera, activeHelper;
var cameraPerspective, cameraOrtho;
var cameraPerspectiveHelper, cameraOrthoHelper;
var frustumSize = 600;

init();
animate();

function init() {

container = document.createElement('div');
    document.body.appendChild(container);

scene = new THREE.Scene();

//相机视觉0
    camera = new THREE.PerspectiveCamera(50, 0.5 * aspect, 1, 10000);
    camera.position.z = 2500;

//相机视觉1
    cameraPerspective = new THREE.PerspectiveCamera(50, aspect, 150, 1000);
    cameraPerspectiveHelper = new THREE.CameraHelper(cameraPerspective);
    scene.add(cameraPerspectiveHelper);

//相机视觉2
    cameraOrtho = new THREE.OrthographicCamera(0.5 * frustumSize * aspect / -2, 0.5 * frustumSize * aspect, frustumSize / 2, frustumSize / -2, 150, 1000);
    cameraOrthoHelper = new THREE.CameraHelper(cameraOrtho);
    scene.add(cameraOrthoHelper);

//显示视觉层
    activeCamera = cameraPerspective;
    activeHelper = cameraPerspectiveHelper;

cameraOrtho.rotation.y = Math.PI;
    cameraPerspective.rotation.y = Math.PI;

cameraRig = new THREE.Group();

cameraRig.add(cameraPerspective);
    cameraRig.add(cameraOrtho);

scene.add(cameraRig);

var geometry = new THREE.BufferGeometry();
    var vertices = [];
    for (var i = 0; i < 10000; i++) {
        //兰德浮动扩散算法绘制星云扩散点
        vertices.push(THREE.Math.randFloatSpread(2000)); // x
        vertices.push(THREE.Math.randFloatSpread(2000)); // y
        vertices.push(THREE.Math.randFloatSpread(2000)); // z
    }
    geometry.addAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
    //星云绘制
    var particles = new THREE.Points(geometry, new THREE.PointsMaterial({
        color: 0x888888
    }));
    scene.add(particles);

renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    container.appendChild(renderer.domElement);

renderer.autoClear = false;

window.addEventListener('resize', onWindowResize, false);
    document.addEventListener('keydown', onKeyDown, false);

}

function onKeyDown(event) {

switch (event.keyCode) {

case 79:
            /*O*/

activeCamera = cameraOrtho;
            activeHelper = cameraOrthoHelper;

break;

case 80:
            /*P*/

activeCamera = cameraPerspective;
            activeHelper = cameraPerspectiveHelper;

break;

}

function onWindowResize(event) {

SCREEN_WIDTH = window.innerWidth;
    SCREEN_HEIGHT = window.innerHeight;
    aspect = SCREEN_WIDTH / SCREEN_HEIGHT;

renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

camera.aspect = aspect;
    camera.updateProjectionMatrix();

cameraPerspective.aspect = aspect;
    cameraPerspective.updateProjectionMatrix();

cameraOrtho.left = -0.5 * frustumSize * aspect / 2;
    cameraOrtho.right = 0.5 * frustumSize * aspect / 2;
    cameraOrtho.top = frustumSize / 2;
    cameraOrtho.bottom = -frustumSize / 2;
    cameraOrtho.updateProjectionMatrix();

}

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
    var r = Date.now() * 0.0005;
    mesh.position.x = 700 * Math.cos(r);
    mesh.position.z = 700 * Math.sin(r);
    mesh.position.y = 700 * Math.sin(r);

mesh.children[0].position.x = 200 * Math.cos(8 * r);
    mesh.children[0].position.z = 200 * Math.sin(8 * r);

if (activeCamera === cameraPerspective) {
        cameraPerspective.fov = 35 + 30 * Math.sin(0.5 * r);
        cameraPerspective.far = mesh.position.length();
        cameraPerspective.updateProjectionMatrix();

cameraPerspectiveHelper.update();
        cameraPerspectiveHelper.visible = true;

cameraOrthoHelper.visible = false;

} else {

cameraOrtho.far = mesh.position.length();
        cameraOrtho.updateProjectionMatrix();

cameraOrthoHelper.update();
        cameraOrthoHelper.visible = true;

cameraPerspectiveHelper.visible = false;

}

cameraRig.lookAt(mesh.position);

renderer.clear();

activeHelper.visible = false;

renderer.setViewport(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
    renderer.render(scene, activeCamera);

}

编译

CSS

HTML

绘制地月运动

THREE进阶-初级

编辑器支持Emmet

快捷键

绘制地月运动

THREE进阶-初级

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：