【学习记录】Three.js

好锅煮好饭

已于 2022-09-29 10:22:52 修改

阅读量371

点赞数

分类专栏： three.js 文章标签：学习 html5 3d 前端 js

于 2022-09-15 20:23:04 首次发布

本文链接：https://blog.csdn.net/qq_54224923/article/details/126878925

版权

three.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、学习资料

**
1.入门教程：
http://ourjs.com/wiki/view/three
数字孪生技术底层实现技术框架之一。
2.一些例子
分享数百个 HT 工业互联网 2D 3D 可视化应用案例之 2019 篇
3.数百个 HTML5 例子学习 HT 图形组件

掌握 HT 基础：
1、先入门手册 http://www.hightopo.com/guide/guide/core/beginners/ht-beginners-guide.html
2、看数据模型 http://www.hightopo.com/guide/guide/core/datamodel/ht-datamodel-guide.html
3、阅矢量手册 http://www.hightopo.com/guide/guide/core/vector/ht-vector-guide.html
4、读数据绑定 http://www.hightopo.com/guide/guide/core/databinding/ht-databinding-guide.html
5、序列化机制 hightopo.com/guide/guide/core/serialization/ht-serialization-guide.html

如有三维需求：
1、入门手册 http://www.hightopo.com/guide/guide/core/3d/ht-3d-guide.html
2、建模手册 http://www.hightopo.com/guide/guide/plugin/modeling/ht-modeling-guide.html
3、OBJ 导入 http://www.hightopo.com/guide/guide/plugin/obj/ht-obj-guide.html

！！！！主要学习：

学习过程中引用的three.js路径：

<!--引入three.js三维引擎-->
    <!--    <script src="http://www.yanhuangxueyuan.com/3D/example/three.js"></script>-->
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
    <script src="http://www.yanhuangxueyuan.com/3D/example/three.min.js"></script>
    <!--鼠标操作三维场景-->
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/STLLoader.js"></script>
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/OBJLoader.js"></script>
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/MTLLoader.js"></script>

二、跟着官网学习过程中需要自己完善的案例代码：

1、three.js-纹理动画

动画效果：

纹理动画

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>8.4纹理对象-案例-纹理动画</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            /* 隐藏body窗口区域滚动条 */
        }
    </style>
    <!--引入three.js三维引擎-->
    <!--    <script src="http://www.yanhuangxueyuan.com/3D/example/three.js"></script>-->
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
    <script src="http://www.yanhuangxueyuan.com/3D/example/three.min.js"></script>
    <!--鼠标操作三维场景-->
    <!--    <script type="text/javascript" th:src="@{/static/js/OrbitControls.js}"></script>-->
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/STLLoader.js"></script>
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/OBJLoader.js"></script>
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/MTLLoader.js"></script>

</head>
<body>
    <script>
        var scene=new THREE.Scene();

        //纹理动画
        //创建盒子模型
        var geometry1=new THREE.BoxGeometry(40,60,40);
        var geometry2=geometry1.clone();
        geometry1.translate(-80,-25,0);//模型1沿x轴移动-80
        geometry2.translate(80,-25,0);//模型2沿x轴移动80

        /**
         * 创建一个设置重复纹理的管道
         */
        var curve = new THREE.CatmullRomCurve3([
            new THREE.Vector3(-80, -40, 0),
            new THREE.Vector3(-70, 40, 0),
            new THREE.Vector3(70, 40, 0),
            new THREE.Vector3(80, -40, 0)
        ]);
        //创建管道模型对象
        var tubeGeometry = new THREE.TubeGeometry(curve, 200, 2, 10, false);//curve:扫描路径；200：路径方向细分数；1：管道圆弧细分数；false:不闭合
        var textureLoader = new THREE.TextureLoader();
        var texture = textureLoader.load("../picture/orange.jpg");//创建纹理加载器对象加载图片
        // 设置阵列模式为 RepeatWrapping
        texture.wrapS = THREE.RepeatWrapping //wrapS:纹理贴图在水平方向上将如何进行包裹
        texture.wrapT=THREE.RepeatWrapping  //wrapT ：纹理贴图在垂直方向上将如何包裹
        // 设置x方向的偏移(沿着管道路径方向)，y方向默认1
        //等价texture.repeat= new THREE.Vector2(20,1)
        texture.repeat.x = 20;
        //管道的材质
        var tubeMaterial = new THREE.MeshPhongMaterial({
            map: texture,
            transparent: true,
        });
        //盒子的材质
        var material=new THREE.MeshLambertMaterial({
            color:0xff00ff,
            side:THREE.DoubleSide
        })
        var mesh1=new THREE.Mesh(geometry1,material);
        var mesh2=new THREE.Mesh(geometry2,material);
        var mesh3=new THREE.Mesh(tubeGeometry,tubeMaterial);
        scene.add(mesh1,mesh2,mesh3);

        //光源
        var point = new THREE.PointLight(0xffffff);
        point.position.set(400, 200, 300); //点光源位置
        scene.add(point); //点光源添加到场景中
        var point1 = new THREE.PointLight(0xffffff);
        point1.position.set(-400, -200, -300); //点光源位置
        scene.add(point1); //点光源添加到场景中
        //环境光
        var ambient = new THREE.AmbientLight(0x777777);
        scene.add(ambient);

        //相机
        var width = window.innerWidth; //窗口宽度
        var height = window.innerHeight; //窗口高度
        var k = width / height; //窗口宽高比
        var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
        //创建相机对象
        var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
        camera.position.set(200, 200, 200); //设置相机位置
        camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

        //创建渲染器对象
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);//设置渲染区域尺寸
        renderer.setClearColor(0x000000, 1); //设置背景颜色
        document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
        // renderer.render(scene,camera);//执行渲染操作

        //鼠标操作
        function render() {
            renderer.render(scene,camera);//执行渲染操作
            // mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
            requestAnimationFrame(render);//请求再次执行渲染函数render
            // 使用加减法可以设置不同的运动方向
            // 设置纹理偏移
            texture.offset.x -= 0.05
        }
        render();
        var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象

        // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
        var axisHelper = new THREE.AxisHelper(1000);
        scene.add(axisHelper);


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

