2020 年 3月 10 日随笔档案 - dawn888

【three.js第七课】鼠标点击事件和键盘按键事件的使用

摘要：当我们使用鼠标操作three.js渲染出的对象时，不仅仅只是仅限用鼠标对场景的放大、缩小、旋转而已，还有鼠标左键、右键的点击以及键盘各种按键等等的事件。我们需要捕获这些事件，并在这些事件的方法里进行相关的操作。接下来是干货在【three.js第六课】的基础上，对代码进行整理后。得到本次试验的源码阅读全文

posted @ 2020-03-10 16:47 dawn888 阅读(2431) 评论(1) 推荐(0)

【three.js第六课】物体3D化

摘要： 1.在【three.js第五课】的基础上引入AnaglyphEffect.js文件。文件路径： three源码包中进入【examples】文件夹；进入【js】文件夹；进入【effects】文件夹中即可看到AnaglyphEffect.js文件我的引入如下： <script src="../e 阅读全文

posted @ 2020-03-10 16:09 dawn888 阅读(549) 评论(0) 推荐(0)

【three.js第五课】光线的添加和感光材料

摘要：材料分类： MeshBasicMaterial：基础网孔材料，一个以简单着色（平面或线框）方式来绘制几何形状的材料。MeshLambertMaterial：兰伯特网孔材料，一种非发光材料（兰伯特）的表面MeshPhongMaterial：网孔材料，用于表面有光泽的材料，计算每个像素。光线分类注意阅读全文

posted @ 2020-03-10 16:00 dawn888 阅读(862) 评论(0) 推荐(0)

【three.js第四课】自定义材料、贴图。

摘要： 1.先去下载6张不同的图片素材放到项目中。 2.在【three.js第三课】的代码基础上添加自定义的材料 //自定义材料 cubeMaterial 数组 //map:用于加载图片，THREE.TextureLoader().load('图片的地址')方法引入要放的图片，也可以用16进制的颜色替换：c 阅读全文

posted @ 2020-03-10 15:50 dawn888 阅读(1165) 评论(2) 推荐(1)

【three.js第三课】鼠标事件，移动、旋转物体

摘要： 1.下载three.js的源码包后，文件夹结构如下： 2.在【three.js第一课】的代码基础上，引入OrbitControls.js文件，此文件主要用于对鼠标的操作。该文件位置：在文件结构中找到【examples】文件夹，进入；找到其中的【js】文件夹，进入；找到其中的【control 阅读全文

posted @ 2020-03-10 15:40 dawn888 阅读(5481) 评论(0) 推荐(0)

【three.js第二课】页面自适应

摘要： 1.在【three.js第一课】的基础上加入以下代码，改变窗口大小时，页面内容会自适应 //加入事件监听器,窗口自适应 window.addEventListener('resize', function(){ var width = window.innerWidth; var height = 阅读全文

posted @ 2020-03-10 15:32 dawn888 阅读(839) 评论(0) 推荐(0)

【three.js 第一课】创建场景，显示几何体

摘要： <!DOCTYPE html> <html> <head> <title>demo1</title> </head> <style type="text/css"> body{ margin:0; } canvas{ width:100%; height:100%; } </style> <body 阅读全文

posted @ 2020-03-10 15:26 dawn888 阅读(607) 评论(0) 推荐(0)

threejs点击事件

摘要：示例浏览地址：https://ithanmang.gitee.io/threejs/home/201807/20180703/02-raycasterDemo.html 双击鼠标左键选中模型并显示信息。首先，解释一下三种坐标系的概念：场景坐标系（世界坐标系）、屏幕坐标系、视点坐标系。场景坐标通阅读全文

posted @ 2020-03-10 14:15 dawn888 阅读(10377) 评论(0) 推荐(1)

ThreeJs 导入外部三维模型，并实现鼠标滚动放大缩小旋转效果

摘要： let i = 0; function init() { // create a scene, that will hold all our elements such as objects, cameras and lights. var scene = new THREE.Scene(); // 阅读全文

posted @ 2020-03-10 14:12 dawn888 阅读(3415) 评论(0) 推荐(0)

svg整体缩放至指定大小

摘要：一、问题 svg画面跑在分辨率低的电脑上，导致不能完全显示。二、要求 svg要能够根据电脑的屏幕大小自动缩放至适配电脑的尺寸。三、实现 1.获取本机窗口高度、宽度 let clientWidth = document.documentElement.clientWidth, clientHeig 阅读全文

posted @ 2020-03-10 13:13 dawn888 阅读(2956) 评论(0) 推荐(0)

js操作svg整体缩放

摘要：首先我们先创建一个svg整体布局，代码如下： <!DOCTYPE html> <html> <head> <title>js操作svg实现整体缩放</title> <meta charset="utf-8"> </head> <body> <svg id="svg" style="backgroun 阅读全文

posted @ 2020-03-10 13:06 dawn888 阅读(3186) 评论(0) 推荐(0)

IE各版本CSS Hack（兼容性处理）语法速查表

摘要：为了兼容IE各个版本，需要在CSS中添加额外的代码，比如以前常用的_width。之所以工作，是因为浏览器会忽略不能解析的样式规则，因此举个例子来说，把_width写在width下面，对于非IE浏览器会解析到width，而对于IE6来说，会用_width覆盖前面的width规则，从而达到针对IE6浏览阅读全文

posted @ 2020-03-10 11:43 dawn888 阅读(346) 评论(0) 推荐(0)

如何使用Three.js加载obj和mtl文件

摘要： OBJ和MTL是3D模型的几何模型文件和材料文件。在最新的three.js版本(r78)中，以前的OBJMTLLoader类已废弃。现在要加载OBJ和MTL文件，需要结合OBJLoader和MTLLoader两个类来实现，这也提供了操作的灵活性。下述代码中首先使用MTLLoader加载egg. 阅读全文

posted @ 2020-03-10 11:39 dawn888 阅读(5895) 评论(0) 推荐(0)

Three.js实现3D地图实例分享

摘要：本文主要给大家介绍了关于利用Three.js开发实现3D地图的实践过程，文中通过示例代码介绍的非常详细，对大家学习或者使用three.js具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。希望能帮助到大家。前言本文主要介绍Three.js的开发基础和基本原理，以及如何实现3D全景阅读全文

posted @ 2020-03-10 10:11 dawn888 阅读(4545) 评论(0) 推荐(0)

dawn888