wordpress 生成静态页面,如何给网站做seo,在线设计系统,个人网站logo生成参考资料
阵列立方体和相机适配体验Threejs常见几何体简介…gui.js库(可视化改变三维场景)
知识点
注#xff1a;基于Three.jsv0.155.0
长方体#xff1a;oxGeometry球体#xff1a;SphereGeometry圆柱#xff1a;CylinderGeometry矩形平面#xff1a;PlaneGeometry圆…参考资料
阵列立方体和相机适配体验Threejs常见几何体简介…gui.js库(可视化改变三维场景)
知识点
注基于Three.jsv0.155.0
长方体oxGeometry球体SphereGeometry圆柱CylinderGeometry矩形平面PlaneGeometry圆形平面CircleGeometry高光网格材质MeshPhongMaterialshininess、specularWebGL渲染器设置antialias 、setPixelRatio、setClearColorgui.js库add、addColor、addFolder、name、step、onChange关键词搜索examplesFind in Folder
代码实现
阵列立方体
!DOCTYPE html
html langen
headmeta charsetUTF-8titleThree.js/title
/headbody/body!-- 具体路径配置你根据自己文件目录设置我的是课件中源码形式 --script typeimportmap{imports: {three: ./js/three.module.js,three/addons/: ../three.js/examples/jsm/}}/scriptscript typemoduleimport * as THREE from three;import { OrbitControls } from three/addons/controls/OrbitControls.js;const width 800const height 500// 场景const scene new THREE.Scene();// 几何体const geometry new THREE.BoxGeometry(100, 100, 100);// 材质 // MeshBasicMaterial不受光// MeshLambertMaterial受光const material new THREE.MeshLambertMaterial({color: 0x00ffff, //设置材质颜色transparent: true,//开启透明opacity: 0.8,//设置透明度});for (let i 0; i 10; i) {for (let j 0; j 10; j) {const mesh new THREE.Mesh(geometry, material); //网格模型对象Mesh// 在XOZ平面上分布mesh.position.set(i * 200, 0, j * 200);scene.add(mesh); //网格模型添加到场景中 }}// 坐标系const axes new THREE.AxesHelper(200);scene.add(axes);// 点光源const pointLight new THREE.PointLight( 0xffffff, 1.0, 0, 0);pointLight.position.set(2000, 2000, 2000 );scene.add( pointLight );// 环境光const ambientLight new THREE.AmbientLight( 0xffffff, 0.2);scene.add( ambientLight );// 相机const camera new THREE.PerspectiveCamera(60, width / height, 1, 8000);// camera.position.set(292, 223, 185);//在原来相机位置基础上拉远可以观察到更大的范围camera.position.set(2000, 2000, 2000);camera.lookAt(1000, 0, 1000);// 渲染器const renderer new THREE.WebGLRenderer();renderer.setSize(width, height);renderer.render(scene, camera);document.body.appendChild(renderer.domElement);// 控制器const controls new OrbitControls(camera, renderer.domElement);controls.target.set(1000, 0, 1000);controls.update();controls.addEventListener(change, () {renderer.render(scene, camera);});/script
/html 常见几何体
!DOCTYPE html
html langen
headmeta charsetUTF-8titleThree.js/title
/headbody/body!-- 具体路径配置你根据自己文件目录设置我的是课件中源码形式 --script typeimportmap{imports: {three: ./js/three.module.js,three/addons/: ../three.js/examples/jsm/}}/scriptscript typemoduleimport * as THREE from three;import { OrbitControls } from three/addons/controls/OrbitControls.js;const width 800const height 500// 场景const scene new THREE.Scene();// 几何体// 正方体// const geometry new THREE.BoxGeometry(100, 100, 100);// 球体// const geometry new THREE.SphereGeometry(100);// 圆锥体// const geometry new THREE.CylinderGeometry(50, 100, 100);// 正方形平面// const geometry new THREE.PlaneGeometry(100, 100);// 圆形平面const geometry new THREE.CircleGeometry(100);// 材质const material new THREE.MeshLambertMaterial({color: 0x00ff00,transparent: true,opacity: 0.8,side: THREE.DoubleSide, //两面可见});// 网格模型物体const mesh new THREE.Mesh(geometry, material);mesh.position.set(0, 0, 0);scene.add(mesh);// 坐标系const axes new THREE.AxesHelper(200);scene.add(axes);// 点光源const pointLight new THREE.PointLight( 0xffffff, 1.0, 0, 0);pointLight.position.set(2000, 2000, 2000 );scene.add( pointLight );// 环境光const ambientLight new THREE.AmbientLight( 0xffffff, 0.2);scene.add( ambientLight );// 相机const camera new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);camera.position.set(200, 200, 200);camera.lookAt(scene.position);// 渲染器const renderer new THREE.WebGLRenderer();renderer.setSize(width, height);renderer.render(scene, camera);document.body.appendChild(renderer.domElement);// 控制器const controls new OrbitControls(camera, renderer.domElement);controls.addEventListener(change, () {renderer.render(scene, camera);});/script
/html高光网格材质
!DOCTYPE html
html langen
headmeta charsetUTF-8titleThree.js/title
/headbody/body!-- 具体路径配置你根据自己文件目录设置我的是课件中源码形式 --script typeimportmap{imports: {three: ./js/three.module.js,three/addons/: ../three.js/examples/jsm/}}/scriptscript typemoduleimport * as THREE from three;import { OrbitControls } from three/addons/controls/OrbitControls.js;const width 800const height 500// 场景const scene new THREE.Scene();// 几何体// 球体// const geometry new THREE.BoxGeometry(100, 100, 100);const geometry new THREE.SphereGeometry(100);// 材质const material new THREE.MeshPhongMaterial({color: 0x00ff00,shininess: 80, //高光部分的亮度默认30specular: 0x444444, //高光部分的颜色});// 网格模型物体const mesh new THREE.Mesh(geometry, material);mesh.position.set(0, 0, 0);scene.add(mesh);// 坐标系const axes new THREE.AxesHelper(200);scene.add(axes);// 点光源const pointLight new THREE.PointLight( 0xffffff, 1.0, 0, 0);pointLight.position.set(2000, 2000, 2000 );scene.add( pointLight );// 环境光const ambientLight new THREE.AmbientLight( 0xffffff, 0.2);scene.add( ambientLight );// 相机const camera new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);camera.position.set(200, 200, 200);camera.lookAt(scene.position);// 渲染器const renderer new THREE.WebGLRenderer();renderer.setSize(width, height);renderer.render(scene, camera);document.body.appendChild(renderer.domElement);// 控制器const controls new OrbitControls(camera, renderer.domElement);controls.addEventListener(change, () {renderer.render(scene, camera);});/script
/htmlWebGL渲染器设置
!DOCTYPE html
html langen
headmeta charsetUTF-8titleThree.js/title
/headbody/body!-- 具体路径配置你根据自己文件目录设置我的是课件中源码形式 --script typeimportmap{imports: {three: ./js/three.module.js,three/addons/: ../three.js/examples/jsm/}}/scriptscript typemoduleimport * as THREE from three;import { OrbitControls } from three/addons/controls/OrbitControls.js;const width 800const height 500// 场景const scene new THREE.Scene();// 几何体// 球体const geometry new THREE.BoxGeometry(100, 100, 100);// 材质const material new THREE.MeshLambertMaterial({color: 0x00ff00, //设置材质颜色transparent: true,//开启透明opacity: 0.8,//设置透明度});// 网格模型物体const mesh new THREE.Mesh(geometry, material);mesh.position.set(0, 0, 0);scene.add(mesh);// 坐标系const axes new THREE.AxesHelper(200);scene.add(axes);// 点光源const pointLight new THREE.PointLight( 0xffffff, 1.0, 0, 0);pointLight.position.set(2000, 2000, 2000 );scene.add( pointLight );// 环境光const ambientLight new THREE.AmbientLight( 0xffffff, 0.2);scene.add( ambientLight );// 相机const camera new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);camera.position.set(200, 200, 200);camera.lookAt(scene.position);// 渲染器const renderer new THREE.WebGLRenderer({antialias: true});// 设置设备比固定写法renderer.setPixelRatio(window.devicePixelRatio);// 设置背景色renderer.setClearColor(0x444444, 1);// 设置渲染器的尺寸renderer.setSize(width, height);renderer.render(scene, camera);document.body.appendChild(renderer.domElement);// 控制器const controls new OrbitControls(camera, renderer.domElement);controls.addEventListener(change, () {renderer.render(scene, camera);});/script
/htmlgui.js库
!DOCTYPE html
html langen
headmeta charsetUTF-8titleThree.js/title
/headbody/body!-- 具体路径配置你根据自己文件目录设置我的是课件中源码形式 --script typeimportmap{imports: {three: ./js/three.module.js,three/addons/: ../three.js/examples/jsm/}}/scriptscript typemoduleimport * as THREE from three;import { OrbitControls } from three/addons/controls/OrbitControls.js;import { GUI } from three/addons/libs/lil-gui.module.min.js;const width 800const height 500const gui new GUI();gui.domElement.style.right 0px;gui.domElement.style.width 300px;// 场景const scene new THREE.Scene();// 几何体// 球体const geometry new THREE.BoxGeometry(100, 100, 100);// 材质const material new THREE.MeshLambertMaterial({color: 0x00ff00, //设置材质颜色transparent: true,//开启透明opacity: 0.8,//设置透明度});console.log( ~ file: 1.19gui.js库(可视化改变三维场景).html:42 ~ material:, material)// 网格模型物体const mesh new THREE.Mesh(geometry, material);mesh.position.set(0, 0, 0);scene.add(mesh);// 坐标系const axes new THREE.AxesHelper(200);scene.add(axes);// 点光源const pointLight new THREE.PointLight( 0xffffff, 1.0, 0, 0);pointLight.position.set(2000, 2000, 2000 );scene.add( pointLight );// 环境光const ambientLight new THREE.AmbientLight( 0xffffff, 0.2);scene.add( ambientLight );// 相机const camera new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);camera.position.set(200, 200, 200);camera.lookAt(scene.position);// 渲染器const renderer new THREE.WebGLRenderer({antialias: true});// 设置设备比固定写法renderer.setPixelRatio(window.devicePixelRatio);// 设置背景色renderer.setClearColor(0x444444, 1);// 设置渲染器的尺寸renderer.setSize(width, height);renderer.render(scene, camera);document.body.appendChild(renderer.domElement);// 控制器const controls new OrbitControls(camera, renderer.domElement);controls.addEventListener(change, () {renderer.render(scene, camera);});var guiObj {color: 0xffffff,obj: {左: -100,中: 0,右: 200},bool: false,}// 动画渲染// 跟踪时间function render() {requestAnimationFrame(render);guiObj.bool (mesh.rotation.y 0.01);renderer.render(scene, camera);}render();const ambientFoloer gui.addFolder(环境光);ambientFoloer.close();// gui动态改变光的强度ambientFoloer.add(ambientLight, intensity, 0, 2).name(环境光强度);const materialFoloer gui.addFolder(材料);materialFoloer.close();// gui动态改变材料颜色materialFoloer.addColor(guiObj, color).name(材料颜色).onChange(function (value) { mesh.material.color.set(value)});const meshFoloer gui.addFolder(物体);meshFoloer.close();// gui动态改变材料颜色meshFoloer.add(mesh.position, y, [-100, 0 ,200]).name(物体y轴);// gui动态改变材料颜色meshFoloer.add(mesh.position, x, {左: -100,中: 0,右: 200}).name(物体x轴);meshFoloer.add(mesh.position, x, 0, 100).step(2);meshFoloer.add(mesh.position, y, 0, 100);meshFoloer.add(mesh.position, z, 0, 100);meshFoloer.add(guiObj, bool).name(是否旋转);/script
/html
