dawn888

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

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

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

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

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

posted @ 2020-03-10 15:32 dawn888 阅读(796) 评论(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 阅读(582) 评论(0) 推荐(0) 编辑

threejs点击事件

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

posted @ 2020-03-10 14:15 dawn888 阅读(10160) 评论(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 阅读(3204) 评论(0) 推荐(0) 编辑

svg整体缩放至指定大小

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

posted @ 2020-03-10 13:13 dawn888 阅读(2726) 评论(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 阅读(3083) 评论(0) 推荐(0) 编辑

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

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

posted @ 2020-03-10 11:43 dawn888 阅读(320) 评论(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 阅读(5458) 评论(0) 推荐(0) 编辑

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

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

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