three.js 使用canvas加载图片作为模型的纹理贴图

最新推荐文章于 2024-06-02 17:13:03 发布

汉武大帝·

最新推荐文章于 2024-06-02 17:13:03 发布

阅读量3k

点赞数

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

本文链接：https://blog.csdn.net/yinge0508/article/details/123090525

版权

three.js 专栏收录该内容

112 篇文章 12 订阅

订阅专栏

本文讲述了如何在Three.js中使用Canvas画布作为纹理贴图，遇到的跨域安全问题及其解决方案，以及如何确保纹理更新和正确加载图片。通过实例代码演示了如何设置crossOrigin属性和处理纹理更新的时机。

摘要由CSDN通过智能技术生成

效果：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas画布作为纹理贴图</title>
  <script src="../three.js"></script>
  <script src="../OrbitControls.js"></script>
</head>

<body>
  <script>
    var texture;
    // 1,创建场景对象
    var scene = new THREE.Scene();
    // 2，使用canvas画图作为纹理贴图
    // 先使用canvas画图
    var canvas = document.createElement('canvas');
    canvas.width = 150;
    canvas.height = 150;
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#ffffff";
    var img = new Image();
    img.src = "https://img0.baidu.com/it/u=3226103969,2404354919&fm=253&fmt=auto&app=138&f=JPEG?w=634&h=500";
    img.crossOrigin = "anonymous";
    img.onload = function () {
      ctx.drawImage(img, 0, 0, 200, 200);
      texture = new THREE.CanvasTexture(canvas);
      // texture.needsUpdate = true; // 不设置needsUpdate为true的话，可能纹理贴图不刷新
      var plane_geometry = new THREE.PlaneGeometry(100, 100);
      var material = new THREE.MeshPhongMaterial({
        // color:0x11ff22,
        map: texture,
        side: THREE.DoubleSide
      });
      var mesh = new THREE.Mesh(plane_geometry, material);
      scene.add(mesh);
    }
    // 创建材质对象
 
      // 3，创建环境光对象
      var ambient = new THREE.AmbientLight(0xffffff);
      scene.add(ambient);
      // 4，创建相机对象
      var width = window.innerWidth;
      var height = window.innerHeight;
      var k = width / height;
      var s = 100;
      var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, -1000, 1000);
      camera.position.set(200, 300, 200);
      camera.lookAt(scene.position);
      // 5，创建渲染器对象
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height);
      document.body.appendChild(renderer.domElement);

      function render() {
        renderer.render(scene, camera);
        requestAnimationFrame(render);
      }
      // 创建轴辅助对象
      var axes = new THREE.AxesHelper(500);
      scene.add(axes);
      // 创建鼠标控制对象
      var controls = new THREE.OrbitControls(camera, renderer.domElement);
      // controls.addEventListener('change',render);
      render();
  </script>
</body>

</html>

说一下遇到的问题：

1，图片使用在线百度图库中的图片时，没有加载出来，报错 THREE.WebGLState: DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded. 这是遇到了跨域安全问题，解决方式：

跨域安全问题。跨域；解决办法：安全

1 若是你用的是纹理题图：如：three
var loader = new THREE.TextureLoader();
加上：loader.setCrossOrigin( 'Anonymous');方法便可。
（THREE.ImageUtils.loadTexture也可用这个方法）

2 若是你是直接用img的，如：img
var img = new image(); 加上 img.crossOrigin =“anonymous” 便可loader

3 若是你被THREE.WebGLRenderer: image is not power of two  这样的warning所困扰，在你的创建mesh后加上：mesh.material.map.minFilter = THREE.LinearFilter; 便可。如

var mesh = new THREE.Mesh( geometry, material );
mesh.material.map.minFilter = THREE.LinearFilter;

2，即使解决了安全策略问题，还是无法显示纹理贴图，， //如果不设置texture.needsUpdate = true ,纹理可能就不会更新，你很可能看到得是黑色几何体。原因是纹理绘制需要一段时间，javascript是可以异步运行的；这里我注释了 texture.needsUpdate = true 这一句，依然能渲染出来，最好是不要注释；上面的Html 中，在创建平面模型 PlaneGeometry ,、高光材质 MeshPhongMaterial 、网格模型 Mesh 时，将他们三者的创建放在了图片加载完成后进行创建，否则纹理依然无法渲染出来。

汉武大帝·

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
three.js 使用canvas加载图片作为模型的纹理贴图

效果：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl
复制链接

扫一扫

专栏目录