threejs 绘制球

最新推荐文章于 2023-09-19 13:44:49 发布

td092

最新推荐文章于 2023-09-19 13:44:49 发布

阅读量1.5k

点赞数

分类专栏：编程基础

欢迎交流，有评论就更

本文链接：https://blog.csdn.net/weixin_38258767/article/details/107725602

版权

编程基础专栏收录该内容

108 篇文章 4 订阅

订阅专栏

<html>
<head>
    <title>Sphere</title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
    <script src = "/js/three/three.js"></script>

    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight,0.1,1000);
        camera.position.z = 5;
        var renderer = new THREE.WebGLRenderer({antialias: true});

        renderer.setClearColor("#e5e5e5");
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        window.addEventListener('resize',()=>{
            renderer.setSize(window.innerWidth,window.innerHeight);
            camera.aspect = window.innerWidth/window.innerHeight;
            camera.updateProjectionMatrix();
        })

        var geometry = new THREE.SphereGeometry(1,10,10);
        var material = new THREE.MeshLambertMaterial({color: 0xFFCC00});
        var mesh = new THREE.Mesh(geometry,material);
        scene.add(mesh);

        var light = new THREE.PointLight(0xFFFFFF,1,500);
        light.position.set(10,0,25);
        scene.add(light);

        renderer.render(scene,camera);
    </script>

</body>
</html>

结果：
在这里插入图片描述
需要安装vscode插件live server

td092

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
threejs 绘制球

<html><head> <title>Sphere</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% } </style></head><body> <script src = "/js/three/three.js"></scrip
复制链接

扫一扫