【Three.js】8.5 Canvas画布加载图片

好锅煮好饭

已于 2022-09-27 17:16:36 修改

阅读量1k

点赞数

分类专栏： three.js 文章标签： javascript 前端 html

于 2022-09-25 16:39:46 首次发布

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

版权

three.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!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>