three.js 学习之旅day01

最新推荐文章于 2025-07-01 14:14:07 发布

原创最新推荐文章于 2025-07-01 14:14:07 发布 · 411 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#three.js #obj文件展示到web页面 #3D立体模型 #three #webDL学习心得

obj结合web页面进行展示专栏收录该内容

1 篇文章

订阅专栏

本文介绍使用Three.js创建一个旋转的绿色立方体的基本步骤，涵盖场景、相机和渲染器的设置，以及实时渲染循环的实现。

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

第一个框架的效果是显示一个绿色的正方体<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>canvas { width: 100%; height: 100% }</style>
    <script src="js/three.js"></script>
</head>
<body>
    <script>
        var scene = new THREE.Scene();
        
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
        
        var renderer = new THREE.WebGLRenderer();
        
        renderer.setSize(window.innerWidth, window.innerHeight);
        
        document.body.appendChild(renderer.domElement);
        var geometry = new THREE.CubeGeometry(1,1,1);
        var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
        var cube = new THREE.Mesh(geometry, material); scene.add(cube);
        camera.position.z = 5;
        function render() {
            requestAnimationFrame(render);
            cube.rotation.x += 0.1;
            cube.rotation.y += 0.1;
            renderer.render(scene, camera);
        }
        render();
    </script>
</body>
</html>

一个黑色背景的绿色正方体；在不停的旋转；

三大组建

场景（scene）、相机（camera）和渲染器（renderer）

场景是容器，装其他的东西的，所有的要显示的全部要放到容器里面去，而且只能有一个；

相机决定了那个场景会显示出来，就像人的眼睛视觉方向，场景只有一个但是相机可以有很多个，常用的是透视相机（PerspectiveCamera）

渲染器，渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制渲染器renderer的domElement元素，

表示渲染器中的画布，所有的渲染都是画在domElement上的，所以这里的appendChild表示将这个domElement挂接在body下面，

这样渲染的结果就能够在页面中显示了。

渲染分两种：离线渲染和即时渲染；

离线渲染：我对这个的理解就是电影的帧是先处理好的，如果实时渲染的话，会出现画面卡顿。

实时渲染：就是需要不停的对画面进行渲染，即使画面中什么也没有改变，也需要重新渲染。下面就是一个渲染循环：

     
1
    
2
    
3
    
4
    
5
    
6
    
     function  render() {
 cube.rotation.x  +=  0.1;
 cube.rotation.y  +=  0.1;
 renderer.render(scene, camera);
 requestAnimationFrame(render);
 }

requestAnimationFrame 函数的调用的话，让浏览器执行一次参数中的函数，render 调用requestAnimationFrame ，

requestAnimationFrame调用render 这样就会出现循环 ；游戏里面有挺多这样的循环的；

三者的关系是    场景加载了不同的角色 ----》 相机视角拍到的图片----》传给渲染器，在浏览器里面显示出来。