自己做图网站,网站运营优化推广,wordpress投稿vip,网站开发建设技术特点参考资料
three.js Canvas画布布局…模型加载进度条
知识点
注#xff1a;基于Three.jsv0.155.0
three.js Canvas画布布局UI交互界面与Canvas画布叠加UI交互按钮与3D场景交互Three.js背景透明度#xff1a;.setClearAlpha()方法、背景透明alpha: true、.setClearColor()方…参考资料
three.js Canvas画布布局…模型加载进度条
知识点
注基于Three.jsv0.155.0
three.js Canvas画布布局UI交互界面与Canvas画布叠加UI交互按钮与3D场景交互Three.js背景透明度.setClearAlpha()方法、背景透明alpha: true、.setClearColor()方法Three.js渲染结果保存为图片preserveDrawingBuffer:true、Cavnas方法.toDataURL()深度冲突(模型闪烁)logarithmicDepthBuffer: true模型加载进度条
代码实现
!DOCTYPE html
html langen
headmeta charsetUTF-8titleThree.js/title
/headbodydiv styleposition:absolute; left: 10px; top: 10pxbutton idbtnChangeBgColor切换背景色/buttonbutton idbtnDownloadPhoto下载图片/button/div/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.PlaneGeometry(100, 100);// 材质 // MeshBasicMaterial不受光// MeshLambertMaterial受光const material new THREE.MeshLambertMaterial({color:0x0000ff,side: THREE.DoubleSide});// 网格模型物体const mesh new THREE.Mesh(geometry, material);mesh.position.set(0, 0, 0);scene.add(mesh);const mesh1 mesh.clone();mesh1.material mesh.material.clone();mesh1.material.color.set(0xff0000);// 设置模型宽度、高度mesh1.scale.set(2, 2, 2);mesh1.position.z 0.01;scene.add(mesh1);// 坐标系const axes new THREE.AxesHelper(200);scene.add(axes);// // 点光源// const pointLight new THREE.PointLight( 0xffffff, 1.0, 0, 0);// pointLight.position.set(-200, 200, 200 );// scene.add( pointLight );// // 辅助点光源// const pointLightHelper new THREE.PointLightHelper( pointLight, 10 );// scene.add( pointLightHelper );// 环境光const ambientLight new THREE.AmbientLight( 0xffffff, 0.2);scene.add( ambientLight );// 平行光const directionalLight new THREE.DirectionalLight( 0xffffff, 1, 0, 0);// directionalLight.position.set(100, 0, 0);// directionalLight.position.set(0, 100, 0);// directionalLight.position.set(100, 100, 100);directionalLight.position.set(100, 60, 50);directionalLight.target mesh;scene.add( directionalLight );// 辅助平行光const directionalLightHelper new THREE.DirectionalLightHelper( directionalLight, 10 );scene.add( directionalLightHelper );// 相机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({// 背景透明// alpha: true// 想把canvas画布上内容下载到本地需要设置为truepreserveDrawingBuffer: true,// 设置对数深度缓冲区优化深度冲突问题logarithmicDepthBuffer: true});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);});document.getElementById(btnChangeBgColor).addEventListener(click,function(){renderer.setClearColor(0xff0000, 0.5);renderer.render(scene, camera);})document.getElementById(btnDownloadPhoto).addEventListener(click,function(){// 创建一个a链接var link document.createElement(a);link.href renderer.domElement.toDataURL(image/png);link.download threejs.png; //下载文件名link.click();})/script
/html
