如何让百度搜到我的网站wordpress附加字段

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

如何让百度搜到我的网站,wordpress附加字段,怎样免费注册域名,二手交易网站开发系统#x1f468;⚕️ 主页#xff1a; gis分享者 #x1f468;⚕️ 感谢各位大佬 点赞#x1f44d; 收藏⭐ 留言#x1f4dd; 加关注✅! #x1f468;⚕️ 收录于专栏#xff1a;threejs gis工程师 文章目录 一、#x1f340;前言1.1 ☘️THREE.MeshPhongMaterial高…⚕️ 主页 gis分享者 ⚕️ 感谢各位大佬 点赞 收藏⭐ 留言 加关注✅! ⚕️ 收录于专栏threejs gis工程师 文章目录 一、前言1.1 ☘️THREE.MeshPhongMaterial高光材质1.2 bumpMap 凹凸贴图 二、使用设置bumpMap凹凸贴图创建褶皱,实现贴图厚度效果1. ☘️实现思路2. ☘️代码样例 一、前言 本文详细介绍如何基于threejs在三维场景中使用设置bumpMap凹凸贴图创建褶皱,实现贴图厚度效果亲测可用。希望能帮助到您。一起学习加油加油 1.1 ☘️THREE.MeshPhongMaterial高光材质 THREE.MeshPhongMaterial 是 Three.js 中的一种材质类型用于模拟物体表面的光照效果包括漫反射diffuse和镜面反射specular。这种材质遵循 Phong 反射模型可以模拟出光滑表面的高光效果因此非常适合用来渲染金属、塑料、瓷器等具有光泽表面的物体。 常用属性 THREE.MeshPhongMaterial 继承自 THREE.Material并具有一些特定的属性可以用来控制材质的外观 color材质的基本颜色默认为白色0xffffff。可以是一个整数表示十六进制颜色值。 map基础颜色贴图可以用来替代材质的颜色。可以是一个 THREE.Texture 对象。 alphaMap透明度贴图可以用来定义材质的透明度。可以是一个 THREE.Texture 对象。 emissive自发光颜色默认为黑色0x000000。即使在没有光源的情况下也会显示这个颜色。 emissiveMap自发光贴图可以用来定义自发光的颜色。可以是一个 THREE.Texture 对象。 specular高光颜色默认为白色0x111111。高光颜色定义了镜面反射的颜色。 shininess高光强度默认为 30。高光强度定义了高光区域的锐度数值越高高光越集中。 opacity材质的全局透明度默认为 1不透明。 transparent是否开启透明模式默认为 false。如果设置为 true则需要设置 opacity 或者使用 alphaMap。 side指定材质在哪一面渲染可以是 THREE.FrontSide正面、THREE.BackSide背面或 THREE.DoubleSide双面。 wireframe是否启用线框模式默认为 false。 visible是否渲染该材质默认为 true。 depthTest是否进行深度测试默认为 true。 depthWrite是否写入深度缓冲区默认为 true。 blending混合模式默认为 THREE.NormalBlending。可以设置为 THREE.AdditiveBlending、THREE.SubtractiveBlending 等。 vertexColors是否启用顶点颜色默认为 THREE.NoColors。可以设置为 THREE.VertexBasicColors、THREE.VertexColors 或 THREE.FaceColors。 flatShading是否使用平滑着色默认为 false。如果设置为 true则每个面片都将使用平均法线。 envMap环境贴图可以用来模拟环境光照。可以是一个 THREE.Texture 对象。 reflectivity环境光反射率默认为 1。 refractionRatio折射率默认为 0.98。 combine环境贴图的组合方式默认为 THREE.MixOperation。 bumpMap凹凸贴图可以用来模拟表面细节。可以是一个 THREE.Texture 对象。 bumpScale凹凸贴图的比例默认为 1。 normalMap法线贴图可以用来模拟表面细节。可以是一个 THREE.Texture 对象。 normalScale法线贴图的比例默认为 Vector2(1, 1)。 displacementMap置换贴图可以用来改变表面的高度。可以是一个 THREE.Texture 对象。 displacementScale置换贴图的比例默认为 1。 displacementBias置换贴图的偏移默认为 0。 1.2 bumpMap 凹凸贴图 凹凸贴图用于为材质增加厚度在三维环境中使表面产生凹凸不平的视觉效果。 它主要的原理是通过改变表面光照的法线。凹凸贴图是一种灰度图像素的密集程度定义的是凹凸的程度。凹凸贴图只包含像素的相对高度不包含倾斜方向的信息凹凸贴图不会改变物体的形状。 二、使用设置bumpMap凹凸贴图创建褶皱,实现贴图厚度效果

