three搭建一个大屁股显示器电脑内挖空成房间效果代码
代码语言:html
所属分类:三维
代码描述:three搭建一个大屁股显示器电脑内挖空成房间效果代码
代码标签: three 搭建 大屁股 显示器 电脑 挖空 房间
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; outline: none; font-family: monospace; } body { overflow: hidden; background-color: #d2cfc8; cursor: grab; --dotSize: 2px; --bgSize: 25px; --dotColor: #888; --bgPosition: calc(var(--bgSize) / 2); --stop1: 0.06rem; --stop2: 0.65rem; background-image: radial-gradient(circle at center, var(--dotColor) var(--dotSize), transparent 0), radial-gradient(circle at center, var(--dotColor) var(--dotSize), transparent 0); background-size: var(--bgSize) var(--bgSize); background-position: 0 0, var(--bgPosition) var(--bgPosition); } .webgl, #loader { position: fixed; top: 0; left: 0; } #loader { display: grid; place-content: center; width: 100%; height: 100%; background-color: #FAEDCD; } </style> </head> <body translate="no"> <canvas class="webgl"></canvas> <div id="loader"> <h1>Loading</h1> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.1.6.3.js"></script> <script type="importmap"> { "imports": { "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/164/three.module.js", "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/164/jsm/" } } </script> <script type="module"> import * as THREE from "three"; import { OrbitControls } from "three/addons/controls/OrbitControls.js"; import { OutlineEffect } from "three/addons/effects/OutlineEffect.js"; import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js"; const canvas = document.querySelector('.webgl'); const scene = new THREE.Scene(); const textureLoader = new THREE.TextureLoader(); const sizes = { width: window.innerWidth, height: window.innerHeight }; const loading = document.querySelector('#loader'); // Base camera const camera = new THREE.PerspectiveCamera(10, sizes.width / sizes.height, 0.1, 500); camera.position.x = 8; camera.position.y = 4; c.........完整代码请登录后点击上方下载按钮下载查看
网友评论0