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

最新推荐文章于 2025-07-09 08:05:59 发布

原创

最新推荐文章于 2025-07-09 08:05:59 发布 · 1.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css

大概就是👉在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