master

分支 (1)

管理

管理

master

three.js
/
01-threeJs的基础使用.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <script type="module">
        // 1：引入three.js
        import * as THREE from './js/three.module.js';
        // 2：创建场景对象
        let scene = new THREE.Scene()
        console.log('场景', scene);
        // 3：创建网络模型
        // 创建了一个长、宽、高分别是100的立方体
        let Geometry = new THREE.BoxGeometry(100, 100, 100);
        //设置立方体的材质为网格材质（一种非光泽表面的材质，没有镜面高光）颜色为16进制
        let Material = new THREE.MeshLambertMaterial({ color: 0x0000ff });
        // 创建网格模型对象
        let materialMesh = new THREE.Mesh(
            Geometry,
            Material
        )
        // 添加到场景中
        scene.add(materialMesh)

        // 4：创建光源
        // 创建环境光源
        let Light = new THREE.AmbientLight(0x444444);
        // 创建点光源
        let Point = new THREE.PointLight(0xffffff);
        Point.position.set(300, 200, 200) // x, y, z 轴
        // 添加到场景中
        scene.add(Light, Point)

        // 5：创建相机
        let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, .1, 1000);
        // 设置相机的位置
        camera.position.set(0, 0, 200) //x,y,z轴 距离越远 显示的内容越小

        // 6：渲染
        // Three.js是基于原生WebGL封装运行的三维引擎。
        // 所以浏览器利用代码new THREE.WebGLRenderer()就会渲染出一帧图像
        let renderer = new THREE.WebGLRenderer()
        // 设置渲染区域尺寸
        renderer.setSize(window.innerWidth, window.innerHeight);
        //指定场景、相机作为参数
        renderer.render(scene, camera)
        //body元素中插入canvas对象
        document.body.appendChild(renderer.domElement);

    </script>
</body>

</html>