three实现三维邮件打印扔垃圾桶代码

代码语言:html

所属分类:三维

代码描述:three实现三维邮件打印扔垃圾桶代码

代码标签: three 三维 邮件 打印 垃圾桶 代码

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
<style>
    *{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#cdbf9f}
#scene{display:block;width:100vw;height:100vh}
</style>
  </head>
  <body>
    <canvas id="scene"></canvas>
    <script type="module" >
        import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js';

const canvas=document.getElementById('scene');
const renderer=new THREE.WebGLRenderer({canvas,antialias:true});
renderer.setPixelRatio(Math.min(devicePixelRatio,2));
renderer.shadowMap.enabled=true;
renderer.shadowMap.type=THREE.PCFSoftShadowMap;
renderer.localClippingEnabled=true;

const scene=new THREE.Scene();
scene.background=new THREE.Color('#d7cbb0');
scene.fog=new THREE.Fog('#d7cbb0',22,46);

const camera=new THREE.PerspectiveCamera(44,1,0.1,120);
camera.position.set(0.2,4.35,8.5);
camera.lookAt(0.2,2.1,-0.3);

function resize(){const w=innerWidth,h=innerHeight;renderer.setSize(w,h,false);camera.aspect=w/h;camera.updateProjectionMatrix();}
addEventListener('resize',resize);resize();

// ---------- lights (flat, bright fluorescent) ----------
scene.add(new THREE.HemisphereLight('#fff7e6','#9a9788',1.0));
const key=new THREE.DirectionalLight('#fff3da',0.9);
key.position.set(7,13,9);key.castShadow=true;key.shadow.mapSize.set(2048,2048);
const sc=key.shadow.camera;sc.left=-18;sc.right=18;sc.top=18;sc.bottom=-18;key.shadow.bias=-0.0004;
scene.add(key);
scene.add(new THREE.AmbientLight('#ffffff',0.35));

const mat=(c,r=0.92,m=0)=>new THREE.MeshStandardMaterial({color:c,roughness:r,metalness:m,flatShading:true});
const emat=(c,i=1)=>new THREE.MeshStandardMaterial({color:c,emissive:c,emissiveIntensity:i,roughness:.6,flatShading:true});
function b.........完整代码请登录后点击上方下载按钮下载查看

网友评论0