三.js插入图片

Posted 2023-02-27

【中文标题】三.js插入图片

【英文标题】：Three.js insert image

【发布时间】：2012-03-31 20:47:51

【问题描述】：

我正在尝试在 PlaneGeometry Mesh 上附加一个简单的图像，但它似乎不起作用。

window.onload = function()


        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // camera
        var camera = new THREE.PerspectiveCamera(95, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.y = -250;
        camera.position.z = 400;
        camera.rotation.x = 45 * (Math.PI / 180);

        // scene
        var scene = new THREE.Scene();

        var img = new THREE.MeshLambertMaterial(
            map:THREE.ImageUtils.loadTexture('img/front.jpg')
        );
        // plane
        var plane = new THREE.Mesh(new THREE.PlaneGeometry(200, 200),img);
        plane.overdraw = true;
        scene.add(plane);
         // add subtle ambient lighting
        var ambientLight = new THREE.AmbientLight(0x555555);
        scene.add(ambientLight);

        // add directional light source
        var directionalLight = new THREE.DirectionalLight(0xffffff);
        directionalLight.position.set(1, 1, 1).normalize();
        scene.add(directionalLight);

        // create wrapper object that contains three.js objects
        var three = 
            renderer: renderer,
            camera: camera,
            scene: scene,
            plane: plane
        ;
        renderer.render(scene,camera);
    ;

这是我完整的 javascript 文件，画布为 580x300

每当我运行它时，我只会看到一个黑色方块。有任何想法吗？谢谢！

这里是我给需要的人的参考：

http://www.html5canvastutorials.com/webgl/html5-canvas-webgl-texture-with-three-js/

【参考方案1】：

从 github 下载最新标签并使用示例后，很明显CORS 是罪魁祸首。如果我打开 Chrome 开发者工具并查看控制台，则会出现许多错误消息：

Cross-origin image load denied by Cross-Origin Resource Sharing policy.

如果您使用的是 Chrome，请使用标志 -allow-file-access-from-files 启动它

使用 Chrome 17.0.963.79 测试。

window.onload = function()

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // camera 
    var camera = new THREE.PerspectiveCamera(95, window.innerWidth / window.innerHeight, 1, 1000); 
    camera.position.y = -250; 
    camera.position.z = 400; 
    camera.rotation.x = 45 * (Math.PI / 180); 

    // scene 
    var scene = new THREE.Scene();
    scene.add(camera); //ADDED

    var img = new THREE.MeshBasicMaterial( //CHANGED to MeshBasicMaterial
        map:THREE.ImageUtils.loadTexture('img/front.jpg')
    );
    img.map.needsUpdate = true; //ADDED

    // plane
    var plane = new THREE.Mesh(new THREE.PlaneGeometry(200, 200),img);
    plane.overdraw = true;
    scene.add(plane);

     // add subtle ambient lighting
    var ambientLight = new THREE.AmbientLight(0x555555);
    scene.add(ambientLight);

    // add directional light source
    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);

    // create wrapper object that contains three.js objects
    var three = 
        renderer: renderer,
        camera: camera,
        scene: scene,
        plane: plane
    ;
    renderer.render(scene,camera);
;

【讨论】：

确实，图像仍未加载。但是添加那段代码你会向服务器请求两次相同的图像。

看来THREE.ImageUtils.loadTexture 已被new THREE.TextureLoader().load 弃用。

它适用于我的环境，谢谢。但最好添加双面以便于查看目的

【参考方案2】：

改变平面的旋转。

试试这个。

Plane.rotation.x = (-Math.PI / 2);
Plane.rotation.z = (-Math.PI / 2);