<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Day & Night 按钮（3D版）</title>
<script src="https://unpkg.com/@tweenjs/tween.js@20.0.3/dist/tween.umd.js"></script>
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
<script type="importmap-shim">
{
"imports": {
"three": "https://unpkg.com/three@0.152.2/build/three.module.js",
"three/examples/jsm/": "https://unpkg.com/three@0.152.2/examples/jsm/",
"three-mesh-bvh": "https://unpkg.com/three-mesh-bvh@^0.5.22/build/index.module.js",
"three-bvh-csg": "https://unpkg.com/three-bvh-csg@^0.0.4/build/index.module.js"
}
}
</script>
<script type="text/javascript" src="./clouds.js"></script>
<script type="text/javascript" src="./stars.js"></script>
<script type="module-shim">
import * as Three from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js';
import { SUBTRACTION, Brush, Evaluator } from 'three-bvh-csg';
const btnW = 10,
btnH = 5;
const bgW = btnW * 2,
bgH = btnH * 2;
let buttonState = 0;
let buttonAniVal = { val: 0 };
let container,
camera,
scene,
renderer,
controls,
animateFrame,
raycaster,
pointer,
buttonGroup,
pointLight,
evaluator,
brush,
resultBrush;
let lights = {};
let Geometrys = {};
let Materials = {};
let Meshs = {};
var guiData = {
x: 0.005,
btnCo1: new Three.Color('#201f33'),
btnCo2: new Three.Color('#8b9fd7'),
};
var mouseData = {
mouseX: 0,
mouseY: 0,
};
var ballPosition = {
x: -btnH / 2, //左-btnH/2 右btnH/2
z: btnH * 0.5 + 0.1,
};
let blob1 = new Blob([cloudsMtl], {type: 'text/plain'});
let blob2 = new Blob([cloudsBlob], {type: 'text/plain'});
let blob3 = new Blob([starsMtl], {type: 'text/plain'});
let blob4 = new Blob([starsBlob], {type: 'text/plain'});
const blobs = {'clouds.mtl': blob1, 'clouds.obj': blob2, 'stars.mtl': blob3, 'stars.obj': blob4};
const manager = new Three.LoadingManager();
// 使用URL回调初始化加载管理器。
const objectURLs = [];
manager.setURLModifier( ( url ) => {
url = URL.createObjectURL( blobs[ url ] );
objectURLs.push( url );
return url;
} );
console.log(
`%c⭐️抖音：可乐鸡翅 💕💗感谢关注！`,
"font-size:20px; background:#FFF; color:#0034a6;padding:10px; border: 3px solid #0034a6;border-radius:10px;"
);
init('canvas')
function init (id) {
container = document.getElementById(id);
let width = container.clientWidth,
height = container.clientHeight;
scene = new Three.Scene();
/** 背景图添加方式，本地涉及跨域问题，这里就先隐藏了 **/
/* const loader = new Three.CubeTextureLoader();
loader.setPath('./');
const bgTexture1 = loader.load([
'posx.jpg',
'negx.jpg',
'posy.jpg',
'negy.jpg',
'posz.jpg',
'negz.jpg',
]);
bgTexture1.colorSpace = Three.SRGBColorSpace;
scene.background = bgTexture1; */
/** 背景图添加方式，本地涉及跨域问题，这里就先隐藏了 **/
scene.rotation.y = 1.6;
camera = new Three.PerspectiveCamera(45, width / height, 1, 100);
camera.position.x = 30;
camera.position.y = 0;
camera.position.z = 0;
camera.lookAt(scene.position);
renderer = new Three.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
renderer.shadowMap.enabled = true;
container.appendChild(renderer.domElement);
controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.1; //阻尼
raycaster = new Three.Raycaster();
pointer = new Three.Vector2(-2, -2); //初始化在[-1,1]以外
evaluator = new Evaluator();
evaluator.useGroups = false;
addThings();
addLight(); //+光源
animate();
initEventListen();
};
let clickState = '';
function initEventListen () {
container.addEventListener('pointermove', onPointerMove);
container.addEventListener(
'mousedown',
() => {
clickState = 'down';
},
false,
);
container.addEventListener(
'mousemove',
() => {
clickState = '';
},
false,
);
container.addEventListener(
'mouseup',
() => {
if (clickState == 'down') {
clickState = '';
onPointClick();
}
},
false,
);
window.addEventListener('resize', onWindowResize);
};
function onPointerMove (event) {
if (event.isPrimary === false) return;
mouseData.mouseX = event.clientX - container.offsetLeft;
mouseData.mouseY = event.clientY - container.offsetTop;
var scrollTop = window.pageYOffset || document.documentElement.scrollTop; //在container中的位置要考虑scroll
// 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
pointer.x =
(mouseData.mouseX / container.clientWidth) * 2 - 1;
pointer.y =
-((mouseData.mouseY + scrollTop) / container.clientHeight) * 2 + 1;
};
function onPointClick () {
toggleTween();
};
function onWindowResize () {
let width = container.clientWidth,
height = container.clientHeight;
camera.aspect = width / height;
camera.updateProjectionMatrix();
if (renderer) {
renderer.setSize(width, height);
}
};
function addLight () {
lights.ambiLigth = new Three.AmbientLight(0xffffff, 0.8);
scene.add(lights.ambiLigth);
lights.pointLight = new Three.PointLight(0xffffff, 5, 5); //intensity, distance, decay
lights.pointLight.position.set(0, 0, 2);
scene.add(lights.pointLight);
lights.directLight = new Three.DirectionalLight(0xffffff, 0.6); //intensity
lights.directLight.position.set(-10, 10, 25);
lights.directLight.castShadow = true;
lights.directLight.shadow.radius = 6; //设置阴影贴图模糊度
scene.add(lights.directLight);
};
function addThings () {
/** 接收平面 **/
const geometry = new Three.PlaneGeometry(bgW, bgH);
const material = new Three.MeshBasicMaterial({ color: 0xffff00 });
Meshs.raycasterPlatform = new Three.Mesh(geometry, material);
Meshs.raycasterPlatform.visible = false;
scene.add(Meshs.raycasterPlatform);
/** 接收平面 **/
buttonGroup = new Three.Group();
addRoundedRectShape();
addBall();
addClouds();
addStars();
};
function addRoundedRectShape () {
const trackShape = new Three.Shape();
(function roundedRect(ctx, x, y, width, height) {
//创建跑道形shape，两边圆半径 = height/2
const radius = height * 0.5;
const w = width > height ? width - height : 0; //中间部分宽度
ctx.moveT
threeDayNight.zip （3个子文件） 
threeDayNight 
clouds.js 255KB stars.js 4KB
dayNight.html 17KB资源评论
G_console
- 粉丝: 358
- 资源: 1
