LUME实现一个三维3d效果示例代码-html代码-BFW代码库

LUME实现一个三维3d效果示例代码

代码语言：html

所属分类：三维

代码描述：LUME实现一个三维3d效果示例代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
html,
body {
        background: #222;
        width: 100%;
        height: 100%;
        margin: 0;
}

lume-scene {
        /* Prevent touch scrolling from interfering with out pointermove handler. */
        touch-action: none;
}

img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        /* background: black; */
}

lume-dom-plane {
        background: rgba(0, 0, 0, 0.3);
        border: 2px solid deeppink;
}

div {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        color: white;
        font-size: 6.7vw;
        font-family: sans-serif;
        font-weight: bold;
        outline: none;
}
</style>


</head>

<body translate="no" >
  <!--
Made with LUME.
http://github.com/lume/lume
-->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/LUME.js"></script>
<!-- Utility to fit text to a container's width. -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/fitty.js"></script>

<!-- By default a <lume-scene> fills the space of it's parent, in this case the <body>. -->
<lume-scene id="scene" experimental-webgl touch-action="none">

        <lume-sphere id="world" texture="//repo.bfw.wiki/bfwrepo/image/5ff25fc70cfb7.png" size="120 120 120" mount-point="0.5 0.5 -0.2" color="white">
                <lume-node align="0.5 0.5" rotation="0 35 35">
                        <lume-node align="0.5 0.5" id="moon">
                                <lume-sphere texture="//repo.bfw.wiki/bfwrepo/image/5e7e82c3555ec.png" size="20 20 20" mount-point="0.5 0.5 0.5" position="150" color="white"></lume-sphere>
                        </lume-node>
                </lume-node>
        </lume-sphere>

        <!-- Add some light to the scene! -->
        <lume-point-light id="light" size="0 0" position="0 0 600" color="white" intensity="2" distance="10000"></lume-point-light>

        <!--
        A way to create padding is make a node smaller within a parent node.
        This <shader-image> element is a node that render a GPU-powered WebGL plane, and an <img> element.
        We give the WebGL plane a black coloring. We apply a material opacity in the JavaScript below.
        -->
        <shaded-image id="image" color="black" src="//repo.bfw.wiki/bfwrepo/image/6002305c693e9.png" size-mode="proportional natural" size="0.6 0" align="0.5 0.5" mount-point="0.5 0.5">
                <lume-dom-plane color="black" size-mode="proportional proportional" size="0.5 0.2" align="0 0.1" position="0 0 55">
                        <div contenteditable align="center">Hello</div>
                </lume-dom-plane>
                <lume-dom-plane color="black" size-mode="proportional proportional" size="0.4 0.2" align="0.5 0.38" position="0 0 110" mount-point="0.5">
                        <div contenteditable align="center">3D</div>
                </lume-dom-plane>
                <lume-dom-plane color="black" size-mode="proportional proportional" size="0.6 0.2" align="0.4 0.7" position="0 0 60">
                        <div contenteditable align="center">World!</div>
                </lume-dom-plane>
        </shaded-image>

        <!-- Different ways to size the <shaded-image> -->
        <!-- <shaded-image src="https://assets.codepen.io/191583/shelby-gt350.jpg" color="black"></shaded-image> -->
        <!-- <shaded-image src="https://assets.codepen.io/191583/shelby-gt350.jpg" color="black" size-mode="natural proportional" size="0.95 0.95"></shaded-image> -->
        <!-- <shaded-image src="https://assets.codepen.io/191583/shelby-gt350.jpg" color="black" size-mode="proportional proportional" size="0.95 0.95".........完整代码请登录后点击上方下载按钮下载查看