三.js尝试合并canavas和webgl答案

【问题标题】：three.js try to merge canavas and webgl三.js尝试合并canavas和webgl
【发布时间】：2013-11-22 08:05:03
【问题描述】：

我再次需要你的帮助！

我正在尝试合并画布和 webgl 渲染我已经阅读了其他帖子，但没有成功...

如何同时使用两者（canavs 和three.js）？

<!DOCTYPE html>
<html>
<head>
    <title>Initial page</title>
</head>
<body>
    <div>
        <canvas id="myCanvas" width="600" height="600" style="background:transparency; "></canvas>
    </div>
    <script src="../three.js/build/three.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        var camera, scene, renderer, geometry, material, mesh;

        function init() {
            scene = new THREE.Scene();

            camera = new THREE.PerspectiveCamera(75, 600 / 600, 1, 10000);
            camera.position.z = 1000;
            scene.add(camera);

            geometry = new THREE.CubeGeometry(200, 200, 200);
            material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });

            mesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);

            var c = $("#myCanvas");


            renderer = new THREE.CanvasRenderer({canvas: c.get(0)}); // ?? display 3d objetc

            //renderer = new THREE.WebGLRenderer( ); // ?? display 2d rect

            renderer.setSize(700, 700);

            var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");
            ctx.fillStyle="#FF00FF";
            ctx.fillRect(10,10,100,100);

        }

        function animate() 
        {

            requestAnimationFrame(animate);
            render();
        }

        function render() 
        {
            mesh.rotation.x += 0.01;
            mesh.rotation.y += 0.02;



            renderer.render(scene, camera);
        }

        $(function () {
            init();
            animate();
        });
    </script>
</body>
</html>

【问题讨论】：

标签： canvas three.js webgl

【解决方案1】：

实际上你合并了画布和 webgl，但是你的矩形在动画循环时被删除了。在init() 之外声明ctx 并在render() 中重新定位ctx.fillRect(10,10,100,100);。

<script>
    var camera, scene, renderer, geometry, material, mesh, ctx;

    function init() {
        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera(75, 600 / 600, 1, 10000);
        camera.position.z = 1000;
        scene.add(camera);

        geometry = new THREE.CubeGeometry(200, 200, 200);
        material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });

        mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

        var c = $("#myCanvas");


        renderer = new THREE.CanvasRenderer({canvas: c.get(0)}); // ?? display 3d objetc

        //renderer = new THREE.WebGLRenderer( ); // ?? display 2d rect

        renderer.setSize(700, 700);

        var c=document.getElementById("myCanvas");
        ctx=c.getContext("2d");
        ctx.fillStyle="#FF00FF";

    }

    function animate() 
    {

        requestAnimationFrame(animate);
        render();
    }

    function render() 
    {
        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;
        ctx.fillRect(10,10,100,100);



        renderer.render(scene, camera);
    }

    $(function () {
        init();
        animate();
    });
</script>

【讨论】：