dawn888 - 博客园

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

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

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

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

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

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

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

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

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

threejs点击事件

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

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

svg整体缩放至指定大小

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

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

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

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

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