WebGL Lesson1 First3d

最新推荐文章于 2022-03-29 16:19:44 发布

lmee_

最新推荐文章于 2022-03-29 16:19:44 发布

阅读量560

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： WebGL Three.js

本文链接：https://blog.youkuaiyun.com/havakey/article/details/52300439

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用Three.js创建简单的3D场景。通过几行代码就能实现一个旋转的立方体，展示了WebGL的强大功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

随着各大主流浏览器对HTML5的支持，在浏览器能实现的内容逐渐的丰富起来。典型的就是WebGL.

通过它我们可以直接借助GPU在浏览器上创建逼真的三维场景，动画等。Three.js 是一个出色的JavaScript实现WebGL标准的三维立体库，它可以简化我们创建三维场景的过程。只要几行代码就可以创建一个非常炫的场景。不信？来看：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First three3d.js app</title>
    <style>
        body{margin:0;}
        canvas{width:100%;height:100%;}
    </style>
</head>
<body>
    <script src="js/three.js"></script>
    <script>
       //创建场景
        var scene = new THREE.Scene();
        //视觉角度
        var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
        //调整camera的位置
        camera.position.x= 30;
        camera.position.y= 9;
        camera.position.z= 10;
        camera.lookAt(scene.position);

        //渲染器
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth,window.innerHeight);
        renderer.setClearColor(0x000000);

        //创建几何立方体
        var gemometry = new THREE.CubeGeometry(4,4,4);
        var material = new THREE.MeshBasicMaterial({color:0x22ff22, wireframe:true});
        var cube = new THREE.Mesh(gemometry,material);
        scene.add(cube);


        //把canvas加入到body
        document.body.appendChild(renderer.domElement);

        renderer.render(scene,camera);

    </script>
</body>
</html>

OK，简单吧，至此，我们已经完成第一个例子，运行看看，你会得到以下结果，当然千万别忘了把three.js先加进来。下一课程见：）