随笔分类 -  threejs

threejs 鼠标移动控制模型旋转
摘要:<!doctype html> <html> <head> <meta charset="utf-8"> <title>threejs鼠标移动控制模型旋转</title> </head> <body> <script src="js/threejs/three.js"></script> <!--< 阅读全文

posted @ 2020-03-31 10:24 dawn888 阅读(6470) 评论(1) 推荐(0) 编辑

Threejs从入门到入门
摘要:前言threejs官网:https://threejs.org/ github各个版本:https://github.com/mrdoob/three.js/tags 版本更迭很快,我用的时候还是r90秒秒钟r91出来了 刚入门的时候可以看看这个教程:http://www.hewebgl.com/a 阅读全文

posted @ 2020-03-12 08:55 dawn888 阅读(3241) 评论(1) 推荐(0) 编辑

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

posted @ 2020-03-10 16:47 dawn888 阅读(2285) 评论(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 阅读(533) 评论(0) 推荐(0) 编辑

【three.js第五课】光线的添加和感光材料
摘要:材料分类: MeshBasicMaterial:基础网孔材料,一个以简单着色(平面或线框)方式来绘制几何形状的材料。MeshLambertMaterial:兰伯特网孔材料,一种非发光材料(兰伯特)的表面MeshPhongMaterial:网孔材料,用于表面有光泽的材料,计算每个像素。 光线分类 注意 阅读全文

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

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

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

【three.js第三课】鼠标事件,移动、旋转物体
摘要:1.下载three.js的源码包后,文件夹结构如下: 2.在【three.js第一课】的代码基础上,引入OrbitControls.js文件,此文件主要用于 对鼠标的操作。 该文件位置:在文件结构中 找到【examples】文件夹,进入; 找到其中的【js】文件夹,进入; 找到其中的【control 阅读全文

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

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

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

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

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

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

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

three.js中让模型自动居中的代码如下:
摘要://load_Model为需要居中的3D模型 //原理是通过boundingBoxHelper 来计算模型的大小范围 var hex = 0xff0000; var MD_Length,MD_Width,MD_height;//记录长宽高 var BaxH = new THREE.BoundingB 阅读全文

posted @ 2020-03-09 19:12 dawn888 阅读(2535) 评论(0) 推荐(0) 编辑

three.js obj转js的详细步骤 convert_obj_three.py的用法
摘要:three.js是最近非常流行的一个前端webgl库。 js格式的模型文件是three.js中可以直接加载的文件。使用THREE.JSONLoader()直接加载,而不需要引用其它的loader插件。 obj格式转js格式使用的是threejs.org官方提供的一个convert_obj_three 阅读全文

posted @ 2020-03-09 19:07 dawn888 阅读(2221) 评论(0) 推荐(0) 编辑

three.js - 一个javascript 3D代码库
摘要:这个项目的目的是用最简单的开发模式创建一个轻量级的3 d代码库,这个js库提供了canvas,svg,css3d和webgl这四种渲染方式。 下载地址: 下载地址:https://github.com/mrdoob/three.js/archive/master.zip 目录结构: .github目 阅读全文

posted @ 2020-03-09 18:53 dawn888 阅读(895) 评论(0) 推荐(0) 编辑

Web三维编程入门总结之三:3D碰撞检测初探
摘要:自己动手写一个方法比分析他人的写的方法困难很多,由此而来的对程序的进一步理解也是分析别人的代码很难得到的。 一、先来几张效果图: 1、场景中有两个半径为1的球体,蓝色线段从球心出发指向球体的“正向” 2、物体被选中后改变纹理图片和透明度,可以使用“w、s、a、d、空格、ctrl”控制物体相对于物体的 阅读全文

posted @ 2020-03-09 18:07 dawn888 阅读(902) 评论(1) 推荐(0) 编辑

Web三维编程入门总结之二:面向对象的基础Web3D框架
摘要:本篇主要通过分析Tony Parisi的sim.js库(原版代码托管于:https://github.com/tparisi/WebGLBook/tree/master/sim),总结基础Web3D框架的编写方法。在上一篇的基础上,要求读者具有简短英文阅读或者查字典的能力。 限于水平和时间,本文难免 阅读全文

posted @ 2020-03-09 17:59 dawn888 阅读(753) 评论(0) 推荐(0) 编辑

Web三维编程入门总结之一:WebGL与Threejs入门知识
摘要:1 /*在这里对这段时间学习的3D编程知识做个总结,以备再次出发。计划分成“webgl与three.js基础介绍”、“面向对象的基础3D场景框架编写”、“模型导入与简单3D游戏编写”三个部分,其他零散知识以后有机会再总结。*/ 2 /*第一部分,webgl与three.js基础介绍,要求读者掌握Ja 阅读全文

posted @ 2020-03-09 15:58 dawn888 阅读(2604) 评论(0) 推荐(0) 编辑

Three.js三维模型几何体旋转、缩放和平移
摘要:创建场景中的三维模型往往需要设置显示大小、位置、角度,three.js提供了一系列网格模型对象的几何变换方法,从WebGL的角度看,旋转、缩放、平移对应的都是模型变换矩阵,关于矩阵变换内容可以观看本人博客发布的原生WebGL课程。 网格模型对象的旋转、缩放、平移等方法或属性可以查找three.js文 阅读全文

posted @ 2020-03-08 22:21 dawn888 阅读(4877) 评论(0) 推荐(2) 编辑

导航

点击右上角即可分享
微信分享提示