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

这篇具有很好参考价值的文章主要介绍了three.js嵌入可交互的普通页面。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

大概就是👉在html中写一个3d场景,场景里放一块画板,画板上是一个可以操作的网页,just like this👇
threejs嵌入网页,javascript,前端,css

翻遍了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文章来源地址https://www.toymoban.com/news/detail-692264.html

到了这里,关于three.js嵌入可交互的普通页面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【js&threeJS】入门three,并实现3D汽车展示厅,附带全码

    首先放个最终效果图:   三维(3D)概念: 三维(3D)是一个描述物体在三个空间坐标轴上的位置和形态的概念。相比于二维(2D)只有长度和宽度的平面,三维增加了高度或深度这一维度 在三维空间中,我们使用三个独立的坐标轴来描述物体的位置。通常使用笛卡尔坐标系

    2024年02月11日
    浏览(104)
  • threejs点击获取三维坐标(Three.js获取鼠标点击的三维坐标)

    绑定点击事件,通过 THREE.Raycaster 光线投射,用于确定鼠标点击位置上有哪些物体, raycaster.intersectObjects(scene.children) 返回点击位置上所有的物体的数组;我们用 var selected = intersects[0] 取第一个,也就是最前面的那个物体;在通过 selected.point 取点坐标

    2024年02月11日
    浏览(116)
  • Three.js--》前端开发者掌握3d技术不再是梦,初识threejs

            这十年来 web 得到了快速的发展,随着 webgl 的普及,网页的表现能力越来越强大,网页上已经开始可以做出很多复杂的动画和精美的效果,还可以通过 webgl 在网页中绘制高性能的3d图形,别的不说,凡是入门程序员都离不开github这个网站,细心的人都会发现,gi

    2024年02月01日
    浏览(62)
  • threeJS 实现加载模型 + 页面按钮交互 + 显示css2Renderer标注

    创建好HTML标注的提示框 创建three的场景等系列 three加载GLTF模型 点击按钮选中模型 + 交互 示例(大概意思就是我点击那个按钮显示那个提示框,模型变材质 + 线) 直接代码 以上就是完整的, 弹窗的位置,和线的结束点是我写死的,因为我不知道创建的弹窗的位置该怎么设置

    2024年02月04日
    浏览(38)
  • 【THREE.JS】网页中的炫酷3D

    概述 :基于 WebGL 的三维引擎,目前是国内资料最多、使用最广泛的 三维引擎 ,可以制作一些 3D 可视化项目 目前随着 元宇宙 概念的爆火, THREE 技术已经深入到了物联网、VR、游戏、数据可视化等多个平台。 最近一段时间主要对之前学习three.js的总结和记录,记录只对自己

    2024年02月03日
    浏览(49)
  • JavaScript实现网页交互

    1.JavaScript简介 JavaScript 是⼀种 基于对象的、事件驱动型的、解释型的脚本语⾔, JS设计的⽬的是实现⽹⻚的交互能⼒ •基于对象:(区别于⾯向对象),JavaScript和Java语⾔⼀样可以通过对象调⽤⽅法 obj.fn() •事件驱动:⽹⻚⽂档中的HTML标签事件触发JavaScript代码执⾏ •解释

    2024年02月09日
    浏览(38)
  • Vue中如何进行3D场景展示与交互(如Three.js)

    随着WebGL技术的发展,越来越多的网站开始使用3D场景来展示产品、游戏等内容。在Vue中,我们可以使用第三方库Three.js来实现3D场景的展示与交互。本文将介绍如何在Vue中使用Three.js来创建3D场景,并实现交互功能。 Three.js是一个用于创建3D图形的JavaScript库。它基于WebGL技术,

    2024年02月09日
    浏览(74)
  • vue3结合three.js实现3D带有交互的动画

    three.js引入 安装轨道控件插件: 安装渲染器插件: vue文件中引用: 在页面中创建场景 创建一个透视相机 初始化渲染器 初始动画混合器 参数:rootObject 混合器播放的动画所属的对象。就是包含动画模型的场景对象。 常用参数和属性: .time 全局的混合器时间。 .clipAction(Ani

    2024年02月04日
    浏览(52)
  • winform使用CefSharp嵌入VUE网页并交互

    1、NuGet添加CefSharp 如果下载慢或失败可以更新下载源 腾讯资源 https://mirrors.cloud.tencent.com/nuget/ 华为资源 https://repo.huaweicloud.com/repository/nuget/v3/index.json  2、将项目平台改为X64 3、在winform窗体添加cef ChromMenuHandler BoundObject 4、vue代码编写 5、打包vue并放到项目下并设置复制到输出

    2024年02月04日
    浏览(41)
  • 【中秋快乐】如何用three.js实现我的太空遐想3D网页

      目录 创作背景 功能分解 创建3d地球 创建3d月球  创建3d小火箭

    2024年02月21日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包