Three.js快速入门

你的南瓜呀

已于 2023-10-13 16:09:46 修改

阅读量45

点赞数

分类专栏：知识学习文章标签： javascript webgl 3d

于 2023-10-13 16:08:22 首次发布

本文链接：https://blog.csdn.net/weixin_47159518/article/details/133810367

版权

知识学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Three.js是一款基于原生WebGL封装通用Web 3D引擎，可运用小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域。

在学习WebGL和Three.js之前，请先掌握基本的web知识。

学习阶段，如果只是想查看效果。推荐vscode安装live-server插件，打开对应.html文件，右键点击Open with Live Server即可

构建3D场景三要素：场景Scene、相机Camera、渲染器Renderer

<!DOCTYPE html>
<html>
<head>
    <title>webgl学习</title>
    <script src="https://cdn.jsdelivr.net/npm/three@0.130.0/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.130.0/examples/js/controls/OrbitControls.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/stats.js@0.17.0/build/stats.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dat.gui@0.7.7/build/dat.gui.min.js"></script>
    <style type="text/css">
      body{
        margin: 0;
        overflow: hidden;
      }
   </style>
</head>
<body>
  <script>
    // 创建渲染器对象
    // 渲染器锯齿属性.antialias
    const renderer = new THREE.WebGLRenderer({
      antialias:true,
    });
    // 或 renderer.antialias = true,
    // 定义threejs输出画布的尺寸(单位:像素px)
    const width = window.innerWidth;
    const height = window.innerHeight;
    renderer.setSize(width, height); 
    window.addEventListener('resize',()=>{
      const width = window.innerWidth;
      const height = window.innerHeight;
      renderer.setSize(width, height);
    })
    // 设置背景颜色
    renderer.setClearColor(0xffffff);
    // 获取你屏幕对应的设备像素比.devicePixelRatio告诉threejs,以免渲染模糊问题
    renderer.setPixelRatio(window.devicePixelRatio);
    // 将canvas画布插入任意元素
    document.body.appendChild(renderer.domElement);

    // 创建3D场景对象Scene
    const scene = new THREE.Scene()
    // 创建一个球体
    const geometry = new THREE.SphereGeometry( 100, 100, 100 );
    // 使用无光泽表面的材质，没有镜面高光
    const material = new THREE.MeshLambertMaterial({
      color: 0xff0000, //设置材质颜色
      transparent:true,//开启透明
      opacity:1,//设置透明度
    }); 
    // 使用上述球体和材质创建一个3d模型
    const mesh = new THREE.Mesh(geometry, material);
    // 设置模型位置
    mesh.position.set(100,0,0);
    // 将模型加入场景中
    scene.add(mesh);

    // 添加辅助观察坐标系
    // three.js坐标轴颜色红R、绿G、蓝B分别对应坐标系的x、y、z轴，对于three.js的3D坐标系默认y轴朝上
    const axesHelper = new THREE.AxesHelper(100);
    scene.add(axesHelper);

    // 创建透视投影相机
    const camera = new THREE.PerspectiveCamera();
    camera.position.set(-1000, 0, 0);
    //指向mesh对应的位置
    camera.lookAt(mesh.position);

    // TODO:为什么在render之前和之后的lookAt结果不一样
    const lookAtPosition1 = new THREE.Vector3();
    lookAtPosition1.setFromMatrixPosition(camera.matrixWorld);
    console.log("lookAt位置:", lookAtPosition1); // p {x: 0, y: 0, z: 0}

    // 创建环境光
    const ambient = new THREE.AmbientLight(0xffffff, 1);
    ambient.position.set(-100, 0, 0);
    scene.add(ambient)

    //创建stats对象
    const stats = new Stats();
    //stats.domElement:web页面上输出计算结果,一个div元素，
    // stats.domElement显示：渲染帧率  刷新频率,一秒渲染次数 
    stats.setMode(0);//默认模式
    //stats.domElement显示：渲染周期 渲染一帧多长时间(单位：毫秒ms)
    // stats.setMode(1);
    document.body.appendChild(stats.domElement);

    // 实例化一个gui对象 可视化改变三维场景
    const gui = new dat.GUI();
    const obj = {
      color:0xff0000,
    };
    // .addColor()生成颜色值改变的交互界面
    gui.addColor(obj, 'color').onChange(function(value){
        mesh.material.color.set(value);
    });

    // 渲染函数
    function render() {
      //requestAnimationFrame循环调用的函数中调用方法update(),来刷新时间
      stats.update();
      renderer.render(scene, camera); //执行渲染操作
      requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧
    }
    render();

    // 设置相机控件轨道控制器OrbitControls
    const controls = new THREE.OrbitControls(camera, renderer.domElement);
    // 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
    controls.addEventListener('change',render);


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

参考网站：学前基础、如何学习3D | Three.js中文网

你的南瓜呀

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Three.js快速入门

Three.js是一款基于原生WebGL封装通用Web 3D引擎，可运用小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域。学习阶段，如果只是想查看效果。推荐vscode安装live-server插件，打开对应.html文件，右键点击。在学习WebGL和Three.js之前，请先掌握基本的web知识。
复制链接

扫一扫