- 博客(12)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 threejs创建一个流动的水管效果（通过材质的移动实现）
/** * 创建一个设置重复纹理的管道 */var curve = new THREE.CatmullRomCurve3([ new THREE.Vector3(-80, -40, 0), new THREE.Vector3(-70, 40, 0), new THREE.Vector3(70, 40, 0), new THREE.Vector3(80, -40, 0)]);var tubeGeometry = new THREE.TubeGeometry(curve, 100, .
2020-05-26 22:17:07
7392
1
原创 threejs之材质.side属性，让材质单面或者双面显示
var material = new THREE.MeshBasicMaterial({ color: 0xdd00ff, // 前面FrontSide 背面：BackSide 双面：DoubleSide side:THREE.DoubleSide,});直接上代码，关键的三个参数：前面：FrontSide （默认）背面：BackSide双面：DoubleSide...
2020-05-26 21:46:31
8562
5
原创 Threejs之用Shape对象和轮廓填充画一个地图坐标点的样子
使用的相关方法：Shape对象和轮廓填充ShapeGeometry// 一个外轮廓圆弧嵌套三个内圆弧轮廓var shape = new THREE.Shape(); //Shape对象//外轮廓shape.arc(0, 0, 100, 0, 2 * Math.PI);// 内轮廓1var path1 = new THREE.Path();path1.arc(0, 0, 40, 0, 2 * Math.PI);//三个内轮廓分别插入到holes属性中shape.holes.pus
2020-05-23 16:03:35
3653
原创 解决百度地图移动端（微信浏览器等）拖拽事件和点击事件冲突的BUG
在手机端，如果启用了百度地图的拖拽，那么部分手机上点击事件无法触发，无法获取点击位置的坐标，除非禁用拖拽的功能。但如果禁用拖拽后，用户体验就很差，所以以下代码可以直接解决问题，亲测可用，如有疑问可以私信或者留言。直接上代码把代码复制到引用百度JS的后面，然后把自己的click事件改为fastclick即可！/** * Author 岳晓 * * 对百度地图的事件扩展，目前扩展了fastclick和longclick, * 解决某些设备click不执行的问题 * 解决
2020-05-22 10:27:30
2943
2
原创 ThreeJs各种集合体的快速创建
//长方体 参数：长，宽，高var geometry = new THREE.BoxGeometry(100, 100, 100);// 球体 参数：半径60 经纬度细分数40,40var geometry = new THREE.SphereGeometry(60, 40, 40);// 圆柱 参数：圆柱面顶部、底部直径50,50 高度100 圆周分段数var geometry = new THREE.CylinderGeometry( 50, 50, 100, 25 );// 正.
2020-05-20 09:33:16
634
原创 ThreeJS之让一个模型围绕自己的轴心旋转
如果一个模型不在场景的中心点，这时候使用rotateY旋转的话，这个对象会围绕场景的中心点进行旋转，会转一个大圈那么怎么做才能让他在任何位置的时候，围绕自己的轴心进行旋转？下面的代码即可！ // 先获取geometey的中心点位置并留存 let center = new THREE.Vector3(); ditu.children[240].geometry.computeBoundingBox(); ditu.children[240].geometry.boundi.
2020-05-17 16:04:21
14865
7
原创 ThreeJs之 加载OBJ和MTL文件
import { DDSLoader } from '/three.js/three.js-master/examples/jsm/loaders/DDSLoader.js';import { MTLLoader } from '/three.js/three.js-master/examples/jsm/loaders/MTLLoader.js';import { OBJLoader } from '/three.js/three.js-master/examples/jsm/loaders/OBJ.
2020-05-16 14:48:24
2386
原创 ThreeJs事件之鼠标点击网格对象后触发对应事件
//声明raycaster和mouse变量 var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2();function onMouseClick( event ) { //通过鼠标点击的位置计算出raycaster所需要的点的位置，以屏幕中心为原点，值的范围为-1到1. mouse.x = ( event.clientX / window.innerWidth ) ...
2020-05-16 14:39:50
2483
原创 threejs之MeshBasicMaterial材质（不需要使用光源）
MeshBasicMaterial是一种非常简单的材质，这种材质不考虑场景中光照的影响。使用这种材质的网格会被渲染成简单的平面多边形，而且也可以显示几何体的线框。var meshMaterial = new THREE.MeshBasicMaterial({color:0xeeefff});...
2020-05-14 23:13:58
2571
原创 threejs之给场景添加天空盒子的纹理
var scene = new THREE.Scene(); //给场景添加天空盒子纹理 var cubeTextureLoader = new THREE.CubeTextureLoader(); cubeTextureLoader.setPath( '/three.js/mytest/images/' ); //六张图片分别是朝前的（posz）、朝后的（negz）、朝上的（posy）、朝下的（negy）、朝右的（posx）和朝左的（negx）。 var cub..
2020-05-14 23:09:36
1999
1
原创 基础用法
几何体Geometry创建一个立方体THREE.BoxGeometry(100,100,100)创建了一个长宽高都是100的立方体材质Material创建了一个可以用于立方体的材质对象THREE.MeshLambertMaterial({color:0x0000ff})光照Light创建一个点光源，意思就是从某个方向拿个手电筒照着var point=new THREE.PointLight(0xffffff);point.position.set(100,2..
2020-05-14 21:58:15
275
原创 可视化变换控件对象，可以动态拖动每一个组件threejs-TransformControls
import { TransformControls } from '/three.js/three.js-master/examples/jsm/controls/TransformControls.js'; import { DragControls } from '/three.js/three.js-master/examples/jsm/controls/DragControls.js'; //可视化变换控件对象 var transformC...
2020-05-14 21:58:01
2366
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人