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

代码语言：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"></shaded-image> -->

</lume-scene>

  
      <script >
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
{
    // Define LUME's HTML elements with their default names.
    LUME.useDefaultNames();
    const { reactive, element, numberAttribute, attribute, html, XYZStringValues, autorun, untrack } = LUME;
    let ShadedImg = class ShadedImg extends LUME.DOMPlane {
        constructor() {
            super(...arguments);
            this.src = "";
            this.__img = null;
            this.template = () => html `
			<img src=${() => this.src} ref=${(el) => (this.__img = el)} />
		`;
            this.recompute = (changedProp) => {
                if (this.sizeMode.x == "natural" && this.sizeMode.y == "natural") {
                    if (!this.maxWidth && !this.maxHeight) {
                        this.size.set(this.__img.naturalWidth, this.__img.naturalHeight);
                    }
                }
                else if (this.sizeMode.x == "natural" &&
                    this.sizeMode.y != "natural" &&
                    changedProp != "x") {
                    if (!this.maxWidth && !this.maxHeight) {
                 .........完整代码请登录后点击上方下载按钮下载查看