01、开启ThreeJs之旅

创建日期:2024-06-21
更新日期:2025-01-12
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>01_开启ThreeJs之旅</title>
    <script src="https://cdn.jsdelivr.net/npm/three@0.134.0/build/three.min.js"></script>
</head>
<body>
    <script>
        var scene = 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);
        scene.add(cube);

        camera.position.set(0, 0, 5);

        var render = function () {
            requestAnimationFrame(render);
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
        render();
    </script>
</body>
</html>