three.js嵌入可交互的普通页面

最新推荐文章于 2024-04-30 16:57:21 发布

阿唐mio

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量1.4k

点赞数 5

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/mattieee/article/details/128415107

版权

大概就是👉在html中写一个3d场景，场景里放一块画板，画板上是一个可以操作的网页，just like this👇

翻遍了csdn和google，有几个人做过这个，但是过程好简陋，我是个笨人，不知道怎么正确引用three.js，并且至今弄不懂vue是什么（。）总之凭借一位大佬八年前的代码，我东凑凑西凑凑终于把它搬到了我的电脑里，如果有什么人八年后需要做这个工作（大概没有x），希望他能在茫茫互联网垃圾中找到我这个垃圾（。）

话不多说下面上代码——有和我一样的笨蛋看到这里应该感到庆幸，因为本人即将给予你保姆级的代码，保证你能打开vscode就一定能用这个代码（大概）（望天）

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ADN CSS3D Demo</title>
    <style>
        body {
            background-color: #ffffff;
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>

    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="./assets/libs/three.min.js"></script>
    <script src="./assets/libs/TrackballControls.js"></script>
    <script src="./assets/libs/CSS3DRenderer.js"></script>

    <script>

        ///
        // CSS3DRenderer Demo
        // By Philippe Leefsma, July 2015
        ///

        //References:
        //http://codereply.com/answer/83pofc/threejs-properly-blending-css3d-webgl.html
        //http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/

        var controls, camera, glScene, cssScene, glRenderer, cssRenderer;

        ///
        // Creates WebGL Renderer
        //
        ///
        function createGlRenderer() {

            var glRenderer = new THREE.WebGLRenderer({ alpha: true });

            glRenderer.setClearColor(0xECF8FF);
            glRenderer.setPixelRatio(window.devicePixelRatio);
            glRenderer.setSize(window.innerWidth, window.innerHeight);

            glRenderer.domElement.style.position = 'absolute';
            glRenderer.domElement.style.zIndex = 1;
            glRenderer.domElement.style.top = 0;
            glRenderer.domElement.style.pointerEvents = 'none';

            return glRenderer;
        }

        ///
        // Creates CSS Renderer
        //
        ///
        function createCssRenderer() {

            var cssRenderer = new THREE.CSS3DRenderer();

            cssRenderer.setSize(window.innerWidth, window.innerHeight);

            cssRenderer.domElement.style.position = 'absolute';
            glRenderer.domElement.style.zIndex = 0;
            cssRenderer.domElement.style.top = 0;

            return cssRenderer;
        }

        ///
        // Creates plane mesh
        //
        ///
        function createPlane(w, h, position, rotation) {

            var material = new THREE.MeshBasicMaterial({
                color: 0x000000,
                opacity: 0.0,
                side: THREE.DoubleSide
            });

            var geometry = new THREE.PlaneGeometry(w, h);

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

            mesh.position.x = position.x;
            mesh.position.y = position.y;
            mesh.position.z = position.z;

            mesh.rotation.x = rotation.x;
            mesh.rotation.y = rotation.y;
            mesh.rotation.z = rotation.z;

            return mesh;
        }

        ///
        // Creates CSS object
        //
        ///
        function createCssObject(w, h, position, rotation, url) {

            var html = [

                '<div style="width:' + w + 'px; height:' + h + 'px;">',
                '<iframe src="' + url + '" width="' + w + '" height="' + h + '">',
                '</iframe>',
                '</div>'

            ].join('\n');

            var div = document.createElement('div');

            $(div).html(html);

            var cssObject = new THREE.CSS3DObject(div);

            cssObject.position.x = position.x;
            cssObject.position.y = position.y;
            cssObject.position.z = position.z;

            cssObject.rotation.x = rotation.x;
            cssObject.rotation.y = rotation.y;
            cssObject.rotation.z = rotation.z;

            return cssObject;
        }

        ///
        // Creates 3d webpage object
        //
        ///
        function create3dPage(w, h, position, rotation, url) {

            var plane = createPlane(
                w, h,
                position,
                rotation);

            glScene.add(plane);

            var cssObject = createCssObject(
                w, h,
                position,
                rotation,
                url);

            cssScene.add(cssObject);
        }

        ///
        // Creates material with random color
        //
        ///
        function createColoredMaterial() {

            var material = new THREE.MeshBasicMaterial({
                color: Math.floor(Math.random() * 16777215),
                shading: THREE.FlatShading,
                side: THREE.DoubleSide
            });

            return material;
        }

        ///
        // Creates 3D geometry to place in the scene
        //
        ///
        function create3dGeometry() {

            var mesh1 = new THREE.Mesh(
                new THREE.CylinderGeometry(0, 200, 300, 20, 4),
                createColoredMaterial());

            mesh1.position.x = 0;
            mesh1.position.y = -300;
            mesh1.position.z = 400;

            glScene.add(mesh1);

            var mesh2 = new THREE.Mesh(
                new THREE.BoxGeometry(200, 200, 200),
                createColoredMaterial());

            mesh2.position.x = -300;
            mesh2.position.y = -300;
            mesh2.position.z = 400;

            glScene.add(mesh2);


            var mesh3 = new THREE.Mesh(
                new THREE.SphereGeometry(100, 128, 128),
                createColoredMaterial());

            mesh3.position.x = 500;
            mesh3.position.y = -300;
            mesh3.position.z = 400;

            glScene.add(mesh3);
        }

        ///
        // Initializes scene
        //
        ///
        function initialize() {

            camera = new THREE.PerspectiveCamera(
                45,
                window.innerWidth / window.innerHeight,
                1,
                10000);

            camera.position.set(0, 100, 3000);

            controls = new THREE.TrackballControls(camera);

            glRenderer = createGlRenderer();
            cssRenderer = createCssRenderer();

            //document.body.appendChild(glRenderer.domElement);

            document.body.appendChild(cssRenderer.domElement);
            cssRenderer.domElement.appendChild(glRenderer.domElement);

            glScene = new THREE.Scene();
            cssScene = new THREE.Scene();

            var ambientLight = new THREE.AmbientLight(0x555555);
            glScene.add(ambientLight);

            var directionalLight = new THREE.DirectionalLight(0xffffff);
            directionalLight.position.set(-.5, .5, -1.5).normalize();
            glScene.add(directionalLight);

            create3dPage(
                1000, 1000,
                new THREE.Vector3(-1050, 0, 400),
                new THREE.Vector3(0, 45 * Math.PI / 180, 0),
                'https://bbs.saraba1st.com/2b/forum-6-1.html');

            create3dPage(
                1000, 1000,
                new THREE.Vector3(0, 0, 0),
                new THREE.Vector3(0, 0, 0),
                'https://seaside-station.com/');

            create3dPage(
                1000, 1000,
                new THREE.Vector3(1050, 0, 400),
                new THREE.Vector3(0, -45 * Math.PI / 180, 0),
                'https://www.meteorshowers.org/view/Lyrids');

            create3dGeometry();

            update();
        }

        ///
        // Updates scene
        //
        ///
        function update() {

            controls.update();

            glRenderer.render(glScene, camera);

            cssRenderer.render(cssScene, camera);

            requestAnimationFrame(update);
        }

        ///
        // On document ready
        //
        ///
        $(document).ready(function () {
            initialize();
        });

    </script>
</body>

</html>

three.min.js
TrackballControls.js
CSS3DRenderer.js
敲黑板重点！！
以上三个文件请前往three.js的Github主页，找到2015年的r71，链接在此https://github.com/mrdoob/three.js/tags?after=r79
然后下载zip包，解压时可能会提醒你文件已损坏，但不要紧，你一样可以在里面找到以上三个文件！

three.min.js在build文件夹中
TrackballControls.js在examples/js/controls中
CSS3DRenderer.js在examples/js/renderers中

最后把他们仨放进你项目下的assets/libs/（这个主要看你自己的项目结构）
再安装一个名为live server的扩展，你就可以在自己的电脑上成功运行出正确的结果啦★,°:.☆(￣▽￣)/$:.°★ 。

以下是一些我参考过的大佬的文章，也许会对看到这里的你有所帮助
http://t.csdn.cn/WJwyy
http://t.csdn.cn/Y9IYC
https://adndevblog.typepad.com/cloud_and_mobile/2015/07/embedding-webpages-in-a-3d-threejs-scene.html
https://github.com/jeromeetienne/threex.htmlmixer