使用 three.js 绘制三维图形

http://yige.org/tags/yige.php?filename=div_test

可以到以上网址测试运行结果

<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.0/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/three@0.117.1/build/three.min.js"></script>
<div class="ui segment" id="cube">
 &nbsp;
</div>
<script>
$(document).ready(function () {
    var root = $('#cube');
    var ratio = 1.77;
    var width = root.width();
    var height = width / ratio;

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, ratio, 0.1, 1000);
    var renderer = new THREE.WebGLRenderer({
        antialias: true
    });

    renderer.setSize(width, height);
    root.append(renderer.domElement);

    var geometry = new THREE.BoxGeometry();
    var material = new THREE.MeshBasicMaterial({
        color: 0x00ff00
    });
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    camera.position.z = 5;

    function animate() {
        requestAnimationFrame(animate);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render(scene, camera);
    }
    animate();

    $(window).resize(function () {
        console.log('resize');
        var root = $('#cube');
        var width = root.width();
        var height = width / ratio;
        renderer.setSize(width, height);
    });

});
</script>

使用 function-plot.js 绘制函数图像

使用 three.js 绘制三维图形

使用 function-plot.js 绘制函数图像

使用 three.js 绘制地球