three.js加载模型基础代码
代码展示import * as THREE from 'three'; import { onMounted } from "vue" import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import ...
three.js结合cannon-es实现3d物理世界
说明这里主要实现物理世界中的自由落体和物体间的碰撞 学习本篇文章前，请事先了解或者学习一下three的内容，方便理解，这里不会教大家创建一个基础的three3d场景，直接就是进行物理世界的搭建 下载依赖包npm i cannon-es 引入依赖包import * as CANNON from "cannon-es"; 搭建物理世界1.实例化一个物理世界,并且设置重力加...
文件上传多种场景(前端+后端)
input进行文件上传时有关的属性 属性 说明 accept 指定上传文件的类型，例如：accept=”image/*”，只能上传图片文件 multiple 允许上传多个文件 webkitdirectory 是否上传文件夹 单文件上传后端： var express = require('express'); var router ...
sass实现主题切换
需要用到的sass知识点 变量的定义 @mixin混入 @each遍历 实现代码@use "sass:map"; $light: ( bg-color: #ffffff, text-color: black ); $dark: ( bg-color: #2c2c2c, text-color: white ); // 存储主题 $th...
GSAP基础知识
安装 CDN <script src="https://cdn.jsdelivr.net/npm/gsap@3.12/dist/gsap.min.js"></script> npm npm install gsap 使用gsap.to(".box", {x: 200}) 说明： to 方法 .bo...
GSAP插件介绍
ScrollTrigger 一个可以将元素动画效果与浏览器滚动条关联起来的插件 引入依赖 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script> 使用 gsap.registerPlugin(Scrol...
three.js添加gui参数调试工具
安装依赖npm install --save dat.gui 在vue中使用<template> <div id="canvas"></div> </template> <script> import dat from "dat.gui" // 创建gui调试面板 ...
three.js添加轨道控制器
引入import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; 添加轨道控制器const controls = new OrbitControls( camera, renderer.domElement ); 在动画函数中使用function animate( t...
three.js常见知识点
添加三维坐标const axesHelper = new THREE.AxesHelper(5) axesHelper.position.y = 1 scene.add(axesHelper) 修改背景颜色scene.background = new THREE.Color("#9aa7b1") 雾// 第一个参数是雾的颜色，第二个是雾的最小距离，第三个是雾的最大距离...
使用docker镜像nginx进行项目部署
准备阶段 准备任意一个项目，或者直接一个html文件 下载docker，自行前往官网进行下载 可以提前了解一下docker的数据卷挂载，可以将宿主机文件与docker容器中的文件进行一个同步，方便对nginx进行配置与日志查看 这篇教程不适合对docker完全不懂的人，不然你很难理解，甚至难以感受到docker进行项目部署的方便 我这里使用的是windows11操作系统进行演示，虽然doc...