Three.js的入门+案例

最新推荐文章于 2024-05-24 11:42:37 发布

置顶双门洞成东日ovo

最新推荐文章于 2024-05-24 11:42:37 发布

阅读量1.2k

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_46077258/article/details/127556864

版权

1.什么是Three.js?

2.Three.js的主要对象(三要素：场景、相机、渲染器)

3.实例

4.实例效果

1.什么是Three.js?

three表示3D的意思，js表示javascript的意思。那么合起来，three.js就是使用javascript 来写3D程序的意思，threejs是对webgl的封装。

2.Three.js的主要对象(三要素：场景、相机、渲染器)

场景(Scene):是物体、光源等元素的容器
相机(Camera):控制视角的位置、范围以及视觉焦点的位置,一个3D环境中只能存在一个相机
渲染器(Renderer):指定渲染方式，如webGL\canvas2D\Css2D\Css3D等
网络模型(Mesh):包括二维物体（点、线、面）、三维物体、粒子（顶点和面的集合称为几何）
光影(Light):包括全局光、平行光、点光源
控制器(Control):相机控件，可通过键盘、鼠标控制相机的移动

3.实例

<!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>my first Three.js</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/three.js/0.145.0/three.js"></script>
</head>

<body>
    <script>
        // 1.创建一个场景
        const scene = new THREE.Scene();
        // 2.创建一个照相机
        // 透明摄像机，第一个参数fov，视角，第二个参数aspect长宽比，第三个参数近截面和远截面
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5;
        // 3.创建一个渲染器
        const renderer = new THREE.WebGLRenderer();
        //设置render的渲染范围
        renderer.setSize(window.innerWidth, window.innerHeight);
        //将场景元素添加到body中
        document.body.appendChild(renderer.domElement);

        // 4.定义一个物体的形状
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        // 设置正方体的材质以及颜色
        const material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
        // mesh定义了一个物体，物体由geometry和material定义组成，形状加外观
        const cube = new THREE.Mesh(geometry, material);
        // 将这个物体添加到场景中去
        scene.add(cube);
        // 设置点光源
        const spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40, 60, -10);
        scene.add(spotLight)
        // 设置物体动起来
        function animate() {

            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
            requestAnimationFrame(animate);
        }
        animate();

        console.log('打印场景API', THREE.Scene);
    </script>
</body>

</html>