draco与threejs完美结合
2024-05-10 04:48:55
简介
three.js可以说是非常有名了，它是一个JavaScript库，帮助我们在浏览器中绘制、控制3D场景。官网有很多炫酷的示例项目，还有文档以及例子。
这是本项目演示效果（demo源码）
工程目录
- threejsJoinDracoDemo
- js
- three.min.js
- OrbitControls.js
- draco_decoder.js
- DRACOLoader.js
- models
- bunny.drc //测试用的模型
- demo.html
- js
.js下载和.drc下载
| js | 功能 |
|---|---|
| three.min.js | three.js的核心 |
| OrbitControls.js | three.js的相机控制器，用于鼠标拖动、旋转 |
| draco_decoder.js | draco解码 |
| DRACOLoader.js | draco加载 |
示例代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>draco with three js</title>
</head>
<script src="js/three.min.js"></script>
<script src="js/DRACOLoader.js"></script>
<script src="js/draco_decoder.js"></script>
<script src="js/OrbitControls.js"></script>
<script>'use strict';var camera, cameraTarget, scene, renderer;function threejsInit() {var container = document.createElement('div');document.body.appendChild(container);//创建镜头camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 1000);camera.position.set(3, 0.15, 3);//指定镜头朝向cameraTarget = new THREE.Vector3(0, 0, 0);camera.lookAt(cameraTarget);//创建场景scene = new THREE.Scene();//用白色填充背景scene.fog = new THREE.Fog(0xffffff, 2, 15);// 添加两个光源，一个黄、一个白scene.add(new THREE.HemisphereLight(0x443333, 0x111122));addShadowedLight(1, 1, 1, 0xffffff, 5);addShadowedLight(0.5, 1, -1, 0xffaa00, 5);//创建相机控制var controls = new THREE.OrbitControls(camera);controls.addEventListener('change', render);// 创建渲染器rendererrenderer = new THREE.WebGLRenderer({antialias: true});renderer.setClearColor(scene.fog.color);renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);container.appendChild(renderer.domElement);window.addEventListener('resize', onWindowResize, false);}//监听浏览器窗口大小的变化，从而改变绘制区域function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);}//刷新每一帧function threejsAnimate() {requestAnimationFrame(threejsAnimate);render();}function render() {renderer.render(scene, camera);}//添加光源function addShadowedLight(x, y, z, color, intensity) {const directionalLight = new THREE.DirectionalLight(color, intensity);directionalLight.position.set(x, y, z);scene.add(directionalLight);}//缩放模型至合适大小、移动模型至合适位置function resizeGeometry(bufferGeometry, material) {var geometry;// Point cloud does not have face indices.if (bufferGeometry.index == null) {geometry = new THREE.Points(bufferGeometry, material);} else {bufferGeometry.computeVertexNormals();geometry = new THREE.Mesh(bufferGeometry, material);}// Compute range of the geometry coordinates for proper rendering.bufferGeometry.computeBoundingBox();const sizeX = bufferGeometry.boundingBox.max.x - bufferGeometry.boundingBox.min.x;const sizeY = bufferGeometry.boundingBox.max.y - bufferGeometry.boundingBox.min.y;const sizeZ = bufferGeometry.boundingBox.max.z - bufferGeometry.boundingBox.min.z;const diagonalSize = Math.sqrt(sizeX * sizeX + sizeY * sizeY + sizeZ * sizeZ);const scale = 1.0 / diagonalSize;const midX =(bufferGeometry.boundingBox.min.x + bufferGeometry.boundingBox.max.x) / 2;const midY =(bufferGeometry.boundingBox.min.y + bufferGeometry.boundingBox.max.y) / 2;const midZ =(bufferGeometry.boundingBox.min.z + bufferGeometry.boundingBox.max.z) / 2;geometry.scale.multiplyScalar(scale);geometry.position.x = -midX * scale;geometry.position.y = -midY * scale;geometry.position.z = -midZ * scale;geometry.castShadow = true;geometry.receiveShadow = true;return geometry;}// Global Draco decoder type.var dracoDecoderType = {};var dracoLoader;function createDracoDecoder() {dracoLoader = new THREE.DRACOLoader();//dracoLoader.setDracoDecoderType(dracoDecoderType);}createDracoDecoder();// bufferGeometry is a geometry decoded by DRACOLoader.jsfunction onDecode(bufferGeometry) {const material = new THREE.MeshStandardMaterial({vertexColors: THREE.VertexColors});const geometry = resizeGeometry(bufferGeometry, material);const selectedObject = scene.getObjectByName("my_mesh");scene.remove(selectedObject);geometry.name = "my_mesh";scene.add(geometry);}// Download and decode the Draco encoded geometry.function downloadEncodedMesh(filename) {// Download the encoded file.const xhr = new XMLHttpRequest();xhr.open("GET", filename, true);xhr.responseType = "arraybuffer";xhr.onload = function (event) {const arrayBuffer = xhr.response;if (arrayBuffer) {dracoLoader.setVerbosity(1);dracoLoader.decodeDracoFile(arrayBuffer, onDecode);}};xhr.send(null);}window.onload = function () {const fileInput = document.getElementById('fileInput');fileInput.onclick = function () {this.value = '';}fileInput.addEventListener('change', function (e) {const file = fileInput.files[0];console.log(file);const reader = new FileReader();reader.onload = function (e) {// Enable logging to console output.dracoLoader.setVerbosity(1);dracoLoader.decodeDracoFile(reader.result, onDecode);}reader.readAsArrayBuffer(file);});threejsInit();threejsAnimate();//自动加载一个示例模型bunny.drcdownloadEncodedMesh('models/bunny.drc');}
</script>
<body>
<div id="page-wrapper"><h1>Open a draco compressed file (.drc):</h1><div><input type="file" id="fileInput"></div>
</div>
</body>
</html>draco与threejs完美结合相关推荐
- html5仿腾讯,高仿腾讯QQ Xplan（X计划）的H5页面（1）：threejs创建地球
上个月底,在朋友圈看到一个号称"这可能是地球上最美的h5"的分享,点进入后发现这个h5还很别致,思考了一会,决定要不高仿一个? 到今天为止,高仿基本完成, 除了手机端的media控 ...
- [转] ThreeJS中，那些会让阴影失效的操作
转自:https://segmentfault.com/a/1190000015330360 本来以为不就设一个阴影嘛,网上这么多文章,随便看一篇就知道怎么设置了,然而我却花了整整一天才让阴影出现.. ...
- Blender基础建模 | 大帅老猿threejs特训
最近接触到了web3d相关的知识,特别感觉"大帅老猿"和"胖达老师"带我入门! 今天来和大家一起讲讲我建模的故事!顺便教大家一起实现建模自由! 一.首先下载一个 ...
- 基于threejs的商品VR展示平台的设计与实现思路
目录 基于threejs的商品VR展示平台的设计与实现思路 前言 总体开发方案设计 总体开发设计思维导图 模型制作模块 前端展示模块 存储模块 后端管理模块 后台管理实现 商品模型制作 商品模型前期准 ...
- 【ThreeJS基础教程-材质纹理篇】3.1 纹理知识进阶
纹理知识进阶 学习ThreeJS的捷径 如何用一张地板砖贴图制作出地板砖效果 旋转纹理 移动纹理 纹理旋转与移动的应用 简单的光圈效果 简单的流水效果 WebGL项目优化技巧:没必要的细节可以用纹理直 ...
- 【ThreeJS基础教程】0.在学习使用ThreeJS之前
[ThreeJS基础教程]0.在学习使用ThreeJS之前 什么人适合学习ThreeJS 什么人不建议学习ThreeJS或学起来比较累 了解ThreeJS ThreeJS文档在哪 关于<Thre ...
- css和js3d粒子,升级版ThreeJS 3D粒子波浪动画
升级版ThreeJS 3D粒子波浪动画 2020-04-12 23:07:22 1307 编程开发 效果图 升级版demo 2:改变粒子的形状 demo 2 升级版demo 1:改变粒子大小,颜色 d ...
- threejs知识点：1.模型分析
合作qq:(550891796) =================================== 实例源码: http://download.csdn.net/download/zzjzmdx ...
- threejs 绘制球体_实战：用 threejs 创建一个地球
原标题:实战:用 threejs 创建一个地球 提示: 讲座 前端大型免费公开课讲座 教程 从零基础学前端教程,都在这~ 上个月底,在朋友圈看到一个号称"这可能是地球上最美的h5" ...
最新文章
- Visual Studio安装卸载模板
- PyCharm3.0默认快捷键
- html服务器框架,一种类似http/html的分布式GUI程序设计框架
- 蓝奏云外链批量下载软件
- datetime默认当前时间_简述Python培训之time和datetime的区别
- druid 数据库连接池，简单配置
- Linux下C++可视化调试神器vgdb
- Centos7.4安装Mysql5.6
- 20款最优秀的JavaScript编辑器
- 2位字母组合的全球国家或地区缩写
- git diff 比较文件的工具 DiffMerge 安装配置使用
- tidb源码编译安装，从入门到差点放弃
- yolov7训练自己的数据集
- 借势氢能源发展热潮，重塑股份持续加速行业布局
- 利用多线程爬点dianying回家慢慢看【python爬虫入门进阶】（05）
- 在线数据迁移，数字化时代的必修课——京东云数据迁移实践
- pg库sharelock_PG数据库错误: 检测到ShareLock死锁处理
- 虚拟机kali升级最新_虚拟机中安装kali 2020.3 史上最详细教程
- 【数据结构/C语言版】【图】邻接表存储
- 最大类间方差法（大津法OTSU）原理