three.js ---- 3d页面开发入门

准备工作

1.运用three.js进行3d开发，其实和页面编程一样，首先需要在html文件中引入three.js。Three.js使用面向对象的方式来构建程序，它包含3个基本对象： 场景（scene）, 相机（camera）, 以及一个渲染器（renderer）。

第一步： 引入three.js.

    <!DOCTYPE html>
    <html>
        <head>
    <meta charset=utf-8>
    <title>My first Three.js app</title>
        </head>
        <body>
    <script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script>
    <script>
        // 这个位置是留给后面初始化和开发3d页面的js代码
    </script>
        </body>
    </html>

第二步： 用js代码创建3D场景（scene），非常简单就一行代码.

      let scene = new THREE.Scene();

第三步：用js代码创建相机（camera），再确定其位置,下面代码也就两行，但是多了参数。来说明一下参数的作用：

    //fov 代表视角 我们观察位置的视觉
    //aspect 宽高比 简单理解为确定3d页面的宽和高
    //near 最近看到 滚轮缩放的最小距离
    //far 最远看到 滚轮缩放的最大距离
    let camera = PerspectiveCamera( fov, aspect, near, far );
    camera.position.set( x, y,z);//x:水平方向位置， y: 竖直方向位置，z:垂直屏幕方向位置

一般给下面这组值来确定相机能够看得的位置：

        let camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
        camera.position.set( 0, 100,300 );

第四步：用js代码创建渲染器（renderer),设置渲染页面大小，一般为相机确定的3d页面大小,最后一行是把渲染器加入页面.

        let renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild(renderer.domElement );

第五步：给3d页面添加一个白色环境光这样我们才能够看见物体：

    //环境光
    let ambientLight = new THREE.AmbientLight( 0xf5f5f5);//创建光
    scene.add( ambientLight );//加入到场景

最后一步：开始时刻渲染3d页面，虽然完成了最后一步，但是运行代码后我们还是不能看见任何东西，那是因为我们只渲染了3d页面，并没有添加事物到页面，接下来我们就来添加一个球吧：

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

添加个球吧,添加了下面代码再运行下发现3d页面上有一个红色的球了,但是我们不能用鼠标来控制它，那是因为three.js里面没有来写鼠标的控制3d页面，我们还需要引入鼠标控制插件OrbitControls.js。

    let ball= new THREE.SphereGeometry( 5, 32, 32 );//创建球
    let ballColor= new THREE.MeshBasicMaterial( {color: 0xffff00} );//创建材质色，用来给球上色的
    let sphere = new THREE.Mesh( ball, ballColor);//给球上色
    scene.add( sphere );//把球加入到场景
再添加格子辅助线方便我们观察和调整物体位置：
    let grid = new THREE.GridHelper( 400, 30, 0xcccccc, 0xcccccc );//创建辅助线
    scene.add( grid );//加入场景

引入OrbitControls.js，然后初始化控件，在运行页面发现可以用鼠标来控制这个球了，就问你完不完美，beautiful 不 beautiful;

    <script src="/libs/OrbitControls.js"></script>

    let controls =newTHREE.OrbitControls(camera);
    //通过.enableZoom属性可以控制是否允许鼠标中键缩放场景，.enableZoom属性默认值true。
    controls.enableZoom =true;//允许缩放`
    controls.minDistance = 1;//能够缩放多小
    controls.maxDistance = 2000;////能够放大多大

    //通过.enableRotate属性可以控制是否允许鼠标左键旋转场景，.enableRotate属性默认值true。
    controls.enableRotate =true;//允许旋转

最终代码：运行一下，查看效果

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset=utf-8>
        <title>demo1</title>
    </head>
    <body>
        <script src="lib/three.min.js"></script>
        <script src="lib/OrbitControls.js"></script>
        <script>
            // 这个位置是留给后面初始化和开发3d页面的js代码
            let scene = new THREE.Scene();
            let camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 2000 );
            camera.position.set( 0, 50,300 );   
            let renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild(renderer.domElement );
            // 给场景添加一个环境光
            let ambientLight = new THREE.AmbientLight( 0xf5f5f5);
            scene.add( ambientLight );
            let grid = new THREE.GridHelper( 400, 30, 0xcccccc, 0xcccccc );
            scene.add( grid );
            let ball = new THREE.SphereGeometry( 5, 32, 32 );//5:球半径 第一个32：水平分割面的数量. 第二个32：垂直分割面的数量.
            let ballColor = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
            let cube = new THREE.Mesh( ball , ballColor );
            scene.add( cube );
            let controls =new THREE.OrbitControls(camera, renderer.domElement);
            controls.enableZoom =true;//允许缩放
            //设置相机移动距离
            controls.minDistance = 1;
            controls.maxDistance = 2000;
            controls.enableRotate =true;
            function render() { 
                requestAnimationFrame( render );
                renderer.render( scene, camera );
            } 
            render();
        </script>
</body>
</html>

three.js的中文文档踏得网

 

出处：https://www.cnblogs.com/lmf-sky/p/12187733.html

推荐查看three.js系列文章：https://www.cnblogs.com/vadim-web/category/1599621.html

posted on   jack_Meng  阅读(1978)  评论(0)  编辑  收藏  举报

编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
历史上的今天：
2014-01-14 详解SID之终结篇
2014-01-14 Windows中的SID详解

导航

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛

喜欢请打赏

扫描二维码打赏

支付宝打赏

了解更多

主题色彩