1. ☘️实现思路 1、初始化renderer渲染器2、初始化Scene三维场景3、初始化camera相机定义相机位置 camera.position.set设置相机方向camera.lookAt4、初始化THREE.AmbientLight环境光源scene场景加入环境光源初始化THREE.DirectionalLight平行光源设置平行光源位置设置平行光源投影scene添加平行光源。5、加载几何模型创建THREE.AxesHelper坐标辅助工具创建THREE.PlaneBufferGeometry平面几何体、THREE.GridHelper地板割线scene场景中加入创建的平面几何体和地板割线。创建墙纹理贴图对象normal和墙纹理凹凸贴图对象bump根据创建的墙纹理创建两个THREE.MeshPhongMaterial高光材质对象material1、material2创建立方体THREE.BoxGeometry对象geometry根据立方体geometry和材质THREE.MeshPhongMaterial对象创建两个THREE.Mesh网格对象cube1、cube2并设置位置scene场景中加入cube1和cube2。具体实现参考代码样例。6、加入gui、controls控制加入stats监控器监控帧数信息。
2. ☘️代码样例 !DOCTYPE html html langen headmeta charsetUTF-8titlelearn52(使用设置BUMPMAP凹凸贴图创建褶皱,实现贴图厚度效果)/titlescript srclib/threejs/127/three.js-master/build/three.js/scriptscript srclib/threejs/127/three.js-master/examples/js/controls/OrbitControls.js/scriptscript srclib/threejs/127/three.js-master/examples/js/libs/stats.min.js/scriptscript srclib/threejs/127/three.js-master/examples/js/libs/dat.gui.min.js/scriptscript srclib/js/Detector.js/script /head style typetext/csshtml, body {margin: 0;height: 100%;}canvas {display: block;} /style body onloaddraw() /body scriptvar renderer, camera, scene, gui, light, stats, controls, cube1, cube2var initRender () {renderer new THREE.WebGLRenderer({antialias: true})renderer.setClearColor(0xeeeeee)renderer.setPixelRatio(window.devicePixelRatio)renderer.setSize(window.innerWidth, window.innerHeight)renderer.shadowMap.enabled truedocument.body.appendChild(renderer.domElement)}var initScene () {scene new THREE.Scene()scene.backgroundColor new THREE.Color(0xa0a0a0)scene.fog new THREE.Fog(0xa0a0a0, 5, 50)}var initCamera () {camera new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200)camera.position.set(0, 5, 15)}var initGui () {gui {bump: 0.03,animation: false}var datGui new dat.GUI()datGui.add(gui, bump, -1, 1).onChange(e {cube1.material.bumpScale e})datGui.add(gui, animation)}var initLight () {scene.add(new THREE.AmbientLight(0x444444))light new THREE.DirectionalLight(0xffffff)light.position.set(0, 20, 10)light.castShadow truescene.add(light)}var initModel () {var helper new THREE.AxesHelper(50)scene.add(helper)// 地板var mesh new THREE.Mesh(new THREE.PlaneBufferGeometry(200, 200), new THREE.MeshPhongMaterial({color: 0xffffff,depthWrite: false}))mesh.rotation.x -0.5 * Math.PImesh.receiveShadow truescene.add(mesh)// 加载地板割线var grid new THREE.GridHelper(200, 50, 0x000000, 0x000000)grid.material.opacity 0.2grid.material.transparent truescene.add(grid)var bump new THREE.TextureLoader().load(data/texture/wall/brick_bump.jpg)var normal new THREE.TextureLoader().load(data/texture/wall/brick_diffuse.jpg)var material1 new THREE.MeshPhongMaterial({map: normal})material1.bumpMap bumpmaterial1.bumpScale 0.03var geometry new THREE.BoxGeometry(8, 8, 4)cube1 new THREE.Mesh(geometry, material1)cube1.position.set(-5, 5, 0)scene.add(cube1)var material2 new THREE.MeshPhongMaterial({map: normal})cube2 new THREE.Mesh(geometry, material2)cube2.position.set(5, 5, 0)scene.add(cube2)}var initStats () {stats new Stats()document.body.appendChild(stats.dom)}var initControls () {controls new THREE.OrbitControls(camera, renderer.domElement)controls.enableDamping true}var render () {if (gui.animation) {cube1.rotation.y 0.01cube2.rotation.y - 0.01}controls.update()}var animate () {render()stats.update()renderer.render(scene, camera)requestAnimationFrame(animate)}var onWindowResize () {camera.aspect window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()renderer.setSize(window.innerWidth, window.innerHeight)}var draw () {if (!Detector.webgl) Detector.addGetWebGLMessage()initGui()initRender()initScene()initCamera()initLight()initModel()initStats()initControls()animate()window.onresize onWindowResize} /script /html效果如下