当前位置：首页 > news >正文

做网站业务员提成几个点迈若网站建设

news 2025/9/16 13:42:10

做网站业务员提成几个点,迈若网站建设,建筑施工特种作业证件查询官网,重庆网站建公司大全一、如何学习WEB可视化3D技术与课程内容演示； 1、项目案例： 政府有大量的新基建的项目：如数字孪生、智慧城市、智慧园区、智慧工厂、智慧消防等等都涉及了3d的可视化技术； 2、如何系统的学号WEB 3D可视化技术？ three…

一、如何学习WEB可视化3D技术与课程内容演示；

1、项目案例：

政府有大量的新基建的项目：如数字孪生、智慧城市、智慧园区、智慧工厂、智慧消防等等都涉及了3d的可视化技术；

2、如何系统的学号WEB 3D可视化技术？

three.js是一个让用户通过javascript入手进入搭建webgl项目的类库；

学习webgl需要图形学的知识，而webgl需要通过学习 js 和 glsl 两种语言；

直接使用webgl需要的话，那么势必是从底层写起来，那这个时候必须全面的去了解着色器的语法，那么自己需要去编写顶点着色器和片元着色器；

3、如何开始学习three.js？

需要掌握：threejs里面的基本概念：点、线、面、几何体；
需要掌握：材质物体、场景、相机、渲染器、动画、控制器；

需要了解：pbr（pbr是基于物理的光照原理的渲染）、环境贴图、凹凸贴图、置换贴图、放射光、环境贴图、金属贴图、粗糙度贴图；
如何通过这些方式把光照的效果：类如石子的凹凸、门面的凹凸、仅仅通过一个平面也能够显示出凹凸不平的效果以及折射不同角度的光照效果；

如何打造粒子？我们要绘制雨雪、落叶、星河；

如何让我们的网页跟我们的物体进行一个互动？如何选中场景中的物体进行交互？如何能够掌握物理引擎让物体有真实的物理效果？例如像：重力、反弹、摩擦力等物体这个相互作用，让它更加的真实？

4、如何系统学习WEBGL？

        进入webgl的魔力世界：掌握着色技术的语言控制，用gpu的方式来进行渲染；掌握threejs怎么用底层去封装webgl；
        如何通过着色器编写顶点着色器？如何通过着色器编写片元着色器？
        了解整个图像渲染的原理，去绘制比如动态飘扬的旗帜、衣服、烟雾、乌云、波涛汹涌的大海、水纹等...
        掌握了着色器，我们就可以写出各种酷炫的效果:像节日的烟花。
        继续深入可以让整个场景进行后期的加工，例如说：可以打造出像生化危机里面闪烁的怪异的画面、一个带雪花的陈旧感的画面、编写着色器打造出水底观看的效果；

二、新增打造开放世界课程项目预览；

三、本地搭建three.js的官方网站；

1、Github下载three.js的代码；

官网：github.com:mrdoob/three.js.git

下载压缩包文件：Download ZIP

解压文件后：npm install

启动项目：npm run dev

四、使用parcel搭建three.js的开发环境；

1、为什么使用parcel？

代码自动补全；

写完代码在浏览器中可以直接看到效果；

极速配置、快速上手开发；

2、如何搭建parcel的开发环境？

网址：parceljs.cn

// 01.项目初始化
npm init// 02.安装bunder
npm install parcel-bundler// 03.配置命令
{"scripts" : {// 打包哪个文件"dev" : "parcel src/index.html",// 项目构建"build" : "parcel build src/index.html"}
}// 04.设置开发环境的依赖
npm install parcel-bundler --save-dev

3、安装Three.js的依赖

// 安装threejs的环境包依赖
npm install three --save

五、使用three.js渲染第一个场景和物体；

import * as THREE from 'three';console.log(THREE)// 目标：了解three.js最基本的内容// 一、创建场景
const scene = new THREE.Scene();// 二、创建相机(透视相机)
/*** fov    摄像机是椎体垂直视野角度* aspect 摄像机视椎体宽高比* near   摄像机视椎体近端面* far    摄像机视椎体远端面*/
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000
);// 2.1.设置相机位置
camera.position.set(0,0,10);// 2.2.场景中添加相机
scene.add(camera);// 三、场景中添加物体
// 3.1.创建几何体对象
const cubeGeometry = new THREE.BoxGeometry(1,1,1);// 3.2.设置几何体的材质
const cubeMaterial = new THREE.MeshBasicMaterial({color : 0xffff000})// 3.3.根据几何体的材质创建物体
const cube = new THREE.Mesh(cubeGeometry , cubeMaterial);// 3.4.将几何体添加到场景当中
scene.add(cube);// 四、初始化渲染器
// 4.1.初始化渲染器
const renderer = new THREE.WebGLRenderer();// 4.2.设置渲染的尺寸和大小,和屏幕的尺寸大小一致
renderer.setSize(window.innerWidth, window.innerHeight);console.log(renderer);// 五、将webgl渲染的canvas内容添加至body
document.body.appendChild(renderer.domElement);// 六、使用渲染器通过相机将场景渲染进来
renderer.render(scene,camera);

六、如何处理运行搭建开发Three环境出现的问题；

七、结合vue开发three.js；

1、用vue搭建THREE的开发环境；

// 01.全局安装VUE-CLI环境
npm install -g @vue/cli// 02.创建vue项目，选择vue3版本
vue create threeapp?  Your connection to the default yarn registry seems to be slow.Use https://registry.npmmirror.com for faster installation? YesVue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel
? Choose a version of Vue.js that you want to start the project with 3.x
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: Yarn// 03.安装THREE的依赖
cd /threeapp
yarn add three// 04.启动环境
yarn serve

2、修改App.vue的文件；

<template><div></div>
</template><script setup>import * as THREE from 'three';console.log(THREE)// 目标：了解three.js最基本的内容// 一、创建场景const scene = new THREE.Scene();// 二、创建相机(透视相机)/*** fov    摄像机是椎体垂直视野角度* aspect 摄像机视椎体宽高比* near   摄像机视椎体近端面* far    摄像机视椎体远端面*/const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);// 2.1.设置相机位置camera.position.set(0,0,10);// 2.2.场景中添加相机scene.add(camera);// 三、场景中添加物体// 3.1.创建几何体对象const cubeGeometry = new THREE.BoxGeometry(1,1,1);// 3.2.设置几何体的材质const cubeMaterial = new THREE.MeshBasicMaterial({color : 0xffff000})// 3.3.根据几何体的材质创建物体const cube = new THREE.Mesh(cubeGeometry , cubeMaterial);// 3.4.将几何体添加到场景当中scene.add(cube);// 四、初始化渲染器// 4.1.初始化渲染器const renderer = new THREE.WebGLRenderer();// 4.2.设置渲染的尺寸和大小,和屏幕的尺寸大小一致renderer.setSize(window.innerWidth, window.innerHeight);console.log(renderer);// 五、将webgl渲染的canvas内容添加至bodydocument.body.appendChild(renderer.domElement);// 六、使用渲染器通过相机将场景渲染进来renderer.render(scene,camera);</script><style>
* {margin: 0;padding: 0;box-sizing: border-box;
}
canvas {width: 100vw;height: 100vh;postion: fixed;left:0;top:0;
}</style>

注：本文为THREEJS的学习笔记，不涉及商业盈利，如原作者认为有涉及原课程的侵权行为，请联系我删文处理！！！

查看全文

http://www.yayakq.cn/news/243616/