01、创建场景

创建日期:2024-07-08
更新日期:2024-07-08
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>01.创建场景</title>
    <link href="css/common.css" rel="stylesheet" />
    <script src="js/three.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.z = 5;

        function render() {
            requestAnimationFrame(render);
            renderer.render(scene, camera);

            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
        }
        render();
    </script>
</body>
</html>