Three.js-一个简单的入门demo

淩亂°似流年 2021-11-22 07:48 412阅读 0赞

效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0MjY2MA_size_16_color_FFFFFF_t_70]  
代码如下：three.js的下载有很多种办法，我直接用npm安装three

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>step1</title>
        <script src="./node_modules/three/build/three.js"></script>
        <style>
        * {
            margin: 0;
            padding: 0;
        }
        canvas {
            width: 100%;
            height: 100%;
        }
        </style>
    </head>
    <body>
        <script>
        var scence = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
    
        var geometry = new THREE.BoxGeometry( 1,1,1 );
        var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        var cube = new THREE.Mesh( geometry, material );
        scence.add( cube );
        camera.position.z = 5;
        var animate = function () {
            requestAnimationFrame( animate );
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render( scence, camera );
        }
        animate();
        </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0MjY2MA_size_16_color_FFFFFF_t_70]: /images/20211122/a2aaaa75b9ee430dbd4b32d8825459f0.png