0

В одном из примеров по Three.js нашел, что можно использовать в качестве текстуры для модели <canvas> с нарисованной на нем нужной графикой. В какой-то момент потребовалось сделать отрисовку на канве внешнего изображения. Тут-то и появилась проблема:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="libs/three.js"></script>
    <style> body { margin: 0; overflow: hidden; } .imgcanvas {position: absolute; border: 1px red solid;} </style>
</head>
<body>
    <div id="output"></div>

    <script type="text/javascript">
        var canvas = document.createElement("canvas");
        canvas.className = "imgcanvas";
        canvas.width = 256;
        canvas.height = 256;
        document.getElementById("output").appendChild(canvas);

        var image = new Image();
        image.onload = function(){drawOnCanvas()};

        /* 1 */ image.src = "textures/stone-1k-small.jpg";
        /* 2 */ image.src = "http://texturemaps.net/wp-content/uploads/2012/08/stone-1k-small.jpg";

        function drawOnCanvas() {
            var ctx = canvas.getContext("2d");
            ctx.drawImage(image, 0, 0);
            initThreejs();
        }

        function initThreejs() {
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
            var renderer = new THREE.WebGLRenderer();
            renderer.setClearColor(new THREE.Color(0xbbbbbb, 1.0));
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.getElementById("output").appendChild(renderer.domElement);

            var material = new THREE.MeshPhongMaterial();
            material.side = THREE.DoubleSide;
            material.map = new THREE.Texture(canvas);
            material.map.needsUpdate = true;
            var plane = new THREE.Mesh(new THREE.PlaneGeometry(100, 100), material);

            scene.add(plane);
            scene.add(new THREE.AmbientLight(0xffffff));
            camera.position.z = 300;
            render();

            function render() {
                plane.rotation.z += 0.01;
                requestAnimationFrame(render);
                renderer.render(scene, camera);
            }
        }
    </script>
</body>
</html>

Если изображение хранится на сервере (/* 1 */), то всё прекрасно работает, а если загружается с другого адреса (/* 2 */), то пишет ошибку "Tainted canvases may not be loaded". Почему вдруг канва стала "зараженной"?

1 ответ 1

0
var img = new Image();
img.crossOrigin = "anonymous";
img.src = "https://graph.facebook.com/1387819034852828/picture?width=150&height=150";

источник: тут

2
  • ммм... а еще как я понял, если у внешнего сервера (texturemaps.net) в заголовке ответа нет Access-Control-Allow-Origin: *, то работать всё равно не будет?
    – Denis Ash
    16 окт 2015 в 15:56
  • Да, разобрался, всё работает. Спасибо!
    – Denis Ash
    17 окт 2015 в 6:50

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.