three.js 实例 --Linson博客

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="three.js"></script>
</head>
<body>

<script>
    //场景
    var scene = new THREE.Scene();

    var width = window.innerWidth;
    var height = window.innerHeight;
    //相机
    //最近可以看到完整物体的距离1米，最远可以看到物体的距离1000米（只有在这个范围距离才能被看到）
    var camera = new THREE.PerspectiveCamera(75, width / height, 1, 100);
    //渲染器
    var renderer = new THREE.WebGL1Renderer();
    //白色清屏
    renderer.setClearColor('#FFFFFF');

    renderer.setSize(width, height);
    document.body.appendChild(renderer.domElement);
    //几何体（2*2*2d ）
    var geometry = new THREE.CubeGeometry(2, 2, 2);
    //材质
    var material = new THREE.MeshBasicMaterial({color: 0xff0000});
    //网格
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    //默认camera.position.z为0，在物体的中心点上，需移动
    camera.position.z = 5;

    function render() {
        //不断渲染
        requestAnimationFrame(render);
        cube.rotation.x += 0.01;
        //cube.rotation.z += 0.01;
       // camera.position.z -=0.5;
        renderer.render(scene, camera);
    }

    render();
</script>
</body>
</html>
three.js 实例

2021-02-25 13:34:12 阅读:2 编辑