其中引用到的贴图是自己用ppt粗略弄的图片：
在这里插入图片描述
目录位置：

2-Canvas画布加载图片

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>8.5canvas画布加载图片</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            /* 隐藏body窗口区域滚动条 */
        }
    </style>
    <!--引入three.js三维引擎-->
    <!--    <script src="http://www.yanhuangxueyuan.com/3D/example/three.js"></script>-->
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
    <script src="http://www.yanhuangxueyuan.com/3D/example/three.min.js"></script>
    <!--鼠标操作三维场景-->
    <!--    <script type="text/javascript" th:src="@{/static/js/OrbitControls.js}"></script>-->
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/STLLoader.js"></script>
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/OBJLoader.js"></script>
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/MTLLoader.js"></script>

</head>
<body>
    <script>
        var texture;
        var scene=new THREE.Scene();

        var canvas=document.createElement("canvas");//创建一个canvas对象
        canvas.width=200;
        canvas.height=200;
        var ctx=canvas.getContext('2d');
        var Image=new Image();
        Image.src="../picture/earth.png";
        Image.onload=function(){
            ctx.drawImage(Image,0,0,200,200);
            // var bg=ctx.createPattern(Image,"no-repeat");

            // canvas画布对象作为CanvasTexture的参数重建一个纹理对象
            // canvas画布可以理解为一张图片
            texture = new THREE.CanvasTexture(canvas);
            texture.needsUpdate = true;// 注意图片加载完成执行canvas相关方法后，要更新一下纹理
            //打印纹理对象的image属性
            // console.log(texture.image);
            //矩形平面
            var geometry = new THREE.PlaneGeometry(100, 100);
            var material = new THREE.MeshPhongMaterial({
                map: texture, // 设置纹理贴图
                side:THREE.DoubleSide
            });
            // 创建一个矩形平面网模型，Canvas画布作为矩形网格模型的纹理贴图
            var mesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);

        }

        //光源
        var point = new THREE.PointLight(0xffffff);
        point.position.set(400, 200, 300); //点光源位置
        scene.add(point); //点光源添加到场景中
        var point1 = new THREE.PointLight(0xffffff);
        point1.position.set(-400, -200, -300); //点光源位置
        scene.add(point1); //点光源添加到场景中
        //环境光
        var ambient = new THREE.AmbientLight(0x777777);
        scene.add(ambient);

        //相机
        var width = window.innerWidth; //窗口宽度
        var height = window.innerHeight; //窗口高度
        var k = width / height; //窗口宽高比
        var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
        //创建相机对象
        var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
        camera.position.set(200, 200, 200); //设置相机位置
        camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

        //创建渲染器对象
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);//设置渲染区域尺寸
        renderer.setClearColor(0x000000, 1); //设置背景颜色
        document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
        // renderer.render(scene,camera);//执行渲染操作

        //鼠标操作
        function render() {
            renderer.render(scene,camera);//执行渲染操作
            // mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
            requestAnimationFrame(render);//请求再次执行渲染函数render
        }


        // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
        var axisHelper = new THREE.AxisHelper(1000);
        scene.add(axisHelper);

        var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象

        render();





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

三、学习过程遇到的问题总结：

1.控制台报错 geometry.setFromPoints is not a function
在这里插入图片描述

在这里插入图片描述
three.js版本：http://www.yanhuangxueyuan.com/3D/example/three.js

查找百度等资料，应该是这个版本没有这个方法(不确定)。

2.The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.
在这里插入图片描述
网上的解决办法：
地址栏输入：edge://flags/#autoplay-policy
将Show block option in autoplay settings下拉选项设为Enabled

不过设置了之后音频还是无法自动播放…