Question

我需要你再帮忙！

我尝试合并canvas和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>

Answer 1

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

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

three.js尝试合并canavas和webgl

1 个答案: