ThreeJS学习笔记（2）-场景创建

最新推荐文章于 2025-06-05 10:36:06 发布

转载最新推荐文章于 2025-06-05 10:36:06 发布 · 625 阅读

ThreeJS 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了three.js的基本使用方法，包括创建3D场景、添加几何体和材质，以及如何设置渲染器进行基本的3D渲染。提供了从搭建环境到运行首个3D立方体实例的详细步骤。

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

上一篇大概讲了一下three.js是什么东西，本节给大家介绍以下几个点：

1，能做什么？
2，做了什么？
3，怎么做？

1，能做什么？
游戏、虚拟漫游场景、产品三维展示等都可以，只要有人说：如果谁可以在网页里面做一个无需插件的3D场景，我就给他投资1个亿，那你可以站出来了!轻松融资1个亿！

2，做了什么？
看three.js提供的在线案例吧大家可以看看案例：https://threejs.org/

3，怎么做？
第一步：打开https://threejs.org/；
第二步：点击左侧面板中的“source code”，three.js的github页面被打开；
第三步：下载ZIP文件到本地；
下载完、解压后的目录如下：[pic3]
在该目录下，创建mytest.js即可开始创建你的3D场景了！

官方文档，在https://threejs.org/左侧第一行“documentation”,地址是：https://threejs.org/docs/index.html#Manual/Introduction/Creating_a_scene

下面我们测试第一个three.js实例.

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- 字符格式设定 -->
        <meta charset="utf-8">
        <!-- 网页的标题 -->
        <title>第一个three.js脚本</title>
        <!-- 这里的样式，不熟悉的朋友可以CSS基础看看，这里不做太多解释了。 -->
        <style >
            body{
                margin:0; 
            }
            canvas{
                width:100%;
                height:100%;
            }
        </style>
    </head>
    <body>
     <!-- 引用build文件夹里的three.js    -->
    <script src="../build/three.js"> </script>
    <!-- 写JS都在下面了。。。 -->
    <script type="text/javascript" >
        // 开始你的three.js脚本        
        // 
        // 声明场景、相机、渲染器
        var scene ,camera, renderer;
        // 构造场景，无参数
        scene=new THREE.Scene();


        // 相机有多种，以后详细介绍；
        // 这里我们构造透视相机，4个参数分别是：
        // 视野角fov , 长宽比aspect【宽度/高度，】，视锥体渲染最小值，视锥体最大值
        camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,10000);
        //构造渲染器
        renderer=new THREE.WebGLRenderer();
        // 设定渲染尺寸，这里选定窗口尺寸
        renderer.setSize(window.innerWidth,window.innerHeight);
        //渲染缓存颜色。不做处理，场景背景是黑色的。这里设定白色。
        //renderer.setClearColor(0xFFFFFF,1);
        //定义几何体，cube ：3D立方体
        //构造自带Box几何体，长宽高1,1,1
        var geometry = new THREE.BoxGeometry(1,1,1);
        //需要制定几何体材质，3D里面的概念。需要给几何体制定一个材质，并给一个颜色。
        var material = new THREE.MeshBasicMaterial({color:0x00ff00});
        //构造一个cube几何体 ，指定几何信息和材质
        var cube=new THREE.Mesh(geometry,material);
        // 加入到场景中去
        scene.add(cube);
        // 相机位置调远，保证可以看到 3D立方体
        camera.position.z=5;
        // 最后。。。。必须要把渲染的元素加入到html文档里面，这样才能显示！
        document.body.appendChild(renderer.domElement);
        // 这里是循环渲染。保证显卡每一帧都要渲染场景里面的物体！
        function render(){


            requestAnimationFrame(render);
            cube.rotation.x += 0.01; 
            cube.rotation.y += 0.01;


            renderer.render(scene,camera);     
        }
        render();
    </script>
    </body>
</html>

运行结果如下：