three实现三维邮件打印扔垃圾桶代码
代码语言:html
所属分类:三维
代码描述: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